/* Referee.chat — the officiating kit: black-and-white stripes, a whistle, and
   cards that mean what cards mean on a pitch.

   Light and paper-white on purpose. The product's promise is that a ruling is
   legible and checkable by anyone, and an official's record sheet is a light
   document, not a dashboard.

   Utility classes are prefixed rf- so they can never collide with Bootstrap's
   grid (a fork lost a day to a custom .col-4 once). */

:root {
    --rf-bg: #f4f4f2;          /* pitch-side paper */
    --rf-surface: #ffffff;
    --rf-surface-2: #f7f7f5;
    --rf-line: #d9d9d4;
    --rf-text: #14161a;        /* the black stripe */
    --rf-muted: #666b73;
    --rf-accent: #14161a;      /* authority is black, not blue */
    --rf-link: #1b5fbf;

    /* Cards mean what they mean in the laws of the game. */
    --rf-met: #1f7a3d;         /* upheld */
    --rf-failed: #c62828;      /* red card */
    --rf-open: #e8b400;        /* yellow card — cautioned, still live */

    /* Seat identities: the two sides and the official. */
    --rf-a: #1b5fbf;
    --rf-b: #b8541a;
    --rf-ref: #14161a;
}

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;
}

/* The jersey. A referee's stripes, used as the site's signature rule. */
.rf-stripes {
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        #14161a 0 14px,
        #ffffff 14px 28px
    );
    border-bottom: 1px solid var(--rf-line);
}

/* Wordmark: black-and-white striped tile, like a sleeve badge. */
.rf-mark {
    display: inline-block;
    width: 1.5rem; height: 1.5rem;
    margin-right: .5rem;
    vertical-align: -0.28rem;
    border: 1.5px solid #14161a;
    border-radius: 4px;
    background: repeating-linear-gradient(
        90deg,
        #14161a 0 3px,
        #ffffff 3px 6px
    );
}

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.12rem;
    max-width: 46rem;
}

/* ---- 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(20, 22, 26, 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: #2c2f36; border-color: #2c2f36; }
.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)); }
.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: #eef2f8;
}
.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)); }
.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(27,95,191,.35); }
.rf-chip-b { color: var(--rf-b); border-color: rgba(184,84,26,.35); }
.rf-chip-ref { color: var(--rf-ref); border-color: rgba(20,22,26,.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: var(--rf-failed); color: #fff; }
.rf-status-open { background: var(--rf-open); color: #14161a; }
.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; }


/* A failed or cautioned criterion is shown as the card an official would
   actually raise — filled, not tinted, so the ruling reads at a glance. */
.rf-status-failed, .rf-status-open {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* 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); }