/* Korea University Crimson (Pantone 202C, RGB 139/0/41) for the brand and accent */
:root { --fg:#1d1d1f; --muted:#6e6e73; --bg:#f7f5f5; --card:#fff; --line:#ddd2d4;
        --accent:#8b0029; --ok:#1b7f3b; --warn:#a15c00; --bad:#b3261e;
        --ku:#8b0029; --on-ku:#fff; --on-accent:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#f5f5f7; --muted:#a1a1a6; --bg:#121011; --card:#1d1a1b; --line:#3d3537;
          --accent:#f08a97; --ok:#5cc97a; --warn:#f0a83a; --bad:#ff6b5e;
          --ku:#6a0020; --on-ku:#fff; --on-accent:#2a0a10; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
       color:var(--fg); background:var(--bg); }
header.top { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:.75rem 1.25rem;
             background:var(--ku); color:var(--on-ku); }
.brand { font-weight:600; color:var(--on-ku); text-decoration:none; }
.tag { color:var(--on-ku); opacity:.85; font-size:.85rem; }
.lab { display:flex; align-items:center; color:var(--on-ku); font-weight:700;
       text-decoration:none; letter-spacing:.02em; }
/* the logo has its own colours (incl. crimson): shown on a white chip */
.lab img { height:30px; display:block; background:#fff; padding:3px; border-radius:3px; }
main { max-width:900px; margin:1.5rem auto; padding:0 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:1.25rem 1.5rem; margin-bottom:1.25rem; }
.card.narrow { max-width:460px; margin:3rem auto; }
h1 { font-size:1.4rem; margin:.2rem 0 .8rem; } h2 { font-size:1.15rem; margin:.2rem 0 .8rem; }
.row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.between { justify-content:space-between; }
fieldset { border:1px solid var(--line); border-radius:10px; margin:0 0 1rem; padding:.75rem 1rem; }
legend { font-weight:600; padding:0 .3rem; }
label { display:block; margin:.5rem 0 .25rem; font-weight:500; }
label.check { display:flex; gap:.5rem; align-items:flex-start; font-weight:400; }
input[type=text], input:not([type]), input[type=email], select, textarea {
  width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px;
  font:inherit; background:var(--bg); color:var(--fg); }
textarea { font-family: ui-monospace, Menlo, monospace; font-size:.9rem; }
button { padding:.55rem 1.1rem; border-radius:8px; border:0; background:var(--accent);
         color:var(--on-accent); font:inherit; font-weight:600; cursor:pointer; }
button.secondary { background:transparent; color:var(--bad); border:1px solid var(--bad); }
a { color:var(--accent); }
/* a link that sits next to buttons and looks like one (outlined, theme colour) */
a.button-link { display:inline-block; padding:.55rem 1.1rem; border-radius:8px;
  border:1px solid var(--accent); color:var(--accent); font-weight:600;
  text-decoration:none; line-height:1.2; }
a.button-link:hover { background:var(--accent); color:var(--on-accent); }
button:disabled { opacity:.5; cursor:default; }
.tabs { display:flex; gap:.4rem; margin-bottom:.5rem; }
.tab { background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:500; }
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.hidden { display:none !important; }
.hint { color:var(--muted); font-size:.88rem; margin:.3rem 0; }
.notice { background:color-mix(in srgb, var(--warn) 12%, transparent);
          border-left:3px solid var(--warn); padding:.5rem .75rem; border-radius:6px; }
.error { color:var(--bad); }
.status { color:var(--muted); }
.acorns { font-weight:600; font-size:1.05rem; }
.topup { margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem; }
.jobs { list-style:none; padding:0; margin:0; }
.jobs li { display:flex; gap:.75rem; align-items:baseline; padding:.35rem 0;
           border-bottom:1px solid var(--line); }
.state { font-size:.8rem; font-weight:600; padding:.1rem .5rem; border-radius:99px;
         border:1px solid currentColor; text-transform:uppercase; letter-spacing:.03em; }
.s-complete { color:var(--ok); } .s-partial { color:var(--warn); }
.s-failed, .s-cancelled { color:var(--bad); }
.s-queued, .s-fetching, .s-segmenting, .s-reviewing, .s-synthesizing { color:var(--accent); }
/* progress: a bar, with moving stripes while the review runs */
.progress-wrap { position:relative; }
.progress { position:relative; height:12px; border-radius:999px; background:var(--line);
  overflow:hidden; cursor:default; }
/* a sheen sweeping across the whole bar: visible movement even while a stage waits */
.progress.running::after { content:""; position:absolute; inset:0; width:30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:progress-sheen 1.8s ease-in-out infinite; }
@keyframes progress-sheen { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
.progress-tip { position:absolute; left:0; top:calc(100% + 6px); z-index:2; padding:.2rem .5rem;
  border-radius:6px; background:var(--fg); color:var(--bg); font-size:.78rem;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
.progress-wrap:hover .progress-tip, .progress:focus + .progress-tip { opacity:1; }
.progress-fill { height:100%; width:0; border-radius:999px; background:var(--accent);
  transition:width .8s ease; }
.progress.running .progress-fill {
  background-image:linear-gradient(45deg, rgba(255,255,255,.38) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.38) 75%, transparent 75%);
  background-size:24px 24px; animation:progress-stripes 1s linear infinite; }
.progress.complete .progress-fill { background:var(--ok); }
.progress.stopped .progress-fill { background:var(--bad); }
@keyframes progress-stripes { from { background-position:24px 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion: reduce) {
  .progress.running .progress-fill, .progress.running::after { animation:none; } }
.acorn-meter { margin:.8rem 0 .2rem; display:flex; gap:.5rem; align-items:baseline;
  flex-wrap:wrap; }
.acorn-meter .meter { flex-basis:100%; height:6px; border-radius:999px; background:var(--line);
  overflow:hidden; }
.meter-fill { height:100%; width:0; background:var(--warn); transition:width .8s ease; }
.meter-fill.over { background:var(--bad); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }
.sections { list-style:none; padding:0; }
.sections li { border:1px solid var(--line); border-radius:8px; margin:.4rem 0; padding:.4rem .7rem; }
.sections li.failed { border-color:var(--bad); }
.sections summary { cursor:pointer; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.tier, .counts { color:var(--muted); font-size:.85rem; }
.md { overflow-wrap:anywhere; }
.md pre { overflow:auto; background:var(--bg); padding:.6rem; border-radius:6px; }
.md table { border-collapse:collapse; } .md td, .md th { border:1px solid var(--line); padding:.2rem .5rem; }

.nav { margin-left:auto; display:flex; gap:1rem; }
.nav a { color:var(--on-ku); text-decoration:none; }
.s-example { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.6rem 1rem; }
.grid label { margin:.2rem 0; font-size:.85rem; color:var(--muted); }
.stat { border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; }
.stat b { display:block; font-size:1.3rem; }
.table { width:100%; border-collapse:collapse; font-size:.85rem; }
.table th, .table td { text-align:left; padding:.3rem .4rem; border-bottom:1px solid var(--line); }
.issues li { margin:.6rem 0; }
.issues .votes { display:flex; gap:.4rem; margin-top:.3rem; }
.issues .votes button { background:transparent; color:var(--fg); border:1px solid var(--line);
                        font-weight:400; padding:.25rem .7rem; }
.issues .votes button.chosen { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.present { font-size:1.25rem; }
.big-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; }
.big-grid .stat b { font-size:2.4rem; }

.badge-edu { font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
  background: var(--on-ku); color: var(--ku); white-space: nowrap; }
.amount { width: 5.5rem; }

/* presenter: the join QR, big enough to scan from the back of a room */
.join-qr { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.join-qr .qr { width:min(320px, 80vw); height:auto; background:#fff; border-radius:8px; }
.join-url { font-family:ui-monospace, Menlo, monospace; word-break:break-all; }

/* options, each with its explanation shown under it */
.opt { display:flex; align-items:center; gap:.4rem; }
.opt label.check { margin:.5rem 0; }
.hint.tip { margin:.1rem 0 .6rem 1.6rem; padding:.5rem .7rem; border-radius:8px;
  background:var(--bg); border:1px solid var(--line); color:var(--fg); }

/* feedback: votes on findings (inline in the report and in the list), chips */
.fb { display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:center; margin-top:.3rem; }
.fb .votes { display:inline-flex; gap:.3rem; }
.fb button, .chips button, .sec-fb button, .stars button {
  background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:400;
  padding:.2rem .6rem; border-radius:999px; font-size:.85rem; }
.fb button.chosen, .chips button.chosen, .sec-fb button.chosen {
  background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.chips { display:inline-flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.chips[hidden] { display:none; }
.fb .hint, .sec-fb .hint { font-size:.8rem; margin:0; }
.fb input { flex:1 1 12rem; }
.inline-fb { display:flex; margin:.35rem 0 .1rem; }
.inline-fb button { padding:.1rem .5rem; }
.sec-fb { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.5rem 0; }
.stars { display:flex; gap:.3rem; margin:.4rem 0; }
.stars button { font-size:1.6rem; line-height:1; padding:.15rem .4rem; border:none; color:var(--warn); }
#rating-comment, #comment-note, #missed-what { width:100%; }
.icon-btn { background:transparent; color:var(--muted); border:none; padding:.1rem .4rem;
            font-weight:400; }
.missed { display:grid; gap:.4rem; margin-bottom:.5rem; }
.missed button { justify-self:start; }
.notes-list { padding-left:1.1rem; }
.notes-list li { display:flex; gap:.4rem; align-items:flex-start; justify-content:space-between;
                 margin:.25rem 0; }
/* a selection anywhere in the report or a section offers a comment */
.comment-btn { position:fixed; right:1rem; bottom:1rem; z-index:20;
               box-shadow:0 2px 10px rgba(0,0,0,.25); }
.comment-box { position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:21;
               width:min(36rem, calc(100vw - 2rem)); max-height:80vh; overflow:auto;
               box-shadow:0 4px 24px rgba(0,0,0,.3); }
.comment-box blockquote { margin:.3rem 0 .6rem; padding:.3rem .7rem; border-left:3px solid var(--accent);
                          color:var(--muted); max-height:8rem; overflow:auto; }

/* presenter dev view (operator only) */
.dev-banner { background:var(--warn); color:#000; padding:.4rem .8rem; border-radius:8px;
              font-weight:600; }
.dev-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.dev-grid h3 { margin:.2rem 0 .4rem; font-size:1rem; }
.dev-grid .table td:last-child, .dev-grid .table th:last-child { text-align:right; }
.table-wrap { overflow-x:auto; }
.fb-toast { position:fixed; left:50%; top:1rem; transform:translateX(-50%); z-index:30;
            background:var(--bad); color:#fff; padding:.5rem .9rem; border-radius:8px;
            max-width:calc(100vw - 2rem); }
.fb-toast[hidden] { display:none; }