/* New design (body.ui2). Loaded only when the new design is on, so the
   current site is untouched until it's switched on in Admin → Tools.
   Colours are the site's own tokens from style.css (:root). */

body.ui2 { --dots: #4a2c36; --sheet: #1b1015; --sheet-2: #241519; }

/* ---------- page frame: no side menu, one centred column ---------- */
body.ui2 .shell { display: block; max-width: none; min-height: 0; }
body.ui2 .main { max-width: 1240px; margin: 0 auto; padding: 0 40px 60px; }
body.ui2 .top.in-shell { padding-left: 0; padding-right: 0; }
body.tb-open { overflow: hidden; }

/* ---------- top bar ---------- */
.tb { max-width: 1240px; margin: 0 auto; padding: 18px 40px 0; }
.tb-in { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.tb-brand { display: inline-flex; align-items: center; gap: 12px; font: 700 26px/1 Play, sans-serif; color: var(--ink); text-decoration: none; }
.tb-brand svg { width: 40px; height: 40px; color: var(--gold); flex: none; }
.tb-brand:hover span { color: var(--gold); }
.tb-search { position: relative; justify-self: center; width: min(420px, 100%); }
.tb-search input { width: 100%; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 40px 9px 16px; color: var(--ink); font: 16px Play, sans-serif; -webkit-appearance: none; appearance: none; }
.tb-search input::placeholder { color: #8a7069; }
.tb-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); }
.tb-search input::-webkit-search-cancel-button { display: none; }
.tb-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 12px Play, sans-serif; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; pointer-events: none; }
.tb-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--sheet); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; z-index: 9100; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); max-height: 70vh; overflow: auto; }
.tb-results[hidden] { display: none; }
.tb-hit { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.tb-hit.on, .tb-hit:hover { background: var(--sheet-2); }
.tb-hit-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tb-hit-top small { color: var(--gold); font-size: 12px; white-space: nowrap; }
.tb-hit-blurb { color: var(--muted); font-size: 14px; }
.tb-empty { margin: 8px 12px; color: var(--muted); font-size: 14px; }
.tb-links { display: flex; gap: 18px; align-items: center; }
.tb-btn, .tb-link { background: none; border: 0; color: var(--muted); font: 15px Play, sans-serif; cursor: pointer; padding: 6px 2px; text-decoration: none; }
.tb-btn:hover, .tb-link:hover, .tb-btn[aria-expanded="true"] { color: var(--ink); }
#tbMenuBtn { border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; color: var(--ink); }
#tbMenuBtn:hover, #tbMenuBtn[aria-expanded="true"] { border-color: var(--gold); }
.tb-acct { position: relative; }
.tb-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 290px; background: var(--sheet); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; z-index: 9100; display: grid; gap: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.tb-pop[hidden] { display: none; }
.tb-pop p { margin: 0; }
.tb-pop-who { font-weight: 700; }
.tb-pop-who span { color: var(--muted); font-weight: 400; font-size: 14px; }
.tb-pop-role { color: var(--muted); font-size: 14px; }
.tb-pop a { color: var(--ink); text-decoration: none; padding: 3px 0; }
.tb-pop a:hover { color: var(--gold); }
.tb-burger { display: none; }
.tb-rule { height: 6px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); opacity: .7; margin-top: 16px; }
.tb-preview { max-width: 1240px; margin: 10px auto 0; padding: 0 40px; display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 14px; }
.tb-notice { max-width: 1240px; margin: 12px auto 0; padding: 0 40px; color: #ffe8e8; font-size: 15px; white-space: pre-wrap; }
.tb-notice b { color: var(--gold); margin-right: 6px; }

/* ---------- All tools panel ---------- */
.tb-panel { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 4, 6, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto; padding: 20px; }
.tb-panel[hidden] { display: none; }
.tb-panel-in { position: relative; max-width: 1240px; margin: 64px auto 40px; background: #180e13; border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 30px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.tb-close { position: absolute; top: 18px; right: 20px; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font: 14px Play, sans-serif; padding: 6px 14px; cursor: pointer; }
.tb-close:hover { color: var(--ink); border-color: var(--gold); }
.tb-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 34px; }
.tb-sec h2 { font: 700 20px/1.1 Play, sans-serif; color: var(--gold); margin: 0 0 2px; }
.tb-sec-line { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.tb-sec-coyote { grid-column: span 2; column-count: 2; column-gap: 34px; }
.tb-sec-coyote h2, .tb-sec-coyote .tb-sec-line { column-span: all; }
.tb-item { display: grid; padding: 6px 0 7px; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--dots); break-inside: avoid; }
.tb-item.sub { padding-left: 14px; }
.tb-item:hover .tb-item-name, .tb-item.on .tb-item-name { color: var(--gold); }
.tb-item-blurb { color: var(--muted); font-size: 13px; }
.tb-new { color: var(--gold); font-size: 12px; font-weight: 700; margin-left: 6px; }
.tb-home { display: inline-grid; border: 0; margin: 0 0 14px; font-weight: 700; }
.tb-search-panel { display: none; width: 100%; margin: 0 0 14px; }
.tb-search-panel .tb-results { position: static; margin-top: 6px; box-shadow: none; }
.tb-panel-foot { display: flex; gap: 20px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.tb-panel-foot a { color: var(--muted); text-decoration: none; }
.tb-panel-foot a:hover { color: var(--ink); }

/* ---------- home page ---------- */
.h2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; margin-top: 44px; align-items: start; }
.h2-hello h1 { font: 700 54px/1.05 Play, sans-serif; margin: 0; color: var(--ink); }
.h2-lede { margin: 14px 0 0; color: var(--muted); font-size: 19px; max-width: 36em; }
.h2-lede p { margin: 0 0 10px; }
.h2-lede a { color: var(--gold); }
.h2-access { margin: 14px 0 0; color: var(--muted); font-size: 15px; max-width: 40em; }
.h2-course { margin-top: 50px; }
.h2-course-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.h2-course-head h2 { font: 700 26px/1 Play, sans-serif; margin: 0; color: var(--gold); }
.h2-course-head span { color: var(--muted); font-size: 15px; }
.h2-cols { column-count: 2; column-gap: 44px; }
.h2-dish { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; color: var(--ink); text-decoration: none; break-inside: avoid; }
.h2-dish.sub { padding-left: 14px; }
.h2-dish-name { white-space: nowrap; flex: none; }
.h2-dish:hover .h2-dish-name { color: var(--gold); }
.h2-dots { flex: 1 0 14px; border-bottom: 2px dotted var(--dots); transform: translateY(-5px); }
.h2-dish-line { color: var(--muted); font-size: 14.5px; text-align: right; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-side { position: sticky; top: 24px; display: grid; gap: 18px; }
.h2-card { background: #1f1318; border: 1px solid #4a2c36; padding: 24px 24px 22px; position: relative; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.h2-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201, 162, 39, .45); pointer-events: none; }
.h2-card h2, .h2-new h2, .h2-box h2 { font: 700 21px/1.1 Play, sans-serif; margin: 0; color: var(--gold); }
.h2-when { margin: 3px 0 10px; color: var(--muted); font-size: 14px; }
.h2-rows { display: grid; }
.h2-row { display: grid; padding: 9px 0; border-top: 1px dotted var(--dots); color: var(--ink); text-decoration: none; position: relative; }
.h2-row:first-child { border-top: 0; }
.h2-row span { color: var(--muted); font-size: 15px; }
.h2-row.urgent b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 8px; vertical-align: middle; }
.h2-row:hover b { color: var(--gold); }
.h2-empty { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.h2-go { display: block; text-align: center; margin-top: 16px; background: var(--wine); color: #fff; padding: 11px; font-weight: 700; border-radius: 999px; text-decoration: none; }
.h2-go:hover { filter: brightness(1.12); }
.h2-go[hidden] { display: none; }
.h2-new, .h2-box { border: 1px solid var(--line); padding: 20px 22px; }
.h2-new a { display: grid; padding: 7px 0; color: var(--ink); text-decoration: none; }
.h2-new h2 { margin-bottom: 6px; }
.h2-new a span { color: var(--muted); font-size: 14px; }
.h2-new a:hover b { color: var(--gold); }
.h2-box h2 { margin-bottom: 8px; }
.h2-box .poll-opts { margin-top: 10px; }
.h2-updates article { border-top: 1px dotted var(--dots); padding: 8px 0; }
.h2-updates article:first-of-type { border-top: 0; }
.h2-updates p { margin: 0; white-space: pre-wrap; font-size: 15px; }
.h2-date { color: var(--muted); font-size: 13px !important; }
.h2-more summary { cursor: pointer; color: var(--gold); font-size: 14px; margin-top: 6px; }
.h2-social { display: flex; gap: 18px; margin: 0; font-size: 15px; }
.h2-social a { color: var(--muted); text-decoration: none; }
.h2-social a:hover { color: var(--gold); }
.h2-foot { margin: 70px 0 0; color: var(--muted); font-size: 15px; text-align: center; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 900px) {
  body.ui2 .main { padding: 0 16px 50px; }
  .tb { padding: 12px 16px 0; }
  .tb-in { grid-template-columns: 1fr auto; gap: 12px; }
  .tb-in > .tb-search, .tb-links { display: none; }
  .tb-burger { display: inline-flex; align-items: center; background: var(--wine); color: #fff; border: 0; border-radius: 999px;
    padding: 9px 18px; font: 700 15px Play, sans-serif; cursor: pointer; }
  .tb-brand { font-size: 22px; }
  .tb-brand svg { width: 34px; height: 34px; }
  .tb-rule { margin-top: 12px; }
  .tb-preview, .tb-notice { padding: 0 16px; flex-wrap: wrap; }
  .tb-preview { font-size: 13px; gap: 8px; }
  .tb-preview .btn { padding: 4px 10px; font-size: 13px; }
  .tb-panel { padding: 0; }
  .tb-panel-in { margin: 0; border-radius: 0; border: 0; min-height: 100%; padding: 16px 16px 30px; }
  .tb-close { top: 14px; right: 16px; }
  .tb-search-panel { display: block; margin-top: 44px; }
  .tb-cols { grid-template-columns: 1fr; gap: 26px; }
  .tb-sec-coyote { grid-column: auto; column-count: 1; }
  .h2-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 24px; }
  .h2-side { position: static; order: -1; }
  .h2-hello h1 { font-size: 38px; }
  .h2-lede { font-size: 17px; }
  .h2-cols { column-count: 1; }
  .h2-dish-line { display: none; }
  .h2-course { margin-top: 36px; }
  .h2-course-head h2 { font-size: 23px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .tb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .h2-cols { column-count: 1; }
}

/* "Where you left off" as a light card, so it stands out from the page. */
.h2-card { background: #f2e8d6; color: #2a1418; border: 0; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); }
.h2-card::before { border-color: rgba(139, 46, 74, .35); }
.h2-card h2 { color: #7a2440; }
.h2-card .h2-when, .h2-card .h2-empty, .h2-card .h2-row span { color: #6b5650; }
.h2-card .h2-row { color: #2a1418; border-top-color: #cfbca3; }
.h2-card .h2-row:hover b { color: var(--wine); }
.h2-card .h2-row.urgent b::after { background: var(--wine); }
.h2-card .h2-go:focus-visible { outline: 2px solid #7a2440; outline-offset: 2px; }
.tb-role { flex: 1; color: var(--muted); }
@media (max-width: 900px) { .tb-panel-foot { flex-wrap: wrap; gap: 10px 20px; } .tb-role { flex-basis: 100%; } }

/* =====================================================================
   Round 2: shared pieces every tool uses (headings, panels, fields,
   buttons, folds, pills, pop-ups). :where() keeps these at the same
   strength as the old rules, so any tool-specific style still wins.
   Only looks change here, never layout or behaviour.
   ===================================================================== */
:where(body.ui2) {
  --ui2-field: #22141a;
  --ui2-field-line: #43293a;
  --ui2-panel: #1a0f14;
  --ui2-panel-line: #3a242c;
  --ui2-focus: 0 0 0 3px rgba(201, 162, 39, .28);
}

/* page header: sentence-case line above a big title, gold double rule below */
:where(body.ui2) .top.in-shell { padding-top: 34px; padding-bottom: 18px; margin-bottom: 18px; position: relative; align-items: flex-end; }
:where(body.ui2) .top.in-shell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 39, .55), rgba(201, 162, 39, .08) 70%, transparent); }
:where(body.ui2) .eyebrow { text-transform: none; letter-spacing: .01em; font-size: .9rem; color: var(--muted); margin: 0 0 4px; font-weight: 400; }
:where(body.ui2) h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; letter-spacing: -.005em; font-weight: 700; }
:where(body.ui2) h2 { font-size: 1.22rem; color: var(--gold); letter-spacing: 0; }
:where(body.ui2) h3 { color: var(--ink); }
:where(body.ui2) .save-note { margin: 8px 0 0; font-size: .92rem; }
:where(body.ui2) .tool-article { color: var(--gold); }
:where(body.ui2) .lede { font-size: 1.08rem; line-height: 1.6; max-width: 48em; }
:where(body.ui2) .hint { font-size: .92rem; line-height: 1.5; }
:where(body.ui2) a { text-underline-offset: 3px; }
:where(body.ui2) a:focus-visible, :where(body.ui2) button:focus-visible, :where(body.ui2) summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* panels */
:where(body.ui2) .panel section, :where(body.ui2) .diary-block, :where(body.ui2) .preview {
  background: var(--ui2-panel); border: 1px solid var(--ui2-panel-line); border-radius: 10px; }
:where(body.ui2) .diary-block { padding: 22px 22px 24px; }
:where(body.ui2) .panel section { padding: 22px 22px 12px; }
:where(body.ui2) .diary-block h2, :where(body.ui2) .panel section h2 { font-size: 1.22rem; }

/* fields */
:where(body.ui2) label { color: var(--muted); font-size: .9rem; }
:where(body.ui2) input, :where(body.ui2) select, :where(body.ui2) textarea {
  background: var(--ui2-field); border: 1px solid var(--ui2-field-line); border-radius: 8px; padding: 10px 12px; color: var(--ink);
  font-family: Play, sans-serif; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
:where(body.ui2) input::placeholder, :where(body.ui2) textarea::placeholder { color: #8a7069; }
:where(body.ui2) input:focus, :where(body.ui2) select:focus, :where(body.ui2) textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--ui2-focus); }
:where(body.ui2) input[type="checkbox"], :where(body.ui2) input[type="radio"] { accent-color: var(--gold); box-shadow: none; }
:where(body.ui2) input[type="range"] { accent-color: var(--gold); background: transparent; border: 0; padding: 0; box-shadow: none; }
:where(body.ui2) input[type="color"] { padding: 2px; height: 40px; }
:where(body.ui2) select { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* buttons */
:where(body.ui2) .btn { border-radius: 999px; border: 1px solid var(--ui2-field-line); background: #24151b; color: var(--ink);
  padding: 10px 18px; font-family: Play, sans-serif; font-weight: 700; letter-spacing: .01em; transition: border-color .15s, background .15s, filter .15s; }
:where(body.ui2) .btn:hover { border-color: var(--gold); }
:where(body.ui2) .btn.primary { background: var(--wine); border-color: var(--wine); color: #fff; }
:where(body.ui2) .btn.primary:hover { filter: brightness(1.12); border-color: var(--wine); }
:where(body.ui2) .btn.ghost { background: transparent; color: var(--muted); }
:where(body.ui2) .btn.ghost:hover { color: var(--ink); }
:where(body.ui2) .btn.danger { background: transparent; border-color: var(--wine); color: #f4b9bf; }
:where(body.ui2) .btn.danger:hover { background: var(--wine); color: #fff; }
:where(body.ui2) .btn.sm { padding: 5px 12px; font-size: .88rem; }
:where(body.ui2) .btn:disabled, :where(body.ui2) .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
:where(body.ui2) .btn:focus-visible { box-shadow: var(--ui2-focus); outline: none; }

/* folds (details) */
:where(body.ui2) .fold { background: transparent; border: 1px solid var(--ui2-panel-line); border-radius: 8px; padding: 10px 14px 12px; }
:where(body.ui2) .fold > summary { color: var(--gold); font-weight: 700; }
:where(body.ui2) .fold > summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--muted); font-weight: 400; }
:where(body.ui2) .fold[open] > summary::before { content: "\2212"; }

/* pills, tags, banners */
:where(body.ui2) .pill { border-color: var(--ui2-field-line); color: var(--muted); }
:where(body.ui2) .pill.on { background: var(--wine); border-color: var(--wine); color: #fff; }
:where(body.ui2) .banner { border-radius: 8px; padding: 10px 12px; }

/* pop-ups and gates */
:where(body.ui2) .rules-card, :where(body.ui2) .age-box, :where(body.ui2) .gate-card { border-radius: 12px; background: #1b1015; }
:where(body.ui2) .rules-card { border-color: rgba(201, 162, 39, .7); }

/* the beta feedback box at the bottom of tools */
:where(body.ui2) .beta-box section { border-style: dashed; }

@media (max-width: 900px) {
  :where(body.ui2) .top.in-shell { padding-top: 22px; flex-wrap: wrap; gap: 10px; }
  :where(body.ui2) .diary-block { padding: 18px 16px 20px; }
}
/* Checkboxes were stretched to the full width of their row; give them their real size. */
:where(body.ui2) input[type="checkbox"], :where(body.ui2) input[type="radio"] { width: 18px; height: 18px; padding: 0; }
:where(body.ui2) label.switch { display: flex; align-items: center; gap: 12px; color: var(--ink); }
:where(body.ui2) label.switch input { margin: 0; flex: none; order: -1; }
/* Some games style every <header> and <button> on their page; keep the top bar out of that. */
body.ui2 header.tb { display: block; justify-content: normal; align-items: normal; gap: 0; flex-direction: row; }
body.ui2 .tb button, body.ui2 .tb-panel button { font-family: Play, sans-serif; min-height: 0; }
body.ui2 .tb .tb-btn { border-radius: 0; font-weight: 400; }

/* =====================================================================
   Round 3a: Coyote games (body.ui2-game). The games share one inline
   style kit (.wrap, header, .stage, .stats, .panel, buttons, .stop).
   These rules give them the site's look. The Stop button keeps its
   size and colour on purpose.
   ===================================================================== */
:where(body.ui2-game) .wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
:where(body.ui2-game) .wrap > header { border-bottom: 1px solid rgba(201, 162, 39, .32); padding-bottom: 16px; margin-bottom: 18px; padding-top: 26px; }
:where(body.ui2-game) .eyebrow { color: var(--muted); }
:where(body.ui2-game) .stage { border-radius: 12px; border-color: #3a242c; box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .08); }
:where(body.ui2-game) .phase { letter-spacing: .04em; text-transform: none; font-size: 15px; }
:where(body.ui2-game) .chans { text-transform: none; letter-spacing: .02em; font-size: 13px; }
:where(body.ui2-game) .stat { background: #1a0f14; border-color: #3a242c; border-radius: 8px; }
:where(body.ui2-game) .stat em { text-transform: none; letter-spacing: .01em; font-size: 12.5px; }
:where(body.ui2-game) .stat strong { font-size: 1.15rem; }
:where(body.ui2-game) .style-btn em { text-transform: none; letter-spacing: 0; font-size: 12px; }
:where(body.ui2-game) .style-btn { border-radius: 8px; background: #1f1217; }
:where(body.ui2-game) .style-btn.on { background: #2c1720; }
:where(body.ui2-game) .panel, :where(body.ui2-game) .rules, :where(body.ui2-game) .diary { background: #1a0f14; border-color: #3a242c; border-radius: 10px; }
:where(body.ui2-game) .rules summary { color: var(--gold); font-weight: 700; }
:where(body.ui2-game) .field span { color: var(--muted); font-size: 14px; }
:where(body.ui2-game) .field b { color: var(--ink); }
/* Only plain buttons and the games' own .primary / .go: buttons with their own
   class (Live Wire's mode cards, Pairs tiles...) keep their shape. */
:where(body.ui2-game) button:not([class]) { border-radius: 999px; padding: 11px 18px; font-weight: 700; background: #24151b; border: 1px solid #43293a; color: var(--ink); }
:where(body.ui2-game) button:not([class]):hover:not(:disabled) { border-color: var(--gold); }
:where(body.ui2-game) button.primary, :where(body.ui2-game) button.go { border-radius: 999px; padding: 11px 18px; font-weight: 700; }
:where(body.ui2-game) button.primary { background: var(--wine); border-color: var(--wine); color: #fff; }
:where(body.ui2-game) button.primary:hover:not(:disabled) { filter: brightness(1.12); border-color: var(--wine); }
:where(body.ui2-game) button.go { background: var(--gold); border-color: var(--gold); color: #1b1015; }
:where(body.ui2-game) button.go:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--gold); }
:where(body.ui2-game) .stop { border-radius: 12px; letter-spacing: .06em; }
:where(body.ui2-game) .warn { border-radius: 8px; }
:where(body.ui2-game) .log { border-radius: 8px; background: #120a0e; }
/* Small labels in spaced capitals, here and there across tools and games: sentence case instead. */
:where(body.ui2) .krow .cat, :where(body.ui2) .diary-dow, :where(body.ui2) .lt-remind-kicker, :where(body.ui2) .m-card-cat,
:where(body.ui2) .j-p-phase, :where(body.ui2) .scene-score-dock .tiny, :where(body.ui2) .rule-tag, :where(body.ui2) .exp-tag {
  text-transform: none; letter-spacing: .02em; }
:where(body.ui2-game) .block h3, :where(body.ui2-game) label.field span, :where(body.ui2-game) .hud-label { text-transform: none; letter-spacing: .02em; }
:where(body.ui2-game) .block h3 { font-size: 15px; }
:where(body.ui2-game) .block { border-radius: 8px; background: #160c11; }
/* Posture trainer / Remote trainer (trainer.css): sentence case labels. The Stop button stays as it is. */
:where(body.ui2) .sec-label, :where(body.ui2) .out-chip em, :where(body.ui2) .session-clock .clock-label,
:where(body.ui2) .session-clock .clock-state, :where(body.ui2) .shock-banner .kicker, :where(body.ui2) .shock-banner .nums span,
:where(body.ui2) label.field span.k, :where(body.ui2-game) .stat em { text-transform: none; letter-spacing: .02em; }
:where(body.ui2) .sec-label { font-size: 1.05rem; color: var(--gold); }
:where(body.ui2) label.field span.k { font-size: 14px; }
/* Allow-rows are switches: box first, text right after it. */
:where(body.ui2) label.switch { justify-content: flex-start; }
/* Pairs: label above the number in the score strip. */
body.ui2[data-page="pairs"] .pairs-hud div { display: grid; gap: 2px; }
body.ui2[data-page="pairs"] .pairs-hud b { font-size: 1.1rem; }
:where(body.ui2-game) .rules summary { text-transform: none; letter-spacing: .01em; }

/* Trainer + remote trainer (trainer.css): swap the olive, green and lavender
   buttons for the site palette. Joint buttons keep their colours on purpose,
   they match the dots on the stick figure. */
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button { border-radius: 999px; border-color: #43293a; background: #24151b; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button:hover:not(:disabled) { border-color: var(--gold); }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.primary { background: var(--wine); border-color: var(--wine); color: #fff; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.arm { background: var(--gold); border-color: var(--gold); color: #1b1015; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.practice { background: transparent; border-color: var(--gold); color: var(--gold); }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.demo { background: transparent; border-color: #43293a; color: var(--ink); }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .presets button { border-radius: 8px; padding: 9px 4px; min-width: 0; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .presets button.active { background: #2c1720; border-color: var(--gold); color: var(--gold); }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .presets button.cruel.active { background: #2a1416; border-color: #e24a3b; color: #ff8a70; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.stop { border-radius: 12px; background: #e24a3b; color: #fff; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.stop:hover { background: #b5362b; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap button.stop.locked { background: #3a2a28; color: #8a7a76; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .wrap select { border-radius: 8px; }
body.ui2:is([data-page="trainer"], [data-page="remote"]) .status-pill.on { color: var(--gold); border-color: rgba(201, 162, 39, .5); }

/* Admin preview strip: one compact line on phones. */
@media (max-width: 900px) {
  body.ui2 .tb-preview { font-size: 12px; gap: 8px; padding-top: 6px; padding-bottom: 6px; flex-wrap: nowrap; line-height: 1.3; }
  body.ui2 .tb-preview span { flex: 1; min-width: 0; }
  body.ui2 .tb-preview .btn { padding: 5px 10px; font-size: 12px; white-space: nowrap; min-height: 0; flex: none; }
}

/* Small toolbar Stop buttons (Pairs, Waveform, Wave library) read as stop. */
body.ui2 button.btn#btnStop { border-color: #e24a3b; color: #ff9a88; }
body.ui2 button.btn#btnStop:hover:not(:disabled) { background: #3a1416; border-color: #ff6b5a; color: #fff; }

/* Pages whose title sits straight in .main (Locktober, Grounding, WIP): same top room as the others. */
:where(body.ui2) .main > .eyebrow:first-child { padding-top: 34px; margin-top: 0; }

/* Diary month bar: Prev, month, Next on one line. */
:where(body.ui2) .diary-block > .row:has(> #monthLabel) { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
:where(body.ui2) .diary-block > .row:has(> #monthLabel) .btn { margin: 0; }
:where(body.ui2) .diary-block > .row > #monthLabel { margin: 0; min-width: 9em; text-align: center; }
@media (max-width: 520px) { :where(body.ui2) .diary-block > .row > #monthLabel { min-width: 0; flex: 1; font-size: 1.05rem; } }
/* Small inline selects (Task receiver "Tasks per person"): room for the arrow. */
body.ui2 .inline-pick select { padding: 6px 30px 6px 10px; min-width: 64px; }

/* The hidden attribute always wins over a display rule in the new design. */
body.ui2 [hidden] { display: none !important; }
:where(body.ui2) .diary-picks { margin-bottom: 10px; }
:where(body.ui2) .limit-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 14px; }

/* Scene builder tick lists: two columns on wide screens, tighter rows. */
:where(body.ui2) .checks { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 16px; row-gap: 2px; }
:where(body.ui2) .checks > label { margin-bottom: 0; }
/* Handler "How it runs": same +/- fold as the rest. */
:where(body.ui2) .rules-box > summary { color: var(--gold); font-weight: 700; cursor: pointer; list-style: none; padding: 6px 0; }
:where(body.ui2) .rules-box > summary::-webkit-details-marker { display: none; }
:where(body.ui2) .rules-box > summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--muted); font-weight: 400; }
:where(body.ui2) .rules-box[open] > summary::before { content: "\2212"; }

/* Shock Guess difficulty row: fit four on a phone. */
:where(body.ui2-game) .diffs button { padding: 9px 6px; min-width: 0; font-size: 13px; border-radius: 8px; }
@media (max-width: 520px) { :where(body.ui2-game) .diffs { grid-template-columns: repeat(2, 1fr); } }

/* Numbered key lists (Reddit how-to): a narrow number column. */
:where(body.ui2) ol.key-list li { grid-template-columns: 28px 1fr; }
@media (max-width: 700px) {
  :where(body.ui2) ul.key-list li, :where(body.ui2) div.key-list > div { grid-template-columns: 88px 1fr; }
  /* Saved presets: name on top, Save / Load / Delete side by side. */
  :where(body.ui2) .preset-slot { grid-template-columns: 1fr 1fr 1fr; }
  :where(body.ui2) .preset-slot .btn { margin: 0; }
}

/* Locktober badge header: title on its own line on phones, buttons below. */
@media (max-width: 520px) {
  :where(body.ui2) .badge-head { flex-wrap: wrap; }
  :where(body.ui2) .badge-head h3 { flex: 1 0 100%; margin-bottom: 4px; }
}

/* Button labels stay on one line; rows wrap instead. */
:where(body.ui2) .btn { white-space: nowrap; }

/* ---------- Round 3c: pages without the site menu (_slim.html) ----------
   Partner links, the public task page, receipts, the remote guest.
   The bar is the logo only, at the width of the page under it. */
body.ui2-slim .tb-slim { max-width: 980px; padding: 16px 16px 0; }
body.ui2-slim .tb-slim .tb-in { grid-template-columns: auto 1fr; gap: 16px; }
body.ui2-slim .tb-slim .tb-brand { font-size: 22px; gap: 10px; }
body.ui2-slim .tb-slim .tb-brand svg { width: 34px; height: 34px; }
body.ui2-slim .tb-slim .tb-brand:hover span { color: var(--ink); }
.tb-slim-note { justify-self: end; color: var(--muted); font-size: 14px; text-align: right; }
body.ui2-slim .tb-slim .tb-rule { margin-top: 12px; }
body.ui2-slim .tb-slim-preview { max-width: 980px; padding: 0 16px; }
body.ui2-slim[data-page="diary"] .tb-slim, body.ui2-slim[data-page="diary"] .tb-slim-preview { max-width: 920px; }
body.ui2-slim[data-mode="public"] .tb-slim, body.ui2-slim[data-mode="public"] .tb-slim-preview { max-width: 860px; }
body.ui2-slim[data-mode="receipt"] .tb-slim, body.ui2-slim[data-mode="receipt"] .tb-slim-preview { max-width: 760px; }
body.ui2-slim[data-page="remote"] .tb-slim, body.ui2-slim[data-page="remote"] .tb-slim-preview { max-width: 552px; }
body.ui2 .main.jar-partner-main, body.ui2 .main.pk-partner-main { max-width: 980px; padding: 4px 16px 80px; }
body.ui2-slim .main > .top.in-shell:first-child, body.ui2-slim .main > header.top:first-child { padding-top: 22px; }
@media (max-width: 900px) {
  body.ui2-slim .tb-slim .tb-brand { font-size: 19px; }
  body.ui2-slim .tb-slim .tb-brand svg { width: 30px; height: 30px; }
  .tb-slim-note { font-size: 13px; }
}

/* ---------- Round 3c: login doors (_gatemark.html) ---------- */
body.ui2.gate { background: radial-gradient(ellipse 80% 60% at 50% 0%, #24121a 0%, var(--bg) 70%) fixed, var(--bg); }
body.ui2 .gate-card { background: #1a0f14; border: 1px solid #3a242c; border-radius: 14px; padding: 30px 30px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(201, 162, 39, .18); }
.gate-mark { width: 54px; height: 54px; color: var(--gold); margin: 0 0 14px; }
.gate-mark svg { width: 100%; height: 100%; display: block; }
body.ui2 .gate-card h1 { font-size: clamp(26px, 6vw, 34px); margin: 2px 0 10px; }
body.ui2 .gate-card .lede { line-height: 1.5; }
body.ui2 .gate-card .lede a, body.ui2 .gate-card .fine a { color: var(--gold); }
body.ui2 .gate-card .btn { margin-top: 6px; }
body.ui2 .gate-card .btn.primary { padding: 12px 22px; }
:where(body.ui2) #takeCustom { min-width: 96px; }
body.ui2-slim .wrap.guest-wrap { max-width: 552px; }

/* =====================================================================
   Round 4: admin (body.ui2-adm, templates/admin.html). Same bar as the
   site: logo + Studio on the left, Site / Library / Stats, View site and
   Log out on the right, gold double rule, then the tabs of that group.
   ===================================================================== */
body.ui2-adm { --adm-w: 1240px; }
body.ui2-adm .admin-top { max-width: var(--adm-w); margin: 0 auto; padding: 18px 40px 0; display: grid;
  grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; row-gap: 0; }
body.ui2-adm .admin-top::after { content: none; }
body.ui2-adm .admin-brand { display: flex; align-items: center; }
.adm-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 700 26px/1 Play, sans-serif; }
.adm-mark svg { width: 40px; height: 40px; color: var(--gold); flex: none; }
.adm-mark:hover span { color: var(--gold); }
body.ui2-adm .admin-nav { display: contents; }
body.ui2-adm .admin-cats { display: flex; align-items: center; justify-content: flex-end; gap: 6px 22px; flex-wrap: wrap; }
body.ui2-adm .admin-cat { border: 0; border-radius: 0; background: none; padding: 8px 2px; font: 400 16px Play, sans-serif; color: var(--muted); }
body.ui2-adm .admin-cat:hover { color: var(--ink); }
body.ui2-adm .admin-cat.on { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--gold); }
body.ui2-adm .admin-cat.out { margin-left: 0; font-weight: 400; font-size: 15px; }
body.ui2-adm .admin-cat.adm-site { margin-left: 18px; padding-left: 20px; border-left: 1px solid var(--line); border-radius: 0; }
body.ui2-adm .admin-subs { grid-column: 1 / -1; position: relative; margin-top: 16px; padding-top: 14px; display: flex; gap: 4px 24px;
  flex-wrap: wrap; align-items: center; }
body.ui2-adm .admin-subs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); opacity: .7; }
body.ui2-adm .admin-sub { border: 0; border-radius: 0; background: none; padding: 6px 0 7px; font: 400 15px Play, sans-serif; color: var(--muted); }
body.ui2-adm .admin-sub:hover { color: var(--ink); }
body.ui2-adm .admin-sub.on { color: var(--gold); background: none; box-shadow: inset 0 -2px 0 var(--gold); font-weight: 700; }
body.ui2-adm .adm-preview { max-width: var(--adm-w); }

/* page body: one centred column; Stats → Members keeps its side column */
body.ui2-adm .admin-layout { max-width: var(--adm-w); margin: 0 auto; padding: 24px 40px 70px; gap: 22px; }
body.ui2-adm .admin-layout:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); max-width: 1060px; }
body.ui2-adm .admin-layout > .panel { background: none; border: 0; padding: 0; box-shadow: none; display: grid; gap: 18px; align-content: start; }
body.ui2-adm .panel > section, body.ui2-adm .admin-layout > aside.preview { background: var(--ui2-panel); border: 1px solid var(--ui2-panel-line);
  border-radius: 12px; padding: 22px 24px 16px; margin: 0; }
body.ui2-adm .admin-layout > aside.preview { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
body.ui2-adm .panel > section > h2:first-child, body.ui2-adm aside.preview > h2:first-child { margin-top: 0; font-size: 1.3rem; }
body.ui2-adm .panel section h3 { font-size: 1.02rem; margin: 18px 0 6px; }
body.ui2-adm .hint { color: var(--muted); }

/* numbers */
body.ui2-adm .statgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
body.ui2-adm .statgrid div { background: #22141a; border: 1px solid #3a242c; border-radius: 10px; padding: 12px 14px; }
body.ui2-adm .statgrid b { font: 700 1.6rem/1.1 Play, sans-serif; }
body.ui2-adm .statgrid span { font-size: .85rem; }

/* tables */
body.ui2-adm table.atable, body.ui2-adm table.plain { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0 14px; }
body.ui2-adm table.atable th, body.ui2-adm table.plain th { text-align: left; color: var(--muted); font-weight: 400; font-size: .82rem;
  padding: 8px 10px 8px 0; border-bottom: 1px solid #4a2c36; white-space: nowrap; }
body.ui2-adm table.atable td, body.ui2-adm table.plain td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid #2c1a20; vertical-align: top; }
body.ui2-adm table.atable tbody tr:hover td, body.ui2-adm table.plain tbody tr:hover td { background: rgba(201, 162, 39, .04); }
body.ui2-adm .admin-layout > aside.preview table.atable td:first-child { white-space: nowrap; color: var(--muted); }

/* list rows (waves, guests, polls and friends) */
body.ui2-adm .visrow { padding: 12px 0; border-bottom: 1px solid #2c1a20; gap: 10px 16px; }
body.ui2-adm .visrow:last-child { border-bottom: 0; }
body.ui2-adm .visrow:has(> .wave-admin-actions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
body.ui2-adm .wave-admin-actions { display: flex; gap: 8px; }
body.ui2-adm .wave-admin-actions form { margin: 0; }
body.ui2-adm .wave-admin-actions .btn { margin: 0; padding: 6px 14px; font-size: .88rem; }
body.ui2-adm .visrow.flagged { background: rgba(201, 162, 39, .06); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
body.ui2-adm form.visrow { border-bottom: 0; align-items: flex-end; }
body.ui2-adm form.visrow label { flex: 1; min-width: 220px; margin: 0; }
body.ui2-adm form.visrow .btn { margin: 0; }
body.ui2-adm .visrow > label:has(> input[type="checkbox"]:only-child) { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
body.ui2-adm .visrow > label > input[type="checkbox"]:only-child { order: -1; margin: 0; }
body.ui2-adm .logitem { border-bottom-color: #2c1a20; padding: 10px 0; }
body.ui2-adm .btn { margin-top: 4px; margin-bottom: 8px; }

/* Tools tab: one card per tool */
body.ui2-adm .tool-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: #1f1217; border: 1px solid #3a242c;
  border-radius: 10px; padding: 14px 16px 16px; margin: 0 0 12px; }
body.ui2-adm .tool-row:last-child { border-bottom: 1px solid #3a242c; }
body.ui2-adm .tool-row .vr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.ui2-adm .tool-row .vr-name { font: 700 1.08rem Play, sans-serif; color: var(--ink); }
body.ui2-adm .tool-row .vr-head .btn { margin: 0; padding: 4px 12px; font-size: .82rem; }
body.ui2-adm .tool-row .vr-head .hint { font-size: .85rem; }
body.ui2-adm .tool-row .vr-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
body.ui2-adm .tool-row .vr-flags label { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--ink); font-size: .92rem; }
body.ui2-adm .tool-row .vr-flags input { order: -1; margin: 0; }
body.ui2-adm .tool-row .vr-sec { display: inline-flex; border: 1px solid #43293a; border-radius: 999px; padding: 2px; background: #1a0f14; }
body.ui2-adm .tool-row .vr-sec label { position: relative; margin: 0; padding: 5px 12px; border-radius: 999px; color: var(--muted); font-size: .88rem; cursor: pointer; }
body.ui2-adm .tool-row .vr-sec input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.ui2-adm .tool-row .vr-sec label:has(input:checked) { background: var(--wine); color: #fff; }
body.ui2-adm .tool-row .vr-sec label:has(input:focus-visible) { box-shadow: var(--ui2-focus); }
body.ui2-adm .tool-row .vr-place > label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
body.ui2-adm .tool-row .vr-place input[type="number"] { width: 70px; padding: 6px 8px; }
body.ui2-adm .tool-row .vr-place select { width: auto; min-width: 170px; padding-top: 6px; padding-bottom: 6px; }
body.ui2-adm .tool-row .vr-text { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 10px; }
body.ui2-adm .tool-row .vr-text label { margin: 0; font-size: .85rem; }
body.ui2-adm .tool-row .vr-text input { margin-top: 4px; padding: 8px 10px; font-size: .95rem; }
body.ui2-adm .ui2-admin { margin: 6px 0 16px; }

/* admin phones */
@media (max-width: 900px) {
  body.ui2-adm .admin-top { padding: 14px 16px 0; grid-template-columns: 1fr; }
  .adm-mark { font-size: 22px; } .adm-mark svg { width: 34px; height: 34px; }
  body.ui2-adm .admin-cats { justify-content: flex-start; gap: 4px 18px; margin-top: 8px; }
  body.ui2-adm .admin-cat.adm-site { margin-left: auto; }
  body.ui2-adm .admin-subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; margin-top: 10px; }
  body.ui2-adm .admin-subs::-webkit-scrollbar { display: none; }
  body.ui2-adm .admin-sub { white-space: nowrap; }
  body.ui2-adm .admin-layout { padding: 16px 12px 60px; grid-template-columns: minmax(0, 1fr); }
  body.ui2-adm .admin-layout > aside.preview { position: static; max-height: none; }
  body.ui2-adm .panel > section, body.ui2-adm .admin-layout > aside.preview { padding: 18px 14px 12px; }
  body.ui2-adm .adm-preview { padding: 0 16px; }
  body.ui2-adm .tool-row .vr-text { grid-template-columns: 1fr; }
  body.ui2-adm table.atable, body.ui2-adm table.plain { display: block; overflow-x: auto; }
}
body.ui2-adm .edition a.btn { padding: 5px 12px; font-size: .85rem; margin: 0 2px 6px 0; }
body.ui2-adm .edition { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 6px 0 10px; }
body.ui2-adm .logitem > h3 ~ p { white-space: normal; }

/* Home: "Free this month" (tools ticked Free in Admin → Tools). */
.h2-free-line { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.h2-free a.h2-free-join { display: inline-block; margin-top: 10px; padding: 0; color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* Admin → NNN in the new design */
body.ui2-adm .tease-day { background: #1f1217; border-color: #3a242c; }
body.ui2-adm .tease-day.set { border-left-color: var(--gold); }
body.ui2-adm .td-fields input, body.ui2-adm .td-fields textarea { margin-top: 4px; padding: 8px 10px; font-size: .95rem; }
body.ui2-adm .td-head .td-pick, body.ui2-adm .td-opts select { padding-top: 6px; padding-bottom: 6px; font-size: .9rem; }
body.ui2-adm .tease-savebar { background: linear-gradient(rgba(26, 15, 20, 0), var(--ui2-panel) 30%); }
body.ui2-adm .tease-years .btn { margin: 0 0 6px; }
body.ui2-adm .tease-more .visrow { border: 0; padding: 0; }