/* The viewer's styling. Self-contained: no external fonts, no CDN, nothing fetched at render. */

:root {
   color-scheme: light dark;
   --ink: #16181d;
   --muted: #5b6472;
   --ground: #fbfbfa;
   --panel: #ffffff;
   --line: #e2e5ea;
   --accent: #8a3f16;
   --accent-soft: rgba(138, 63, 22, 0.08);
   --error: #a32020;
   --radius: 0.6rem;
}

@media (prefers-color-scheme: dark) {
   :root {
      --ink: #e9ecf1;
      --muted: #9aa4b2;
      --ground: #14161a;
      --panel: #1c1f25;
      --line: #2b3038;
      --accent: #e0a06a;
      --accent-soft: rgba(224, 160, 106, 0.12);
      --error: #ff8a80;
   }
}

* { box-sizing: border-box; }

body {
   margin: 0;
   padding-block: 2.5rem;
   padding-inline: 1.25rem;
   background: var(--ground);
   color: var(--ink);
   font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 60rem; margin: 0 auto; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .35rem; letter-spacing: -.01em; }

h2 {
   font-size: .82rem;
   margin: 1.75rem 0 .55rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--muted);
}

p { margin: 0 0 .75rem; }

.lede { color: var(--muted); margin-bottom: 1.75rem; }

.muted { color: var(--muted); font-size: .9rem; }

/* --- guidance, above the drop zone ---
   Quiet enough not to compete with the drop zone for attention, but read before a photo is
   chosen rather than after it fails. */

.tips {
   border-left: 3px solid var(--accent);
   background: var(--panel);
   border-radius: var(--radius);
   padding: .9rem 1.1rem;
   margin-bottom: 1.25rem;
}

.tips h2 { margin: 0 0 .5rem; }

.tips ul { margin: 0; padding-left: 1.1rem; }

.tips li { margin-bottom: .45rem; font-size: .925rem; color: var(--muted); }

.tips li:last-child { margin-bottom: 0; }

.tips strong { color: var(--ink); font-weight: 600; }

/* --- the drop zone --- */

.drop {
   border: 2px dashed var(--line);
   border-radius: var(--radius);
   background: var(--panel);
   padding: 2.75rem 1.5rem;
   text-align: center;
   cursor: pointer;
   transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.drop:hover, .drop:focus-visible {
   border-color: var(--accent);
   outline: none;
}

.drop.over {
   border-color: var(--accent);
   background: var(--accent-soft);
   transform: scale(1.01);
}

.drop.busy { opacity: .6; pointer-events: none; }

.drop-icon { width: 2rem; height: 2rem; color: var(--muted); margin-bottom: .5rem; }

.drop-title { font-weight: 600; margin-bottom: .2rem; }

.drop-hint { color: var(--muted); font-size: .875rem; margin: 0; }

/* --- status --- */

.status {
   margin-top: 1rem;
   padding: .7rem .9rem;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: var(--panel);
   font-size: .925rem;
}

.status.working { border-left: 3px solid var(--accent); }

.status.error { border-left: 3px solid var(--error); color: var(--error); }

/* --- results --- */

.split {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
   gap: 1.5rem;
   align-items: start;
}

.preview { margin: 0; }

/* The photo is drawn on a canvas so a crop is an exact source rectangle, not CSS clipping.
   `touch-action: none` lets a finger drag a crop on a phone instead of scrolling the page. */
.stage {
   position: relative;
   line-height: 0;
}

.stage[hidden] { display: none; }

.stage canvas {
   width: 100%;
   max-width: 100%;
   height: auto;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   display: block;
   cursor: crosshair;
   touch-action: none;
   user-select: none;
}

.marquee {
   position: absolute;
   border: 2px dashed var(--accent);
   background: var(--accent-soft);
   pointer-events: none;
}

.crop-bar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
   margin-bottom: .5rem;
}

.crop-bar .muted { margin: 0; font-size: .85rem; }

.crop-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .5rem;
   margin-left: auto;
}

/* The expected player count: a number box between - and + buttons. */
.players {
   display: inline-flex;
   align-items: center;
   gap: .25rem;
   font-size: .85rem;
}

.players label { color: var(--muted); margin-right: .15rem; }

.players input {
   font: inherit;
   width: 3rem;
   padding: .3rem .25rem;
   text-align: center;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--panel);
   color: var(--ink);
   -moz-appearance: textfield;
   appearance: textfield;
}

/* The browser's own spinner would duplicate the - and + buttons. */
.players input::-webkit-inner-spin-button,
.players input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.step {
   font: inherit;
   width: 2rem;
   padding: .3rem 0;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: var(--panel);
   color: var(--ink);
   cursor: pointer;
}

.step:disabled { opacity: .45; cursor: default; }

.reset-crop {
   font: inherit;
   font-size: .85rem;
   padding: .3rem .8rem;
   border-radius: var(--radius);
   border: 1px solid var(--line);
   background: var(--panel);
   color: var(--ink);
   cursor: pointer;
}

.reset-crop:disabled { opacity: .45; cursor: default; }

.readout { min-width: 0; }

.panel {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: .9rem 1.1rem;
}

.panel > :last-child { margin-bottom: 0; }

.machine-name { font-size: 1.25rem; font-weight: 600; margin-bottom: .2rem; }

.absent { color: var(--muted); font-style: italic; margin: 0; }

.flag {
   margin-top: .6rem;
   margin-bottom: 0;
   padding-top: .6rem;
   border-top: 1px solid var(--line);
   color: var(--error);
   font-size: .9rem;
}

.scores-table { width: 100%; border-collapse: collapse; }

.scores-table th {
   text-align: left;
   font-size: .72rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   font-weight: 600;
   padding: 0 .5rem .4rem 0;
   border-bottom: 1px solid var(--line);
}

.scores-table td { padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); }

.scores-table tr:last-child td { border-bottom: none; }

.seat { color: var(--muted); width: 3.5rem; }

.score {
   font-variant-numeric: tabular-nums;
   font-size: 1.15rem;
   font-weight: 600;
}

.empty-seat .score { color: var(--muted); font-weight: 400; }

.placement { text-align: right; }

.badge {
   display: inline-block;
   font-size: .72rem;
   padding: .15em .5em;
   border-radius: 100px;
   background: var(--accent-soft);
   color: var(--accent);
   white-space: nowrap;
}

.warnings { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--muted); }

.warnings li { margin-bottom: .35rem; }

.warnings code { color: var(--accent); }

/* --- feedback --- */

.feedback {
   margin-top: 1.75rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--line);
}

.verdicts { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }

.verdict-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.verdict-label {
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   min-width: 4.5rem;
}

.verdict-buttons { display: flex; gap: .4rem; }

.verdict {
   font: inherit;
   font-size: .9rem;
   padding: .35rem .75rem;
   border: 1px solid var(--line);
   border-radius: 100px;
   background: var(--panel);
   color: var(--ink);
   cursor: pointer;
   transition: border-color .12s ease, background .12s ease;
}

.verdict:hover { border-color: var(--accent); }

.verdict[aria-pressed="true"] {
   border-color: var(--accent);
   background: var(--accent-soft);
   color: var(--accent);
   font-weight: 600;
}

.comment-label {
   display: block;
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   margin-bottom: .4rem;
}

#comment {
   width: 100%;
   font: inherit;
   font-size: .925rem;
   padding: .6rem .75rem;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--panel);
   color: var(--ink);
   resize: vertical;
}

#comment:focus-visible { outline: none; border-color: var(--accent); }

/* Said plainly, and next to the button rather than in the small print at the top: this is the
   moment the choice is actually made. */
.disclosure {
   margin: .75rem 0 1rem;
   font-size: .85rem;
   color: var(--muted);
   line-height: 1.5;
}

.feedback-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.submit {
   font: inherit;
   font-size: .925rem;
   font-weight: 600;
   padding: .5rem 1.1rem;
   border: 1px solid var(--accent);
   border-radius: var(--radius);
   background: var(--accent);
   color: var(--ground);
   cursor: pointer;
}

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

.submit:disabled { opacity: .5; cursor: default; filter: none; }

.feedback-status { font-size: .875rem; color: var(--muted); }

.feedback-status.error { color: var(--error); }

.feedback-status.saved { color: var(--accent); }

/* --- the server's step log --- */

.log-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   font-size: .875rem;
}

.log-table th,
.log-table td {
   text-align: left;
   padding: .35rem .75rem;
   border-bottom: 1px solid var(--line);
   vertical-align: top;
}

.log-table tbody tr:last-child td { border-bottom: none; }

.log-table th { color: var(--muted); font-weight: 600; font-size: .8rem; }

/* Right-aligned and tabular so the times line up and can be compared down the column. */
.log-table .elapsed {
   width: 1%;
   white-space: nowrap;
   text-align: right;
   font-variant-numeric: tabular-nums;
   color: var(--muted);
}

code, .json {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: .8125rem;
}

.json {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 1rem;
   overflow-x: auto;
   line-height: 1.5;
   margin: 0;
}

footer {
   margin-top: 2.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--line);
   color: var(--muted);
   font-size: .875rem;
}

footer p { margin: 0 0 .25rem; }

/* The licence-required naming sentences. Quiet, but present and readable -- section 5 asks for
   an About or Credits location, and this page is the only one anybody can reach. */
.credit { font-size: .8125rem; line-height: 1.5; max-width: 46rem; }

/* Tablet and below: the preview above the readout rather than beside it, so neither is squeezed
   into a column too narrow to read. */
@media (max-width: 52rem) {
   .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
   body { padding-block: 1.75rem; }
   .drop { padding: 2rem 1rem; }
   h1 { font-size: 1.35rem; }
   .score { font-size: 1.05rem; }
   .placement { display: none; }
   .scores-table th:last-child { display: none; }
}