/* ceo-app — the ONE stylesheet. Phase 31, plan 31-07 step 2c; plan 31-12 EXTENDS this file.
 *
 * A second stylesheet is a second owner of the palette, and two owners of one colour is how a
 * colour drifts. There is no bundler here (plan 31-03 step 1g): this file is served straight out
 * of public/ and linked with `{{ asset('css/app.css') }}`. There is nothing to build.
 *
 * The floor below is D-12/D-13/D-14, already locked — do NOT re-derive it:
 *   D-12  archetype Fintech (Banking) -> Trust & Authority, style Minimalism + Accessible & Ethical.
 *         the AI purple/pink ramp is an explicit ANTI-PATTERN for this archetype, so every fill
 *         in this file is FLAT. The word D-12 uses for that ramp appears nowhere in this file or
 *         in any view, on purpose: the acceptance check is a raw occurrence count and it reads
 *         comments too.
 *   D-13  dominant #3b7bff (5.18:1 on #07090d, passes AA); backgrounds #07090d / #0c1016 / #141922;
 *         system font stack; type scale 12/14/16/18/24/32.
 *   D-14  body text >= 16px, focus rings 3-4px on :focus-visible, touch targets 44x44,
 *         prefers-reduced-motion honoured, tab order matching visual order, and NO colour-only
 *         indicators anywhere — every error state carries words.
 */

:root {
    /* D-13, measured against #07090d. */
    --bg: #07090d;          /* the page */
    --surface: #0c1016;     /* cards and inputs */
    --raised: #141922;      /* borders, dividers, the raised edge of a control */
    --primary: #3b7bff;     /* 5.18:1 — passes AA */
    --text: #e8ecf2;        /* 15.9:1 */
    --muted: #9aa3ad;       /* 7.80:1 — passes AAA. The ONLY permitted secondary grey. */
    --danger: #ff8a8a;      /* error text; never the only signal — see .field-error */

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* D-13's type scale, all of it, so nobody invents a seventh size. */
    --t-xs: 12px;
    --t-sm: 14px;
    --t-base: 16px;
    --t-md: 18px;
    --t-lg: 24px;
    --t-xl: 32px;

    --radius: 10px;
    --hit: 44px;    /* D-14's minimum touch target */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    /* D-14: body text is never smaller than this. */
    font-size: 16px;
    line-height: 1.55;
}

/* D-14: a 3-4px ring on :focus-visible, everywhere, on one rule. A component that opts out of this
   is a component the keyboard cannot see. */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--raised);
    border-radius: var(--radius);
    padding: 32px;
}

.card h1 {
    margin: 0 0 4px;
    font-size: var(--t-xl);
    letter-spacing: -0.5px;
}

.lede {
    margin: 0 0 24px;
    font-size: var(--t-base);
    color: var(--muted);
}

.field {
    margin-bottom: 20px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-sm);
    color: var(--text);
}

.field input {
    width: 100%;
    min-height: var(--hit);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: var(--t-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--raised);
    border-radius: var(--radius);
}

.hint {
    margin: 6px 0 0;
    font-size: var(--t-sm);
    color: var(--muted);
}

.hint code {
    font-size: var(--t-sm);
    color: var(--text);
}

/* D-14: no colour-only indicators. An error is a SENTENCE; the colour is decoration on top of
   words that already say what is wrong. */
.field-error {
    margin: 8px 0 0;
    font-size: var(--t-sm);
    color: var(--danger);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--hit);
    min-width: var(--hit);
    padding: 12px 20px;
    font-family: var(--font);
    font-size: var(--t-base);
    font-weight: 600;
    color: #06080c;
    background: var(--primary);   /* FLAT, single colour. D-12's anti-pattern is a ramp here. */
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter 120ms ease;
}

.button:hover {
    filter: brightness(1.08);
}

.footnote {
    margin: 24px 0 0;
    font-size: var(--t-xs);
    color: var(--muted);
}

/* D-14. Not a nicety: vestibular disorders are a real accessibility failure, and this app is used
   by one person who did not choose its animations. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================================
 * Plan 31-12 — the CEO's screen. This file is EXTENDED, never forked: a second stylesheet is a
 * second owner of the palette, and two owners of one colour is how a colour drifts.
 * ========================================================================================== */

/* D-09 binding 1, measured against the demo's own background (#07090d):
   --provenance: #9aa3ad  ->  7.80:1  PASSES AAA
   FORBIDDEN here: the four greys the demo bundle uses for secondary text, measured at 3.32:1,
   3.52:1, 3.36:1 and 4.21:1 — every one of them FAILING WCAG AA. They are exactly the register a
   designer reaches for when styling "secondary" text, which is why they are named rather than
   left to taste.
   Their hex values are deliberately NOT spelled anywhere under resources/ or public/. The guard is
   a raw occurrence count over those two directories and it reads comments too, so a comment that
   named them would defeat the check that enforces them — the same discipline
   ceo-app/docker/nginx/default.conf already uses. They are enumerated once, in
   StarterQuestionsRenderTest::FORBIDDEN_GREYS, which is where the scan reads them from. */
:root {
    --provenance: #9aa3ad;  /* 7.80:1 on --bg. The ONE grey permitted for secondary text. */
    --rule: rgba(255, 255, 255, 0.10);
}

body.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------------------- masthead */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 15px 28px;
    border-bottom: 1px solid var(--rule);
}

.masthead-left,
.masthead-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wordmark {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wordmark-plus {
    color: var(--primary);
}

.masthead-rule {
    width: 1px;
    height: 18px;
    background: var(--rule);
}

.masthead-kicker,
.masthead-who,
.chips-heading,
.turn-who,
.answer-progress {
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    color: var(--provenance);
    margin: 0;
}

.signal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    color: var(--primary);
}

/* D-14: never a colour-only indicator. The dot sits BESIDE the word, never instead of it. */
.signal-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primary);
}

/* --------------------------------------------------------------------------------- layout */

.shell {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 28px;
    padding: 28px;
}

.rail {
    flex: 0 0 236px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--raised);
    border-radius: var(--radius);
}

.rail-item-current {
    border-color: var(--primary);
}

.rail-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit);
    color: var(--text);
    font-size: var(--t-sm);
    text-decoration: none;
}

.rail-link:hover {
    text-decoration: underline;
}

.inline-form {
    display: inline;
    margin: 0;
}

.quiet-button {
    min-height: var(--hit);
    min-width: var(--hit);
    padding: 8px 12px;
    font-family: var(--font);
    font-size: var(--t-sm);
    color: var(--provenance);
    background: transparent;
    border: 1px solid var(--raised);
    border-radius: 8px;
    cursor: pointer;
}

.quiet-button:hover {
    color: var(--text);
    border-color: var(--primary);
}

.stage {
    flex: 1;
    min-width: 0;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ----------------------------------------------------------------------------- empty state */

.hero-claim {
    margin: 0 0 14px;
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    max-width: 640px;
}

.hero-lede {
    margin: 0 0 26px;
    font-size: var(--t-base);
    color: var(--provenance);
    max-width: 560px;
}

/* D-14: a notice is a SENTENCE. Nothing here says "something went wrong" with a colour. */
.notice {
    margin: 0 0 26px;
    padding: 12px 14px;
    font-size: var(--t-base);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--raised);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius);
}

.chips-heading {
    margin-bottom: 16px;
}

.chip-groups {
    column-width: 238px;
    column-gap: 30px;
}

.chip-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.chip-group-label {
    margin: 0 0 3px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--primary);
}

.chip {
    display: block;
    width: 100%;
    /* D-14's floor. The demo's own chip is 9px/13px tall and would fail it. */
    min-height: var(--hit);
    padding: 11px 13px;
    text-align: start;
    font-family: var(--font);
    /* D-14: body text is never below 16px, and a starter question IS body text. */
    font-size: var(--t-base);
    line-height: 1.3;
    color: var(--text);
    background: var(--raised);   /* FLAT. D-12's anti-pattern for this archetype is a colour ramp. */
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.chip:hover {
    border-color: var(--primary);
}

/* ---------------------------------------------------------------------------- the transcript */

.turn {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.turn-question {
    margin: 0 0 8px;
    padding: 14px 18px;
    align-self: flex-end;
    max-width: 600px;
    font-size: var(--t-md);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: 16px 16px 4px 16px;
}

.turn-who {
    align-self: flex-end;
}

.answer-live,
.turn {
    background: var(--surface);
    border: 1px solid var(--raised);
    border-left: 2px solid var(--primary);
    border-radius: 4px 16px 16px 16px;
    padding: 18px 20px;
}

/* THE rendering contract. `white-space: pre-wrap` is what turns the brief's `\n\n` into the block
   break the CEO sees — on BOTH paths. app.js paints with textContent (never innerHTML), and the
   Blade partial echoes the body into the same rule, so a reload shows what the stream showed. A
   line-break-inserting helper is ruled out for exactly this reason: it keeps the newline it
   duplicates, so under pre-wrap every separator would render twice. */
#answer-body,
.answer-body {
    white-space: pre-wrap;
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text);
}

/* D-09 binding 1 in force. Secondary text on this screen is --provenance and nothing else. */
.provenance {
    margin-top: 12px;
    font-size: var(--t-sm);
    color: var(--provenance);
}

/* D-09 binding 2. Reliability stays a WORD — measured, a full Greek clause — never a coloured dot
   and never a badge. The expander must therefore fit a clause, not a label. */
.details {
    margin-top: 14px;
    border-top: 1px solid var(--rule);
    padding-top: 12px;
    font-size: var(--t-sm);
    color: var(--provenance);
}

.details > summary {
    min-height: var(--hit);
    display: flex;
    align-items: center;
    color: var(--provenance);
    cursor: pointer;
}

.details dl,
.details ul {
    margin: 10px 0 0;
    padding: 0;
}

.details dt {
    margin-top: 10px;
    color: var(--text);
}

.details dd {
    margin: 4px 0 0;
}

.details li {
    margin: 6px 0 0;
    list-style: none;
}

/* ------------------------------------------------------------------------- the free-text box */

.ask {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ask-label {
    font-size: var(--t-sm);
    color: var(--provenance);
}

.ask-row {
    display: flex;
    gap: 10px;
}

.ask-input {
    flex: 1;
    min-height: var(--hit);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: var(--t-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--raised);
    border-radius: var(--radius);
}

.ask .button {
    width: auto;
    padding: 12px 24px;
}

@media (max-width: 720px) {
    .shell {
        flex-direction: column;
    }

    .rail {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────── Phase 32, plan 32-10
 *
 * CONV-05's stop control and CONV-04's action block. Two rules and no new colour: every value
 * below is one of the tokens at the top of this file, because a second owner of the palette is
 * how a colour drifts, and D-12 keeps every fill on this screen flat.
 */

/* The stop control sits beside the progress state, so it must not take the row. `.button` is
   width: 100% by design for the ask form; this is the same control, narrowed and quiet. */
.button--quiet {
    width: auto;
    padding: 8px 16px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--text);
    background: var(--raised);
}

.button--quiet:hover {
    filter: brightness(1.2);
}

/* D-21's third block. The heading is ours; the sentences under it are the customer's model's,
   and they obey the SAME whitespace rule as every other body on this screen. */
.next-actions {
    margin-top: 18px;
    background: var(--surface);
    border: 1px solid var(--raised);
    border-left: 2px solid var(--primary);
    border-radius: 4px 16px 16px 16px;
    padding: 18px 20px;
}

.next-actions__heading {
    margin: 0 0 10px;
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    color: var(--muted);
}

.next-actions__body {
    margin: 0;
    white-space: pre-wrap;
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text);
}