/* components.css - the shared components every screen composes: panel,
   button, icon button, row, section head, pill, tab, menu, dialog,
   banner and skeleton. A component declares its local variables; a
   variant changes only those. */

@layer components {
  /* ---- panel: the white card a region sits on ---- */
  .panel {
    --panel-pad-y: var(--space-8);
    --panel-pad-x: var(--space-6);
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--panel-pad-y) var(--panel-pad-x);
  }

  /* ---- button: words on a filled or quiet ground ---- */
  .btn {
    --btn-bg: var(--panel);
    --btn-ink: var(--ink-soft);
    --btn-line: var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border: var(--hairline) solid var(--btn-line);
    border-radius: var(--radius-btn);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-size: var(--text-menu);
    text-decoration: none;
  }
  .btn:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--btn-ink)); }
  .btn-primary {
    --btn-bg: var(--accent);
    --btn-ink: var(--on-accent);
    --btn-line: var(--accent);
  }
  .btn-primary:hover { background: var(--accent-hover); }
  /* a quiet button: words in the accent on the panel, outlined (8.2's "+ Make a role") */
  .btn-quiet {
    --btn-ink: var(--accent);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-md);
  }
  /* a quiet button that ends something, its words in the danger colour and
     no outline (8.3's "Deactivate") */
  .btn-danger-quiet {
    --btn-ink: var(--danger);
    --btn-line: transparent;
  }
  /* a button that may not be pressed yet keeps its place, quietly (8.19) */
  .btn:disabled, .btn:disabled:hover {
    --btn-bg: var(--panel);
    --btn-ink: var(--ink-faint);
    --btn-line: var(--line);
    background: var(--btn-bg);
  }

  /* ---- field: a label over its input ---- */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .field-label {
    color: var(--ink-soft);
    font-size: var(--text-sm);
  }
  .field-input {
    padding: var(--input-pad-y) var(--space-5);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-md);
  }
  .field-input::placeholder { color: var(--ink-faint); }
  .field-input:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
  textarea.field-input { resize: vertical; line-height: var(--leading); }

  /* ---- tick: a checkbox and its words ---- */
  .tick {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--ink);
    font-size: var(--text-md);
    line-height: var(--leading);
  }
  input[type="checkbox"] {
    width: var(--tick-size);
    height: var(--tick-size);
    margin: var(--space-1) 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
  }

  /* ---- icon button: one icon, its label for the screen reader ---- */
  .icon-btn {
    --icon-btn-ink: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hit-target);
    min-height: var(--hit-target);
    padding: var(--space-3);
    border-radius: var(--radius-btn);
    color: var(--icon-btn-ink);
    flex: 0 0 auto;
  }
  .icon-btn:hover { background: var(--mist); color: var(--ink); }
  .icon, .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    flex: 0 0 auto;
  }

  /* ---- row: a full-width line in a list ---- */
  .row {
    --row-ink: var(--ink-soft);
    --row-bg: transparent;
    --row-font: var(--text-base);
    --row-pad-left: var(--row-pad-x);
    display: flex;
    align-items: center;
    gap: var(--row-pad-x);
    width: 100%;
    padding: var(--row-pad-y) var(--row-pad-x) var(--row-pad-y) var(--row-pad-left);
    border-radius: var(--radius-sm);
    background: var(--row-bg);
    color: var(--row-ink);
    font-size: var(--row-font);
    text-align: left;
  }
  button.row:hover { --row-bg: var(--mist); --row-ink: var(--ink); }
  .row-nested {
    --row-font: var(--text-row);
    --row-pad-left: var(--row-indent);
  }
  .row-current, .row[aria-current="page"] {
    --row-bg: var(--accent-soft);
    --row-ink: var(--accent);
  }
  .row-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- section head: a list's name in small capitals ---- */
  .section-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--ink-faint);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* ---- pill: a short label on a rounded ground ---- */
  .pill {
    --pill-bg: var(--accent-soft);
    --pill-ink: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--pill-bg);
    color: var(--pill-ink);
    font-size: var(--text-md);
  }
  .pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- tab: one of a row of choices; the current one wears the pill ---- */
  .tab[aria-selected="true"] {
    --pill-bg: var(--accent-soft);
    --pill-ink: var(--accent);
  }

  /* ---- menu: options in their own rounded card ---- */
  .menu {
    --menu-pad: var(--space-2);
    --menu-radius: var(--radius-btn);
    position: fixed;
    inset: auto;
    margin: 0;
    top: var(--menu-top, 0);
    left: var(--menu-left, 0);
    min-width: var(--menu-min-width);
    padding: var(--menu-pad);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--menu-radius);
    box-shadow: var(--shadow);
    color: var(--ink-soft);
  }
  .menu:not(:popover-open) { display: none; }
  .menu-item {
    --menu-item-ink: var(--ink-soft);
    --menu-item-bg: transparent;
    --menu-item-pad-y: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--menu-item-pad-y) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--menu-item-bg);
    color: var(--menu-item-ink);
    font-size: var(--text-menu);
    text-align: left;
    white-space: nowrap;
  }
  .menu-item:hover, .menu-item:focus-visible {
    --menu-item-bg: var(--mist);
    --menu-item-ink: var(--ink);
  }
  .menu-item[data-tone="danger"] { --menu-item-ink: var(--warn); }
  /* a confirmation beside its option (F21c): the question, then Yes */
  .menu-note {
    padding: var(--space-3) var(--space-5);
    color: var(--ink-faint);
    font-size: var(--text-note);
  }
  /* a picker's menu (8.37): as wide as its picker, the chosen option
     ticked, groups named in small capitals */
  .menu[data-kind="picker"] { min-width: var(--role-start-width); }
  .menu-choice-words { display: flex; flex-direction: column; gap: var(--space-1); white-space: normal; }
  .menu-choice-note { color: var(--ink-faint); font-size: var(--text-sm); }
  .menu-choice .icon { margin-left: auto; color: var(--accent); }
  .menu-choice .icon, .menu-choice .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .menu-choice[aria-checked="false"] .icon { visibility: hidden; }
  .menu-choice[aria-checked="true"] { --menu-item-bg: var(--accent-soft); }
  /* a picker's footnote under a line (8.36): who its options are */
  .menu-footnote {
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-top: var(--hairline) solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: var(--leading);
    white-space: normal;
  }
  .menu-heading {
    padding: var(--space-4) var(--space-5) var(--space-2);
    color: var(--ink-faint);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  /* the button that opens a picker: its value and a chevron */
  .picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    text-align: left;
  }
  .picker .icon, .picker .icon svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-faint); }
  .menu-item[data-tone="danger"]:hover,
  .menu-item[data-tone="danger"]:focus-visible { --menu-item-ink: var(--warn); }
  /* an option opening a panel beside itself carries a chevron (6.72g); the
     panel ends on its own button at the right (6.72h) */
  .menu-item[aria-haspopup] > .icon { margin-left: auto; color: var(--ink-faint); }
  .menu-item[aria-haspopup] > .icon, .menu-item[aria-haspopup] > .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .menu-panel { min-width: var(--confirm-width); }
  .menu-panel .menu-choice { gap: var(--space-4); }
  .menu-panel-foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-2) var(--space-2);
  }
  .menu-panel-foot .btn {
    height: var(--bar-button-height);
    padding: 0 var(--space-5);
    font-size: var(--text-note);
  }

  /* ---- dialog: the native modal window ---- */
  .dialog {
    width: min(var(--dialog-width), calc(100vw - var(--space-11)));
    max-height: calc(100vh - var(--space-12) - var(--space-12));
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dialog);
    color: var(--ink);
    overflow: hidden;
  }
  .dialog[open] { display: flex; flex-direction: column; }
  .dialog::backdrop { background: var(--scrim); }
  .dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-8);
    border-bottom: var(--hairline) solid var(--line);
  }
  .dialog-title {
    font-size: var(--text-base);
    font-weight: var(--weight-strong);
  }
  .dialog-body {
    padding: var(--space-8);
    overflow-y: auto;
    color: var(--ink-soft);
  }
  .dialog-body p { margin-bottom: var(--space-6); }
  .note-faint {
    color: var(--ink-faint);
    font-size: var(--text-note);
  }

  /* ---- the signing window (8.31, 5.4): what the act shows, the one
     Justification, and Sign and <act> at its foot, right; its place and
     the picker are in controls.css ---- */
  .sign-form { display: contents; }
  .sign-window .dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .sign-window .dialog-body p { margin-bottom: 0; }
  .sign-sentence { color: var(--ink); font-size: var(--text-md); margin-bottom: var(--space-4); }
  .sign-sentence:empty { display: none; }
  .sign-justification { min-height: var(--justification-min); }
  .sign-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--space-9) var(--space-8);
  }
  .sign-window[data-state="signing"] .sign-foot .btn,
  .sign-window[data-state="provider"] .sign-foot .btn { cursor: progress; }
  .signed-page { padding: var(--space-10); color: var(--ink-soft); }
  /* what a signed act shows besides its sentence (8.28's changes, 8.29's
     testing); none for most acts */
  .sign-extra { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
  .sign-extra:empty { display: none; }

  /* ---- switch: a track with its knob, then its words (8.12's Refused
     only) ---- */
  .switch {
    --switch-bg: var(--mist);
    --switch-knob-x: 0px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ink);
    font-size: var(--text-md);
  }
  .switch-track {
    position: relative;
    display: block;
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: var(--radius-pill);
    background: var(--switch-bg);
    transition: background var(--motion-fast);
  }
  .switch-track::after {
    content: "";
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: var(--switch-knob);
    height: var(--switch-knob);
    border-radius: var(--radius-round);
    background: var(--panel);
    box-shadow: var(--shadow);
    transform: translateX(var(--switch-knob-x));
    transition: transform var(--motion-fast);
  }
  .switch[aria-checked="true"] {
    --switch-bg: var(--accent);
    --switch-knob-x: calc(var(--switch-width) - var(--switch-knob) - var(--space-2));
  }


  /* ---- view switch: two views of the same thing, a white knob sliding
     to the open half (decision 131: Worklist | Dashboard; the Data tab's
     Numbers | Visual); JS sets data-state "first" or "second" ---- */
  .view-switch {
    --knob-x: 0%;
    position: relative;
    display: inline-grid;
    grid-template-columns: var(--view-switch-half) var(--view-switch-half);
    padding: var(--view-switch-pad);
    border-radius: var(--radius-pill);
    background: var(--view-switch-track);
  }
  .view-switch[data-state="second"] { --knob-x: 100%; }
  .view-switch::before {
    content: "";
    position: absolute;
    top: var(--view-switch-pad);
    bottom: var(--view-switch-pad);
    left: var(--view-switch-pad);
    width: var(--view-switch-half);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--panel);
    transform: translateX(var(--knob-x));
    transition: transform var(--motion-slide);
  }
  .view-switch-half {
    position: relative;
    padding: var(--space-3) 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    cursor: pointer;
  }
  .view-switch-half[aria-selected="true"] { color: var(--accent); font-weight: var(--weight-medium); cursor: default; }
  .view-switch-half[aria-disabled="true"] { cursor: not-allowed; }
  .view-switch-half:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-radius: var(--radius-pill); }

  /* ---- chat box: the person's words and Send, at the foot (2.1, 2.23) ---- */
  .chat-box {
    display: flex;
    flex-direction: column;
    padding: var(--space-7) var(--space-7) var(--space-5) var(--space-7);
    background: var(--panel);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .chat-box:focus-within { border-color: var(--accent-line); }
  .chat-box-input {
    min-height: var(--chat-box-min);
    padding: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-base);
    line-height: var(--leading);
    resize: none;
  }
  .chat-box-input:focus-visible { outline: none; }
  .chat-box-input::placeholder { color: var(--ink-faint); }
  .chat-box-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
  }
  .chat-box-foot [data-chat-box-action="attach"] { margin-right: auto; }

  /* ---- file chip: a chosen file waiting above the words until Send (2.15) ---- */
  .chat-box-files {
    display: flex;
    gap: var(--space-4);
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: var(--space-5);
  }
  .chat-box-files:empty { display: none; }
  .file-chip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 0 auto;
    max-width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--panel);
  }
  .file-chip-icon { color: var(--accent); }
  .file-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .file-chip-name {
    max-width: var(--file-name-max);
    overflow: hidden;
    font-size: var(--text-note);
    line-height: var(--leading);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .file-chip-kind {
    color: var(--ink-faint);
    font-size: var(--text-tag);
    line-height: var(--leading);
  }
  .chat-box-notice {
    color: var(--warn);
    font-size: var(--text-note);
  }
  .chat-box-notice:empty { display: none; }
  .send-btn {
    --send-bg: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--send-size);
    height: var(--send-size);
    border-radius: var(--radius-pill);
    background: var(--send-bg);
    color: var(--on-accent);
  }
  .send-btn:hover { --send-bg: var(--accent-hover); }
  .chat-box[data-state="sending"] .send-btn { cursor: progress; }
  /* while an answer is worked on, Send becomes a filled square Stop (2.23) */
  .stop-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--send-size);
    height: var(--send-size);
    border-radius: var(--radius-pill);
    background: var(--ink);
  }
  .stop-square {
    display: block;
    width: var(--icon-sm);
    height: var(--icon-sm);
    border-radius: var(--radius-mark);
    background: var(--on-accent);
  }
  .chat-box[data-run="working"] .stop-btn { display: inline-flex; }
  .chat-box[data-run="working"] .send-btn { display: none; }

  /* ---- who answers: the agent's initial and name, in the chat box (2.11) ---- */
  .agent-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--radius-round);
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: var(--text-tag);
    font-weight: var(--weight-strong);
  }
  .agent-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    font-size: var(--text-sm);
  }
  .agent-btn:hover { background: var(--mist); color: var(--ink); }
  /* the word and its caret, no letter badge (ruling 183) */
  .agent-caret { display: block; width: var(--icon-sm); height: var(--icon-sm); }

  /* ---- banner: a sentence from the record the person must read ---- */
  .banner {
    padding: var(--space-5) var(--space-7);
    border: var(--hairline) solid var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn);
    overflow-wrap: anywhere;
  }

  /* ---- skeleton: the shape of what is still loading ---- */
  .skeleton {
    display: block;
    height: var(--skeleton-line);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--motion-shimmer) ease-in-out infinite;
  }
  .skeleton-display { height: var(--skeleton-display); width: 40%; }
  .skeleton-row { width: 70%; margin: var(--row-pad-y) var(--row-pad-x); }
  @keyframes skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }
}