/* The pieces the screens are made of: cards, rows, buttons, the sign-in form, the journal's lines. */
.stack { display: grid; gap: var(--gap); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); min-width: 0; }
.center { min-height: 100vh; display: grid; place-items: center; padding: var(--gap); }
.login { width: min(420px, 100%); display: grid; gap: 6px; }
.login label { font-weight: 600; margin-block-start: 8px; }
.login input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); min-height: 44px; width: 100%;
}
.form-error { color: var(--danger); margin-block: 8px 0; }

.button {
  font: inherit; min-height: 44px; padding-inline: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
}
.button.small { min-height: 36px; padding-inline: 12px; font-size: 0.9rem; }
.button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); margin-block-start: 12px; font-weight: 700; }
.button:disabled { opacity: 0.6; cursor: wait; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }

dl { margin: 0; }
.row { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.row:last-child { border-block-end: 0; }
.row dt { color: var(--muted); }
.row dd { margin: 0; font-weight: 600; }

.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.choice { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.choice.is-chosen { border-color: var(--accent); background: var(--bg); outline: 2px solid var(--accent); outline-offset: -2px; }

.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.line { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.line-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.line time { color: var(--muted); font-size: 0.85rem; }

/* the requests: the list's cards, the filter chips, one request's layers (the customer's words, what we understood, the prices) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; min-height: 36px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.request-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.request-link { display: grid; gap: 4px; padding: var(--gap); color: inherit; text-decoration: none; overflow-wrap: anywhere; min-height: 44px; }
.back { display: inline-block; min-height: 44px; line-height: 44px; }
.badge.state-open { border-color: var(--accent); }
.badge.state-closed { opacity: 0.7; }
.badge.source-customer { border-color: var(--accent); }
.badge.source-legacy_unsourced { color: var(--danger); border-style: dashed; }
.item h4, .item h5 { margin: 0; }
.words .row { align-items: baseline; }
.facts, .prices, .revisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fact { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding-block: 4px; border-block-end: 1px solid var(--line); }
.fact-slot { color: var(--muted); min-width: 6em; }
.fact-value { font-weight: 600; overflow-wrap: anywhere; }
.price { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.price.is-offered { border-color: var(--accent); }
.price[data-evidence="legacy_unsourced"] { border-style: dashed; }
.line.is-superseded { opacity: 0.6; }
.more-prices summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); }
.more-prices[open] summary { margin-block-end: 6px; }