/* Base, layout and components. No colour literals here: only var(--...) from tokens.css (DESIGN 2.4). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--text-body); font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* room for the bottom nav (<48em) */
}
h1, h2, h3 { margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 800; line-height: 1.05; }
h1 { font-size: 34px; letter-spacing: -.5px; }
h2 { font-size: 20px; line-height: 1.2; }
p { margin: 0; }
a { color: var(--accent-text); text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg { flex: none; }
img { max-width: 100%; height: auto; } /* width/height attributes stay for CLS; the poster must never be wider than the screen (SEO.md §5.10 O3) */

.skip { position: absolute; left: -9999px; top: var(--sp-2); z-index: 20; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.skip:focus { left: var(--sp-4); }

/* ---------- header (DESIGN 2.3) ---------- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--divider); }
.topbar-in { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.logo { display: flex; min-height: 44px; align-items: center; gap: var(--sp-2); color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -1px; text-decoration: none; }
.logo .arch { stroke: var(--brand); }
.logo .dot { fill: var(--logo-dot); }
.mainnav { display: none; }
.mainnav a, .navlink { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); color: var(--text-2); font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 2px solid transparent; }
.mainnav a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.search { display: none; flex: 1 1 320px; min-width: 0; max-width: 440px; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--control-border); color: var(--text-2); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.search input:focus-visible { outline: none; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-btn.search-icon { display: none; }
.tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun, :root:not([data-theme]) .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon, :root:not([data-theme]) .theme-btn .moon { display: none; }
.guest-actions { display: none; gap: var(--sp-2); }

.account { position: relative; }
.account summary { list-style: none; display: flex; align-items: center; gap: var(--sp-1); height: 44px; border-radius: var(--r-full); color: var(--text); cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.avatar { display: inline-flex; flex: none; object-fit: cover; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 16px; }
.menu { position: absolute; right: 0; top: 48px; z-index: 11; width: 240px; display: flex; flex-direction: column; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--r-lg); }
.menu a, .menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; }
.menu hr { width: 100%; height: 1px; margin: var(--sp-1) 0; border: 0; background: var(--divider); }

/* ---------- bottom nav (<48em, ADR-040) ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--divider); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 48px; color: var(--text-2); font-size: 12px; text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent-text); }

/* ---------- content + footer ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) 0; }
.wrap.narrow { max-width: calc(440px + 2 * var(--sp-5)); }
.wrap.medium { max-width: calc(640px + 2 * var(--sp-5)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.lead { color: var(--text-2); }
.hint { font-size: 14px; color: var(--text-2); }
.footer { max-width: 1200px; width: 100%; margin: var(--sp-12) auto 0; padding: var(--sp-6) var(--sp-5) var(--sp-10); font-size: 14px; color: var(--text-2); }
.footer-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sp-4); }
.footer a { font-size: 13px; display: flex; align-items: center; min-height: 44px; color: var(--text-2); }
.footer .wide-only { display: none; }
@media (min-width: 48em) { .footer .wide-only { display: flex; } }
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.footer summary { display: flex; align-items: center; min-height: 44px; text-decoration: underline; cursor: pointer; list-style: none; }
.footer summary::-webkit-details-marker { display: none; }
.legend { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 560px; padding-top: var(--sp-2); }
.legend ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.badge { display: inline-block; width: 24px; height: 24px; border-radius: var(--r-sm); }
.badge.b1 { background: var(--score-1-bg); } .badge.b2 { background: var(--score-2-bg); } .badge.b3 { background: var(--score-3-bg); }
.badge.b4 { border: 2px solid var(--score-4-border); }

/* ---------- forms (DESIGN 2.8) ---------- */
.panel { padding: var(--sp-6); background: var(--surface); border-radius: var(--r-lg); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label, .label { font-size: 14px; font-weight: 600; color: var(--text); }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
input[type="text"], input[type="email"], input[type="password"], input:not([type]), textarea {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4); border: 1px solid var(--control-border); border-radius: var(--r-lg);
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; }
textarea { min-height: 96px; padding: var(--sp-3); resize: vertical; }
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, textarea:focus-visible { border-color: var(--accent); }
input[type="file"] { max-width: 100%; color: var(--text-2); font: inherit; font-size: 14px; }
input[type="file"]::file-selector-button { height: 44px; margin-right: var(--sp-3); padding: 0 var(--sp-4); border: 1px solid var(--control-border); border-radius: var(--r-full); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.input-validation-error { border-color: var(--danger) !important; border-width: 2px !important; }
.check { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: 14px; color: var(--text-2); }
.field .check { font-weight: 400; color: var(--text-2); }
.field .check.block { color: var(--text-body); }
.check.block { font-size: 16px; color: var(--text-body); }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 56px; padding: 0 var(--sp-6); border: 1px solid var(--accent-border); border-radius: var(--r-lg);
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:active { background: var(--accent-hover); }
.btn.secondary { border: 1px solid var(--control-border); background: transparent; color: var(--text); }
.btn.sm { min-height: 44px; border-radius: var(--r-md); font-size: 15px; padding: 0 var(--sp-4); }
.btn.pill { border-radius: var(--r-full); font-size: 14px; }
.btn.danger-outline { min-height: 44px; border: 1px solid var(--danger); border-radius: var(--r-md); background: transparent; color: var(--danger); font-size: 15px; padding: 0 var(--sp-4); }
.btn.danger { min-height: 44px; border: 0; border-radius: var(--r-md); background: var(--danger); color: var(--on-danger); font-size: 15px; padding: 0 var(--sp-4); }
.btn.md { min-height: 48px; border-radius: var(--r-md); font-size: 16px; padding: 0 var(--sp-5); }
.btn.block { width: 100%; }
.btn .g { flex: none; }
.field .forgot { align-self: flex-end; display: flex; align-items: center; min-height: 44px; }
/* Delete page (DESIGN 3.l D3): same 48 px height; stacked on phones with Cancel first, side by side from 48em. */
.actions.split { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.actions.split .btn { width: 100%; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
.links { display: flex; flex-direction: column; }
.links a { display: flex; align-items: center; min-height: 44px; }

.notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); color: var(--text); font-size: 14px; }
.notice svg { margin-top: 2px; }
.notice.error { border-color: var(--danger); }
.notice.error svg { color: var(--danger); }
.notice.ok svg { color: var(--accent-text); }
.notice ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.codes li { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.keybox { display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); overflow-wrap: anywhere; user-select: all; }
.avatar.lg { width: 96px; height: 96px; font-family: var(--font-display); font-weight: 800; font-size: 40px; }
.photo-row { display: flex; align-items: center; gap: var(--sp-4); }
.danger-zone { padding-top: var(--sp-8); border-top: 1px solid var(--divider); }
.err-code { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--accent-text); }

@media (hover: hover) {
  a:hover { color: var(--link-hover); }
  .mainnav a:hover, .tabs a:hover, .footer a:hover { color: var(--text); }
  .menu a:hover, .menu button:hover { background: var(--surface-2); }
  .btn:hover { background: var(--accent-hover); }
  .btn.secondary:hover, .btn.danger-outline:hover { background: var(--surface-2); color: var(--text); }
  .btn.danger-outline:hover { color: var(--danger); }
  .btn.danger:hover { background: var(--danger); }
}

/* ---------- breakpoints (DESIGN 2.1): 48em, 64em ---------- */
@media (min-width: 48em) {
  body { font-size: 16px; padding-bottom: 0; }
  .topbar-in { padding: 0 var(--sp-6); gap: var(--sp-6); }
  .mainnav { display: flex; gap: var(--sp-1); }
  .icon-btn.search-icon { display: inline-flex; }
  .guest-actions { display: flex; }
  .tabs { display: none; }
  .wrap { padding: var(--sp-10) var(--sp-6) 0; }
  .footer { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .codes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actions.split { flex-direction: row; gap: var(--sp-4); }
  .actions.split .btn { width: auto; }
}
@media (min-width: 64em) {
  .topbar-in { padding: 0 var(--sp-8); }
  .search { display: flex; }
  .icon-btn.search-icon { display: none; }
  .wrap { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .footer { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

/* ---------- play page (DESIGN 3.b, 3.f, 2.8, 2.9) ----------
   Grid, no `order`: DOM order (header, kunye, upcoming, about, cast) is the phone order and the focus order.
   <48em: poster 150x200 beside the title, everything else full width. >=48em: poster column (180, 240 from 64em) + one text column.
   The 2fr/1fr right column of the wide layout is reserved for the rating card (F3); nothing is rendered there yet. */
.play { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; max-width: 840px; }
.play > * { min-width: 0; }
.play > :not(.poster):not(header) { grid-column: 1 / -1; margin-top: var(--sp-8); }
.play .poster { grid-column: 1; grid-row: 1; margin: 0; }
.play header { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.play .kunye { margin-top: var(--sp-5); }
.play h1 { font-size: 28px; letter-spacing: -1px; overflow-wrap: break-word; }
.play header p { font-size: 18px; font-weight: 600; color: var(--accent-text); }
.play .poster img, .play .ph { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: var(--r-sm); object-fit: cover; object-position: center top; outline: 1px solid var(--divider); outline-offset: -1px; }
.play .ph { display: flex; align-items: flex-end; padding: var(--sp-3); overflow: hidden; background: var(--poster-ph-1); color: var(--poster-ph-fg); font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.play figcaption { margin-top: var(--sp-2); font-size: 12px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; } /* DESIGN 2.8: 12px --text-2; inline link, no 44px target (attribution line) */
.play figcaption small { font-size: inherit; }
.play .ph-2 { background: var(--poster-ph-2); } .play .ph-3 { background: var(--poster-ph-3); } .play .ph-4 { background: var(--poster-ph-4); }

.kunye { margin-bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); font-size: 14px; line-height: 28px; }
.kunye dt { color: var(--text-2); }
.kunye dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-4); }
.kunye dd a { display: inline-flex; align-items: center; min-height: 44px; } /* touch target on phones; relaxed from 48em */
.kunye dd > details { flex-basis: 100%; }

.play section { display: flex; flex-direction: column; gap: var(--sp-4); }
.play h3 { margin: 0; font-size: 14px; line-height: 1.2; font-family: var(--font-body); font-weight: 600; }
.play h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.prose p { max-width: 68ch; font-size: 16px; line-height: 1.55; color: var(--text-body); }
.prose small { font-size: 14px; color: var(--text-2); }
.more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary .when-closed, .more:not([open]) > summary .when-open { display: none; }
.more[open] > a { margin-right: var(--sp-4); }

.play section.upcoming { gap: var(--sp-2); }
.upcoming .more { display: flex; flex-direction: column; gap: var(--sp-3); }
.sessions { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.sessions li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); }
.sessions time { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sessions .day { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--text); }
.sessions .mon { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.sessions .venue { font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sessions .where { min-width: 0; } /* venue + district share one grid cell */
.sessions .district { font-size: 13px; color: var(--text-2); }
.sessions .district::before { content: "\00b7"; margin: 0 var(--sp-2); } /* middle dot separator, decorative */
.tickets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tickets a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--control-border); border-radius: var(--r-md); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) { .tickets a:hover { background: var(--surface-2); color: var(--text); } }

@media (min-width: 48em) {
  .play { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--sp-6); }
  .play .poster { grid-row: 1 / -1; }
  .play > :not(.poster):not(header) { grid-column: 2; }
  .play h1 { font-size: 36px; letter-spacing: -1.2px; }
  .play .ph { font-size: 20px; }
  .kunye { margin-top: var(--sp-4); }
  .kunye dd a { min-height: 28px; }
  .sessions li { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .tickets { grid-column: auto; }
}
@media (min-width: 64em) {
  /* Third column = the rating card (DESIGN 3.b item 5): sticky, spans every row so the text column is not stretched. Specificity matches the
     `.play > :not(.poster):not(header)` rule above (its two :not() count) so this wins by order. */
  .play { grid-template-columns: 240px minmax(0, 1fr) clamp(300px, 32%, 392px); max-width: 1200px; }
  .play > section.rating-card:not(.poster):not(header) { grid-column: 3; grid-row: 1 / span 12; align-self: start; position: sticky; top: 80px; margin-top: 0; }
  .play h1 { font-size: 44px; letter-spacing: -1.5px; }
  .play .ph { font-size: 24px; padding: var(--sp-4); }
}

/* ---------- list pages + search (DESIGN 3.h; F2 slice: rows, count, pager, genre tabs, chips. Ratings come later) ---------- */
.list { max-width: 960px; margin: 0 auto; }
.list h1 { font-size: 30px; letter-spacing: -1px; margin-top: var(--sp-2); }
.list h2 { margin-top: var(--sp-8); font-size: 20px; }
.list h2 small { font-size: 13px; font-weight: 400; color: var(--text-2); }
.crumb { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--text-2); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; }
.count { margin-top: var(--sp-3); font-size: 16px; font-weight: 600; color: var(--text); }
.count span { font-weight: 400; color: var(--text-2); }
.rows { margin: var(--sp-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.rows .row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-2); min-height: 88px; border-bottom: 1px solid var(--divider); }
.rows .thumb { flex: none; display: block; width: 48px; height: 64px; border-radius: var(--r-sm); object-fit: cover; outline: 1px solid var(--divider); outline-offset: -1px; background: var(--surface); }
.rows .info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--text-2); }
.rows .info a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--control-border); border-radius: var(--r-full); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.pager a[aria-current="page"] { background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); }
.searchpage { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.searchpage input[type="search"] { flex: 3 1 12em; min-width: 0; height: 48px; padding: 0 var(--sp-4); border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.searchpage input[type="search"]:focus-visible { border-color: var(--accent); }
/* Genre tabs: one row up to 4 tabs; 5-6 tabs sit in a 3-column grid on the phone and in one row from 48em. DOM order = visual order. */
.seg { display: grid; gap: 0; margin-top: var(--sp-5); padding: var(--sp-1); background: var(--surface); border-radius: var(--r-lg); }
.seg.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg.n5, .seg.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-2); border: 1px solid transparent; border-radius: var(--r-md); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.seg a[aria-current="page"] { background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); }
.chips h2 { margin-top: var(--sp-12); font-size: 20px; }
.chips ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--control-border); border-radius: var(--r-full); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.searchpage select { flex: 1 1 10em; min-width: 0; max-width: 16em; height: 48px; padding: 0 var(--sp-3); border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.searchcol { max-width: 720px; }
.list.searchcol h1 { font-size: 28px; font-weight: 800; }
.searchcol .searchpage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.searchcol .searchpage input[type="search"] { grid-column: 1 / -1; height: 44px; border-radius: var(--r-full); }
.searchcol .searchpage select { height: 44px; max-width: none; }
.searchcol .searchpage .btn { min-width: 96px; min-height: 44px; }
.searchcol .hint { margin-top: var(--sp-3); font-size: 14px; color: var(--text-2); }
.searchcol .count + .hint { margin-top: var(--sp-1); }
.searchcol .hint.start { font-size: 15px; }
@media (min-width: 48em) { .footer a { font-size: 14px; } .seg.n2, .seg.n3 { width: fit-content; } .seg.n2 { grid-template-columns: repeat(2, minmax(96px, auto)); } .seg.n3 { grid-template-columns: repeat(3, minmax(96px, auto)); } .list.searchcol h1 { font-size: 32px; } .searchcol .searchpage { grid-template-columns: minmax(0, 1fr) auto auto; } .searchcol .searchpage select { width: 200px; } .searchcol .searchpage input[type="search"] { grid-column: auto; } }
@media (min-width: 48em) { .seg.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .seg.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 48em) { .list h1 { font-size: 44px; letter-spacing: -1.5px; } }

/* ---------- rating: score badge, card, comments, spoiler (DESIGN 2.7, 3.b, 2.8) ---------- */
.score { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 48px; height: 40px; padding: 0 var(--sp-2); border: 2px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.score.b1 { background: var(--score-1-bg); color: var(--score-1-fg); }
.score.b2 { background: var(--score-2-bg); color: var(--score-2-fg); }
.score.b3 { background: var(--score-3-bg); color: var(--score-3-fg); }
.score.b4 { border-color: var(--score-4-border); color: var(--score-4-fg); }
.score.none { min-width: 56px; height: 48px; color: var(--text-2); }
.badge.sm { width: 16px; height: 16px; border-radius: 4px; }
.badge.b4.sm { border-width: 2px; }

.play section.rating-card { gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); }
.scores { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-3); }
.score-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.score-box .label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.score-box .score { min-width: 56px; height: 48px; font-size: 24px; }
.score-box.predicted { padding: var(--sp-2); border: 1px solid var(--predicted-border); border-radius: var(--r-md, 12px); }
.score-box small { font-size: 13px; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.rating-card .btn { width: 100%; }

.comments .hint { margin-top: calc(-1 * var(--sp-2)); }
.comment { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--divider); }
.comment header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who score" "when score" "report score"; column-gap: var(--sp-3); align-items: center; }
.comment .author { grid-area: who; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.comment .score { grid-area: score; }
.comment .report { grid-area: report; justify-self: start; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); }
.comment time { grid-area: when; font-size: 13px; color: var(--text-2); }
.comment p { max-width: 68ch; font-size: 16px; line-height: 1.55; color: var(--text-body); overflow-wrap: anywhere; }
details.spoiler { display: flex; flex-direction: column; gap: var(--sp-2); }
details.spoiler > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
details.spoiler > summary::-webkit-details-marker { display: none; }
details.spoiler > summary::after { content: " · göster"; color: var(--text-2); white-space: pre; }
details.spoiler[open] > summary::after { content: " · gizle"; }

/* ---------- rating dialog (DESIGN 3.c): native <dialog>; bottom sheet < 48em, centred 560 px modal from 48em ---------- */
.rate-dlg { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; padding: var(--sp-5) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); overflow: auto;
  border: 1px solid var(--divider); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--text-body); }
.rate-dlg::backdrop { background: var(--scrim); }
body:has(dialog.rate-dlg[open]) { overflow: hidden; }
.rate-dlg form { display: flex; flex-direction: column; gap: var(--sp-5); }
.rd-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.rd-head img { flex: none; width: 45px; height: 60px; border-radius: var(--r-sm); object-fit: cover; outline: 1px solid var(--divider); outline-offset: -1px; }
.rd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-title h2 { font-size: 20px; overflow-wrap: anywhere; }
.rd-title p:last-child { font-size: 14px; color: var(--text-2); }
.rd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-2); }
.rd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.rd-score { display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
input.rd-num { width: 180px; min-height: 112px; padding: 0; border: 2px solid var(--control-border); border-radius: var(--r-lg); background: var(--bg); color: var(--text);
  font-family: var(--font-display); font-weight: 800; font-size: 80px; line-height: 1; text-align: center; }
input.rd-num:focus-visible { border-color: var(--accent); outline-offset: 2px; }
input.rd-num[aria-invalid="true"] { border-color: var(--danger); color: var(--text-2); }
.rd-num:disabled { opacity: .6; }
.rd-hint { display: flex; align-items: center; gap: var(--sp-1); min-height: 20px; font-size: 13px; }
.rd-hint.bad { color: var(--danger); }
.rd-preview { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: 14px; border-radius: var(--r-lg); background: var(--bg); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.rd-preview .rd-pos { font-size: 15px; font-weight: 600; color: var(--text); }
.rd-tier { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.rd-preview .badge { width: 24px; height: 24px; border-radius: var(--r-sm); flex: none; }
.rate-dlg textarea { min-height: 96px; }
.rd-warn { font-size: 14px; color: var(--warning); }
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.rd-actions .rd-save { min-width: 160px; }
.rd-keys { display: none; margin-right: auto; font-size: 13px; color: var(--text-2); }
.rd-confirm { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-ask { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 15px; font-weight: 600; color: var(--text); }
.rd-ask svg { margin-top: 2px; color: var(--danger); }
.actions.end { justify-content: flex-end; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.danger-outline svg, .rd-hint svg { width: 16px; height: 16px; }
.btn.danger-outline { gap: var(--sp-2); }
.rd-x { flex: none; }
.rd-num:disabled, .rate-dlg textarea:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .rd-keys { display: block; } .rd-actions:has(.danger-outline) .rd-keys { display: none; } }
@media (min-width: 48em) {
  .rate-dlg { width: 560px; max-width: calc(100% - 2 * var(--sp-4)); max-height: calc(100dvh - 64px); margin: auto; padding: var(--sp-6); border-radius: var(--r-xl); }
  .rd-body { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); }
  input.rd-num { width: 200px; font-size: 64px; }
}

/* ---------- /puanla (no-JS form): the same number box ---------- */
.field .rd-num { align-self: flex-start; }

/* ---------- Listem (DESIGN 3.d) ---------- */
.list .titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.list .titlerow .count { margin: 0; font-weight: 400; color: var(--text-2); }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-6) 0 0; }
.summary > div { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); }
.summary dt { font-size: 12px; color: var(--text-2); }
.summary dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.2; color: var(--text); }
.summary > div:last-child dd { color: var(--accent-text); }
.notice.info { margin-top: var(--sp-6); }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-6); font-size: 13px; color: var(--text-2); }
.key .badge { margin-left: var(--sp-2); }
.key .badge:first-child { margin-left: 0; }
.sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); font-size: 14px; color: var(--text-2); }
.sort a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-md); color: var(--text-2); font-weight: 600; text-decoration: none; }
.sort a[aria-current="page"] { background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); }
.list table { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; table-layout: fixed; }   /* fixed: the title column takes the rest and ellipsizes instead of widening the page */
.list thead th { padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--divider); font-size: 13px; font-weight: 400; text-align: left; color: var(--text-2); }
.list tbody tr { position: relative; border-bottom: 1px solid var(--divider); }
.list td { padding: var(--sp-3) var(--sp-2); vertical-align: middle; }
.list tr.month th { padding: var(--sp-6) var(--sp-2) var(--sp-2); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-align: left; color: var(--text-2); }
.list tr.month { border-bottom: 0; }
.list th:first-child, .list td:first-child { width: 56px; }
.list th.c { width: 28px; padding-left: 0; padding-right: 0; }
.list th.e { width: 52px; }
.list .score { min-width: 44px; height: 44px; font-size: 20px; }
.list .thumb { float: left; width: 44px; height: 59px; margin-right: var(--sp-3); border-radius: var(--r-sm); object-fit: cover; outline: 1px solid var(--divider); outline-offset: -1px; background: var(--surface); }
.list .name { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.list .name a { display: block; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .name a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link (DESIGN 3.d item 9) */
.list .company, .list .when { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list col.d { visibility: collapse; width: 0; }   /* width 0: an auto-width collapsed column would still take a share of the fixed layout and shrink the table */
.list th.c { font-size: 0; }   /* phones: icon column, header text stays for screen readers */
.list td.c { width: 28px; padding-left: 0; padding-right: 0; color: var(--text-2); text-align: center; }
.list td.e { width: 52px; padding-left: 0; text-align: right; }
.list td.e a { position: relative; z-index: 1; }   /* above the stretched row link: its own focus stop */
nav[aria-label="Sayfalama"] { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); }
nav[aria-label="Sayfalama"] a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--control-border); border-radius: var(--r-full); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .list tbody tr:not(.month):hover { background: var(--surface-2); } }
@media (min-width: 48em) {
  .list .when { display: none; }
  .list col.d { visibility: visible; width: 128px; }
  .list th.c { font-size: 13px; }
  .list td.d, .list th.d { width: 128px; font-size: 14px; color: var(--text-body); }
  .list thead th.d { font-size: 13px; color: var(--text-2); }
  .list th:first-child, .list td:first-child { width: 72px; }
  .list th.c { width: 56px; }
  .list .score { min-width: 48px; height: 48px; }
  .list td.c { width: 56px; }
  .list td { height: 88px; }
}

/* ---------- social (F4a): feed, profile, follower lists, ranked list rows (DESIGN 3.a, 3.e, 3.g, 3.h) ---------- */
.avatar.s40 { width: 40px; height: 40px; font-size: 15px; }
.avatar.s48 { width: 48px; height: 48px; }
.avatar.s96 { width: 96px; height: 96px; font-family: var(--font-display); font-weight: 800; font-size: 40px; }
.follow { display: inline-flex; margin: 0; }
.feed { max-width: 720px; margin-inline: auto; }
.login-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); }
.feed-rows, .profile-rows, .people { margin: 0; padding: 0; list-style: none; }
.feed-item, .profile-row, .person { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--divider); }
.feed-item .avatar { margin-top: var(--sp-1); }
.feed-item .body, .profile-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.feed-item .body p, .profile-row .body p { margin: 0; color: var(--text-body); overflow-wrap: anywhere; }
.feed-item .who a, .profile-row .body > a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.thumb { flex: none; width: 48px; height: 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); outline: 1px solid var(--divider); outline-offset: -1px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.acts time, .profile-row time, .mine { font-size: 13px; color: var(--text-2); }
.more-feed { justify-content: flex-start; }
.profile-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4); }
.profile-head .id { flex: 1 1 16em; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.profile-head h1 { overflow-wrap: anywhere; }
.profile-head .handle, .follows .handle, .person .who span { margin: 0; font-size: 14px; color: var(--text-2); }
.profile-head .bio p { margin: 0; max-width: 60ch; color: var(--text-body); overflow-wrap: anywhere; }
.counts { margin: 0; font-size: 14px; color: var(--text-2); }
.counts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.counts strong { margin-right: .25em; color: var(--text); font-weight: 600; }
.taste { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); }
.taste strong { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--accent-text); }
.tabs-links { display: flex; flex-wrap: wrap; gap: var(--sp-6); border-bottom: 1px solid var(--divider); }
.tabs-links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: 16px; font-weight: 600; text-decoration: none; }
.tabs-links a[aria-current="page"] { border-bottom-color: var(--accent-text); color: var(--text); }
.profile-row .mine { display: flex; align-items: center; gap: var(--sp-2); }
.person .who { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.person .who strong { font-size: 16px; overflow-wrap: anywhere; }
.person .match { flex: none; font-size: 13px; color: var(--text-2); }
.person .me { font-size: 14px; font-weight: 600; color: var(--text-2); }
.rank-note { margin: var(--sp-5) 0 0; font-size: 14px; color: var(--text-2); }
.rows .rank { flex: none; min-width: 40px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text-2); }
.rows .community { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 56px; }
.rows .community small { font-size: 12px; color: var(--text-2); text-align: center; }
.rows .community .score { min-width: 56px; height: 48px; }
.rows .info { flex: 1; }

/* ---------- admin (F5): server-rendered, plain tables and forms ---------- */
.menu .count, .admin-nav .count { display: inline-block; min-width: 20px; margin: 0 0 0 var(--sp-2); padding: 0 var(--sp-2); text-align: center; border-radius: var(--r-full); background: var(--danger); color: var(--on-danger); font-size: 13px; line-height: 20px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--divider); }
.admin-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text); }
.admin-nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent-text); text-underline-offset: 6px; }
@media (max-width: 767px) { .admin-nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } }
.admin { width: 100%; max-width: 1120px; margin-inline: auto; }
.admin .panel { max-width: 760px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table.mid { min-width: 760px; }
.admin-table.wide { min-width: 1100px; }
.admin-table th, .admin-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--divider); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.admin-table th:first-child, .admin-table td:first-child { white-space: nowrap; }
.admin-table th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.admin-scroll { overflow-x: auto; }
.admin-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.admin-row input[type=text], .admin-row input[type=number], .admin-row select { min-height: 44px; }
.admin-row input { flex: 1 1 240px; min-width: 0; }
.admin-quote { white-space: pre-wrap; max-width: 68ch; overflow-wrap: anywhere; }

/* Legal pages: rendered Markdown. */
.legal { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.legal h2 { margin-top: var(--sp-6); }
.legal p, .legal ul, .legal ol { margin: 0; max-width: 68ch; }
.legal ul, .legal ol { padding-left: var(--sp-6); }
.legal li + li { margin-top: var(--sp-2); }
.legal a { color: var(--accent-text); }
.legal code { overflow-wrap: anywhere; }
.legal .notice.info { margin-top: 0; }
.legal .table-wrap { overflow-x: auto; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; }
.legal th, .legal td { font-size: 15px; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }