/* ============================================================================
   ui/decide.css — added 2026-09-18 for the phone usability walk; rebuilt 2026-09-19 for the
   one-press-with-undo decision control (ui/attention.js's decideControl, shared by the in-row
   decide form and ui/panels.js's answerBox). ui/board.css's plain ".att-row .decide" only
   expected one input and a button (answerForm/decideForm); this file carries the extra layout
   decideControl needs, wherever it's used. index.html loads it with one line:
     <link rel="stylesheet" href="ui/decide.css">
   Uses only the names ui/theme.css defines. The option list itself reuses ui/board.css's
   .dopts/.dopt/.rec/.ch/.flagbox (the panel's answerBox already drew options that way) and
   .linkish/.primary — this file only lays decideControl's own parts out, and re-styles a .dopt
   button inside the compact in-row form (see the comment below).
   ============================================================================ */

.att-row .decide.decide-inline { display: grid; gap: var(--s3); }
.decide-control { display: grid; gap: var(--s3); }
.decide-why {
  width: 100%; padding: .3rem .5rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--surface); color: inherit;
}

/* ui/board.css's ".att-row .decide button" is an older, broad rule written for the one-button
   in-row forms (answerForm/decideForm's "Keep going", "Change the plan"). This form carries both
   the "decide" and "decide-inline" classes, so that rule also catches every .linkish button drawn
   inside it (Undo, "Read the full brief") and every .dopt option button, painting them all as the
   same heavy ink block (found 2026-09-19, verifying finding 8c on the form's earlier shape). Not
   wrong for the panel's answerBox — its buttons sit outside .att-row entirely — so both fixes stay
   scoped to this compact form. */
.att-row .decide-inline .dopt {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
}
.att-row .decide-inline .dopt:hover { border-color: var(--ink); }
/* The recommended option keeps its filled look even inside this compact form — the plain rule
   just above would otherwise flatten it back to an outline, same as every other option. */
.att-row .decide-inline .dopt.recommended {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.att-row .decide-inline .dopt.recommended:hover { filter: brightness(1.2); border-color: var(--ink); }
.att-row .decide-inline .linkish {
  background: none; border: 0; padding: 0; min-width: 0; color: var(--ink); font-weight: 400;
  font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.att-row .decide-inline .linkish:hover { text-decoration-color: var(--ink); background: none; }
.decide-full { margin-top: var(--s2); }

/* The pending row a press replaces the form with: "Decided: <label>.", a thin countdown, Undo —
   one line, wrapping on a narrow phone rather than the countdown or Undo dropping underneath. */
.decide-pending { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.decide-countdown { font-size: var(--text-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }

/* "Other…" opened: a one-line input plus its own Decide button, same row on anything wider than a
   phone. */
.decide-other { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.decide-other input {
  flex: 1 1 14rem; min-width: 0; padding: .3rem .5rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--surface); color: inherit;
}

@media (max-width: 480px) {
  .att-act button, .decide-pending .linkish, .decide-other .primary { min-height: 40px; }
}