/*
 * One Pass / Save / Tonight, everywhere. decision.js builds the markup; this file is linked last.
 *
 *   value     action    state     kanji          icon       colour token          deck key / drag
 *   pass      Pass      Passed    否             cross      --decision-pass       ← / left
 *   maybe     Save      Saved     保             bookmark   --decision-save       ↑ / up
 *   watch     Tonight   Tonight   今夜 (今 small) moon       --decision-tonight    → / right
 *   watched   Finished  Finished  了             check      --decision-finished   –
 *
 * Order: always Pass · Save · Tonight, left to right. Finished is an outcome, not a decision: when it
 *   is offered it comes after them, behind a small gap.
 * Forms: the action ("Save") on a button that does something; the state ("Saved") on toggles that
 *   show the current shelf (aria-pressed) and on read-only labels and stamps.
 * Confirmation copy: Passed · Saved for later · On tonight's list ✦ · Finished. Moves: "Moved to Saved."
 * Sizes: bar (deck, landing sample, detail footer, notebook moves, Tidy, onboarding) – one segmented
 *   row, 64 px high (58 px under 760 px), a 24 px icon over an 11 px tracked caps word.
 *   row (sheets, cards, chat) – at least 44 × 44, an 18 px icon beside a 13 px word.
 *   chip (read-only state) – 24 px high, the seal and the word.
 * States: rest – the icon in the decision's colour (Tonight's word too, it is the one that matters
 *   tonight), and a lone row button is outlined in it; hover – word and icon in it; :focus-visible – a 2 px --red ring, 2 px out (inside a
 *   bar, and in paper on a red fill); pressed / current – filled in the colour; disabled – 50 %,
 *   cursor: wait while saving. Every word stays at 4.5:1 or more, on night and on paper.
 * Reactions (.is-reaction) – how it went, not where it goes: the same shell, sizes and states, kanji
 *   seals instead of icons, no decision colours, negative → positive:
 *   Not for me 否 · It was okay 可 · Loved it 好 | Still watching 続 (onboarding: 否 · 未 Not seen · 好).
 * Surfaces: the tokens below are for night; .on-paper (on the group or on one button) switches them.
 * Motion: a 120 ms press from decision.js (GSAP) and the existing hanko stamps. Under
 *   prefers-reduced-motion only colours change.
 */
:root {
    --decision-pass: #8b8982;
    --decision-save: var(--paper, #f2eedf);
    --decision-tonight: var(--red, #ef4b3f);
    --decision-finished: var(--paper, #f2eedf);
    /* Paper words on these fills stay above 4.5:1; the brighter --red is for icons and night text. */
    --decision-tonight-fill: #c0392b;
    --decision-on-fill: var(--ink, #121212);
    --decision-text: #aaa69b;
    --decision-line: #3d3b37;
    --decision-hover: rgba(242, 238, 223, .07);
    /* Hanko stamps on covers and cards: the deck's own (motion.css) use the same three inks. */
    --decision-stamp-pass: var(--ink, #121212);
    --decision-stamp-save: #7a6a48;
    --decision-stamp-tonight: var(--red, #ef4b3f);
    --decision-stamp-finished: var(--ink, #121212);
}
.on-paper {
    --decision-pass: #6a665e;
    --decision-save: var(--ink, #121212);
    --decision-tonight: #b5352a;
    --decision-finished: var(--ink, #121212);
    --decision-on-fill: var(--paper, #f2eedf);
    --decision-text: #4f4b44;
    --decision-line: #b4ad9b;
    --decision-hover: rgba(18, 18, 18, .05);
}

/* ---------- One button ----------
   button.decision, not .decision: a tie with a contextual rule such as ".companion-pick button"
   goes to this file, which is linked last. */

.decision { --tone: var(--decision-save); --fill: var(--decision-save); --fill-text: var(--decision-on-fill); }
button.decision {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--decision-line);
    border-radius: 0;
    color: var(--decision-text);
    background: transparent;
    font: 800 13px/1.15 Arial, sans-serif;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, background-color .15s, border-color .15s;
}
.decision-pass { --tone: var(--decision-pass); --fill: var(--decision-pass); }
.decision-maybe { --tone: var(--decision-save); --fill: var(--decision-save); }
.decision-watch { --tone: var(--decision-tonight); --fill: var(--decision-tonight-fill); --fill-text: var(--paper, #f2eedf); }
button.decision-watch { color: var(--decision-tonight); }
.decision-watched { --tone: var(--decision-finished); --fill: var(--decision-finished); }
.decision-reaction { --tone: var(--decision-save); --fill: var(--decision-save); }

.decision-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .15s; }
.decision-seal { flex: none; color: var(--tone); font: 400 19px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; pointer-events: none; }
.decision-label { min-width: 0; overflow-wrap: break-word; pointer-events: none; }

button.decision:hover:not(:disabled):not(.is-current) { color: var(--tone); background-color: var(--decision-hover); }
button.decision:focus-visible { z-index: 1; outline: 2px solid var(--red, #ef4b3f); outline-offset: 2px; }

/* Pressed (a toggle that shows the current shelf) or current (a state, e.g. "Saved" after saving). */
button.decision.is-current,
button.decision[aria-pressed="true"] { border-color: var(--fill); color: var(--fill-text); background: var(--fill); }
button.decision.is-current .decision-icon,
button.decision[aria-pressed="true"] .decision-icon { stroke: currentColor; }
button.decision.is-current .decision-seal,
button.decision[aria-pressed="true"] .decision-seal { color: currentColor; }

button.decision:disabled { opacity: .5; cursor: wait; }
button.decision[aria-pressed="true"]:disabled { opacity: .8; }
/* A state shown as a button (Match's "Saved", the reveal's "Tonight ✓") is not a pause. */
button.decision.is-current:not([aria-pressed]):disabled { opacity: 1; cursor: default; }

/* ---------- bar: one segmented row ---------- */

/* No width or margin here: each place sets its own (a single-class rule there would lose to this file). */
.decision-bar { display: flex; align-items: stretch; border: 1px solid var(--decision-line); }
.decision-bar > button.decision { flex: 1 1 0; flex-direction: column; gap: 6px; min-width: 0; min-height: 64px; padding: 8px 4px; border: 0; border-right: 1px solid var(--decision-line); font-size: 11px; letter-spacing: .14em; line-height: 1.15; }
.decision-bar > button.decision:last-child { border-right: 0; }
.decision-bar > button.decision.is-current,
.decision-bar > button.decision[aria-pressed="true"] { border-right-color: var(--decision-line); }
.decision-bar .decision-icon { width: 24px; height: 24px; }
.decision-bar .decision-seal { font-size: 22px; }
.decision-bar > button.decision:focus-visible { outline-offset: -4px; }
.decision-bar > button.decision-watch.is-current:focus-visible,
.decision-bar > button.decision-watch[aria-pressed="true"]:focus-visible { outline-color: var(--paper, #f2eedf); }
/* Before an outcome (Finished, Still watching): a narrow channel between two rules. */
.decision-bar > .decision-gap { flex: 0 0 5px; border-right: 1px solid var(--decision-line); }

/* ---------- row: separate buttons in a line ---------- */

.decision-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
/* On its own a button is outlined in its colour, so a lone Tonight or Save still reads as that decision. */
.decision-row > button.decision:not(.decision-reaction):not(.is-current):not([aria-pressed="true"]),
button.decision-row-item:not(.decision-reaction):not(.is-current):not([aria-pressed="true"]) { border-color: var(--tone); }
.decision-row > .decision-gap { flex: none; width: 1px; margin: 6px 4px; background: var(--decision-line); }

/* ---------- chip: a read-only state ---------- */

/* The colour comes from its decision-* class, as on the buttons. */
.decision-chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; color: var(--tone); font: 800 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.decision-chip b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 3px; color: var(--fill-text, var(--decision-on-fill)); background: var(--fill); font: 400 14px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.decision-chip.decision-watch b { color: var(--paper, #f2eedf); }

/* ---------- Quiet companions: "Not tonight", "Not now", "Started it" are not decisions ---------- */

button.decision-quiet { min-height: 44px; margin: 0; padding: 0 6px; border: 0; color: inherit; background: none; font: italic 15px/1.3 Georgia, serif; text-decoration: underline; text-decoration-color: rgba(128, 124, 114, .6); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
button.decision-quiet:hover { text-decoration-color: currentColor; }
button.decision-quiet:focus-visible { outline: 2px solid var(--red, #ef4b3f); outline-offset: 2px; }
button.decision-quiet:disabled { opacity: .5; cursor: wait; }

/* ---------- Read-only labels and stamps elsewhere speak the same colours ---------- */

/* Notebook: Tonight red, Saved and Finished in the plain ink of their surface, Passed muted. */
.nb-item[data-decision="watched"] .nb-status { color: #d8d3c6; }
.nb-item[data-decision="pass"] .nb-status { color: var(--decision-pass); }
.nb-shelf[data-layout="list"] .nb-item[data-decision="watched"] .nb-status { color: #2c2a26; }
.nb-shelf[data-layout="list"] .nb-item[data-decision="pass"] .nb-status { color: #6a665e; }
.nb-decision[data-decision="maybe"], .nb-decision[data-decision="watched"] { color: var(--ink, #121212); }
.nb-decision[data-decision="pass"] { color: #6a665e; }
.nb-decision[data-decision="watch"] { color: #b5352a; }
.ad-stamp-maybe { border-color: var(--decision-stamp-save); color: var(--decision-stamp-save); }
.ad-stamp-watched { border-color: var(--decision-stamp-finished); color: var(--decision-stamp-finished); }

@media (max-width: 760px) {
    .decision-bar > button.decision { min-height: 58px; }
}
@media (max-width: 400px) {
    /* Four answers or moves on a small phone: the words close up a little so FINISHED still fits. */
    .decision-bar.has-gap > button.decision { letter-spacing: .05em; }
    /* …and a word of nine letters or more (cs PŘESKOČENO, pl POMINIĘTE) a little more. */
    .decision-bar.has-gap > button.decision-long { padding-inline: 2px; font-size: 10px; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
    button.decision, .decision-icon { transition: none; }
}