/* =============================================================================
   COMPONENT: task-sheet — the Care Plan / Schedule item editor bottom sheet
   (v6 reference): repeat-day presets + chips, a "when in the day" chooser,
   and a photo-required field switch. Each chip/pill is a <label> wrapping a
   real checkbox/radio input, sized to cover the whole pill (so it's a full
   44px target) and rendered fully transparent — never opacity:0, which
   assistive tech and WebDriver both treat as "not displayed."
   ========================================================================== */
@layer components {
  .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--color-border-strong);
    background: var(--surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;

    &:hover { border-color: var(--color-text-muted); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  .pill-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: var(--weight-semibold);
  }

  .day-chip-group,
  .pill-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .day-chip,
  .pill-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-border-strong);
    background: var(--surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .day-chip {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
  }

  .pill-radio {
    min-block-size: var(--touch-target);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
  }

  /* The real input covers the whole pill (a full touch target) but stays
     visually transparent — opacity stays 1 so it remains a genuine,
     assistive-tech- and WebDriver-visible control. */
  .day-chip input,
  .pill-radio input {
    position: absolute;
    inset: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
  }

  .day-chip:has(input:checked),
  .pill-radio:has(input:checked) {
    border-color: var(--accent);
    font-weight: var(--weight-semibold);
  }

  .day-chip:has(input:checked) {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .pill-radio:has(input:checked) {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .pill-radio--critical:has(input:checked) {
    background: var(--status-danger-fg);
    border-color: var(--status-danger-fg);
    color: var(--surface);
  }

  .pill-radio--disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  .task-sheet__when--critical .pill-radio:not(:has(input[value="timed"])) {
    opacity: 0.45;
  }

  .day-chip:has(input:focus-visible),
  .pill-radio:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
  }

  .task-sheet__time-field { display: none; }

  .task-sheet__when:has(input[type="radio"][value="timed"]:checked) .task-sheet__time-field {
    display: block;
  }

  .switch-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
  }

  /* Covers the whole label (track + text) with a real, transparent input —
     a bigger, more forgiving tap target than the track alone. */
  .switch-field__input {
    position: absolute;
    inset: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
  }

  .switch-field__track {
    flex: none;
    display: inline-flex;
    align-items: center;
    inline-size: 2.75rem;
    block-size: 1.625rem;
    padding-inline: 0.1875rem;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transition: background var(--dur-fast) var(--ease);
  }

  .switch-field__knob {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: translate var(--dur-fast) var(--ease);
  }

  .switch-field:has(.switch-field__input:checked) .switch-field__track { background: var(--accent); }
  .switch-field:has(.switch-field__input:checked) .switch-field__knob { translate: 1.125rem 0; }
  .switch-field:has(.switch-field__input:focus-visible) .switch-field__track { box-shadow: var(--focus-ring); }

  .switch-field__label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text);
  }

  .switch-field__label small {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .task-sheet__remove { inline-size: 100%; justify-content: center; }

  .task-sheet__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }
}