/* ============================================================================
   COMPONENT: todo — the section-model to-do card (AR To-dos UX, prototype v4).
   Rows group inside a card under band headers (Pinned · Missed · Next 7 days ·
   Other pending · Done): complete checkbox · title + meta chips · a trailing
   44px kebab that opens the actions sheet. Pinned rows carry an accent tint +
   3px edge; missed rows read danger; done rows strike through.
   ========================================================================== */

@layer components {
  .todo-group { list-style: none; margin: 0; padding: 0; }
  .todo-group > li + li { border-block-start: var(--border-width) solid var(--color-border); }

  .todo { position: relative; }
  .todo__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-2xs) var(--space-sm) var(--space-md);
  }

  /* Pinned (per viewer): accent-tint surface + a 3px accent edge + pin glyph. */
  .todo--pinned { background: var(--accent-tint); }
  .todo--pinned::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--accent);
  }
  .todo__pin-flag { color: var(--accent); display: inline-flex; font-size: 0.8em; line-height: 1; }

  .todo--missed .todo__title { color: var(--status-danger-fg); }

  .todo--done .todo__title {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .todo__body { flex: 1; min-inline-size: 0; }
  .todo__title {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: var(--weight-semibold);
  }
  .todo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    margin-block-start: var(--space-3xs);

    & svg { vertical-align: text-bottom; }
  }
  .todo__chip { white-space: nowrap; }
  .todo__sep { opacity: 0.5; }

  /* Files control on the card — reads as a link, not a status badge. */
  .todo__files-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: inherit;
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
    min-block-size: var(--touch-target);

    &:hover { color: var(--accent-hover); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  }

  .todo__action { flex: none; display: flex; align-items: center; }
  /* The Dusk rounded-square check (prototype .check): accent fill + white
     glyph when done — same drawing as .plan-task__check in checkbox.css. */
  .todo__check {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    margin: 0;
    margin-block-start: var(--space-3xs);
    flex: none;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);

    &::after {
      content: "";
      inline-size: 0.375rem;
      block-size: 0.625rem;
      margin-block-end: 0.125rem;
      border: solid var(--accent-contrast);
      border-width: 0 2px 2px 0;
      rotate: 45deg;
      opacity: 0;
    }
    &:checked { background: var(--accent); border-color: var(--accent); }
    &:checked::after { opacity: 1; }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  /* Trailing kebab — the one affordance to all card actions, full 44px. */
  .todo__trail { flex: none; display: flex; align-items: flex-start; }
  .todo__kebab {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    display: grid;
    place-items: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;

    &:hover { background: var(--surface-sunken); color: var(--color-text); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  /* Band headers: dot + uppercase title + count; Missed reads danger, Pinned
     reads accent, Done reads success. */
  .todo-band { margin-block-end: var(--space-md); }
  .todo-band__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 0 var(--space-3xs) var(--space-2xs);
  }
  .todo-band__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
  }
  .todo-band__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-muted);
  }
  .todo-band__count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
  .todo-band--pinned .todo-band__title { color: var(--accent); }
  .todo-band--pinned .todo-band__dot { background: var(--accent); }
  .todo-band--missed .todo-band__title { color: var(--status-danger-fg); }
  .todo-band--missed .todo-band__dot { background: var(--danger); }
  .todo-band--done .todo-band__dot { background: var(--status-success-fg); }

  /* Today collapsed to the top rows (AR §5.5): overflow rows/bands and the
     Done band hide until "Show all"; the toggle buttons swap with the state. */
  .today-todos.is-collapsed :is(.todo--overflow, .todo-band--overflow, .todo-band--done) { display: none; }
  .today-todos:not(.is-collapsed) .todos-show-all { display: none; }
  .today-todos.is-collapsed .todos-show-less { display: none; }
  .todos-show-all,
  .todos-show-less {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--touch-target);
    padding: var(--space-xs);
    background: none;
    border: 0;
    color: var(--accent);
    font-weight: var(--weight-semibold);
    cursor: pointer;

    &:hover { text-decoration: underline; }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  }
  .todos-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-target);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  /* "+ Add a to-do" inline dashed button on Today (AR §5.6). */
  .todo-add-inline {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--touch-target);
    margin-block-start: var(--space-2xs);
    padding: var(--space-xs);
    background: none;
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    cursor: pointer;

    &:hover { background: var(--accent-tint); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  /* The actions sheet list: one row per action, hairline-separated. */
  .action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .action-list li + li { border-block-start: var(--border-width) solid var(--color-border); }
  .action-list form { display: contents; }
  .action-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-xs) var(--space-3xs);
    background: none;
    border: 0;
    color: var(--color-text);
    text-align: start;
    text-decoration: none;   /* the Edit row is a link — no underline (prototype) */
    cursor: pointer;

    &:hover { color: var(--accent); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

    & small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); }
  }
  .action-item__icon { inline-size: 1.5rem; display: inline-flex; justify-content: center; flex: none; font-size: 1.1rem; line-height: 1; }
  /* Unpin: the pin glyph with a strike through it (prototype .ic--struck). */
  .action-item__icon--struck { position: relative; }
  .action-item__icon--struck::after {
    content: "";
    position: absolute;
    inset-inline: -2px;
    inset-block-start: 50%;
    block-size: 2px;
    background: currentColor;
    rotate: -45deg;
  }
  .action-item.is-on { color: var(--accent); font-weight: var(--weight-semibold); }
  .action-item--danger { color: var(--status-danger-fg); }

  /* Add/Edit sheet: Due date · Time always share the row (prototype .row2). */
  .todo-form-row { --switcher-min: 0; --switcher-gap: var(--space-sm); }

  /* A long radio/checkbox label wraps beside its control, never under it
     (prototype .choice is a non-wrapping flex row). */
  .todo-sheet .choice { flex-wrap: nowrap; }

  /* Add/Edit sheet: the member picker nests under "Only specific members". */
  .todo-member-picker {
    margin-inline-start: var(--space-lg);
    padding: var(--space-xs) var(--space-sm);
    border-inline-start: 2px solid var(--accent-tint);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--surface-sunken);
  }
  .todo-member-picker[hidden] { display: none; }
  .todo-member-picker__creator { color: var(--color-text-muted); }
  .todo-picker-note { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-3xs) 0 0; }
  .todo-picker-note--error { color: var(--status-danger-fg); font-weight: var(--weight-semibold); }

  /* The alarm subcard inside the Add/Edit sheet (Care-Plan alert styling). */
  .todo-subcard {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--surface-sunken);
  }
  /* Subcard head: title left, toggle switch right (prototype .subcard__head). */
  .todo-subcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    min-block-size: var(--touch-target);
    cursor: pointer;
  }
  .todo-subcard__title { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-bold); font-size: var(--text-sm); }
  .todo-subcard__body { margin-block-start: var(--space-xs); }
  .todo-subcard__body[hidden] { display: none; }

  /* Checkbox-driven pill toggle for the alarm subcard (prototype .toggle). */
  .todo-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    inline-size: 2.75rem;
    block-size: 1.625rem;
    flex: none;
  }
  .todo-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .todo-toggle__track {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transition: background var(--dur-fast) var(--ease);
  }
  .todo-toggle__thumb {
    position: absolute;
    inset-block-start: 0.1875rem;
    inset-inline-start: 0.1875rem;
    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);
  }
  .todo-toggle:has(input:checked) .todo-toggle__track { background: var(--accent); }
  .todo-toggle:has(input:checked) .todo-toggle__thumb { translate: 1.125rem 0; }
  .todo-toggle:has(input:focus-visible) .todo-toggle__track { box-shadow: var(--focus-ring); }

  /* The attach trigger: a dashed drop-style label for the hidden file input
     (raw file inputs never render — same rule as the camera-only notebook). */
  .todo-attach-label { display: inline-block; font-weight: var(--weight-medium); }
  /* Always clipped — even when focused — so the browser's "No file chosen"
     chrome never appears; the dashed label is the only affordance. */
  .todo-attach-input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  .todo-attach-drop {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--touch-target);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;

    &:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
    & svg { flex: none; }
  }
  .todo-attach-input:focus-visible + .todo-attach-drop { box-shadow: var(--focus-ring); }

  /* Attached-file chips: type tile · name (download) · size · creator-only remove. */
  .todo-attach-list:not([hidden]) { margin-block-start: var(--space-xs); }
  .todo-attach-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }
  .todo-attach-item__type {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }
  .todo-attach-item__thumb {
    flex: none;
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    cursor: pointer;
    overflow: hidden;
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }
  .todo-attach-item__thumb-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  .todo-attach-preview {
    inline-size: 100%;
    max-block-size: min(70vh, 28rem);
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
  }
  .action-item__icon--thumb {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
  }
  .action-item__icon--thumb .todo-attach-item__thumb-img {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .todo-alarm-error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-block-start: var(--space-2xs);
  }
  .todo-alarm-error[hidden] { display: none; }
  .todo-attach-item__name {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  span.todo-attach-item__name { color: var(--color-text); text-decoration: none; }
  .todo-attach-item__size { flex: none; font-size: var(--text-xs); }
  .todo-attach-item__remove {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    display: grid;
    place-items: center;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;

    &:hover { color: var(--status-danger-fg); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  }

  /* Pending/Done: the standard full-width segmented control (same as the
     Care plan / Schedule switcher) — two equal halves across the screen. */
  .todos-tabs { margin-block-end: var(--space-md); }

  /* "+ Add a to-do" on the To-dos tab: a neutral block button in the flow
     (prototype .btn--block), not a filled action bar. */
  .todo-add-block { margin-block-start: var(--space-2xs); }

  /* To-do sheets (actions · add · edit): display-face title, bare ✕, and the
     Save-wide / Cancel row from the prototype. A tall Add/Edit form scrolls
     inside the sheet (prototype: max-height 90% + overflow auto) so the title
     and Save row are always reachable. */
  .todo-sheet {
    max-block-size: 90dvh;
    overflow-y: auto;
  }
  .todo-sheet .sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs);
  }
  .todo-sheet .sheet__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
  }
  .todo-sheet .sheet__close {
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    line-height: 1;

    &:hover { background: var(--surface-sunken); color: var(--color-text); }
  }
  .todo-sheet .sheet__actions { display: flex; gap: var(--space-xs); }
  .todo-sheet .sheet__actions .btn--primary { flex: 1; }

  /* Save in flight: cover the sheet (same language as alert-sheet) and lock Close. */
  .todo-sheet__body { position: relative; }
  .todo-sheet__saving {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: color-mix(in oklab, var(--surface-raised) 78%, transparent);
    border-radius: inherit;
  }
  .todo-sheet__saving[hidden] { display: none; }
  .todo-sheet__saving-spinner {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0.1875rem solid var(--color-border);
    border-block-start-color: var(--accent);
    border-radius: var(--radius-pill);
    animation: loading-spin calc(var(--dur-base) * 4) linear infinite;
  }
  .todo-sheet__saving-status {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }
  .todo-sheet.is-saving form,
  .todo-sheet.is-saving .sheet__head { pointer-events: none; }
  .todo-sheet.is-saving .sheet__close[disabled],
  .todo-sheet.is-saving .sheet__actions .btn[disabled] { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .todo-sheet__saving-spinner {
      animation: none;
      border-block-start-color: var(--accent);
      opacity: 0.85;
    }
  }
}