/* Hallmark · checked: 2026-11-10 · genre: modern-minimal (inferred) · scope: app
 * floor: stylesheet clean · fixed: 3, 7a, 20, 26a, 26b, 27, 34, 38iii, 40, 48, 49, 63, F3 · structural: 24b printed
 * open on the pages, not the stylesheet: 19 (copy dashes), 63 (arrow glued to the prev/next clip labels, dots in option lists), 48 (team colours set inline from data)
 * built: the project · shape: app screen · redesign: polish · v2.0.0 */
/* Hallmark · waive 28b · the player video is the page's main content and the app stores no poster frame · a poster needs thumbnails from the upload pipeline, a new feature outside a style polish */
/* Hallmark · answered F21 · the h3 headings are sized by CSS on purpose and promoting them to h2 would restyle every card on the screen */
/* Hallmark · answered F7 · cards, comments and tables share one container recipe because the app keeps one surface for every record */
/* Hallmark · answered F23 · every screen sits behind the sign-in, so no link preview ever reads a description */
/* Notation kept: "Q1 · 0:12" and "CC · Roman Sędzia" are single-dot data labels, not joined prose. */
:root {
  --bg: #f5f6f8; --card: #fff; --text: #1d2330; --muted: #6b7385; --line: #dde1ea;
  --accent: #1f6feb; --danger: #b32323; --ok: #276b2b; --warn: #8a5200;
  --accent-hover: #1a5fd0; --accent-active: #164fb0; --on-accent: #fff;
  --focus: #1f6feb; --focus-on-dark: #9db8ee;
  --chrome-bg: #17202e; --on-chrome: #fff; --chrome-link: #c9d3e6; --chrome-action: #9db8ee; --chrome-rule: #2d3a4f;
  --video-bg: #0b0f17; --scrim: rgba(11, 15, 23, .65);
  --control-bg: #fff; --control-line: #c3c9d6; --control-hover: #eef1f6; --control-active: #dfe4ee;
  --head-bg: #eef1f6; --head-soft: #f7f8fb; --track: #dfe4ee;
  --muted-strong: #5f677a; --chip-bg: #e9edf5;
  --info-bg: #e8f0fe; --info-line: #b6ccf7; --info-wash: #f1f6ff; --info-row: #eef6ff;
  --error-bg: #fdecea; --error-line: #f2b8b5; --error-ink: #8c1d18; --danger-edge: #e3b1ae;
  --success-bg: #e8f5e9; --success-line: #b7dfb9;
  --notice-bg: #fff8e6; --notice-line: #f0d9a0; --notice-ink: #6b4300;
  --ok-wash: #d8f0da; --danger-wash: #fbd9d6; --warn-wash: #fff0cc;
  --mark-ok: #2e7d32; --mark-dec: #d32f2f;
  --flash-bg: rgba(31, 111, 235, .92); --flash-error-bg: rgba(198, 40, 40, .94);
  --swatch-line: #8a93a6; --swatch-a: #fff; --swatch-b: #e3e6ee;
  --print-head: #eee; --print-line: #bbb;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
a:active { color: var(--accent-active); }
/* Instant ring, no transition: the player is driven from the keyboard. The offset keeps it clear of the control's own edge. */
:where(a, button, input, select, textarea, summary, video, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.top :focus-visible { outline-color: var(--focus-on-dark); }
main { max-width: 1280px; margin: 0 auto; padding: 16px 20px 60px; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 24px; margin: 8px 0; } h2 { font-size: 19px; margin: 24px 0 8px; } h3 { font-size: 16px; margin: 8px 0; }
.top { display: flex; align-items: center; background: var(--chrome-bg); padding: 10px 20px; }
.top .brand { color: var(--on-chrome); font-weight: 700; font-size: 18px; margin-right: 24px; }
.top nav a { color: var(--chrome-link); margin-right: 16px; }
.banner { margin: 12px 20px; padding: 10px 14px; border-radius: 6px; background: var(--info-bg); border: 1px solid var(--info-line); }
.banner.error { background: var(--error-bg); border-color: var(--error-line); color: var(--error-ink); }
.banner.ok { background: var(--success-bg); border-color: var(--success-line); margin: 12px 0; }
/* Joined metadata (what was once "a · b · c"): separate items with a gap, no punctuation. */
.meta-list { display: inline-flex; flex-wrap: wrap; gap: 0 16px; list-style: none; margin: 0; padding: 0; }
p.meta-list { display: flex; margin: 1em 0; }
.muted { color: var(--muted); } .error-text { color: var(--danger); } .warn-text { color: var(--warn); font-size: 13px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .between { justify-content: space-between; }
.grow { flex: 1; min-width: 240px; } .hidden { display: none !important; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.form label { display: block; margin: 8px 0; font-weight: 500; }
.form label input, .form label select, .form label textarea { display: block; margin-top: 4px; font-weight: 400; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--control-line); border-radius: 5px; background: var(--control-bg); max-width: 100%; }
input[type=checkbox] { width: 16px; height: 16px; }
textarea { width: 100%; font-family: ui-monospace, monospace; }
input.wide { width: 100%; min-width: 220px; }
.btn { display: inline-block; white-space: nowrap; font: inherit; padding: 7px 14px; border: 1px solid var(--control-line); border-radius: 6px; background: var(--control-bg); color: var(--text); cursor: pointer; }
.btn:hover { background: var(--control-hover); text-decoration: none; }
/* A long label in a narrow banner wraps rather than overflowing it. */
.banner .btn { white-space: normal; }
.btn:active { background: var(--control-active); transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hover); } .btn.primary:active { background: var(--accent-active); }
/* Disabled reads as inert, not merely faded: flat fill, dashed edge, no hover or press response. */
.btn:disabled, .btn.primary:disabled, .btn.danger:disabled, .btn[aria-disabled=true] { background: var(--chip-bg); border: 1px dashed var(--control-line); color: var(--muted-strong); cursor: not-allowed; transform: none; }
input:disabled, select:disabled, textarea:disabled { background: var(--chip-bg); color: var(--muted-strong); cursor: not-allowed; }
.btn.danger { color: var(--danger); border-color: var(--danger-edge); } .btn.small { padding: 3px 9px; font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td input:not([type=checkbox], [type=hidden]), td select, td .btn.small { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
td .btn.small { display: inline-flex; align-items: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
/* action buttons in a cell: wrap on an inner container, never on the <td> itself (flex on a <td> breaks the table row) */
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.table-actions form { margin: 0; }
td.actions-cell { white-space: normal; }
th { background: var(--head-bg); font-size: 13px; }
table.preview tr.warn { background: var(--notice-bg); } table.preview tr.bad { background: var(--error-bg); }
.filters { margin: 8px 0 14px; }
.chip { display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 10px; background: var(--chip-bg); font-size: 13px; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; background: var(--chip-bg); }
.badge.ready, .badge.cut { background: var(--ok-wash); color: var(--ok); }
.badge.error { background: var(--danger-wash); color: var(--danger); }
.badge.processing, .badge.queued, .badge.new, .badge.uploading { background: var(--warn-wash); color: var(--warn); }
.video-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
progress { width: 160px; vertical-align: middle; }
.upload-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .player-layout, .grid2 { grid-template-columns: minmax(0, 1fr); } }
.player-layout > section, .player-layout > aside { min-width: 0; }
/* column tops aligned: the first element has no top margin (e.g. .card has 10 px) */
.player-layout > section > :first-child, .player-layout > aside > :first-child { margin-top: 0; }
video { width: 100%; max-height: 70vh; background: var(--video-bg); border-radius: 6px; display: block; }
.video-wrap { position: relative; }
.clip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; min-width: 0; }
.clip-actions .clip-filename { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { position: relative; height: 14px; background: var(--track); border-radius: 4px; margin: 6px 0; cursor: pointer; }
.timeline i { position: absolute; top: 0; width: 3px; height: 100%; }
.timeline .tl-mark { background: var(--mark-ok); width: 4px; } .timeline .tl-dec { background: var(--mark-dec); }
.clock { font: 600 20px ui-monospace, monospace; min-width: 70px; }
.controls { margin: 8px 0; }
.dec-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.dec-list li { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.dec-list .t { font-weight: 700; font-family: ui-monospace, monospace; }
.mark { margin: 3px 0; }
kbd { background: var(--chip-bg); border: 1px solid var(--control-line); border-radius: 4px; padding: 0 5px; font-size: 12px; margin-right: 2px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--chrome-bg); color: var(--on-chrome); padding: 10px 18px; border-radius: 8px; z-index: 10; }
.toast.error { background: var(--danger); }
.comment { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.comment.reply { margin-left: 32px; }
.comment .meta { display: flex; gap: 10px; align-items: center; } .comment .actions { font-size: 13px; display: flex; gap: 12px; }
.danger-link { color: var(--danger); }

/* The wrapper adds no box: bell, menu button, nav and account are laid out as direct children of the header, in the DOM order a phone needs. */
.top .who { display: contents; }
.top .account { display: flex; align-items: center; gap: 12px; color: var(--chrome-link); }
.top .account a { color: var(--chrome-action); }
.nav-toggle { display: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; font: inherit; color: var(--on-chrome); background: none; border: 1px solid var(--chrome-link); border-radius: 6px; cursor: pointer; }
.nav-toggle:active { opacity: .7; }
@media (min-width: 721px) {
  .top nav { margin-right: auto; }
  .top .bell { order: 1; margin-right: 12px; }
  .top .account { order: 2; }
}
form.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--chrome-action); cursor: pointer; }
.linklike:hover { text-decoration: underline; } .linklike:active { opacity: .7; }
.auth-box { max-width: 420px; margin: 40px auto; }
.auth-box input { width: 100%; }
label.inline { display: inline-block; margin: 0 10px 0 0; font-weight: 400; }
label.inline input { display: inline-block; margin: 0 4px 0 0; }
tr.inactive td { color: var(--muted); }
tr.no-activity td { background: var(--warn-wash); }
.invite-box { border-color: var(--info-line); background: var(--info-wash); }
.invite-box input { flex: 1; min-width: 260px; }
.official-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 12px; align-items: end; margin: 6px 0; }
.official-row .fn { padding-bottom: 8px; }
.official-row label { margin: 0; }
@media (max-width: 960px) { .official-row { grid-template-columns: 1fr; } }
.facts dt { font-weight: 600; margin-top: 6px; } .facts dd { margin: 0; }

.match-filters { gap: 12px 14px; align-items: flex-end; }
.match-filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 2px; }
.match-filters label.inline { flex-direction: row; align-items: center; gap: 4px; margin: 0 0 6px; color: var(--text); font-size: 15px; }
.pager { margin: 12px 0; }
.chip.warn { background: var(--warn-wash); color: var(--warn); font-weight: 600; }
.badge.state-ready { background: var(--ok-wash); color: var(--ok); }
.badge.state-error { background: var(--danger-wash); color: var(--danger); }
.badge.state-converting, .badge.state-uploading, .badge.state-no_marks { background: var(--warn-wash); color: var(--warn); }
.badge.state-purged, .badge.state-none { background: var(--chip-bg); color: var(--muted-strong); }
.match-head .facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; }
.match-head .facts dt { margin: 0; color: var(--muted); font-weight: 500; }
.match-head { margin-top: 4px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--swatch-line); vertical-align: -2px; margin-right: 4px; background: repeating-linear-gradient(45deg, var(--swatch-a), var(--swatch-a) 3px, var(--swatch-b) 3px, var(--swatch-b) 6px); }
.has-account { color: var(--ok); } .me { color: var(--accent); font-weight: 600; }
.small-note { font-size: 13px; }

@media (max-width: 720px) {
  main { padding: 12px 12px 48px; }
  .top { gap: 0 12px; padding: 10px 12px; flex-wrap: wrap; }
  .top .brand { margin-right: 0; }
  .top .bell { margin-left: auto; }
  html.js .nav-toggle { display: inline-flex; }
  .top nav { flex: 1 1 100%; display: flex; flex-direction: column; margin-top: 6px; }
  .top nav a { margin: 0; padding: 11px 0; border-top: 1px solid var(--chrome-rule); }
  .top .account { flex: 1 1 100%; justify-content: space-between; padding: 11px 0 4px; border-top: 1px solid var(--chrome-rule); }
  html.js .top:not(.menu-open) nav, html.js .top:not(.menu-open) .account { display: none; }
  .match-head .facts { grid-template-columns: 1fr; gap: 0; } .match-head .facts dd { margin-bottom: 8px; }
  table.responsive, table.responsive tbody { display: block; background: none; border: 0; }
  table.responsive thead { position: absolute; left: -9999px; }
  table.responsive tr { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 10px 0; }
  table.responsive td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 4px 0; text-align: right; flex-wrap: wrap; }
  table.responsive td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: 0 0 auto; }
  table.responsive td.main-cell { font-weight: 600; font-size: 16px; }
  table.responsive td.actions-cell { justify-content: flex-start; text-align: left; }
  table.responsive td.actions-cell .table-actions { flex: 1 1 100%; }
  table.users-table td { overflow-wrap: anywhere; }
  table.users-table td.roles-cell { flex-direction: column; align-items: stretch; gap: 6px; text-align: left; }
  table.users-table td.roles-cell form.row { gap: 4px 14px; }
  table.users-table td.roles-cell label.inline { margin: 0; padding: 6px 0; }
  table.users-table td.roles-cell .btn { align-self: flex-start; }
  .match-filters label { flex: 1 1 140px; min-width: 0; } .match-filters input:not([type=checkbox]), .match-filters select { width: 100%; min-width: 0; }
  .match-filters label.inline { flex-basis: 100%; } .match-filters input[type=checkbox] { flex: none; }
  /* iOS gives date inputs an intrinsic minimum width and drops their height once the native look is off. */
  input[type=date] { min-width: 0; min-height: 34px; -webkit-appearance: none; appearance: none; }
  main { overflow-wrap: anywhere; }
}

.file-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 6px 0; }
.content-picker { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.content-picker label.inline { display: inline-block; margin: 0; font-weight: 400; }
.upload-row { flex-wrap: wrap; }

.banner.warn { background: var(--notice-bg); border-color: var(--notice-line); color: var(--notice-ink); margin: 12px 0; }
.btn.big { font-size: 17px; font-weight: 600; padding: 10px 22px; }
.mark-count { position: absolute; top: 8px; right: 8px; background: var(--scrim); color: var(--on-chrome); padding: 2px 10px; border-radius: 10px; font-size: 13px; pointer-events: none; }
.watch-badge { right: auto; left: 8px; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-leader { font-size: 17px; font-weight: 600; margin: 6px 0; overflow-wrap: anywhere; }
.watch-panel input { min-width: 0; }
.watch-people { list-style: none; margin: 8px 0; padding: 0; }
.watch-people li { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.watch-people .who-name { overflow-wrap: anywhere; }
.watch-follow #speed, .timeline.locked { cursor: not-allowed; }
.timeline.locked { opacity: .6; }
.watch-follow video::-webkit-media-controls-play-button, .watch-follow video::-webkit-media-controls-timeline { display: none; }
.flash { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); background: var(--flash-bg); color: var(--on-accent); font: 600 22px system-ui, sans-serif; padding: 10px 24px; border-radius: 10px; pointer-events: none; animation: flash-pop 1.2s ease-out forwards; z-index: 5; white-space: nowrap; }
.flash.error { background: var(--flash-error-bg); }
@keyframes flash-pop { 0% { opacity: 0; transform: translateX(-50%) scale(.85); } 12% { opacity: 1; transform: translateX(-50%) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; } }
/* The flash is hidden by a timer in player.js, so it stays as a still frame rather than ending on opacity 0. */
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  *, ::before, ::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.fs-only { display: none; position: absolute; right: 16px; bottom: 56px; z-index: 5; }
.video-wrap:fullscreen { background: var(--video-bg); display: flex; flex-direction: column; justify-content: center; padding: 0; }
.video-wrap:fullscreen video { max-height: calc(100vh - 28px); border-radius: 0; }
.video-wrap:fullscreen .fs-only { display: block; }
.video-wrap:-webkit-full-screen { background: var(--video-bg); display: flex; flex-direction: column; justify-content: center; }
.video-wrap:-webkit-full-screen video { max-height: calc(100vh - 28px); border-radius: 0; }
.video-wrap:-webkit-full-screen .fs-only { display: block; }
.period-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.period-row.next { background: var(--info-wash); }
.period-row .chip { min-width: 40px; text-align: center; font-weight: 600; }
.dec-list li.new { background: var(--info-row); }
.dec-list li { align-items: center; }
.help { margin-top: 10px; }
.shortcuts-table td { padding: 3px 8px; vertical-align: top; }
.shortcuts-table { border: 0; background: none; width: auto; }
.notes-block { flex-basis: 100%; margin: 4px 0; }
.notes-block summary { cursor: pointer; color: var(--accent); }
.notes-block textarea { margin: 6px 0; }
.notes-preview { margin-top: 6px; overflow-x: auto; }

.clip-filters { gap: 10px 14px; align-items: flex-end; }
.clip-filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 2px; }
.clips-table td.desc-cell { max-width: 280px; overflow-wrap: anywhere; }
.clips-table td.open-cell { white-space: nowrap; }
.clip-nav { margin: 10px 0; }
.choice-group { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px; }
.choice-group legend { font-weight: 500; padding: 0 4px; }
.form label.choice { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; font-weight: 400; cursor: pointer; }
.form label.choice input { display: inline-block; margin: 0; }
.describe-list li { align-items: center; padding: 6px 4px; }
.describe-list li.current { background: var(--info-row); box-shadow: inset 0 0 0 1px var(--accent); border-radius: 4px; padding-left: 8px; }
.describe-list .t { min-width: 52px; }
.done-box { text-align: center; padding: 28px 16px; }
.done-box .row { justify-content: center; }
.clip-form select, .clip-form input[name=custom_category] { max-width: 100%; width: 100%; }
@media (max-width: 720px) {
  .clip-filters label { flex: 1 1 140px; } .clip-filters select { width: 100%; }
  .clip-nav { flex-direction: column; align-items: stretch; } .clip-nav .btn { text-align: center; }
  .clips-table td.desc-cell { max-width: none; }
  table.responsive td.open-cell { justify-content: flex-end; }
}

.comments-box textarea, .rating-form textarea, .rating-edit textarea { font-family: inherit; }
.comment .body, .rating .body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.comment .meta { flex-wrap: wrap; gap: 2px 10px; }
.comment .actions, .rating .actions { margin-top: 4px; align-items: flex-start; flex-wrap: wrap; }
.comment.editing { border-color: var(--accent); }
.empty-note:empty { display: none; }
.inline-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.inline-btn:hover { text-decoration: underline; } .inline-btn:active { opacity: .7; }
.verdict { display: inline-block; padding: 1px 9px; margin: 1px 4px 1px 0; border-radius: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--chip-bg); }
.verdict.correct { background: var(--ok-wash); color: var(--ok); }
.verdict.incorrect { background: var(--danger-wash); color: var(--danger); }
.verdict.debatable { background: var(--warn-wash); color: var(--warn); }
.rating { border-top: 1px solid var(--line); padding: 8px 0; }
.rating:first-of-type { border-top: 0; }
.rating .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rating-form { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
.rating-form h4 { margin: 8px 0 4px; font-size: 15px; }
.rating-edit summary { cursor: pointer; color: var(--accent); }
.ratings-cell { min-width: 120px; }
.toast { max-width: calc(100vw - 24px); text-align: center; }
.rating .actions { font-size: 13px; display: flex; gap: 6px 14px; }

.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 8px 0 12px; }
.admin-tabs a { padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; color: var(--text); }
.admin-tabs a.active { background: var(--card); border-color: var(--line); font-weight: 600; position: relative; top: 1px; }
.categories-table input { width: 100%; min-width: 140px; }
.usage th { width: 60%; font-weight: 500; background: none; } .usage td { text-align: right; font-weight: 600; }
.rejections { margin-top: 8px; }
.banner.warn table { background: var(--card); }
@media (max-width: 720px) { .usage th { width: auto; } .admin-tabs a { padding: 6px 10px; } }

.share { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; }
.share-clip h2 { margin: 0 0 2px; } .share-clip p { margin: 0 0 8px; }

.share-bar { gap: 8px 14px; align-items: flex-end; }
.share-bar label, .share-form label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 2px; }
.share-bar .share-note { flex: 1 1 100%; margin: 0; color: var(--muted); }
.share-bar .error-text { color: var(--danger); }
.share-warning { margin: 10px 0; font-size: 14px; }
.share-list { list-style: none; margin: 6px 0; padding: 0; }
.share-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.share-list form { margin: 0; }
.share-contents { overflow-wrap: anywhere; }
.clips-table .select-cell { width: 1%; white-space: nowrap; }
.clips-table .select-cell input { margin: 0; }
@media (max-width: 720px) {
  table.responsive td.select-cell:empty { display: none; }
  table.responsive td.select-cell { flex-wrap: nowrap; align-items: center; width: auto; }
  table.responsive td.select-cell input { flex: 0 0 24px; width: 24px; height: 24px; }
  .share-bar label { flex: 1 1 140px; } .share-bar select { width: 100%; }
}

.app-version { max-width: 1280px; margin: 0 auto; padding: 0 20px 16px; font-size: 12px; color: var(--muted); }

.sheet-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.sheet-item:first-child { border-top: 0; }
.scoresheet-list { list-style: none; margin: 0; padding: 0; }
.scoresheet-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.scoresheet-item:first-child { border-top: 0; }
.scoresheet-thumb, .scoresheet-tile { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 6px; border: 1px solid var(--line); background: var(--chip-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.scoresheet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scoresheet-tile { font-size: 13px; font-weight: 700; color: var(--muted-strong); }
.scoresheet-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scoresheet-name { overflow-wrap: anywhere; }
.scoresheet-mark { display: inline-block; vertical-align: -3px; margin-left: 6px; color: var(--muted-strong); line-height: 0; }
#scoresheet-form { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
#scoresheet-form input[type=file] { width: 100%; }
.sheet-head { margin: 8px 0 4px; }
.sheet-head th { width: 1%; white-space: nowrap; background: var(--head-bg); font-size: 13px; }
.sheet-head td { min-width: 120px; }
.sheet-head input, .sheet-head select { width: 100%; max-width: 280px; }
.sheet-table { table-layout: fixed; }
.sheet-table th:first-child { width: 15%; min-width: 120px; }
.sheet-table th[scope=row] { min-width: 120px; background: var(--head-soft); font-size: 14px; vertical-align: top; }
.sheet-table td { vertical-align: top; }
.sheet-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-note { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.sheet-edit textarea, .sheet-form > textarea { font-family: inherit; min-height: 90px; resize: vertical; }
.sheet-actions { margin: 16px 0 8px; }
@media screen and (max-width: 720px) {
  .sheet-table, .sheet-table tbody, .sheet-table tr, .sheet-table th, .sheet-table td { display: block; width: 100%; }
  .sheet-table { background: none; border: 0; }
  .sheet-table thead { position: absolute; left: -9999px; }
  .sheet-table tr { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; margin: 10px 0; }
  .sheet-table th:first-child, .sheet-table th[scope=row] { width: auto; min-width: 0; background: none; border: 0; padding: 4px 0; font-size: 16px; }
  .sheet-table td { border: 0; padding: 4px 0; }
  .sheet-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .sheet-head, .sheet-head tbody, .sheet-head tr, .sheet-head th, .sheet-head td { display: block; width: 100%; }
  .sheet-head th { padding-bottom: 0; border: 0; } .sheet-head td { border: 0; padding-top: 0; }
  .sheet-head input, .sheet-head select { max-width: none; }
}
@page sheet { size: A4; margin: 12mm; }
.sheet-doc { page: sheet; }
@media print {
  body { background: var(--card); color: var(--text); font-size: 10.5pt; }
  .top, .app-version, .banner, .no-print { display: none !important; }
  main { max-width: none; padding: 0; }
  h1 { font-size: 17pt; } h2 { font-size: 12pt; margin: 14px 0 6px; break-after: avoid; }
  table { border-radius: 0; } th { background: var(--print-head) !important; }
  .sheet-table tr, .sheet-head tr, .sheet-note { break-inside: avoid; page-break-inside: avoid; }
  .sheet-table thead { display: table-header-group; }
  .sheet-table th:first-child { width: 18%; min-width: 0; }
  .sheet-table th, .sheet-table td, .sheet-head th, .sheet-head td { border: 1px solid var(--print-line); }
}

.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 6px; color: var(--chrome-link); }
.bell:hover { color: var(--on-chrome); text-decoration: none; }
.bell-count { position: absolute; top: 0; right: -2px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notif-list { list-style: none; margin: 8px 0; padding: 0; }
.notif { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.notif.unread { background: var(--info-wash); border-color: var(--info-line); }
.notif form { margin: 0; }
.notif-text { display: block; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.notif.unread .notif-text { font-weight: 600; }
.notif-text:hover .notif-what { text-decoration: underline; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: 13px; }
.notif-meta .inline-btn { color: var(--accent); }

/* Training sets */
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pinned-sets { background: var(--info-wash); border-color: var(--info-line); }
.pinned-sets h2 { margin-top: 0; }
.chip.pinned { background: var(--info-bg); }
.chip.pinned form { display: inline; margin-left: 4px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
.chip.pinned .linklike { color: var(--accent); }