/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* Shared components, in the dependency order of the design handoff
     (docs/design_handoff_main_character/README.md, "Shared components").
     Every screen composes these; nothing in a screen's own CSS introduces a
     new color, font or radius. Values are the prototypes' inline styles. */

  /* ---- motion: the one idiom ---- */
  @keyframes lamp-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  .pulse { animation: lamp-pulse 1.6s ease-in-out infinite; }
  /* "verb ···" in-progress text: the dots pulse, the verb does not */
  .dots { color: var(--accent-dim); letter-spacing: .35em; animation: lamp-pulse 1.6s ease-in-out infinite; }

  /* ---- Button ---- */
  /* send: the primary, at most one per composer */
  button.send {
    border: 0; background: var(--accent); color: var(--bg);
    font: .95rem var(--font-ui); height: 2.2rem; padding: 0 1.2rem;
    border-radius: var(--radius-lg); white-space: nowrap; flex-shrink: 0;
  }
  /* a step toward the text colour: brighter in dark, deeper in light */
  button.send:hover:not(:disabled) { background: var(--accent-hover); }
  button.send:disabled { opacity: .45; }
  /* the pill form, for compact composers and the search bar */
  button.send.pill {
    font: .8rem var(--font-ui); height: 1.8rem; padding: 0 .9rem;
    border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: .35rem;
  }
  button.send.pill .ret { font-size: .9em; }
  /* quiet: the default secondary */
  button.quiet, a.quiet {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    font: .8rem var(--font-ui); padding: .3rem .7rem; border-radius: var(--radius-base);
    min-height: 2.2rem; display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap; text-decoration: none;
  }
  button.quiet:hover, a.quiet:hover { color: var(--text); background: var(--bg-raised); }
  button.quiet:disabled { opacity: .5; }
  button.quiet:disabled:hover { color: var(--text-dim); background: transparent; }
  button.quiet.sm { min-height: 2rem; }
  button.quiet.xs { min-height: 1.8rem; padding: .2rem .6rem; font-size: .78rem; }
  /* filled: the secondary primary (confirm, summarize, apply, save-dirty) */
  button.filled {
    background: var(--accent-dim); border: 1px solid var(--accent-dim); color: var(--bg);
    font: .8rem var(--font-ui); padding: .3rem .9rem; border-radius: var(--radius-base);
    min-height: 2.2rem; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  }
  /* lifts to the full accent: filled reads as a quieter send until pointed at */
  button.filled:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
  button.filled:disabled { opacity: .5; }
  /* text: borderless quiet (clear, expand all, back links) */
  button.text {
    border: 0; background: transparent; color: var(--text-dim);
    font: .78rem var(--font-ui); padding: .25rem .3rem; border-radius: var(--radius-sm);
    min-height: 1.8rem; display: inline-flex; align-items: center; gap: .4rem;
  }
  button.text:hover { color: var(--text); }
  /* danger-hover: a quiet whose text and border turn --error on hover. No
     always-red button exists. */
  button.danger:hover { color: var(--error); border-color: var(--error); background: transparent; }
  /* key glyph (triage, help steps) */
  .key { color: var(--accent); font-weight: 600; min-width: .7em; text-align: center; }
  .hint { opacity: .7; }
  /* undo / redo: quiet, half strength while the stack is empty */
  button.quiet.empty { opacity: .5; }

  /* ---- Eyebrow + SectionRule ---- */
  .eyebrow {
    font: .75rem var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent-dim);
  }
  .eyebrow.strong { font-weight: 600; font-size: .7rem; }
  .rule {
    display: flex; align-items: baseline; gap: .8rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--border);
  }
  .rule .meta {
    margin-left: auto; letter-spacing: 0; text-transform: none;
    font-size: .78rem; color: var(--text-dim);
  }

  /* ---- Chip ---- */
  .chip {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--border); background: transparent; color: var(--text-dim);
    font: .85rem var(--font-ui); padding: .35rem .8rem; min-height: 2.2rem;
    border-radius: var(--radius-pill); white-space: nowrap; text-align: left;
  }
  button.chip:hover { color: var(--text); background: var(--bg-raised); }
  .chip.sm { font-size: .78rem; line-height: 1; height: 1.8rem; min-height: 0; padding: 0 .7rem; }
  .chip .n { font-variant-numeric: tabular-nums; opacity: .7; }
  /* selected (filter rows, jump pills) */
  .chip.on { background: var(--bg-input); border-color: var(--accent-dim); color: var(--accent); }
  button.chip.on:hover { color: var(--accent); background: var(--bg-input); }
  /* dashed: custom / "yours" */
  .chip.dashed { border-style: dashed; border-color: var(--accent-dim); }
  /* a filter row of count chips */
  .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .chip-row .chip.sm:hover { border-color: var(--text-dim); }

  /* toggle: on = accent-dim fill, --bg text (entity filters, search mode) */
  .chip-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--border); background: transparent; color: var(--text-dim);
    font: .78rem var(--font-ui); padding: .2rem .65rem; min-height: 1.8rem;
    border-radius: var(--radius-pill); white-space: nowrap;
  }
  .chip-toggle:hover { color: var(--text); }
  .chip-toggle.on, .chip-toggle[aria-pressed="true"] {
    background: var(--accent-dim); color: var(--bg); border-color: var(--accent-dim);
  }

  /* ---- JumpPills: sticky at the top of a scrolling column ---- */
  .jump-pills {
    position: sticky; top: 0; z-index: 2; background: var(--bg);
    padding: .9rem 0 .7rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: .6rem;
  }
  .jump-pills .pills {
    display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
  }
  .jump-pills .pills::-webkit-scrollbar { display: none; }
  .jump-pills .chip { flex-shrink: 0; }
  .jump-pills .chip:hover { color: var(--accent); border-color: var(--accent-dim); background: transparent; }
  .jump-pills .chip.on:hover { background: var(--bg-input); }

  /* ---- Card ---- */
  .card {
    background: var(--bg-raised); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.1rem 1.3rem 1.2rem;
  }
  /* notice: empty / paused / filtered-empty / data-action result */
  .notice-card {
    border: 1px dashed var(--accent-dim); border-radius: 12px;
    padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .5rem;
  }
  .notice-card p { color: var(--text-dim); text-wrap: pretty; }
  .notice-card .actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
  /* the one-line confirmation after an undoable action */
  .notice-line { font: .8rem var(--font-ui); color: var(--accent-dim); text-wrap: pretty; }
  .notice-line button.link {
    border: 0; background: transparent; color: var(--text-dim); font: inherit; padding: 0;
    text-decoration: underline; text-underline-offset: .2em;
  }
  .notice-line button.link:hover { color: var(--text); }
  .toast { font: .85rem var(--font-ui); color: var(--accent); min-height: 1.2rem; }

  /* ---- ListItem: the 44px sidebar row ---- */
  .list-item {
    width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
    font: inherit; line-height: 1; padding: 0 .9rem; border-radius: var(--radius-base);
    display: flex; align-items: center; gap: .5rem; min-height: 44px;
  }
  .list-item:hover { background: var(--bg-raised); }
  .list-item .li-title {
    min-width: 0; font: 600 .95rem/1 var(--font-ui); color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .list-item .li-meta { font: .78rem/1 var(--font-ui); color: var(--text-dim); white-space: nowrap; }
  .list-item .li-meta.right { margin-left: auto; font-variant-numeric: tabular-nums; }
  .list-item.sel { background: var(--bg-input); }
  .list-item.sel .li-title { color: var(--accent); }
  .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent-dim); flex-shrink: 0; }
  .dot.open { background: var(--accent); }
  .dot.right { margin-left: auto; }
  .dot.dashed { background: transparent; border: 1px dashed var(--accent-dim); }
  /* a group header inside a list, with optional right meta */
  .list-head {
    display: flex; align-items: baseline; gap: .5rem; padding: .9rem .9rem .3rem;
  }
  .list-head .meta { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: .78rem; color: var(--text-dim); }

  /* ---- Layouts ---- */
  /* Pattern A: one reading column that scrolls */
  .pane {
    flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 46rem;
    margin: 0 auto; padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem) 3rem;
  }
  .pane.narrow { max-width: 44rem; }
  /* a pane that holds a sticky jump row: the row sits flush at the top */
  .pane.jumpy { padding-top: 0; }
  /* Pattern B: list + detail, drill-in under 720px */
  .split { flex: 1; min-height: 0; display: flex; width: 100%; max-width: 88rem; margin: 0 auto; }
  .split > aside {
    flex: 0 0 auto; width: clamp(15rem, 26vw, 19rem); display: flex; flex-direction: column;
    min-height: 0; border-right: 1px solid var(--border); overflow-y: auto;
  }
  .split > aside .side-tools {
    flex-shrink: 0; padding: 1rem clamp(1rem, 3vw, 1.5rem) .6rem;
    display: flex; flex-direction: column; gap: .6rem;
  }
  .split > aside .side-list { padding: 0 .6rem 1rem; }
  .split > .detail {
    flex: 1; min-width: 0; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; position: relative;
  }
  .detail-col { max-width: 46rem; width: 100%; padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem) 3rem; }
  .detail h2.title {
    font-size: 1.5rem; font-weight: normal; font-style: italic; color: var(--accent);
    min-width: 0; text-wrap: pretty;
  }
  .detail .title-row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
  .detail .title-meta { margin-top: .2rem; font: .8rem var(--font-ui); color: var(--text-dim); }
  .detail .none {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center;
  }
  .detail .none p { max-width: 22rem; color: var(--text-dim); text-wrap: pretty; }
  button.text.back-link { display: none; margin: 0 0 .6rem; padding-left: 0; font-size: .85rem; min-height: 2.2rem; }
  @media (max-width: 719.98px) {
    .split > aside { width: 100%; border-right: 0; }
    .split.drilled > aside { display: none; }
    .split:not(.drilled) > .detail { display: none; }
    button.text.back-link { display: inline-flex; }
  }

  /* ---- Inputs ---- */
  textarea, input[type=text], input[type=password], input[type=search], input[type=number] {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .7rem .9rem; font: inherit; line-height: 1.6;
    width: 100%; resize: none; outline: none;
  }
  textarea:focus, input:focus { border-color: var(--accent-dim); }
  ::placeholder { color: var(--text-dim); opacity: .7; }
  input[type=checkbox] { accent-color: var(--accent); width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
  /* the 2.4rem filter input */
  input.input-sm { min-height: 2.4rem; padding: .4rem .8rem; font-size: .95rem; }
  /* the 2.2rem inline field (edit rows, inline forms) */
  input.input-xs { min-height: 2.2rem; padding: .3rem .7rem; font-size: .95rem; border-radius: var(--radius-base); }
  /* the 2rem inline field (batch bar, group forms) */
  input.input-2xs { min-height: 2rem; padding: .2rem .6rem; font-size: .9rem; border-radius: var(--radius-base); }
  select.quiet-select {
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim);
    font: .8rem var(--font-ui); padding: .3rem .5rem; border-radius: var(--radius-base);
    cursor: pointer; min-height: 2.2rem; outline: none;
  }
  select.quiet-select.sm { min-height: 2rem; }
  select option { background: var(--bg-input); color: var(--text); }

  /* ---- Composer ---- */
  .composer {
    flex-shrink: 0; width: 100%; max-width: 46rem; margin: 0 auto;
    padding: .5rem clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
    display: flex; flex-direction: column; gap: .6rem;
  }
  /* compact: one --bg-input box, pill buttons bottom-right */
  .composer .box {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
    padding: .7rem .9rem .55rem; display: flex; flex-direction: column; gap: .4rem;
  }
  .composer .box:focus-within { border-color: var(--accent-dim); }
  .composer .box textarea {
    min-height: 3.2rem; background: transparent; border: 0; padding: 0; border-radius: 0;
  }
  .composer .box-row { display: flex; align-items: center; gap: .9rem; justify-content: flex-end; flex-wrap: wrap; }
  .composer .box-row .left { margin-right: auto; display: flex; align-items: center; gap: .5rem; }

  /* ---- Message: YOU / COMPANION transcript block ---- */
  .msg { margin-bottom: 1.6rem; white-space: pre-wrap; text-wrap: pretty; }
  .msg.you { color: var(--you); }
  .msg.you::before { content: "you"; }
  .msg.companion::before { content: "companion"; }
  /* the date rides the label row that is already there (write screen) */
  .msg.you[data-stamp]::before { content: "you · " attr(data-stamp); }
  .msg::before {
    display: block; font: .75rem var(--font-ui); letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-dim); margin-bottom: .2rem;
  }
  /* ThinkingDots */
  .msg.thinking::after {
    content: "···"; color: var(--accent-dim); letter-spacing: .35em;
    animation: lamp-pulse 1.6s ease-in-out infinite;
  }

  /* ---- SuggestionPills: empty-state prompt pills that fill an input ---- */
  .suggest {
    margin: auto 0; padding: 1rem 0 2rem; display: flex; flex-direction: column; gap: .8rem; max-width: 30rem;
  }
  .suggest p { color: var(--text-dim); text-wrap: pretty; }
  .suggest .pills { display: flex; flex-wrap: wrap; gap: .4rem; }

  /* ---- TagEditor: removable chips + an add affordance ---- */
  .tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .tag {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--bg-input); border: 1px solid transparent; border-radius: var(--radius-pill);
    padding: 0 .25rem 0 .65rem; font: .78rem/1 var(--font-ui); height: 1.7rem; color: var(--text);
  }
  .tag.on { border-color: var(--accent-dim); color: var(--accent); }
  .tag.dim { opacity: .45; font-style: italic; }
  .tag .x {
    border: 0; background: transparent; color: var(--text-dim); font: .95rem/1 var(--font-ui);
    width: 1.3rem; height: 1.3rem; border-radius: 50%; padding: 0; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .tag .x:hover { color: var(--text); background: var(--bg-raised); }
  /* an entity/group chip the reader can open */
  button.tag:hover { color: var(--accent); }
  select.tag-add {
    border: 1px solid transparent; background: transparent; color: var(--text-dim);
    font: .78rem var(--font-ui); padding: 0 .4rem; border-radius: var(--radius-base);
    cursor: pointer; height: 1.7rem; outline: none; max-width: 8rem;
  }
  select.tag-add:hover { border-color: var(--border); color: var(--text); }
  .tag-label { font: .72rem var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-right: .2rem; }

  /* ---- ProgressHairline ---- */
  .hairline { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
  .hairline i { display: block; height: 100%; width: 0; background: var(--accent-dim); transition: width .3s ease; }

  /* ---- SegmentedControl ---- */
  .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .segmented button {
    border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-dim);
    font: .85rem var(--font-ui); padding: 0 1rem; min-height: 2.4rem; min-width: 4.2rem;
  }
  .segmented button:first-child { border-left: 0; }
  .segmented button:hover { color: var(--text); }
  .segmented button[aria-pressed="true"] { background: var(--bg-input); color: var(--accent); }

  /* ---- Checklist (updating memory) ---- */
  .checklist { display: flex; flex-direction: column; gap: .15rem; font: .9rem var(--font-ui); color: var(--accent-dim); }
  .checklist .step { display: flex; gap: .6rem; align-items: baseline; opacity: .5; }
  .checklist .step.running, .checklist .step.done, .checklist .step.failed { opacity: 1; }
  .checklist .mark { width: 1rem; flex-shrink: 0; text-align: center; }
  .checklist .running .mark { color: var(--accent); animation: lamp-pulse 1.6s ease-in-out infinite; }
  .checklist .failed .mark { color: var(--error); }

  /* ---- Tooltip (replaces every title) ---- */
  #tip {
    position: fixed; z-index: 60; pointer-events: none;
    background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-base);
    padding: .4rem .7rem; font: .8rem/1.4 var(--font-ui); color: var(--text);
    width: max-content; max-width: 16rem; box-shadow: 0 6px 18px rgba(0,0,0,.25);
    text-wrap: pretty; text-align: left; text-transform: none; letter-spacing: 0; font-style: normal;
  }
  #tip[hidden] { display: none; }

  /* ---- Popover / menu ---- */
  .popover {
    position: absolute; z-index: 5; background: var(--bg-raised); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .5rem; display: flex; flex-direction: column; gap: .35rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); width: max-content; max-width: calc(100vw - 2rem);
  }
  .popover button.quiet {
    text-align: left; padding: .5rem .8rem; min-height: 44px; font-size: .85rem; justify-content: flex-start;
  }
  .popover button.quiet:hover { background: var(--bg-input); }
  .popover[hidden] { display: none; }

  /* ---- small-caps inline label (TRIGGER, CAST, YOUR READ) ---- */
  .sc-label {
    font: .72rem var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
    font-style: normal; margin-right: .5rem;
  }

  /* ---- header row of a Pattern A screen: status + one quiet action ---- */
  .pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .pane-head .status { font: .8rem var(--font-ui); color: var(--text-dim); }
  .pane-head .right { margin-left: auto; display: inline-flex; gap: .4rem; }
  .footnote { margin: 1.6rem 0 0; font: .8rem/1.5 var(--font-ui); color: var(--text-dim); text-wrap: pretty; }

  /* ---- an expanded entry's full text (search, categories) ---- */
  .entry-full {
    white-space: pre-wrap; background: var(--bg-input); border-radius: var(--radius-lg);
    padding: .8rem 1rem; margin-top: .7rem; font-size: .92rem; text-wrap: pretty;
  }
  .entry-full .summary {
    font-style: italic; color: var(--text-dim); white-space: normal;
    border-bottom: 1px solid var(--border); padding-bottom: .6rem; margin-bottom: .6rem;
  }
  .entry-full a { display: inline-block; margin-top: .6rem; font: .8rem var(--font-ui); }