/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* Triage: one focal card in a 44rem column, keyboard-first. The buttons
     mirror the keys, not the other way round. */
  #triage { display: flex; flex-direction: column; gap: 1rem; }
  #triage-progress { display: flex; flex-direction: column; gap: .5rem; }
  #triage-progress .line {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
    font: .85rem var(--font-ui); color: var(--text-dim);
  }
  #triage-progress .count { font-variant-numeric: tabular-nums; }
  #triage-progress .note { margin-left: auto; font-size: .78rem; }

  /* the card: the one upright, non-italic h2 in the app */
  #triage-card { padding: 1.3rem clamp(1.1rem, 3vw, 1.5rem) 1.4rem; }
  #triage-card .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
  #triage-name { font-size: 1.7rem; font-weight: 600; font-style: normal; color: var(--text); text-wrap: pretty; }
  #triage-meta { font: .85rem var(--font-ui); color: var(--accent-dim); }
  #triage-aliases { margin-top: .2rem; font: .8rem var(--font-ui); color: var(--text-dim); }
  #triage-aliases:empty { display: none; }
  #triage-obs { margin-top: 1.1rem; font-size: .92rem; max-height: 22rem; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; }
  #triage-obs .eyebrow { margin-bottom: .15rem; }
  #triage-obs .line { display: flex; gap: .5rem; text-wrap: pretty; }
  #triage-obs .line .dash { color: var(--text-dim); flex-shrink: 0; }
  #triage-obs .more { color: var(--text-dim); font-style: italic; }

  /* the input row and the retype row, inside the card under a hairline */
  #triage-input-row, #triage-kind-row {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font: .85rem var(--font-ui); color: var(--text-dim);
  }
  #triage-mode-label, #triage-kind-row .lbl { color: var(--accent); }
  #triage-input { flex: 1 1 12rem; min-width: 0; }
  #triage-input-row .btns, #triage-kind-row .btns { display: flex; gap: .4rem; flex-wrap: wrap; }
  #triage-suggest { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
  #triage-suggest:empty { display: none; }
  #triage-suggest .chip { height: 1.7rem; font-size: .78rem; }
  #triage-suggest .chip:hover { color: var(--accent); border-color: var(--accent-dim); background: transparent; }

  /* the action row: each quiet carries its key as an accent glyph */
  #triage-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
  #triage-btns .quiet { padding: .3rem .8rem .3rem .6rem; min-height: 2.4rem; font-size: .85rem; gap: .5rem; }
  #triage-btns .quiet:hover { border-color: var(--text-dim); background: transparent; }
  /* keep is the default, and the only one visually primary */
  #triage-btns .quiet.primary { background: var(--bg-input); border-color: var(--accent-dim); color: var(--text); }
  #triage-foot { margin: 0; }
  #triage-toast:empty { display: none; }
  #triage-done .actions .quiet { min-height: 2.2rem; }
  #triage:focus { outline: none; }