/* Design language (docs/boostpad-ui-revisions-and-tournament-scope.md §2, DS-1…DS-10).
   Tokens, self-hosted fonts, the shared components from js/ds.js and the DS-7 top navigation.
   Visual source of truth: docs/mockups/home/home-by-role.dc.html. */

/* ---------- DS-1 fonts (self-hosted, OFL) ---------- */
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/chakra-petch-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/chakra-petch-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600.woff2') format('woff2'); }

/* ---------- DS-1 tokens ---------- */
:root {
  --ds-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
  --ds-page: #0a1730; --ds-topbar: #0d1d3b; --ds-card: #10234a; --ds-card-line: #213f6c;
  --ds-inset: #0d1e40; --ds-inset-line: #1b3660; --ds-pop: #0f2244; --ds-pop-line: #2b4c7c;
  --ds-text: #f1f5fb; --ds-text-2: #c9d6ea; --ds-muted: #a8bcd8; --ds-faint: #8ea4c4;
  --ds-gold: #f5c84b; --ds-link: #7cc8f5;
  --ds-red-bg: #3a1a22; --ds-red-line: #5a2630; --ds-red: #ff8a8a;
  --ds-amber-bg: #33280f; --ds-amber-line: #5a4416; --ds-amber: #f6c25a;
  --ds-blue-bg: #13304f; --ds-blue-line: #1f4a78; --ds-blue: #7cc8f5;
  --ds-green-bg: #123a2c; --ds-green-line: #1d5a43; --ds-green: #5fe0a6;
  --ds-purple-bg: #2a1f4a; --ds-purple-line: #3d2f6b; --ds-purple: #b9a2ff;
  --ds-gray-bg: #18294a; --ds-gray-line: #2b4065; --ds-gray: #c9d6ea;
}
.ds-ic { width: 20px; height: 20px; flex: none; }
.ds-disp { font-family: var(--ds-display); }
.ds-muted { color: var(--ds-faint); font-size: 13px; }
.ds-pad { padding: 16px; }

/* ---------- DS-2 icon tiles ---------- */
.ds-itile { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid; }
.ds-itile.sm { width: 32px; height: 32px; border-radius: 8px; } .ds-itile.sm .ds-ic { width: 16px; height: 16px; }
.ds-itile.chip { width: 36px; height: 36px; }
.ds-itile.red { background: var(--ds-red-bg); color: var(--ds-red); border-color: var(--ds-red-line); }
.ds-itile.amber { background: var(--ds-amber-bg); color: var(--ds-amber); border-color: var(--ds-amber-line); }
.ds-itile.blue { background: var(--ds-blue-bg); color: var(--ds-blue); border-color: var(--ds-blue-line); }
.ds-itile.green { background: var(--ds-green-bg); color: var(--ds-green); border-color: var(--ds-green-line); }
.ds-itile.purple { background: var(--ds-purple-bg); color: var(--ds-purple); border-color: var(--ds-purple-line); }
.ds-itile.gray { background: var(--ds-gray-bg); color: var(--ds-gray); border-color: var(--ds-gray-line); }

/* ---------- buttons ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ds-gold);
  background: var(--ds-gold); color: #1b1608; font: 600 14px var(--ds-font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds-btn:hover { filter: brightness(1.06); color: #1b1608; }
.ds-btn.ghost { background: #11264a; color: #e8eef7; border-color: var(--ds-pop-line); }
.ds-btn.ghost:hover { background: #163059; color: #fff; }
.ds-btn.blue { background: #1f6fd1; border-color: #1f6fd1; color: #fff; }
.ds-btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ds-btn .ds-ic { width: 18px; height: 18px; }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }
.ds-ibtn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ds-pop-line); background: #11264a; color: var(--ds-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.ds-ibtn:hover { background: #163059; color: #fff; }
.ds-ibtn .ds-ic { width: 16px; height: 16px; }

/* ---------- DS-9 cards ---------- */
.ds-card { background: var(--ds-card); border: 1px solid var(--ds-card-line); border-radius: 14px; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; color: #e8eef7; font-family: var(--ds-font); }
.ds-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 8px; }
.ds-card .ds-thumb + .ds-chead { padding-top: 12px; }
.ds-ctitle { margin: 0; font: 600 18px/1.25 var(--ds-font); color: var(--ds-text); display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ds-ctitle a { color: inherit; text-decoration: none; }
.ds-card .ds-thumb + .ds-chead .ds-ctitle { font-size: 17px; }
.ds-atop { display: inline-flex; }
.ds-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; font: 700 13px/24px var(--ds-font); text-align: center; display: inline-block; }
.ds-count.red { background: #e5484d; color: #fff; } .ds-count.amber { background: var(--ds-amber); color: #1b1608; } .ds-count.gray { background: #2b4065; color: #fff; }
.ds-hgroup { display: flex; align-items: center; gap: 10px; flex: none; }
.ds-cmeta { font-size: 13px; color: var(--ds-muted); text-decoration: none; }
a.ds-cmeta:hover { color: #fff; }
.ds-cbody { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 8px; position: relative; }
.ds-card.fixed .ds-cbody { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); padding-bottom: 18px; }
.ds-cfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #1d3860; }
.ds-thumb { position: relative; height: 120px; flex: none; background: #0c1c3a; border-bottom: 1px solid var(--ds-card-line); }
.ds-thumb img, .ds-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-tlab { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: rgba(7,16,34,.88); border: 1px solid var(--ds-pop-line); font-size: 12px; font-weight: 600; color: var(--ds-text); }
.ds-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 6px 8px; }
.ds-stat { background: var(--ds-inset); border: 1px solid var(--ds-inset-line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.ds-sval { font: 700 20px/1.1 var(--ds-display); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-sval.red { color: var(--ds-red); } .ds-sval.amber { color: var(--ds-amber); } .ds-sval.green { color: var(--ds-green); } .ds-sval.gray { color: var(--ds-text); }
.ds-slab { font-size: 12px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-line { font-size: 13px; color: var(--ds-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; }
.ds-line b { color: var(--ds-text); font-weight: 600; }
.ds-line a { color: inherit; text-decoration: none; } .ds-line a:hover { color: #fff; }
.ds-pill { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #1c3966; color: var(--ds-text-2); display: inline-block; white-space: nowrap; }
.ds-pill.green { background: var(--ds-green-bg); color: var(--ds-green); } .ds-pill.amber { background: var(--ds-amber-bg); color: var(--ds-amber); }
.ds-pill.blue { background: var(--ds-blue-bg); color: var(--ds-blue); } .ds-pill.red { background: var(--ds-red-bg); color: var(--ds-red); } .ds-pill.purple { background: var(--ds-purple-bg); color: var(--ds-purple); }

/* ---------- DS-3 action rows ---------- */
.ds-arow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #1a335a; }
.ds-arow:last-child { border-bottom: 0; }
.ds-arow.done .ds-atitle { text-decoration: line-through; color: #7f93b3; }
.ds-arow.done .ds-itile { opacity: .4; }
.ds-amain { min-width: 0; }
.ds-atitle { font-weight: 600; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-adetail { font-size: 13px; color: var(--ds-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-adue { font-size: 12px; font-weight: 600; white-space: nowrap; text-align: right; }
.ds-adue.red, .ds-adue-m.red { color: var(--ds-red); } .ds-adue.amber, .ds-adue-m.amber { color: var(--ds-amber); }
.ds-adue.blue, .ds-adue.gray, .ds-adue.green, .ds-adue.purple { color: #9fb4d3; }
.ds-adue-m { display: none; }
.ds-abtns { display: flex; align-items: center; gap: 6px; }
.ds-snoozed { padding: 8px 8px 4px; font-size: 12px; color: var(--ds-faint); }
.ds-snoozed button { background: none; border: 0; color: var(--ds-link); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ---------- DS-4 agenda rows ---------- */
.ds-today { display: flex; align-items: center; gap: 8px; padding: 2px 8px 8px; font-size: 13px; color: var(--ds-faint); }
.ds-erow { display: grid; grid-template-columns: 56px 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid #1a335a; }
.ds-erow:last-child { border-bottom: 0; }
.ds-dblk { width: 56px; border-radius: 9px; background: var(--ds-inset); border: 1px solid #1f3d68; text-align: center; padding: 5px 0; font-family: var(--ds-display); }
.ds-ddow { font-size: 12px; font-weight: 700; color: #8fd3ff; letter-spacing: .06em; }
.ds-dmon { font-size: 11px; font-weight: 600; color: var(--ds-text-2); letter-spacing: .04em; white-space: nowrap; }
.ds-ebar { width: 4px; height: 40px; border-radius: 2px; }
.ds-emain { min-width: 0; }
.ds-etitle { display: block; font-weight: 600; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.ds-etitle:hover { color: #fff; text-decoration: underline; }
.ds-emeta { font-size: 13px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-eright { display: flex; align-items: center; gap: 10px; }
.ds-rsvp { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ds-text-2); white-space: nowrap; }
.ds-rsvp .ds-ic { width: 16px; height: 16px; }
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.ds-status .ds-ic { width: 16px; height: 16px; }
.ds-status.green { background: var(--ds-green-bg); color: var(--ds-green); } .ds-status.amber { background: var(--ds-amber-bg); color: var(--ds-amber); }
.ds-status.blue { background: var(--ds-blue-bg); color: var(--ds-blue); } .ds-status.red { background: var(--ds-red-bg); color: var(--ds-red); }
.ds-status.gray { background: var(--ds-gray-bg); color: var(--ds-gray); } .ds-status.purple { background: var(--ds-purple-bg); color: var(--ds-purple); }
.ds-then { margin: 8px 6px 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed #33557f; font-size: 13px; color: var(--ds-text-2); }
.ds-then b { color: var(--ds-amber); }

/* ---------- DS-5 KPI tiles ---------- */
.ds-pulse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; }
.ds-pulse.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-tile { background: var(--ds-inset); border: 1px solid #1d3a64; border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 118px; color: inherit; text-decoration: none; min-width: 0; }
a.ds-tile:hover { border-color: #2f62a3; }
.ds-tmain { min-width: 0; }
.ds-tl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #e8eef7; }
.ds-tl .ds-ic { width: 18px; height: 18px; }
.ds-tval { display: flex; align-items: baseline; gap: 4px; font: 700 28px/1.15 var(--ds-display); color: var(--ds-text); margin-top: 6px; white-space: nowrap; }
.ds-tval small { font-size: 15px; color: var(--ds-text-2); }
.ds-tval.ds-empty { color: var(--ds-faint); }
.ds-delta { font-size: 13px; font-weight: 600; margin-top: 2px; }
.ds-delta.good { color: var(--ds-green); } .ds-delta.bad { color: var(--ds-red); } .ds-delta.flat { color: var(--ds-muted); }
.ds-vs { font-size: 12px; color: var(--ds-muted); }
.ds-ringwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ds-ring text { font-family: var(--ds-font); }
.ds-tgt { font-size: 12px; color: var(--ds-muted); white-space: nowrap; }

/* ---------- DS-6 header chips ---------- */
.ds-hchip { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 8px; border-radius: 12px; border: 1px solid var(--ds-pop-line); background: var(--ds-pop);
  color: #e8eef7; font: inherit; text-align: left; cursor: pointer; text-decoration: none; min-width: 0; }
.ds-hchip:hover { border-color: #3a6aa8; color: #fff; }
.ds-hchip b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-hchip .ds-s { display: block; font-size: 12px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-hchip > span:last-child { min-width: 0; }
.ds-samplechip { font-size: 12px; color: var(--ds-muted); border: 1px dashed #3a5a88; border-radius: 10px; padding: 6px 10px; white-space: nowrap; }
.ds-samplechip button { background: none; border: 0; padding: 0; color: var(--ds-link); font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- DS-8 activity panel ---------- */
.ds-feed { position: fixed; top: 72px; right: 16px; width: 400px; max-width: calc(100% - 32px); max-height: min(760px, calc(100dvh - 90px)); display: flex; flex-direction: column; border-radius: 16px;
  background: var(--ds-pop); border: 1px solid var(--ds-pop-line); box-shadow: 0 24px 60px rgba(0,0,0,.55); z-index: 120; overflow: hidden; font-family: var(--ds-font); color: #e8eef7; }
.ds-feed.hidden { display: none; }
.ds-fhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.ds-fhead .ds-ctitle { font-size: 20px; }
.ds-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ds-green); background: var(--ds-green-bg); border-radius: 10px; padding: 2px 9px; margin-left: 8px; }
.ds-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-green); display: inline-block; }
.ds-ftabs { display: flex; gap: 4px; padding: 4px 12px 10px; }
.ds-ftabs button { flex: 1; min-height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ds-muted); font: 500 13px var(--ds-font); cursor: pointer; }
.ds-ftabs button.on { background: #163a6b; border-color: #2f62a3; color: #fff; }
.ds-flist { overflow: auto; padding: 0 8px 8px; min-height: 80px; }
.ds-fitem { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 10px 8px; border-radius: 10px; color: inherit; text-decoration: none; align-items: start; }
.ds-fitem.sm { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 6px; align-items: center; }
.ds-fitem:hover { background: #13294f; }
.ds-fmain { min-width: 0; display: flex; flex-direction: column; }
.ds-ftext { font-size: 14px; color: #e8eef7; }
.ds-fitem.sm .ds-ftext { font-size: 13px; color: var(--ds-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-ftext b { font-weight: 600; color: var(--ds-text); }
.ds-fquote { font-size: 13px; color: var(--ds-muted); margin-top: 2px; overflow-wrap: anywhere; }
.ds-ftime { font-size: 12px; color: var(--ds-faint); white-space: nowrap; }
.ds-ffoot { padding: 10px 16px 14px; border-top: 1px solid #1d3860; }

/* ---------- DS-7 top navigation ---------- */
#home .ds-topnav { position: relative; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 0 24px !important; height: 64px; min-height: 64px; background: var(--ds-topbar) !important;
  border-bottom: 1px solid #1f3a64 !important; box-shadow: none !important; font-family: var(--ds-font); }
.ds-topnav .ds-brand { display: flex; align-items: center; gap: 10px; min-width: max-content; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ds-topnav .ds-brand img { height: 38px; width: auto; border-radius: 9px; }
.ds-brandname { font: 700 19px/1 var(--ds-display); color: #f4fbff; }
.ds-brandname b { color: var(--ds-gold); }
.ds-brandsub { font-size: 11px; letter-spacing: .08em; color: #9fb4d3; margin-top: 3px; text-transform: uppercase; }
.ds-navlinks { display: flex; align-items: stretch; gap: 2px; flex: 1; justify-content: center; height: 100%; min-width: 0; }
.ds-navlinks .nv-item { position: relative; display: flex; align-items: stretch; }
.ds-navlinks .nv-top { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; background: transparent; color: var(--ds-text-2); font: 500 14px var(--ds-font); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; border-radius: 0; min-height: 0; }
.ds-navlinks .nv-top:hover { color: #fff; background: #11264a; }
.ds-navlinks .nv-top.on { color: #fff; box-shadow: inset 0 -3px 0 var(--ds-gold); background: #112a50; }
.ds-navlinks .nv-top .ds-ic { width: 18px; height: 18px; }
.ds-navlinks .nv-caret { font-size: 11px; color: var(--ds-faint); font-weight: 400; }
.ds-navcount { position: absolute; top: 10px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font: 600 11px/18px var(--ds-font); text-align: center; pointer-events: none; }
.ds-navcount.amber { background: var(--ds-amber); color: #1b1608; }
.ds-navcount.hidden { display: none; }
.ds-navright { display: flex; align-items: center; gap: 8px; min-width: max-content; }
.ds-iconbtn { position: relative; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #24426f; background: #11264a; color: var(--ds-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ds-iconbtn:hover { color: #fff; background: #163059; }
.ds-iconbtn .ds-navcount { top: -6px; right: -6px; }
.ds-searchbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #24426f; background: #11264a; color: var(--ds-text-2); font: 500 14px var(--ds-font); cursor: pointer; }
.ds-searchbtn:hover { color: #fff; }
.ds-kbd { font-size: 11px; border: 1px solid #3a5a88; border-radius: 5px; padding: 1px 5px; color: #9fb4d3; }
.ds-me { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 6px; border-radius: 10px; border: 1px solid #24426f; background: #11264a; color: #e8eef7; cursor: pointer; font: 500 13px var(--ds-font); }
.ds-me:hover { border-color: var(--ds-gold); }
.ds-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #26487a; display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--ds-font); overflow: hidden; flex: none; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-mename { line-height: 1.2; text-align: left; }
.ds-mename b { display: block; font-weight: 600; }
.ds-mename span { display: block; color: var(--ds-muted); font-size: 12px; text-transform: capitalize; }
/* menus */
.ds-navlinks .nv-menu { display: none; position: absolute; top: 62px; left: 50%; transform: translateX(-50%); min-width: 240px; padding: 8px; border-radius: 14px; background: var(--ds-pop); border: 1px solid var(--ds-pop-line);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 60; flex-direction: column; gap: 2px; }
.ds-navlinks .nv-item.open .nv-menu { display: flex; }
.ds-navlinks .nv-item.has-kids::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.ds-navlinks .nv-menu button, .ds-navlinks .nv-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 0; background: transparent; color: #e8eef7;
  font: 400 14px var(--ds-font); text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 40px; }
.ds-navlinks .nv-menu button:hover, .ds-navlinks .nv-menu a:hover, .ds-navlinks .nv-menu button:focus-visible { background: #163059; color: #fff; }
.ds-navlinks .nv-menu .nv-landing { color: #8fd3ff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ds-navlinks .nv-menu .ds-navcount { position: static; }
.ds-navlinks .nv-menu.thumbs { display: none; width: 520px; padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-navlinks .nv-item.open .nv-menu.thumbs { display: grid; }
.ds-navlinks .nv-menu.thumbs .ds-mitem { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; white-space: normal; }
.ds-mitem .ds-mthumb { width: 100%; height: 96px; border-radius: 8px; border: 1px solid var(--ds-pop-line); background: #0c1c3a; overflow: hidden; display: block; }
.ds-mitem .ds-mthumb img, .ds-mitem .ds-mthumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-mtitle { font-weight: 600; font-size: 14px; }
.ds-mdesc { font-size: 12px; color: var(--ds-muted); }
.ds-navlinks .nv-menu.thumbs .nv-more { grid-column: 1 / -1; justify-content: center; min-height: 36px; color: var(--ds-link); }
/* page font for the DS surfaces */
#home, #cpage, .ds-page { font-family: var(--ds-font); }

/* tablet: icon with a small label underneath (labels must stay findable — an icons-only bar
   left people unable to locate "Tasks"); the bar scrolls sideways if a narrow tablet can't fit it */
@media (max-width: 1279px) {
  .ds-navlinks .nv-caret, .ds-searchbtn .ds-searchtext, .ds-kbd, .ds-mename { display: none; }
  .ds-navlinks { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .ds-navlinks::-webkit-scrollbar { display: none; }
  .ds-navlinks .nv-top { flex-direction: column; justify-content: center; gap: 3px; padding: 0 5px; min-width: 48px; }
  .ds-navlinks .nv-top > span { display: block; max-width: 58px; font-size: 10.5px; line-height: 1.1; font-weight: 600; text-align: center; white-space: normal; }
  .ds-navlinks .nv-top .ds-ic { width: 20px; height: 20px; }
  .ds-brandsub { display: none; }
  .ds-pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pulse.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { #home .ds-topnav { gap: 8px; padding: 0 14px !important; } .ds-brandname, .ds-brandsub { display: none !important; } .ds-navlinks .nv-top { padding: 0 2px; min-width: 42px; } .ds-navlinks .nv-top > span { font-size: 10px; max-width: 50px; } .ds-navright { gap: 6px; } }
/* phone: brand + bell on top, role tab bar at the bottom */
@media (max-width: 767px) {
  #home .ds-topnav { height: 58px; min-height: 58px; padding: 0 12px !important; gap: 8px; }
  .ds-navlinks, .ds-brandsub, .ds-me, .ds-searchbtn { display: none !important; }
  .ds-navright { margin-left: auto; }
  .ds-arow { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .ds-adue { display: none; } .ds-adue-m { display: inline; } .ds-snz { display: none; }
  .ds-erow { grid-template-columns: 52px 4px minmax(0, 1fr); }
  .ds-eright { grid-column: 3; justify-content: flex-start; flex-wrap: wrap; }
  .ds-pulse, .ds-pulse.four { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
  .ds-pulse .ds-tile { flex: none; width: 78%; scroll-snap-align: start; }
  .ds-thumb { height: 84px; }
  .ds-feed { top: 64px; right: 8px; width: calc(100% - 16px); max-width: none; }
  .ds-hchip { flex: 1 1 0; }
}
@media (min-width: 2400px) {
  .ds-ctitle { font-size: 20px; } .ds-atitle, .ds-etitle { font-size: 16px; } .ds-adetail, .ds-emeta, .ds-line { font-size: 14.5px; }
}

/* HOME2-7 phone tab bar in the design language */
@media (max-width: 767px) {
  body.has-bottom-tabs #bottom-tabs { background: var(--ds-topbar) !important; border-top: 1px solid #1f3a64 !important; font-family: var(--ds-font); }
  #bottom-tabs button { color: var(--ds-muted) !important; font: 500 12px var(--ds-font) !important; min-height: 52px; position: relative; }
  #bottom-tabs button .ds-ic { width: 22px; height: 22px; }
  #bottom-tabs button.on { color: var(--ds-gold) !important; }
  #bottom-tabs .ds-navcount { top: 0; right: calc(50% - 24px); }
}

/* DS-7: ten labelled items must fit beside search/bell/account down to 1280 px */
@media (max-width: 1679px) and (min-width: 1280px) {
  #home .ds-topnav { gap: 10px; padding: 0 16px !important; }
  .ds-navlinks .nv-top { padding: 0 8px; gap: 6px; font-size: 13.5px; }
  .ds-navlinks .nv-caret { display: none; }
  .ds-searchbtn .ds-searchtext { display: none; }
  .ds-searchbtn { padding: 0 12px; }
  .ds-mename span { display: none; }
  .ds-brandsub { display: none !important; }
}
@media (max-width: 1439px) and (min-width: 1280px) {
  .ds-navlinks .nv-top { padding: 0 6px; font-size: 13px; }
  .ds-navlinks .nv-top .ds-ic { width: 16px; height: 16px; }
  .ds-kbd { display: none; }
  .ds-mename { display: none; }
}

/* DS surfaces inside full pages: the page layer's generic button reset must not repaint DS buttons */
#cpage { background: var(--ds-page) !important; }
#cpage .ds-btn, #cdrawer .ds-btn, #modal .ds-btn { color: #1b1608 !important; background: var(--ds-gold) !important; border: 1px solid var(--ds-gold) !important; font: 600 14px var(--ds-font) !important; }
#cpage .ds-btn.sm, #cdrawer .ds-btn.sm { font-size: 13px !important; }
#cpage .ds-btn.ghost, #cdrawer .ds-btn.ghost, #modal .ds-btn.ghost { color: #e8eef7 !important; background: #11264a !important; border-color: var(--ds-pop-line) !important; }
#cpage .ds-btn.blue, #cdrawer .ds-btn.blue { color: #fff !important; background: #1f6fd1 !important; border-color: #1f6fd1 !important; }
#cpage .ds-ibtn, #cdrawer .ds-ibtn { color: var(--ds-text-2) !important; background: #11264a !important; border: 1px solid var(--ds-pop-line) !important; min-height: 0; }
#cpage .ds-hchip, #cdrawer .ds-hchip { color: #e8eef7; background: var(--ds-pop); border: 1px solid var(--ds-pop-line); font: inherit; }
.ds-count.green { background: var(--ds-green); color: #062016; }
/* the board's own toolbar is wider than 1440 px with every button showing — scroll inside it instead of widening the page */
#topbar { overflow-x: auto; scrollbar-width: none; }
#topbar::-webkit-scrollbar { display: none; }
/* plain links inside legacy cards on the DS page background */
/* plain links on the dark DS page (tables, cards, drawers) — never the browser's default #00e */
#cpage a:not([class]), #cpage a:not([class]):visited, #cdrawer a:not([class]), #cdrawer a:not([class]):visited, #modal a:not([class]) { color: var(--ds-link); }
#cpage .ck-table td.ck-td-primary a:not([class]) { color: var(--ds-text); font-weight: 600; text-decoration: none; }
#cpage .ck-table td.ck-td-primary a:not([class]):hover { color: var(--ds-link); text-decoration: underline; }
/* Shadow mode bar (js/shadow.js) */
#shadow-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px); padding: 8px 10px 8px 16px; border-radius: 12px; background: #4a2a06; border: 2px solid var(--ds-gold); color: #fff3d6;
  font: 500 14px var(--ds-font); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
#shadow-bar b { color: #fff; }
#shadow-bar button { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--ds-gold); color: #2a1c00; font: 700 14px var(--ds-font); cursor: pointer; }
@media (max-width: 767px) { #shadow-bar { bottom: calc(70px + env(safe-area-inset-bottom)); font-size: 13px; } }
/* friendly date/time fields (js/datetime.js) */
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .9; }
.dt-hidden { display: none !important; }
.dt-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.dt-wrap .dt-date { min-width: 150px; flex: 1 1 150px; }
.dt-wrap select, .dt-wrap input { min-height: 40px; }
.dt-wrap .dt-h, .dt-wrap .dt-m { width: 66px !important; min-width: 0 !important; flex: none; padding: 0 6px !important; }
.dt-wrap .dt-ap { width: 70px !important; min-width: 0 !important; flex: none; padding: 0 6px !important; }
.dt-wrap .dt-colon { font-weight: 700; color: var(--ds-muted, #8ea4c4); }
.dt-wrap .dt-cal, .dt-wrap .dt-clear { min-width: 36px !important; width: 36px; height: 36px; min-height: 36px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--ds-pop-line, #2a4a7a) !important; background: #11264a !important; color: #e8eef7 !important; cursor: pointer; font-size: 15px; line-height: 1; }
.dt-wrap .dt-clear { color: var(--ds-muted, #8ea4c4) !important; }
label .dt-wrap, .ck-field .dt-wrap { width: 100%; }
.dt-wrap { display: flex !important; flex-wrap: nowrap; width: 100%; box-sizing: border-box; }
.dt-wrap .dt-date { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
.dt-time.dt-wrap { width: auto; display: inline-flex !important; }
@media (max-width: 480px) {
  .dt-datetime.dt-wrap { flex-wrap: wrap; }
  .dt-datetime.dt-wrap .dt-date { flex: 1 1 100% !important; }
}
/* schedule: go-to-date + click-a-day to add (js/hub.js) */
.hub-goto { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.hub-goto input { min-height: 36px; padding: 0 8px; border-radius: 8px; max-width: 160px; }
.hub-day-h[data-newday], .hub-cell[data-newday] { cursor: pointer; }
.hub-plus { opacity: .45; font-weight: 700; margin-left: 4px; }
.hub-day-h[data-newday]:hover .hub-plus { opacity: 1; color: var(--ds-gold, #f5c84b); }

/* "new version" prompt (main.js, service worker controllerchange) */
#upd-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 9999; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--ds-pop, #13294d); border: 1px solid var(--ds-gold, #f5c84b); color: var(--ds-text, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 14px; }
#upd-bar button { border-radius: 8px; padding: 6px 12px; font-weight: 700; }
#upd-go { background: var(--ds-gold, #f5c84b); color: #1b1608; border: 0; }
#upd-x { background: transparent; border: 0; color: var(--ds-muted, #a8bcd8); padding: 6px 8px !important; }
@media (max-width: 760px) { #upd-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- replay viewer + per-game stats (js/replay-viewer.js — film room and match pages) ---------- */
.rv-canvas { position: absolute; inset: 0; display: block; }
.rv-msg { display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ds-muted); font: 14px/1.5 var(--ds-font); }
.rv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: rgba(4, 12, 26, .85); border-top: 1px solid var(--ds-card-line); font: 600 13px var(--ds-font); color: var(--ds-text-2); }
.rv-bar button { min-height: 30px; min-width: 34px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--ds-card-line); background: var(--ds-inset); color: var(--ds-text); font: inherit; cursor: pointer; }
.rv-bar button.on { border-color: var(--ds-gold); color: var(--ds-gold); }
.rv-bar button:focus-visible { outline: 2px solid var(--ds-link); outline-offset: 1px; }
.rv-sp { flex: 1; }
.rv-time { font-variant-numeric: tabular-nums; }
.rv-stats-wrap { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.rv-stats { border-collapse: collapse; width: 100%; min-width: 640px; font: 13px/1.35 var(--ds-font); color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
.rv-stats th, .rv-stats td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--ds-inset-line); white-space: nowrap; }
.rv-stats thead th { color: var(--ds-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; cursor: help; }
.rv-stats tbody th { text-align: left; color: var(--ds-text); font-weight: 600; }
.rv-stats tbody th small { display: block; color: var(--ds-faint); font-weight: 400; font-size: 11px; }
.rv-stats thead th:first-child { text-align: left; cursor: default; }
.rv-stats tr.rv-blue th { box-shadow: inset 3px 0 0 #3d9dff; }
.rv-stats tr.rv-orange th { box-shadow: inset 3px 0 0 #ff8a2a; }
.fe-stage.rv-stage { aspect-ratio: 16 / 10; }
@media (max-width: 600px) { .fe-stage.rv-stage { aspect-ratio: 1 / 1; max-height: 80dvh; } }
.rv-speed { min-width: 46px !important; }
/* the replay viewer's own control bar sits at the bottom — keep the film room's Draw tools up top (under the score HUD) */
.fe-stage.rv-stage .fe-tools { top: 36px !important; bottom: auto !important; }