/* Referee.chat — professional, centred, one accent.

   Neutral greys carry the page; red appears only where a decision is being
   made (the primary action, a failed criterion, the referee's own seat). One
   accent used sparingly reads as considered; used everywhere it reads as a
   warning. Utility classes stay rf- prefixed so they can never collide with
   Bootstrap's grid. */

:root {
    --rf-bg: #f6f7f9;
    --rf-surface: #ffffff;
    --rf-surface-2: #f0f2f5;
    --rf-line: #dfe3e8;
    --rf-text: #1c2430;
    --rf-muted: #667085;
    --rf-accent: #c8102e;       /* the flare */
    --rf-accent-dark: #a20d25;
    --rf-link: #c8102e;

    --rf-met: #1f7a3d;
    --rf-failed: #c8102e;
    --rf-open: #b7791f;

    --rf-a: #35506e;
    --rf-b: #667085;
    --rf-ref: #c8102e;
}

body {
    background: var(--rf-bg);
    color: var(--rf-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Centred column. One max-width, one alignment, everywhere. */
main > .container { max-width: 880px; }
.rf-center, .rf-hero, .rf-card, .rf-foot-note { text-align: center; }

/* Inputs and their help text stay left-aligned — centred body text inside a
   field is hard to read and hard to edit. */
.rf-card .form-control,
.rf-card .form-select,
.rf-card textarea { text-align: left; }

/* Top accent bar removed — the nav carries the brand on its own. */
.rf-stripes { display: none; }

.rf-mark { display: none; }

main { flex: 1 0 auto; }

a { color: var(--rf-accent); }

.brand { letter-spacing: -0.02em; }
.brand-dot { color: var(--rf-muted); font-weight: 400; }

.rf-nav {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--rf-line);
    backdrop-filter: blur(8px);
}
.rf-nav .navbar-brand, .rf-nav .nav-link { color: var(--rf-text) !important; }
.rf-nav .nav-link:hover, .rf-nav .nav-link.active { color: var(--rf-accent) !important; }
.rf-nav .navbar-toggler { border-color: var(--rf-line); }
.rf-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2314161a' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.rf-nav .dropdown-menu {
    background: var(--rf-surface); border: 1px solid var(--rf-line);
}
.rf-nav .dropdown-item { color: var(--rf-text); }
.rf-nav .dropdown-item:hover { background: var(--rf-surface-2); color: var(--rf-accent); }

.rf-footer {
    background: var(--rf-surface-2);
    border-top: 1px solid var(--rf-line);
}
.rf-footer a { color: var(--rf-muted); }
.rf-footer a:hover { color: var(--rf-accent); }

/* ---- hero ---- */
.rf-hero { padding: 3.5rem 0 1.5rem; }
.rf-hero h1 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.rf-hero .rf-sub {
    color: var(--rf-muted);
    font-size: 1.08rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* ---- cards / panels ---- */
.rf-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: 12px;
    padding: 1.25rem;
}
.rf-card + .rf-card { margin-top: 1rem; }

.rf-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--rf-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ---- forms ---- */
.form-control, .form-select {
    background: var(--rf-bg);
    border: 1px solid var(--rf-line);
    color: var(--rf-text);
}
.form-control:focus, .form-select:focus {
    background: var(--rf-bg);
    color: var(--rf-text);
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.form-control::placeholder { color: #9aa0a8; }
.form-select option { background: var(--rf-surface); }

.btn-primary {
    background: var(--rf-accent); border-color: var(--rf-accent);
    font-weight: 600;
}
.btn-primary:hover { background: var(--rf-accent-dark); border-color: var(--rf-accent-dark); }
.btn-outline-light { border-color: var(--rf-line); color: var(--rf-text); }
.btn-outline-light:hover { background: var(--rf-surface-2); border-color: var(--rf-accent); }

/* ---- rigor preset picker ---- */
.rf-presets { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: left; }
.rf-preset input { position: absolute; opacity: 0; pointer-events: none; }
.rf-preset label {
    display: block; cursor: pointer; height: 100%;
    border: 1px solid var(--rf-line); border-radius: 10px;
    padding: 0.7rem 0.85rem; background: var(--rf-bg);
    transition: border-color .12s, background .12s;
}
.rf-preset label:hover { border-color: var(--rf-muted); }
.rf-preset input:checked + label {
    border-color: var(--rf-accent);
    background: #fdeef0;
}
.rf-preset .rf-preset-name { font-weight: 600; font-size: 0.95rem; }
.rf-preset .rf-preset-hint { color: var(--rf-muted); font-size: 0.8rem; line-height: 1.35; }

/* ---- seats ---- */
.rf-seats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); text-align: left; }
.rf-seat-a { border-left: 3px solid var(--rf-a); }
.rf-seat-b { border-left: 3px solid var(--rf-b); }
.rf-seat-ref { border-left: 3px solid var(--rf-ref); }

.rf-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.75rem; font-weight: 600;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    border: 1px solid var(--rf-line); color: var(--rf-muted);
}
.rf-chip-a { color: var(--rf-a); border-color: rgba(53,80,110,.3); }
.rf-chip-b { color: var(--rf-b); border-color: rgba(102,112,133,.3); }
.rf-chip-ref { color: var(--rf-ref); border-color: rgba(200,16,46,.35); }

/* ---- criteria ---- */
.rf-criterion {
    display: flex; gap: 0.7rem; align-items: flex-start;
    padding: 0.6rem 0; border-bottom: 1px solid var(--rf-line);
}
.rf-criterion:last-child { border-bottom: 0; }
.rf-status {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem; border-radius: 4px; margin-top: 0.1rem;
}
.rf-status-met { background: #e6f4ea; color: var(--rf-met); }
.rf-status-failed { background: #fdeef0; color: var(--rf-failed); }
.rf-status-open { background: #fdf3e2; color: var(--rf-open); }
.rf-status-waived { background: #ecedee; color: var(--rf-muted); }

/* ---- transcript ---- */
.rf-turn { border-left: 3px solid var(--rf-line); padding: 0 0 1.25rem 1rem; margin-left: .25rem; }
.rf-turn-a { border-left-color: var(--rf-a); }
.rf-turn-b { border-left-color: var(--rf-b); }
.rf-turn-ref { border-left-color: var(--rf-ref); }
.rf-turn-impasse { border-left-color: var(--rf-open); }
.rf-turn-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rf-turn-body { white-space: pre-wrap; line-height: 1.6; font-size: 0.94rem; }
.rf-turn-body code, .rf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rf-meta { color: var(--rf-muted); font-size: 0.8rem; }

/* ---- progress ---- */
.rf-bar { height: 6px; background: var(--rf-surface-2); border-radius: 3px; overflow: hidden; }
.rf-bar span { display: block; height: 100%; background: var(--rf-met); transition: width .4s; }

/* ---- evidence ---- */
.rf-evidence {
    background: var(--rf-bg); border: 1px solid var(--rf-line);
    border-radius: 8px; padding: .7rem .85rem; margin-bottom: .6rem;
}
.rf-evidence pre {
    background: #010409; border-radius: 6px; padding: .6rem;
    font-size: .8rem; color: #c9d1d9; max-height: 260px; overflow: auto; margin: .5rem 0 0;
}
.rf-verified { color: var(--rf-met); font-weight: 600; }
.rf-unverified { color: var(--rf-muted); }

/* ---- price table ---- */
.rf-table { width: 100%; font-size: .92rem; }
.rf-table th { color: var(--rf-muted); font-weight: 600; font-size: .78rem;
               text-transform: uppercase; letter-spacing: .05em;
               border-bottom: 1px solid var(--rf-line); padding: .5rem .6rem; }
.rf-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--rf-line); }
.rf-table tr:hover td { background: var(--rf-surface-2); }

.rf-scroll-x { overflow-x: auto; }

.alert { border: 1px solid var(--rf-line); background: var(--rf-surface); color: var(--rf-text); }
.alert-warning { border-color: rgba(210,153,34,.4); }
.alert-danger { border-color: rgba(248,81,73,.4); }
.alert-success { border-color: rgba(63,185,80,.4); }

.text-muted { color: var(--rf-muted) !important; }
hr { border-color: var(--rf-line); opacity: 1; }

/* ---- rendered markdown from seats/referee ---- */
.rf-md { white-space: normal; }
.rf-md > *:first-child { margin-top: 0; }
.rf-md > *:last-child { margin-bottom: 0; }
.rf-md h1, .rf-md h2, .rf-md h3, .rf-md h4 {
    font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
    margin: 1.1rem 0 .45rem; color: var(--rf-text);
}
.rf-md h1 { font-size: 1.15rem; }
.rf-md h2 { font-size: 1.06rem; }
.rf-md p { margin: 0 0 .7rem; }
.rf-md ul, .rf-md ol { margin: 0 0 .7rem; padding-left: 1.2rem; }
.rf-md li { margin-bottom: .25rem; }
.rf-md code {
    background: #010409; border: 1px solid var(--rf-line); border-radius: 4px;
    padding: .08rem .3rem; font-size: .86em;
}
.rf-md pre {
    background: #010409; border: 1px solid var(--rf-line); border-radius: 8px;
    padding: .7rem .85rem; overflow-x: auto; margin: 0 0 .7rem;
}
.rf-md pre code { background: none; border: 0; padding: 0; font-size: .84rem; }
.rf-md blockquote {
    border-left: 3px solid var(--rf-line); margin: 0 0 .7rem;
    padding: .1rem 0 .1rem .8rem; color: var(--rf-muted);
}
.rf-md table { width: 100%; margin: 0 0 .7rem; font-size: .88rem; display: block; overflow-x: auto; }
.rf-md th, .rf-md td { border: 1px solid var(--rf-line); padding: .35rem .5rem; text-align: left; }
.rf-md th { background: var(--rf-surface-2); font-weight: 600; }
.rf-md hr { margin: .9rem 0; }
.rf-md a { text-decoration: underline; }

/* ---- dynamic panel seats ---- */
.rf-seat-a { border-left: 3px solid var(--rf-a); }
.rf-seat-b { border-left: 3px solid var(--rf-b); }
.rf-seat-c { border-left: 3px solid #57ab5a; }
.rf-seat-d { border-left: 3px solid #e3b341; }
.rf-seat-e { border-left: 3px solid #db6d94; }
.rf-seat-f { border-left: 3px solid #6cb6ff; }
.rf-chip-c { color: #57ab5a; border-color: rgba(87,171,90,.4); }
.rf-chip-d { color: #e3b341; border-color: rgba(227,179,65,.4); }
.rf-chip-e { color: #db6d94; border-color: rgba(219,109,148,.4); }
.rf-chip-f { color: #6cb6ff; border-color: rgba(108,182,255,.4); }
.rf-remove-seat { line-height: 1; padding: .05rem .4rem; }
.rf-remove-seat:disabled { opacity: .3; }




/* Anything the referee re-checked and upheld carries a tick; anything still
   unverified stays visually quieter than a settled result. */
.rf-evidence-verified::before { content: "\2713\00a0"; color: var(--rf-met); font-weight: 700; }
.rf-evidence-unverified { color: var(--rf-muted); }


/* Records read left-aligned. Centring applies to marketing and chrome, never
   to a transcript, a ruling or a list of criteria. */
.rf-criterion, .rf-turn, .rf-turn-body, .rf-ledger, table { text-align: left; }


/* Three across so the presets form an even grid rather than a ragged wrap. */
@media (min-width: 768px) {
    .rf-presets { grid-template-columns: repeat(3, 1fr); }
}

/* The settings row: equal columns, each centred on its own control. */
.rf-card .row .rf-label { text-align: center; }
.rf-card .form-check { justify-content: center; }
.rf-card .form-check-input { margin-left: 0; float: none; }

/* Feature columns centre with the rest of the page. */
.rf-feature, .rf-feature .rf-label, .rf-feature .rf-meta { text-align: center; }

/* ---- brand mark, also the referee's avatar ---- */
.rf-mark { display: inline-flex; width: 22px; height: 22px; margin-right: .5rem;
           vertical-align: -4px; color: var(--rf-text); }
.rf-mark svg { width: 100%; height: 100%; }
.rf-avatar { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto;
             color: var(--rf-text); vertical-align: -4px; }
.rf-avatar svg { width: 100%; height: 100%; }
.rf-seat-dot { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto;
               align-items: center; justify-content: center; border-radius: 6px;
               font-size: .68rem; font-weight: 700; color: #fff; }
.rf-seat-dot-a { background: var(--rf-a); }
.rf-seat-dot-b { background: var(--rf-b); }
.rf-seat-dot-c { background: #1f7a3d; }
.rf-seat-dot-d { background: #8a6d00; }
.rf-seat-dot-e { background: #a3327a; }
.rf-seat-dot-f { background: #0f6d78; }

/* ---- centered, minimal above the fold ---- */
.rf-stage { max-width: 44rem; margin: 0 auto; text-align: center; }
.rf-stage h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 700;
               letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 .8rem; }
.rf-stage .rf-lede { color: var(--rf-muted); font-size: 1.05rem; margin: 0 auto 2rem;
                     max-width: 34rem; }
.rf-ask { position: relative; }
.rf-ask textarea { min-height: 118px; font-size: 1.02rem; padding: 1rem 1.1rem;
                   text-align: left; resize: vertical; }
.rf-ask-row { display: flex; gap: .6rem; align-items: center; justify-content: center;
              margin-top: .8rem; flex-wrap: wrap; }
.rf-disclosure { border: 0; background: none; color: var(--rf-muted); font-size: .85rem;
                 cursor: pointer; text-decoration: underline; padding: .3rem .2rem; }
.rf-disclosure:hover { color: var(--rf-text); }
.rf-advanced { text-align: left; margin-top: 1.4rem; }
.rf-examples { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
               margin-top: 1rem; }
.rf-example { border: 1px solid var(--rf-line); background: var(--rf-surface);
              border-radius: 999px; padding: .3rem .8rem; font-size: .82rem;
              color: var(--rf-muted); cursor: pointer; }
.rf-example:hover { border-color: var(--rf-text); color: var(--rf-text); }

/* ---- stat tiles ---- */
.rf-stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rf-stat { background: var(--rf-surface); border: 1px solid var(--rf-line);
           border-radius: 10px; padding: .9rem 1rem; }
.rf-stat-n { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.rf-stat-l { color: var(--rf-muted); font-size: .78rem; text-transform: uppercase;
             letter-spacing: .06em; margin-top: .2rem; }

/* ---- pricing ---- */
.rf-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rf-plan { background: var(--rf-surface); border: 1px solid var(--rf-line);
           border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; }
.rf-plan-featured { border-color: var(--rf-text); box-shadow: 0 0 0 1px var(--rf-text); }
.rf-plan h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; }
.rf-plan .rf-price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.rf-plan ul { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .9rem; }
.rf-plan li { padding: .3rem 0 .3rem 1.3rem; position: relative; }
.rf-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--rf-met);
                      font-weight: 700; }
.rf-plan li.rf-no::before { content: '—'; color: var(--rf-muted); }