/*
 * 剣道スコア - スタイル
 * 方針: 市販スコアブックのような「罫線と墨文字」の紙面。色は全て CSS 変数にして
 * ライト/ダークを切り替える。フォントはシステムフォントのみ（外部通信なし）。
 */
:root {
  color-scheme: light dark;
  --bg: #e9ebed;          /* 冷たい中性グレー寄りの背景 */
  --paper: #fafbfb;       /* 紙面 */
  --ink: #1b1d21;         /* 墨（白側・本文） */
  --muted: #5f656c;
  --rule: #c5cacf;        /* 細い罫線 */
  --rule-strong: #1b1d21; /* 太い罫線 */
  --red: #be2a18;         /* 朱赤の墨（赤側） */
  --red-soft: #f7dedb;    /* 赤側が勝ったときの薄い赤 */
  --white-soft: #dcdfe2;  /* 白側が勝ったときの薄いグレー */
  --select: rgba(27, 29, 33, 0.07);
  --danger: #a3200f;
  --sans: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --pad-h: 168px;         /* 固定パッドぶんの下余白 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131517;
    --paper: #1c1f22;
    --ink: #e8eaeb;
    --muted: #9aa0a6;
    --rule: #33383d;
    --rule-strong: #e8eaeb;
    --red: #f0705e;
    --red-soft: #42231f;
    --white-soft: #33373b;
    --select: rgba(232, 234, 235, 0.09);
    --danger: #ff8a78;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden; /* 横スクロールさせない */
  padding: 0 max(14px, env(safe-area-inset-right)) calc(var(--pad-h) + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}
.wrap { max-width: 560px; margin: 0 auto; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
a { color: inherit; }

/* ---------- ヘッダー ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
  padding: calc(8px + env(safe-area-inset-top)) 0 6px;
}
h1 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 800; letter-spacing: 0.12em; display: flex; align-items: center; }
.back { display: inline-grid; place-items: center; width: 32px; height: 44px; margin-left: -6px; font-size: 26px; text-decoration: none; color: var(--muted); letter-spacing: 0; }
.sync-notice { display: grid; gap: 3px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--muted); font-size: 12px; line-height: 1.5; }
.sync-notice b { color: var(--ink); font-size: 13px; }
.event-manager { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) auto; gap: 8px; align-items: start; margin: 0 0 10px; padding: 9px; border: 1px solid var(--rule); background: var(--paper); }
.event-current { display: grid; gap: 2px; color: var(--muted); font-size: 12px; }
.event-current .field, .event-manager .field { min-height: 42px; }
.event-new { align-self: end; min-height: 42px; padding: 6px 10px; border: 1px solid var(--rule-strong); background: var(--bg); font-size: 13px; font-weight: 700; }
.event-create { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.event-create button { min-height: 42px; padding: 6px 10px; border: 1px solid var(--rule); background: var(--bg); }
@media (max-width: 420px) { .event-manager { grid-template-columns: 1fr 1fr; } .event-current { grid-column: 1 / -1; } .event-new { grid-column: 1 / -1; } }
.sw { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; position: relative; }
.sw input { position: absolute; opacity: 0; width: 44px; height: 44px; right: 0; margin: 0; }
.sw i { width: 44px; height: 26px; background: var(--rule); border: 1px solid var(--muted); border-radius: 13px; position: relative; transition: background 0.15s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--muted); transition: left 0.15s; }
.sw input:checked + i { background: var(--ink); }
.sw input:checked + i::after { left: 20px; }
.sw input:checked ~ .sw-label, .sw:has(input:checked) .sw-label { color: var(--ink); font-weight: 700; }
.sw input:focus-visible + i { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- タブ ---------- */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid var(--rule-strong); margin-bottom: 14px; }
.tabs button { min-height: 46px; background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; font-size: 16px; font-weight: 700; color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- 入力欄（共通） ---------- */
.field {
  width: 100%; min-height: 44px; padding: 8px 10px; min-width: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; font-size: 16px; /* 16px未満だとiOSがズームする */
}
.field::placeholder { color: var(--muted); opacity: 0.8; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.meta .full { grid-column: 1 / -1; }

/* ---------- 試合カード（紙面の1行） ---------- */
.bout { background: var(--paper); border: 1px solid var(--rule-strong); margin-bottom: 14px; }
.bout-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 0 0 12px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.bout-head b { font-family: var(--serif); font-size: 16px; letter-spacing: 0.06em; }
.result { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--muted); }
.result.r { color: var(--red); }
.result.w { color: var(--ink); }
.linkbtn { min-width: 44px; min-height: 44px; margin-top: -2px; margin-bottom: -2px; padding: 0 10px; background: none; border: 0; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; }
.side { position: relative; padding: 8px 10px 10px; border-top: 4px solid var(--ink); cursor: pointer; min-width: 0; }
.side + .side { border-left: 1px solid var(--rule); }
.side.r { border-top-color: var(--red); }
.side.win.r { background: var(--red-soft); }
.side.win.w { background: var(--white-soft); }
.side.selected { box-shadow: inset 0 0 0 3px var(--ink); background-image: linear-gradient(var(--select), var(--select)); }
.side-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); letter-spacing: 0.2em; min-height: 20px; }
.side.r .side-top { color: var(--red); }
.badge { margin-left: auto; font-family: var(--serif); font-weight: 800; font-size: 13px; letter-spacing: 0; padding: 0 6px; background: var(--ink); color: var(--paper); }
.side.r .badge { background: var(--red); color: #fff; }
.nm {
  display: block; width: 100%; min-width: 0; min-height: 44px; margin: 2px 0 4px; padding: 0 2px;
  font-family: var(--serif); font-weight: 800; font-size: 22px; background: transparent; border: 0; border-bottom: 1px dashed var(--rule); border-radius: 0;
}
.side.r .nm { color: var(--red); }
.nm::placeholder { font-weight: 400; font-size: 15px; color: var(--muted); }
.marks { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; }
.mk { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper); font-family: var(--serif); font-weight: 800; font-size: 22px; }
.side.r .mk { color: var(--red); }
.mk.empty { color: var(--muted); font-family: var(--sans); font-weight: 400; font-size: 12px; border-style: dashed; background: transparent; }
.mk.foulpt { font-size: 18px; border-width: 2px; }
.count { margin-left: auto; font-family: var(--serif); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.count small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 1px; }
.foul-line { min-height: 18px; font-size: 12px; color: var(--muted); }
.seq { margin: 0; padding: 6px 12px; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.seq:empty { display: none; }
.seq .r { color: var(--red); }
.seq b { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.seq .r b { color: var(--red); }
.bout .memo { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; padding: 8px 12px; font-size: 15px; }

.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--rule); background: var(--select); font-size: 14px; }
.confirm span { flex: 1 1 100%; }
.confirm button { flex: 1; min-height: 44px; border: 1px solid var(--rule-strong); background: var(--paper); font-weight: 700; }
.confirm .danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.delete-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--rule); }
.delete-trigger { min-width: 136px; min-height: 48px; padding: 0 12px; border: 1px solid var(--danger); border-radius: 2px; background: transparent; color: var(--danger); font-size: 14px; font-weight: 700; }
.delete-trigger:active { background: var(--danger); color: #fff; }
.empty-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-align: center; }

.add { display: block; width: 100%; min-height: 48px; margin-bottom: 14px; background: none; border: 1.5px dashed var(--muted); border-radius: 2px; font-size: 15px; font-weight: 700; color: var(--muted); }
.add.sm { margin: 0 0 12px; }

/* ---------- 団体戦 ---------- */
.match { background: var(--paper); border: 1px solid var(--rule-strong); margin-bottom: 14px; }
.match-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; width: 100%; min-height: 56px; padding: 0; background: none; border: 0; text-align: left; }
.match-head .pm { align-self: stretch; display: grid; place-items: center; font-size: 24px; font-weight: 700; border-right: 1px solid var(--rule); }
.match-head .ttl { padding: 6px 12px; min-width: 0; font-family: var(--serif); font-weight: 800; font-size: 17px; line-height: 1.3; }
.match-head .ttl small { display: block; font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-head .sum { padding-right: 12px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.35; }
.match-head .sum b { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.match-head .sum b.r { color: var(--red); }
.match-body { padding: 10px 12px 12px; border-top: 1px solid var(--rule-strong); }
.match-body .meta { margin-bottom: 10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); margin-bottom: 10px; }
.seg button { min-height: 44px; background: none; border: 0; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.table { border: 1px solid var(--rule); margin-bottom: 10px; }
.row { display: grid; grid-template-columns: 32px 1fr 1fr; border-top: 1px solid var(--rule); position: relative; }
.row:first-child { border-top: 0; }
.row .pos { grid-row: 1; display: grid; place-items: center; background: var(--bg); font-family: var(--serif); font-weight: 800; font-size: 14px; writing-mode: vertical-rl; letter-spacing: 0.2em; padding: 4px 0; }
.row .side { border-left: 1px solid var(--rule); padding: 4px 8px 6px; }
.row .nm { font-size: 18px; min-height: 40px; }
.row .mk { width: 34px; height: 34px; font-size: 18px; }
.row .count { font-size: 18px; }
.row .seq { grid-column: 1 / -1; padding: 4px 10px; font-size: 12px; }
.row .row-del { grid-column: 1 / -1; }
.row .confirm { grid-column: 1 / -1; }
.stats { margin: 0 0 10px; padding: 6px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 12px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats div:first-child { color: var(--ink); font-weight: 700; }
.match-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---------- 共有・リセット ---------- */
.share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.share button { min-height: 48px; padding: 0 4px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px; font-size: 14px; font-weight: 700; }
.share button:active { background: var(--ink); color: var(--paper); }
.out { background: var(--paper); border: 1px solid var(--rule-strong); padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }
.out p { margin: 0 0 8px; }
.out textarea { width: 100%; min-height: 160px; padding: 8px; font-size: 14px; background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; font-family: var(--sans); color: var(--ink); }
.out img { display: block; max-width: 100%; height: auto; margin: 8px 0; border: 1px solid var(--rule); }
.out .btnrow { display: flex; gap: 8px; }
.out .btnrow a, .out .btnrow button { flex: 1; display: grid; place-items: center; min-height: 44px; border: 1px solid var(--rule-strong); background: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; }
.reset { margin: 4px 0 16px; }
.reset .linkbtn { display: block; margin: 0 auto; }
.note-foot { font-size: 12px; color: var(--danger); text-align: center; }
.site-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.site-foot a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.ad-slot { display: grid; place-items: center; width: 100%; min-height: 100px; margin: 10px 0 18px; border: 1px dashed var(--rule); color: var(--muted); background: var(--paper); font-size: 12px; }

/* ---------- 下部の入力パッド ---------- */
.pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--paper); border-top: 2px solid var(--rule-strong);
  padding: 6px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.pad-in { max-width: 560px; margin: 0 auto; }
.target { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 6px; padding: 0 8px; font-size: 13px; color: var(--muted); border-left: 6px solid var(--muted); }
.target.r { border-left-color: var(--red); }
.target.w { border-left-color: var(--ink); }
.target b { color: var(--ink); font-size: 15px; }
.target.r b.who { color: var(--red); }
.target span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keys { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 3), 1fr); }
.keys button { min-height: 58px; background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 2px; font-family: var(--serif); font-weight: 800; font-size: 28px; line-height: 1.1; }
.keys button small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--muted); }
.keys button:active { background: var(--ink); color: var(--paper); }
.keys button:active small { color: var(--paper); }
.keys button:disabled { opacity: 0.4; }
.keys .sub { min-height: 48px; font-family: var(--sans); font-size: 16px; font-weight: 700; }
.keys .sub.foul { color: var(--danger); border-color: var(--danger); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--pad-h) + env(safe-area-inset-bottom) + 6px); max-width: 90vw; z-index: 9; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 2px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 360px) {
  .nm { font-size: 19px; }
  .mk { width: 36px; height: 36px; }
}

/* ---------- トーナメント表（2nd Step） ---------- */
/* 入力パッドを使わない画面（表・作成フォーム）では下余白を詰めてパッドを隠す */
body.no-pad { --pad-h: 24px; }
body.no-pad .pad { display: none; }
.tour-head { margin: 0 0 10px; }
.tour-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; letter-spacing: 0.06em; }
.tour-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.tour-head .champ { color: var(--red); font-family: var(--serif); font-weight: 800; font-size: 17px; }
.tour-form .names { min-height: 180px; resize: vertical; line-height: 1.6; font-family: var(--serif); }
.tour-form .full { margin-bottom: 10px; }
.tour-form .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.tour-form .btns button, .tour-actions button { min-height: 48px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px; font-size: 14px; font-weight: 700; }
.tour-form .btns .primary { background: var(--ink); color: var(--paper); }
.form-err { margin: 0 0 10px; font-size: 13px; color: var(--danger); }
.form-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.tour-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 14px; }
.tour-banner { background: var(--paper); border: 1px solid var(--rule-strong); border-left: 6px solid var(--red); padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.tour-banner p { margin: 0 0 8px; }
.tour-banner .btnrow { display: flex; gap: 8px; }
.tour-banner button { flex: 1; min-height: 44px; background: var(--paper); border: 1px solid var(--rule-strong); font-weight: 700; font-size: 14px; }

/* 横倒しのブラケット。横スクロールはこの枠の中だけ（ページ本体は動かさない） */
.br-scroll { --bw: 168px; --gap: 32px; --ln: 2px solid var(--rule-strong); overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border: 1px solid var(--rule-strong); padding: 10px 12px 14px; max-width: 100%; }
.br-in { width: max-content; }
.br-heads { display: flex; margin-bottom: 6px; }
.br-h { flex: none; width: var(--bw); margin-right: var(--gap); font-size: 12px; color: var(--muted); letter-spacing: 0.1em; border-bottom: 1px solid var(--rule); }
.br-h:last-child { margin-right: 0; }
.nd { display: flex; align-items: center; }
.kids { display: flex; flex-direction: column; position: relative; }
.kids::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(var(--gap) / 2); margin-top: -1px; border-top: var(--ln); }
.kid { position: relative; display: flex; padding-right: var(--gap); }
.kid::before { content: ""; position: absolute; right: calc(var(--gap) / 2); top: 50%; width: calc(var(--gap) / 2); margin-top: -1px; border-top: var(--ln); }
.kid::after { content: ""; position: absolute; right: calc(var(--gap) / 2 - 1px); border-right: var(--ln); }
.kid:first-child::after { top: 50%; bottom: 0; }
.kid:last-child::after { top: 0; bottom: 50%; }
.mw { flex: none; width: var(--bw); padding: 6px 0; }
.tm { display: block; width: 100%; padding: 0; text-align: left; background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 0; color: var(--ink); }
button.tm:active { background: var(--select); }
.tm.pending, .tm.bye { border-color: var(--rule); border-style: dashed; }
.tp { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border-left: 4px solid var(--ink); font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.25; }
.tp + .tp { border-top: 1px solid var(--rule); }
.tp.a { border-left-color: var(--red); }
.tp .tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.tp { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; }
button.tp:active { background: var(--select); }
.br-score-open { display: block; width: 100%; min-height: 32px; border: 0; border-top: 1px solid var(--rule); background: var(--paper); font-size: 12px; }
.roster-editor { margin: 0 0 12px; padding: 10px; border: 1px solid var(--rule-strong); background: var(--paper); }
.roster-editor h2 { margin: 12px 0 4px; font-size: 18px; }
.roster-editor textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.roster-editor button { min-height: 44px; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--rule-strong); background: var(--paper); }
.tp .ts { flex: none; min-width: 1.2em; text-align: right; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.tp.win { font-weight: 800; background: var(--white-soft); }
.tp.a.win { background: var(--red-soft); }
.tp.win .ts { color: var(--red); }
.tp.lose { color: var(--muted); font-weight: 400; }
.tp.empty .tn { color: var(--muted); font-weight: 400; font-size: 13px; }

/* 1試合の画面 */
.tm-view .back-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tm-view .back-row button { min-height: 44px; padding: 0 14px; background: var(--paper); border: 1px solid var(--rule-strong); font-weight: 700; }
.tm-view .back-row b { font-family: var(--serif); font-size: 17px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); background: var(--paper); margin-bottom: 8px; }
.vs div { padding: 8px 10px; border-top: 4px solid var(--ink); min-width: 0; font-family: var(--serif); font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.vs div + div { border-left: 1px solid var(--rule); }
.vs .a { border-top-color: var(--red); color: var(--red); }
.vs small { display: block; font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--muted); }
.vs .win small { color: var(--ink); font-weight: 700; }
.status { margin: 0 0 8px; font-size: 14px; }
.status b { font-family: var(--serif); }
.winpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.winpick button, .tm-view .wide { min-height: 48px; padding: 4px 6px; background: var(--paper); border: 1px solid var(--rule-strong); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.winpick button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tm-view .wide { display: block; width: 100%; margin-bottom: 8px; }
.tm-view .team-box { background: var(--paper); border: 1px solid var(--rule-strong); padding: 10px 12px 12px; margin-bottom: 14px; }