/* oneclue.css — One Clue: the front-page strip, the #/clue desk and the reveal.
 * Every class here starts "oc-" (plus the component root .oc), so nothing
 * collides with the other views' sheets. The letter squares and the map are
 * printed matter, like the grid and the art plates: they keep their paper in
 * the evening edition. */

.oc { --tier: var(--c-yellow); position: relative; min-width: 0; }

/* ================================================================ strip */
.oc-strip {
  margin: 0 0 clamp(22px, 2.4vw, 40px);
  padding: clamp(14px, 1.4vw, 22px) clamp(14px, 2vw, 30px) clamp(12px, 1.2vw, 18px);
  background: color-mix(in srgb, var(--c-yellow) 14%, var(--card));
  border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule);
  box-shadow: inset 8px 0 0 var(--c-yellow);
}
/* Evening edition: the strip's yellow wash is darker than a card, so its
   small grey text is lifted to keep 4.5:1. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .oc-strip { --muted: #b8ad94; background: color-mix(in srgb, var(--c-yellow) 9%, var(--card)); } }
:root[data-theme="dark"] .oc-strip { --muted: #b8ad94; background: color-mix(in srgb, var(--c-yellow) 9%, var(--card)); }
.oc-strip .oc-rv-fact { background: var(--card); }

.oc-page {
  padding: clamp(18px, 2vw, 32px) clamp(16px, 2.4vw, 40px);
  background: var(--card);
  border: 1px solid var(--rule); border-top: 6px solid var(--c-yellow);
}

/* ----------------------------------------------------------------- head */
.oc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: clamp(8px, .9vw, 14px); }
.oc-kicker {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0;
  font: 600 13px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.oc-mark {
  display: inline-block; padding: 5px 10px 4px;
  background: var(--c-yellow); color: #16140f; border: 1.5px solid var(--btn-line);
  font-weight: 700; letter-spacing: .16em;
}
.oc-no { color: var(--ink); }
.oc-today { color: color-mix(in srgb, var(--c-red), var(--tx-mix) var(--tx-amt)); }
.oc-today::before { content: "★ "; }
.oc-tier { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 16%, var(--card)); }
.oc-head-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.oc-mini { font: 600 12.5px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.oc-mini b { color: var(--ink); font-size: 15px; letter-spacing: 0; }
.oc-more {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none;
  font: 700 12.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 3px solid var(--c-yellow); padding-bottom: 3px;
}
.oc-more .icon { width: 15px; height: 15px; transition: transform .15s; }
.oc-more:hover .icon { transform: translateX(3px); }

/* ------------------------------------------------------------ the clue */
.oc-clue {
  margin: 0; max-width: 60ch; text-wrap: balance;
  font: italic 500 clamp(23px, 2.2vw, 38px)/1.28 var(--f-body); color: var(--ink);
}
.oc-page .oc-clue { font-size: clamp(26px, 2.9vw, 50px); }
.oc-clue .def { text-decoration-color: var(--c-yellow); text-decoration-thickness: 4px; }
.oc-enum { font: 600 .62em/1 var(--f-grid); font-style: normal; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.oc-clue-ghost { color: var(--muted); }
.oc-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.oc-hint-chip { --accent: var(--c-yellow); }
.oc-hint-note { font: italic 15px/1.2 var(--f-body); color: var(--muted); }

/* --------------------------------------------------------- the answer */
.oc-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(14px, 1.4vw, 22px); }
.oc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.is-busy .oc-actions { opacity: .7; pointer-events: none; }

/* The squares. --n (set by the page) is the answer's width in squares,
   counting a half-square for each gap between words; the squares shrink to
   fit a phone and never grow past --bmax. */
.oc-boxes {
  --bmax: 50px;
  --box: min(var(--bmax), max(17px, calc((100vw - 2 * var(--pad-x) - 40px) / var(--n, 8))));
  position: relative; max-width: 100%;
}
.oc-page .oc-boxes { --bmax: 58px; }
.oc-box-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.oc-word { display: flex; }
.oc-box {
  position: relative; display: grid; place-items: center;
  width: var(--box); height: var(--box); flex: none;
  background: #fffdf8; color: #16140f; border: 2px solid #16140f;
  font: 700 calc(var(--box) * .56)/1 var(--f-grid); text-transform: uppercase;
  transition: background-color .12s;
}
.oc-box + .oc-box { margin-left: -2px; }
.oc-sep { width: calc(var(--box) * .5); flex: none; }
.oc-sep-hyphen { display: grid; place-items: center; font: 800 calc(var(--box) * .5)/1 var(--f-grid); color: var(--ink); }
.oc-boxes.is-focus .oc-box { background: #fff4c7; }
.oc-boxes.is-focus .oc-box.is-cursor { background: #ffb938; }
.oc-boxes.is-focus .oc-box-row { outline: 3px solid var(--c-blue); outline-offset: 4px; }
.oc-box.is-given { color: #b53a0c; background: #ffe1cf !important; }
.oc-box.is-given::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 calc(var(--box) * .26) calc(var(--box) * .26) 0;
  border-color: transparent #b53a0c transparent transparent;
}
.oc-boxes.is-solved .oc-box { background: #cfeedd; color: #0d5f35; }
.oc-boxes.is-revealed .oc-box { background: #ffe1cf; color: #b53a0c; }
.oc-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; cursor: text; z-index: 1;
}
.oc-boxes.is-shake { animation: oc-shake .42s ease; }
@keyframes oc-shake {
  0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.is-stamped .oc-boxes.is-solved .oc-box { animation: oc-stamp .55s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes oc-stamp { 0% { transform: scale(1.18); background: #f5b700; } 100% { transform: none; } }

.oc-verdict {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font: 700 13px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ok);
}
.oc-verdict .icon { width: 17px; height: 17px; }
.oc-verdict-revealed { color: var(--rev); }

.oc-msg { min-height: 1.45em; margin: 10px 0 0; font: italic 17px/1.4 var(--f-body); color: var(--muted); }
.oc-msg:empty { margin-top: 4px; }
.oc-msg-bad { color: var(--bad); font-style: normal; font-weight: 600; }

/* ------------------------------------------------ empty, fail, loading */
.oc-empty, .oc-fail, .oc-loading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oc-empty-title { margin: 0; font: 800 clamp(22px, 1.8vw, 30px)/1.15 var(--f-head); }
.oc-empty-body, .oc-fail-text { margin: 0; font: italic 18px/1.45 var(--f-body); color: var(--muted); }
.oc-loading .oc-clue { min-height: 1.3em; }

/* =============================================================== reveal */
.oc-reveal {
  margin-top: clamp(16px, 1.6vw, 26px); padding-top: clamp(16px, 1.6vw, 24px);
  border-top: 3px double var(--rule);
  animation: oc-in .4s ease both;
}
@keyframes oc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.oc-reveal:focus { outline: none; }

.oc-rv-head { margin-bottom: clamp(16px, 1.6vw, 26px); }
.oc-rv-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.oc-rv-state {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  font: 700 12.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ok-bg); color: var(--ok-ink); border: 1.5px solid var(--ok);
}
.oc-rv-state .icon { width: 15px; height: 15px; }
.oc-reveal-revealed .oc-rv-state { background: var(--rev-bg); color: var(--rev); border-color: var(--rev); }
.oc-rv-no { font: 600 12.5px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-rv-word { margin: 0; font: 900 clamp(40px, 5.4vw, 92px)/1 var(--f-head); letter-spacing: .012em; overflow-wrap: anywhere; }
.oc-rv-enum { font: 600 .32em/1 var(--f-grid); color: var(--muted); letter-spacing: .02em; }
.oc-rv-gloss { margin: 10px 0 0; max-width: 70ch; font: 400 clamp(18px, 1.35vw, 23px)/1.4 var(--f-body); color: var(--ink-2); }
.oc-rv-pos {
  display: inline-block; margin-right: 10px; padding: 2px 8px; vertical-align: 2px;
  font: 600 11.5px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--hair); background: var(--paper-2);
}
.oc-rv-nations { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.oc-rv-nations-k { font: 700 12px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.oc-rv-nation-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.oc-rv-nation-list li { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* The arrow ends its item, so a wrapped line never starts with one. */
.oc-rv-nation-list li:not(:last-child)::after { content: "→"; margin: 0 12px 0 3px; color: var(--muted); font-family: var(--f-grid); }

/* How the clue works is the longest read of the three, word by word, so its
   column is the widest. */
.oc-rv-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); gap: var(--gap); align-items: start; }
.oc-rv-cols > .oc-rv-sec + .oc-rv-sec { border-left: 1px solid var(--hair); padding-left: var(--gap); }
.oc-rv-sec { min-width: 0; }
.oc-rv-h {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font: 700 13px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.oc-rv-h::before { content: ""; width: 11px; height: 11px; background: var(--c-yellow); border: 1.5px solid var(--btn-line); flex: none; }
/* How the clue works is drawn by CC.renderParse (base.css → parse); here it
   only takes the desk's yellow. */
.oc-rv-how .parse { --accent: var(--c-yellow); }
.oc-rv-fact {
  margin-top: 18px; padding: 12px 16px 14px; border-left: 5px solid var(--c-yellow);
  background: color-mix(in srgb, var(--c-yellow) 15%, var(--card));
}
.oc-rv-fact .oc-rv-h { margin-bottom: 6px; }
.oc-rv-fact .oc-rv-h::before { display: none; }
.oc-rv-fact p { margin: 0; font: 17px/1.5 var(--f-body); }
.oc-rv-ety { margin: 0 0 16px; font: 17.5px/1.58 var(--f-body); color: var(--ink-2); }

/* ------------------------------------------------------------- journey */
.oc-journey { list-style: none; margin: 0; padding: 0; }
.oc-stage { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.oc-stage:not(.is-last)::before {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px;
  background: repeating-linear-gradient(var(--ink) 0 5px, transparent 5px 9px);
}
.oc-stage.is-last { padding-bottom: 0; }
.oc-stage-no {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--stage); color: #16140f; border: 2px solid var(--btn-line);
  font: 800 15px/1 var(--f-grid); box-shadow: 2px 2px 0 var(--btn-line);
}
.oc-stage-body { min-width: 0; padding-top: 2px; }
.oc-stage-body p { margin: 0; }
.oc-stage-lang { font: 700 13px/1.25 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.oc-stage-when { color: var(--muted); font-weight: 600; }
.oc-stage-form { margin-top: 2px !important; font: italic 700 clamp(19px, 1.4vw, 23px)/1.3 var(--f-head); overflow-wrap: anywhere; }
.oc-stage-gloss { font: italic 400 16px/1.3 var(--f-body); color: var(--muted); }
.oc-stage-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px !important; font: italic 15.5px/1.35 var(--f-body); color: var(--ink-2); }

.oc-flags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.oc-flag {
  display: inline-block; width: 24px; height: 18px; object-fit: cover; vertical-align: middle; flex: none;
  border: 1px solid rgba(22,20,15,.45); box-shadow: 1.5px 1.5px 0 var(--btn-line);
  background: var(--paper-2);
}
.oc-flag-md { width: 28px; height: 21px; }

/* ----------------------------------------------------------------- map */
.oc-rv-pics { display: flex; flex-direction: column; gap: 18px; }
.oc-map-frame { aspect-ratio: 16 / 10; background: #f3ead3; background-image: none; }
.oc-map-svg { display: block; width: 100%; height: 100%; }
.oc-map-sea { fill: #eadfc2; }
.oc-map-dot { fill: rgba(27,25,20,.17); }
.oc-map-land path {
  fill: #fbf7ec; stroke: #1b1914; stroke-width: .7; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.oc-map-land path.oc-map-hl { fill: color-mix(in srgb, var(--stage) 78%, #fbf7ec); stroke-width: 1.1; }
.oc-map-route-under, .oc-map-route { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.oc-map-route-under { stroke: #fbf7ec; stroke-width: 6; opacity: .85; }
.oc-map-route { stroke: #1b1914; stroke-width: 2.6; stroke-dasharray: 8 6; }
.oc-map-stop circle { fill: var(--stage); stroke: #1b1914; stroke-width: 2; vector-effect: non-scaling-stroke; }
.oc-map-stop circle.oc-map-stop-ring { fill: #fbf7ec; stroke: none; }
.oc-map-stop text { fill: #16140f; font-family: var(--f-grid); font-weight: 800; }
.oc-pic .plate-photo img { max-height: 320px; }

/* ================================================================ page */
.oc-page-desk { margin-bottom: clamp(8px, 1vw, 16px); }
.oc-back { margin: 0 0 12px; font: 600 13px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.oc-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.oc-back .icon { width: 15px; height: 15px; }
.oc-tiers { margin: 0 0 16px; }
.oc-tiers-k { font: 700 12px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.oc-tier-chip { --tone: var(--tier); }
.oc-tier-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier); border: 1.5px solid var(--btn-line); flex: none; }
.oc-tier-chip.is-on { color: #16140f; }
.oc-tier-chip.is-on .oc-tier-dot { border-color: currentColor; }

.oc-stats { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.oc-stat {
  --tone: var(--c-green);
  display: flex; flex-direction: column; gap: 4px; min-width: 96px; padding: 9px 13px 10px;
  background: var(--card); color: var(--ink); border: 2px solid var(--btn-line); border-top: 6px solid var(--tone);
  box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
}
.oc-stat-orange { --tone: var(--c-orange); } .oc-stat-blue { --tone: var(--c-blue); } .oc-stat-red { --tone: var(--c-red); }
.oc-stat-v { font: 800 clamp(24px, 1.8vw, 32px)/1 var(--f-head); }
.oc-stat-k { font: 600 11px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.oc-book-grid { list-style: none; margin: 0 0 clamp(20px, 2vw, 36px); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.oc-book-grid > li { min-width: 0; }
/* A guest's book is the paper's sign-in panel (oneclue.js guestBook), set
   off from the foot of the page as the cards are. */
.oc-book-guest .signin-panel { margin-bottom: clamp(20px, 2vw, 36px); }
.oc-bk {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 13px 16px 14px; color: var(--ink); text-decoration: none;
  background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--tier);
  transition: transform .1s, box-shadow .1s;
}
.oc-bk:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim); color: var(--ink); }
.oc-bk:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.oc-bk-kicker { font: 600 11.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-bk-word { font: 800 clamp(22px, 1.6vw, 27px)/1.1 var(--f-head); letter-spacing: .02em; overflow-wrap: anywhere; }
.oc-bk-clue { font: italic 15.5px/1.38 var(--f-body); color: var(--ink-2); }
.oc-bk-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-bk-state { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.oc-bk-state .icon { width: 14px; height: 14px; }
.oc-bk-state.is-ok { color: var(--ok); }
.oc-bk-state.is-rev { color: var(--rev); }

/* ======================================================== labels on fills */
@supports (color: color(from red srgb-linear r g b)) {
  .oc-stage-no { color: color(from var(--stage) var(--on-of)); }
  .oc-map-stop text { fill: color(from var(--stage) var(--on-of)); }
  .oc-tier-chip.is-on { color: color(from var(--tier) var(--on-of)); }
}

/* ========================================================== responsive */
@media (max-width: 1099px) {
  .oc-rv-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .oc-rv-cols > .oc-rv-sec.oc-rv-pics {
    grid-column: 1 / -1; border-left: 0; padding-left: 0; flex-direction: row; align-items: flex-start;
    border-top: 1px solid var(--hair); padding-top: 18px;
  }
  .oc-rv-pics > * { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 699px) {
  .oc-strip { padding-left: 16px; padding-right: 12px; box-shadow: inset 5px 0 0 var(--c-yellow); }
  .oc-page { padding: 16px 14px; }
  .oc-head-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .oc-rv-cols { grid-template-columns: minmax(0, 1fr); }
  .oc-rv-cols > .oc-rv-sec + .oc-rv-sec { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 18px; }
  .oc-rv-pics { flex-direction: column !important; }
  .oc-actions { width: 100%; }
  .oc-actions .oc-go, .oc-actions .oc-next, .oc-actions .oc-skip { flex: 1 1 auto; justify-content: center; }
  .oc-actions .btn-icon { padding: 0; flex: none; }
  .oc-stats { gap: 8px; }
  .oc-stat { min-width: 0; flex: 1 1 40%; }
}