/* ============================================================
   Coaching System Expansion — shared styles (FND-UI, scope §2.3)
   Page layer (#cpage), drawer, grouped nav, bottom tab bar, command
   palette, dashboard cards and the .ck-* component kit. Matches the
   Rocket League theme (theme-rl.css tokens) with app.css fallbacks.
   Breakpoints: phone <768 · tablet 768–1023 · desktop 1024–1919 ·
   large/smartboard ≥1920 (60px targets via --tap from app.css).
   ============================================================ */

:root {
  --ck-bg: var(--rl-bg-bottom, #10141f);
  --ck-panel: rgba(11, 24, 48, .92);
  --ck-panel-2: rgba(20, 43, 78, .9);
  --ck-line: var(--rl-line, #313d58);
  --ck-line-soft: var(--rl-line-soft, #26304a);
  --ck-cyan: var(--rl-cyan, #45bdf5);
  --ck-cyan-2: var(--rl-cyan-2, #8eeaff);
  --ck-text: var(--rl-text, #e8ecf5);
  --ck-dim: var(--rl-muted, #93a0bb);
  --ck-gold: var(--rl-gold, #ffd54a);
  --ck-green: #5ac878;
  --ck-red: #ff6b6b;
  --ck-blue: #3d9dff;
  --ck-radius: 10px;
  --ck-gutter: 22px;
}

/* ---------- page layer ---------- */
#cpage {
  position: fixed; top: var(--hm-top-h, 84px); left: 0; right: 0; bottom: 0;
  z-index: 46; display: none; flex-direction: column; overflow: hidden;
  touch-action: pan-y; user-select: text; -webkit-user-select: text;
  color: var(--ck-text); font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(1100px 380px at 50% -160px, rgba(78,146,220,.22), transparent 60%),
    linear-gradient(180deg, var(--rl-bg-mid, #122749) 0%, var(--rl-bg-bottom, #030712) 70%);
}
body.cpage-open #cpage { display: flex; }
body.cpage-open #home > *:not(.hm-top) { display: none; }
.cp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px var(--ck-gutter) 0;
  font-size: 13px; color: var(--ck-dim); min-height: 26px;
}
.cp-crumbs a { color: var(--ck-cyan-2); text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }
.cp-crumbs .cp-sep { opacity: .6; }
.cp-offline { margin: 8px var(--ck-gutter) 0; padding: 8px 12px; border-radius: 8px; background: rgba(255,213,74,.12); border: 1px solid rgba(255,213,74,.4); color: var(--ck-gold); font-size: 13px; }
.cp-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px var(--ck-gutter) 60px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cp-loading, .cp-error { padding: 40px 0; color: var(--ck-dim); }
.cp-error { color: var(--ck-red); }
.cp-denied { max-width: 520px; margin: 60px auto; text-align: center; }
.cp-denied-ic { font-size: 44px; }
.cp-denied h2 { color: var(--ck-cyan-2); font-weight: 400; letter-spacing: .4px; margin: 8px 0; }
.cp-denied p { color: var(--ck-dim); margin-bottom: 18px; }
.hidden { display: none !important; }

/* buttons inside coaching pages (theme parity with #analytics buttons) */
.cp-btn, #cpage button.cp-btn, #cdrawer button.cp-btn, #modal .cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 7px; cursor: pointer; text-decoration: none;
  font: 600 14px/1.1 "Trebuchet MS", "Segoe UI", Arial, sans-serif; white-space: nowrap;
  max-width: 100%;
  background: linear-gradient(180deg, rgba(24,74,109,.92), rgba(10,42,68,.92));
  border: 1px solid rgba(71,169,207,.55); color: #dcecfa; transition: .14s ease;
}
.cp-btn:hover { border-color: rgba(120,210,250,.85); color: #fff; box-shadow: 0 0 10px rgba(69,189,245,.25); }
.cp-btn.primary { background: linear-gradient(180deg, #ffe680, #ffcf2e); color: #3a2700; border-color: #fff1b8; }
.cp-btn.primary:hover { box-shadow: 0 0 14px rgba(255,212,50,.55); color: #241800; }
.cp-btn.danger { color: #ffb0b0; border-color: rgba(255,107,107,.6); }
.cp-btn.sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.cp-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.cp-btn.on { background: linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%); color: #4a3402; border-color: #fff3cf; }
#cpage button:not(.cp-btn):not(.ck-moveto):not(.nv-top), #cdrawer button:not(.cp-btn):not(.cd-x) { font: inherit; color: inherit; cursor: pointer; }
#cpage input[type=text], #cpage input[type=search], #cpage input[type=number], #cpage input[type=date], #cpage input[type=datetime-local], #cpage input[type=time], #cpage select, #cpage textarea,
#cdrawer input[type=text], #cdrawer input[type=number], #cdrawer input[type=date], #cdrawer input[type=datetime-local], #cdrawer select, #cdrawer textarea,
#modal .ck-form input, #modal .ck-form select, #modal .ck-form textarea {
  font: inherit; font-size: 15px; color: #fff; min-height: 40px; padding: 8px 10px; border-radius: 7px;
  background: linear-gradient(180deg,#111820 0%,#020405 70%,#0c171b 100%); border: 1px solid #357799;
  box-shadow: inset 0 0 6px rgba(255,255,255,.06); max-width: 100%;
}
#cpage textarea, #cdrawer textarea, #modal .ck-form textarea { width: 100%; resize: vertical; min-height: 64px; }
#cpage select option, #cdrawer select option, #modal .ck-form select option { background-color: #0b1830; color: #fff; }
#cpage :focus-visible, #cdrawer :focus-visible { outline: 2px solid var(--ck-gold); outline-offset: 2px; }

/* ---------- FAB (phone) ---------- */
.cp-fab {
  position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 58;
  display: none; align-items: center; gap: 8px; padding: 0 18px; height: 54px; border-radius: 27px;
  background: linear-gradient(180deg, #ffe680, #ffcf2e); color: #3a2700; border: 0; font: 700 15px/1 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 14px rgba(255,212,50,.35); cursor: pointer;
}
.cp-fab span { font-size: 22px; }
@media (max-width: 767px) { body.cpage-open .cp-fab:not(.hidden) { display: inline-flex; } }

/* ---------- drawer (desktop: right panel; phone: full sheet) ---------- */
#cdrawer { position: fixed; inset: 0; z-index: 55; display: none; }
body.cdrawer-open #cdrawer { display: block; }
.cd-scrim { position: absolute; inset: 0; background: rgba(3,7,18,.5); backdrop-filter: blur(2px); }
.cd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column;
  background: linear-gradient(180deg,rgba(20,46,81,.98) 0%,rgba(9,23,44,.99) 60%,rgba(4,10,21,1) 100%);
  border-left: 1px solid var(--ck-line); box-shadow: -18px 0 50px rgba(0,0,0,.5); color: var(--ck-text);
  user-select: text; -webkit-user-select: text; touch-action: pan-y; animation: cd-in .18s ease-out;
}
@keyframes cd-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.cd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ck-line-soft); }
.cd-head #cd-title { font-weight: 700; color: var(--ck-cyan-2); text-transform: uppercase; letter-spacing: .4px; font-size: 14px; }
.cd-spacer { flex: 1; }
.cd-x, #cdrawer .cd-x { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(71,169,207,.55); background: rgba(10,42,68,.9); color: #dcecfa; cursor: pointer; font-size: 16px; }
.cd-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) { .cd-panel { width: 100%; border-left: 0; } }

/* ---------- grouped nav (inside .hm-top) ---------- */
#home .hm-nav { align-items: flex-end; }
.nv-item { position: relative; display: flex; }
#home .hm-nav .nv-top { flex-direction: column; }
.nv-caret { font-size: 9px; opacity: .7; line-height: 1; margin-top: -2px; }
.nv-badge {
  position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ck-red); color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center;
  box-shadow: 0 0 0 2px rgba(3,7,18,.9);
}
.nv-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 230px; padding: 6px;
  background: linear-gradient(180deg,rgba(20,46,81,.98) 0%,rgba(9,23,44,.99) 100%);
  border: 1px solid var(--ck-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.nv-item.open .nv-menu { display: flex; flex-direction: column; }
.nv-item:last-of-type .nv-menu, .nv-item[data-group=more] .nv-menu, .nv-item[data-group=analytics] .nv-menu { left: auto; right: 0; }
#home .hm-nav .nv-menu button {
  all: unset; box-sizing: border-box; display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px !important; padding: 8px 12px !important; border-radius: 7px !important; cursor: pointer;
  color: #dcecfa !important; font: 600 14px/1.2 "Trebuchet MS","Segoe UI",Arial,sans-serif !important;
  background: none !important; border: 0 !important; box-shadow: none !important; min-width: 0 !important; position: relative;
  text-transform: none !important; letter-spacing: 0 !important; transform: none !important; white-space: nowrap;
}
#home .hm-nav .nv-menu button::after, #home .hm-nav .nv-menu button::before { display: none !important; }
#home .hm-nav .nv-menu button:hover, #home .hm-nav .nv-menu button:focus-visible { background: rgba(69,189,245,.16) !important; color: #fff !important; }
#home .hm-nav .nv-menu .nv-landing { color: var(--ck-cyan-2) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .4px !important; border-bottom: 1px solid var(--ck-line-soft) !important; border-radius: 0 !important; margin-bottom: 4px; }
#home .hm-nav .nv-menu .nv-badge { position: static; box-shadow: none; }
#home .hm-nav .nv-search {
  align-self: center; flex-direction: row !important; gap: 8px; min-width: 0 !important; padding: 8px 12px !important; margin-left: 6px;
}
#home .hm-nav .nv-search kbd { font: 600 10px/1 system-ui, sans-serif; padding: 3px 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); color: var(--ck-dim); }
/* 11 groups: compact the labels on smaller desktops, icons only on tablets */
@media (max-width: 1599px) and (min-width: 1024px) {
  #home .hm-nav { gap: 3px !important; }
  #home .hm-nav .nv-top { min-width: 0 !important; padding: 7px 8px 6px !important; font-size: 12px !important; }
  #home .hm-nav .nv-top .ic { width: 20px; height: 20px; }
  #home .hm-nav .nv-search span, #home .hm-nav .nv-search kbd { display: none; }
  #home .hm-brand .hm-sub { display: none; }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  #home .hm-brand > div { display: none; }
  #home .hm-user .hm-user-txt { display: none; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  #home .hm-nav .nv-top span { display: none; }
  #home .hm-nav .nv-top { min-width: 0 !important; padding: 8px 9px !important; }
  #home .hm-nav .nv-search span, #home .hm-nav .nv-search kbd, .nv-caret { display: none; }
  /* dropdowns become full-width sheets */
  .nv-menu { position: fixed; left: 8px !important; right: 8px !important; top: calc(var(--hm-top-h, 84px) + 4px); min-width: 0; }
  #home .hm-nav { overflow: visible !important; }
}
.hm-nav .nv-top.on { /* theme gold active state comes from theme-rl's .hm-nav button.on */ }

/* ---------- phone: bottom tab bar + more drawer ---------- */
#bottom-tabs { display: none; }
@media (max-width: 767px) {
  #home .hm-nav { display: none !important; }
  body.home-open.has-bottom-tabs #bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 57;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(14,35,66,.98), rgba(5,14,29,.99)); border-top: 1px solid var(--ck-line);
    box-shadow: 0 -6px 20px rgba(0,0,0,.4);
  }
  #bottom-tabs button {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 54px; background: none; border: 0; color: var(--ck-dim); font: 600 11px/1.1 system-ui, sans-serif; cursor: pointer;
  }
  #bottom-tabs button .ic { width: 24px; height: 24px; }
  #bottom-tabs button.on { color: var(--ck-gold); }
  #bottom-tabs .nv-badge { top: 2px; right: calc(50% - 22px); }
  body.home-open.has-bottom-tabs #home { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.has-bottom-tabs #cpage, body.has-bottom-tabs #playbook, body.has-bottom-tabs #analytics, body.has-bottom-tabs #filmroom { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .cp-body { padding: 10px 16px 90px; }
  .cp-crumbs { padding: 6px 16px 0; }
  :root { --ck-gutter: 16px; }
}
#more-drawer { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(3,7,18,.6); }
#more-drawer.open { display: block; }
.md-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); overflow-y: auto; padding: 12px 14px 40px;
  background: linear-gradient(180deg,rgba(20,46,81,.99),rgba(4,10,21,1)); color: var(--ck-text); border-left: 1px solid var(--ck-line);
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.md-head { display: flex; align-items: center; gap: 10px; padding: 6px 2px 12px; }
.md-search, .md-acct { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; margin: 6px 0 10px; border-radius: 10px; border: 1px solid var(--ck-line); background: rgba(10,42,68,.9); color: #dcecfa; font: inherit; cursor: pointer; }
.md-search .ic { width: 20px; height: 20px; }
.md-group { border-top: 1px solid var(--ck-line-soft); }
.md-group summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 6px; cursor: pointer; font-weight: 700; list-style: none; }
.md-group summary .ic { width: 22px; height: 22px; color: var(--ck-cyan); }
.md-group button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 16px 0 40px; background: none; border: 0; color: #dcecfa; font: inherit; text-align: left; cursor: pointer; position: relative; }
.md-group button:hover { background: rgba(69,189,245,.12); }
.md-group .md-ov { color: var(--ck-cyan-2); font-size: 13px; }
.md-group .nv-badge { position: static; }

/* ---------- command palette ---------- */
#cmdk { position: fixed; inset: 0; z-index: 95; background: rgba(3,7,18,.6); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 12px 12px; }
.pl-box { width: min(680px, 100%); max-height: 75vh; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg,rgba(20,46,81,.99),rgba(6,16,32,1)); border: 1px solid var(--ck-line); box-shadow: 0 24px 60px rgba(0,0,0,.6); color: var(--ck-text); }
.pl-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ck-line-soft); }
.pl-in .ic { width: 22px; height: 22px; color: var(--ck-cyan); }
.pl-in input { flex: 1; background: none; border: 0; color: #fff; font: 17px/1.3 "Trebuchet MS", system-ui, sans-serif; outline: none; min-width: 0; }
.pl-in kbd { font: 600 11px system-ui; padding: 3px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: var(--ck-dim); }
.pl-res { overflow-y: auto; padding: 6px; }
.pl-g { padding: 10px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ck-cyan-2); }
.pl-i { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 9px 12px; border-radius: 8px; background: none; border: 0; color: var(--ck-text); text-align: left; cursor: pointer; font: inherit; }
.pl-i span { color: var(--ck-dim); font-size: 13px; }
.pl-i.on, .pl-i:hover { background: rgba(69,189,245,.16); }
.pl-empty { padding: 20px; color: var(--ck-dim); text-align: center; }

/* ---------- dashboard (HOME) ---------- */
.db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 4px 26px 18px; }
#home .hm-dash.hidden { display: none; }
.db-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(20,46,81,.88), rgba(8,20,40,.92)); border: 1px solid var(--ck-line);
  box-shadow: inset 0 0 12px rgba(65,180,221,.06);
}
.db-head { display: flex; align-items: center; gap: 8px; }
.db-head a, .db-head > span { display: flex; align-items: center; gap: 8px; color: var(--ck-cyan-2); text-decoration: none; text-transform: uppercase; letter-spacing: .4px; font-size: 14px; }
.db-head a:hover b { text-decoration: underline; }
.db-ic { font-size: 18px; }
.db-arrow { opacity: .7; }
.db-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.db-stat { display: flex; flex-direction: column; min-width: 86px; padding: 8px 10px; border-radius: 8px; background: rgba(4,12,26,.6); border: 1px solid var(--ck-line-soft); text-decoration: none; color: var(--ck-text); }
.db-stat b { font-size: 22px; line-height: 1.1; }
.db-stat span { font-size: 12px; color: var(--ck-dim); }
.db-stat.t-red b { color: var(--ck-red); } .db-stat.t-gold b { color: var(--ck-gold); } .db-stat.t-green b { color: var(--ck-green); } .db-stat.t-blue b { color: var(--ck-cyan); }
.db-spark { display: flex; align-items: center; gap: 10px; }
.db-note { font-size: 13px; color: var(--ck-dim); }
.db-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.db-items li > a, .db-items li > div { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 8px; color: var(--ck-text); text-decoration: none; }
.db-items li > a:hover { background: rgba(69,189,245,.12); }
.db-it-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.db-it-sub { font-size: 12.5px; color: var(--ck-dim); }
.db-empty { color: var(--ck-dim); font-size: 13px; padding: 6px 2px; }
.db-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.hm-tools-label { padding: 8px 26px 0; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ck-cyan-2); }
#home .hm-cards.hm-tools .hm-visual { display: none !important; }
#home .hm-cards.hm-tools .hm-card { min-height: 0 !important; padding: 12px 14px !important; }
#home .hm-cards.hm-tools .hm-card-head { min-height: 0 !important; }
#home .hm-cards.hm-tools .hm-card p { display: none; }
#home .hm-cards.hm-tools .hm-hublist { display: none !important; }
@media (max-width: 767px) { .db-grid { grid-template-columns: 1fr; padding: 4px 12px 14px; } .hm-tools-label { padding: 8px 14px 0; } }

/* ---------- component kit (.ck-*) ---------- */
.ck-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.ck-head h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 28px/1.15 "Arial Narrow","Segoe UI Light",sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ck-cyan-2); text-shadow: 0 0 8px rgba(73,199,245,.45); }
.ck-head-ic { display: inline-flex; font-size: 26px; }
.ck-head-ic .ic { width: 28px; height: 28px; }
.ck-head-sub { margin-top: 6px; color: var(--ck-dim); font-size: 14px; max-width: 900px; }
.ck-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--ck-line-soft); overflow-x: auto; scrollbar-width: none; }
.ck-tabs button { flex: 0 0 auto; padding: 10px 14px; min-height: 42px; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; color: var(--ck-dim) !important; font: 600 14px/1 "Trebuchet MS", system-ui, sans-serif !important; cursor: pointer; border-radius: 0 !important; }
.ck-tabs button.on { color: var(--ck-gold) !important; border-bottom-color: var(--ck-gold) !important; }
.ck-count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgba(69,189,245,.18); color: var(--ck-cyan-2); font-size: 12px; text-align: center; }
.ck-section { margin: 18px 0; }
.ck-section > h3, .ck-card > h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--ck-cyan-2); font-weight: 700; }
.ck-card { padding: 14px 16px; margin: 0 0 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(20,46,81,.75), rgba(8,20,40,.85)); border: 1px solid var(--ck-line); min-width: 0; }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ck-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .ck-cols { grid-template-columns: 1fr; } }
.ck-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 14px 16px; border-radius: 12px; text-align: left; background: linear-gradient(180deg, rgba(24,74,109,.6), rgba(10,42,68,.7)) !important; border: 1px solid var(--ck-line) !important; color: var(--ck-text) !important; cursor: pointer; text-decoration: none; }
.ck-tile:hover { border-color: rgba(120,210,250,.8) !important; }
.ck-pill, .ck-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 11.5px/1.5 system-ui, sans-serif; letter-spacing: .2px; border: 1px solid transparent; white-space: nowrap; }
.ck-chip { font-weight: 600; }
.t-dim { background: rgba(147,160,187,.14); color: #c3cee3; border-color: rgba(147,160,187,.25); }
.t-blue { background: rgba(69,189,245,.16); color: var(--ck-cyan-2); border-color: rgba(69,189,245,.35); }
.t-green { background: rgba(90,200,120,.16); color: #8fe3a6; border-color: rgba(90,200,120,.35); }
.t-gold { background: rgba(255,213,74,.15); color: var(--ck-gold); border-color: rgba(255,213,74,.35); }
.t-red { background: rgba(255,107,107,.16); color: #ff9c9c; border-color: rgba(255,107,107,.4); }
.ck-sample { display: inline-block; padding: 1px 7px; border-radius: 5px; font: 800 10px/1.6 system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #1b1300; background: repeating-linear-gradient(135deg, #ffd54a 0 6px, #ffe58a 6px 12px); vertical-align: middle; }
.ck-code { display: inline-block; padding: 1px 7px; border-radius: 5px; font: 700 12px/1.6 ui-monospace, Menlo, monospace; color: var(--ck-gold); background: rgba(255,213,74,.1); border: 1px solid rgba(255,213,74,.35); text-decoration: none; }
.ck-code:hover { background: rgba(255,213,74,.2); }
.ck-due { display: inline-flex; padding: 1px 7px; border-radius: 6px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.ck-dim { color: var(--ck-dim); }
.ck-pad { padding: 8px 0; }
.ck-help { display: block; margin-top: 4px; color: var(--ck-dim); font-size: 12px; }
.ck-ava { width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; background: #20456f; color: #fff; font: 700 calc(var(--s) * .4)/1 system-ui, sans-serif; border: 1px solid rgba(120,210,250,.4); }
.ck-ava img { width: 100%; height: 100%; object-fit: cover; }
.ck-avas { display: inline-flex; }
.ck-avas .ck-ava + .ck-ava { margin-left: -7px; }
.ck-ava.more { background: #10233e; font-size: 10px; }
.ck-empty { text-align: center; padding: 34px 16px; color: var(--ck-dim); border: 1px dashed var(--ck-line); border-radius: 12px; }
.ck-empty-ic { font-size: 34px; margin-bottom: 6px; }
.ck-empty b { display: block; color: var(--ck-text); font-size: 16px; margin-bottom: 6px; }
.ck-empty p { margin: 0 auto 14px; max-width: 460px; }
.ck-md { line-height: 1.5; overflow-wrap: anywhere; }
.ck-md p { margin: 0 0 8px; } .ck-md ul, .ck-md ol { margin: 0 0 8px 20px; } .ck-md a { color: var(--ck-cyan-2); }
.ck-list { list-style: none; margin: 0; padding: 0; } .ck-list li { padding: 8px 0; border-bottom: 1px solid var(--ck-line-soft); } .ck-list a { color: var(--ck-text); text-decoration: none; } .ck-list a:hover b { color: var(--ck-cyan-2); }
.ck-seg { display: inline-flex; border: 1px solid var(--ck-line); border-radius: 8px; overflow: hidden; }
.ck-seg button { padding: 7px 12px; min-height: 36px; background: rgba(10,42,68,.7) !important; border: 0 !important; color: var(--ck-dim) !important; cursor: pointer; font: 600 13px/1 system-ui, sans-serif; border-radius: 0 !important; }
.ck-seg button + button { border-left: 1px solid var(--ck-line) !important; }
.ck-seg button.on { background: linear-gradient(180deg,#fffbe8,#ffe9a8) !important; color: #4a3402 !important; }

/* filter chips */
.ck-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 14px; }
.ck-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ck-filter-l { font-size: 12px; color: var(--ck-dim); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.ck-filter button { padding: 5px 11px; min-height: 32px; border-radius: 999px; background: rgba(10,42,68,.7) !important; border: 1px solid var(--ck-line) !important; color: #c8d6e8 !important; font: 600 12.5px/1 system-ui, sans-serif !important; cursor: pointer; }
.ck-filter button.on { background: linear-gradient(180deg,#fffbe8,#ffe9a8) !important; color: #4a3402 !important; border-color: #fff3cf !important; }

/* tables → cards on phones */
.ck-table-wrap { overflow-x: auto; border: 1px solid var(--ck-line); border-radius: 10px; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ck-table th { text-align: left; padding: 9px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ck-cyan-2); background: rgba(4,12,26,.6); white-space: nowrap; }
.ck-table td { padding: 9px 10px; border-top: 1px solid var(--ck-line-soft); vertical-align: top; }
.ck-table tr[data-href] { cursor: pointer; } .ck-table tr[data-href]:hover td { background: rgba(69,189,245,.08); }
.ck-table td.num, .ck-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .ck-table-wrap { border: 0; overflow: visible; }
  .ck-table thead { display: none; }
  .ck-table, .ck-table tbody, .ck-table tr, .ck-table td { display: block; width: 100%; }
  .ck-table tr { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ck-line); background: rgba(10,30,58,.7); }
  .ck-table td { border: 0; padding: 4px 0; display: flex; gap: 10px; justify-content: space-between; text-align: right; }
  .ck-table td::before { content: attr(data-label); color: var(--ck-dim); font-size: 12px; text-align: left; flex: 0 0 auto; }
  .ck-table td.ck-td-primary { font-weight: 700; font-size: 15px; justify-content: flex-start; text-align: left; }
  .ck-table td.ck-td-primary::before { display: none; }
  .ck-table td.num { text-align: right; }
}
/* wide views scroll inside their own container, never the page */
.ck-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* panels / comments / links / attachments */
.ck-panel-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 0 0 8px; }
.ck-panel-head b { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--ck-cyan-2); }
.ck-links { list-style: none; margin: 0; padding: 0; } .ck-links li { padding: 5px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ck-links a { color: var(--ck-text); }
.ck-x { background: none !important; border: 0 !important; color: var(--ck-dim) !important; cursor: pointer; padding: 2px 6px; }
.ck-cms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ck-cm { display: flex; gap: 10px; } .ck-cm.hidden-cm { opacity: .5; }
.ck-cm-b { flex: 1; min-width: 0; }
.ck-cm-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.ck-cm-act { display: flex; gap: 10px; } .ck-cm-act button { background: none !important; border: 0 !important; color: var(--ck-cyan-2) !important; font-size: 12px !important; padding: 0 !important; cursor: pointer; min-height: 0 !important; }
.ck-cm-reply { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--ck-line-soft); }
.ck-cm-new .row { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 6px; }
.ck-atts { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-att { margin: 0; width: 180px; } .ck-att img, .ck-att video { width: 100%; border-radius: 8px; display: block; } .ck-att figcaption { font-size: 12px; color: var(--ck-dim); }
.ck-upload { cursor: pointer; }

/* forms in #modal */
#modal .ck-form { display: flex; flex-direction: column; gap: 12px; min-width: min(460px, 86vw); }
#modal .ck-form.wide { min-width: min(720px, 90vw); }
.ck-field { display: flex; flex-direction: column; gap: 5px; }
.ck-field > span { font-size: 13px; color: var(--ck-dim); }
.ck-check { display: flex !important; align-items: center; gap: 8px; min-height: 36px; }
.ck-multi { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.ck-multi-o { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ck-line); cursor: pointer; }
.ck-multi-o:has(input:checked) { border-color: var(--ck-gold); background: rgba(255,213,74,.1); }
.ck-form-err { color: var(--ck-red); font-size: 13px; }
.ck-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ck-modal-p { color: var(--ck-dim); line-height: 1.5; margin: 8px 0 16px; }
.ck-mded-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.ck-mded-tabs button { padding: 3px 10px !important; min-height: 28px !important; font-size: 12px !important; }
.ck-mded-tabs .ck-dim { font-size: 11px; margin-left: auto; }
.ck-mded-prev { min-height: 64px; padding: 8px 10px; border: 1px solid var(--ck-line); border-radius: 7px; }
.ck-lp-res { max-height: 50vh; overflow-y: auto; margin-top: 10px; min-width: min(520px, 86vw); }
.ck-lp-g { padding: 8px 4px 3px; font-size: 11px; text-transform: uppercase; color: var(--ck-cyan-2); }
#modal .ck-lp-i { display: flex !important; flex-direction: column; align-items: flex-start; width: 100%; margin: 2px 0; text-align: left; }
.ck-lp-i span { font-size: 12px; opacity: .75; }

/* timers */
.ck-timer { font: 700 34px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: #fff; }
.ck-timer.big { font-size: clamp(64px, 14vw, 180px); }
.ck-timer.warn { color: var(--ck-gold); } .ck-timer.done { color: var(--ck-red); }

/* sparkline + stacked bars */
.ck-spark { display: block; overflow: visible; }
.ck-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(4,12,26,.6); border: 1px solid var(--ck-line-soft); }
.ck-stack span { display: block; height: 100%; }

/* drag & drop */
.ck-moveto { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ck-dim); cursor: pointer; font-size: 16px; line-height: 1; }
.ck-moveto:hover, .ck-moveto:focus-visible { border-color: var(--ck-line); color: #fff; background: rgba(10,42,68,.9); }
.ck-ghost { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; opacity: .92; transform-origin: 0 0; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.ck-dragging { opacity: .35; }
.ck-lift { box-shadow: 0 0 0 2px var(--ck-gold) !important; }
.ck-ph { border: 2px dashed var(--ck-gold); border-radius: 10px; margin: 4px 0; background: rgba(255,213,74,.06); }

/* kanban (tasks board, tryout boards, depth chart) */
.ck-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.ck-col { background: rgba(4,12,26,.55); border: 1px solid var(--ck-line); border-radius: 12px; padding: 10px; min-width: 0; }
.ck-col-h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ck-cyan-2); }
.ck-col-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.ck-kcard { position: relative; padding: 10px 40px 10px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(24,58,96,.9), rgba(12,32,60,.95)); border: 1px solid var(--ck-line); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ck-kcard:active { cursor: grabbing; }
.ck-kcard b { display: block; margin-bottom: 4px; }
.ck-kcard .ck-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; color: var(--ck-dim); }

/* key/value rows */
.ck-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.ck-kv dt { color: var(--ck-dim); } .ck-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* print: one clean page of content (scouting cards, rules, plans) */
@media print {
  body { overflow: visible !important; background: #fff !important; }
  #app, #home .hm-top, #bottom-tabs, #cdrawer, .cp-crumbs, .cp-fab, .ck-head-actions, .ck-tabs, .no-print, #toast, #popover, #modal-scrim { display: none !important; }
  #cpage { position: static !important; display: block !important; background: #fff !important; color: #000 !important; }
  .cp-body { overflow: visible !important; padding: 0 !important; }
  .ck-card, .db-card { background: #fff !important; border: 1px solid #999 !important; color: #000 !important; break-inside: avoid; }
  .ck-head h1, .ck-section > h3, .ck-card > h3 { color: #000 !important; text-shadow: none !important; }
  .ck-dim { color: #444 !important; }
}
.ck-season { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ck-dim); }

/* a long button label (e.g. Match Day's lobby generator) wraps instead of pushing the page wider on phones */
@media (max-width: 767px) { .cp-btn { white-space: normal; text-align: center; } }

/* tablet (768–1023): 11 icon-only groups + search must fit next to the brand
   and account button — one logo, avatar-only account, tighter icon buttons */
@media (max-width: 1023px) and (min-width: 768px) {
  #home .hm-top { gap: 6px !important; padding: 8px 10px !important; }
  #home .hm-brand > div, #home .hm-brand img.bp { display: none !important; }
  #home .hm-brand img { height: 44px !important; }
  #home .hm-nav { gap: 2px !important; margin: 0 !important; flex: 1 1 auto; justify-content: center !important; }
  #home .hm-nav .nv-top, #home .hm-nav .nv-search { min-width: 0 !important; padding: 7px 6px !important; }
  #home .hm-nav .nv-top .ic, #home .hm-nav .nv-search .ic { width: 22px; height: 22px; }
  #home .hm-user { padding: 4px 6px !important; min-height: 44px !important; }
  #home .hm-user .hm-user-txt { display: none !important; }
}
.ck-fdet > summary { display: none; }
@media (max-width: 767px) {
  .ck-fdet { margin: 0 0 12px; }
  .ck-fdet > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ck-line); background: rgba(10,42,68,.7); color: #dcecfa; font-weight: 600; cursor: pointer; list-style: none; }
  .ck-fdet[open] > summary { margin-bottom: 10px; border-color: var(--ck-gold); color: var(--ck-gold); }
}

/* Home dashboard cards are widgets: fixed 350px, newest rows only, "View all" pinned
   at the bottom (dashboard.js shows ≤ 4 rows). The older Home panels match. */
.db-card { height: 350px; overflow: hidden; }
.db-card .db-items { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.db-card .db-items li > a, .db-card .db-items li > div { padding: 5px 8px; }
.db-card .db-it-main b { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.db-card .db-it-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-card .db-stats { flex: 0 0 auto; }
.db-card .db-stat { min-width: 72px; padding: 6px 8px; }
.db-card .db-stat b { font-size: 19px; }
.db-actions { flex: 0 0 auto; align-items: center; padding-top: 6px; border-top: 1px solid var(--ck-line-soft); }
.db-viewall { margin-left: auto; color: var(--ck-cyan-2); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.db-viewall:hover { text-decoration: underline; }
#home .hm-panel { height: 350px; overflow: hidden; display: flex; flex-direction: column; }
#home .hm-panel > .hm-row, #home .hm-panel > .hm-empty { flex: 0 0 auto; }
/* one line per row: title truncates, chips stay beside it */
.db-card .db-it-main { flex-wrap: nowrap; min-width: 0; }
.db-card .db-it-main b { display: block; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.db-card .db-it-main .ck-sample, .db-card .db-it-main .ck-chip { flex: 0 0 auto; }
.db-card .db-items { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.db-card .db-spark { flex-direction: column; align-items: flex-start; gap: 2px; }
.db-card .db-spark .ck-dim { font-size: 12px; }
.db-card .db-stats { flex-wrap: nowrap; overflow: hidden; }
.db-card .db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; flex-wrap: initial; overflow: visible; }
.db-card .db-stat { min-width: 0; padding: 5px 7px; }
.db-card .db-stat span { font-size: 11px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }

/* every top-level nav button the same height: groups without a dropdown keep an invisible caret line */
.nv-caret-ph { visibility: hidden; }

/* While a full page (Film Room, Playbook, Analytics, any coaching page) is open,
   Home's layer shrinks to just its header and sits ABOVE the page layers (46) —
   otherwise the nav dropdowns, which live inside #home's stacking context (45),
   drew underneath the page body (e.g. .fr-body on ?film=library). Drawer (55),
   FAB, bottom tabs, modals (60) and the More drawer stay above it. */
body.cpage-open #home, body.filmroom-open #home, body.playbook-open #home, body.analytics-open #home {
  z-index: 47 !important; bottom: auto !important; height: var(--hm-top-h, 84px) !important; overflow: visible !important;
}

/* invisible bridge over the 6px gap between a nav button and its dropdown, so the
   pointer never "leaves" the item while travelling down to the menu */
.nv-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nv-badge.amber { background: #e59a1c; }
/* ?sample — per-module rows */
.sd-list { display: flex; flex-direction: column; }
.sd-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ck-line, #1c3966); }
.sd-main { flex: 1; min-width: 0; }
.sd-tables { font-size: 12px; overflow-wrap: anywhere; }
/* the phone FAB is gold — keep its text dark (a theme-wide button colour rule was turning it near-white) */
.cp-fab, button.cp-fab, body .cp-fab { color: #2a1c00 !important; }
/* confirm dialogs keep line breaks (e.g. the list of permission changes) */
.ck-modal-p { white-space: pre-line; }

/* ?permissions — role × area grid (js/permissions-admin.js) */
.pm { display: flex; flex-direction: column; gap: 14px; font-family: var(--ds-font, system-ui); color: #e8eef7; padding-bottom: 80px; }
.pm-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pm-h1 { display: flex; gap: 10px; align-items: center; margin: 0; font: 700 26px var(--ds-display, system-ui); color: #fff; }
.pm-h1 .ds-ic { width: 26px; height: 26px; color: var(--ds-gold, #f5c84b); }
.pm-sub { margin: 4px 0 0; color: var(--ds-muted, #8ea4c4); font-size: 14px; max-width: 980px; line-height: 1.5; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-note { color: var(--ds-muted, #8ea4c4); font-size: 13px; margin-left: 6px; }
.pm-lv { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.t-none { background: #15233d; color: #6f86a8; } .t-own { background: rgba(185,162,255,.14); color: #cdbdff; border-color: rgba(185,162,255,.35); }
.t-view { background: rgba(78,168,255,.14); color: #8fd3ff; border-color: rgba(78,168,255,.35); } .t-create { background: rgba(95,224,166,.12); color: #7ef0bd; border-color: rgba(95,224,166,.35); }
.t-edit { background: rgba(246,180,60,.14); color: #ffd27a; border-color: rgba(246,180,60,.4); } .t-manage { background: rgba(255,107,107,.14); color: #ffa3a3; border-color: rgba(255,107,107,.4); }
.pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-gold, #f5c84b); margin-left: 6px; vertical-align: middle; }
.pm-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--ds-line, #1c3966); background: var(--ds-card, #0f2244); }
.pm-table { border-collapse: collapse; width: 100%; min-width: 920px; font-size: 14px; }
.pm-table th, .pm-table td { padding: 8px 10px; border-bottom: 1px solid var(--ds-inset-line, #18325a); text-align: left; vertical-align: middle; }
.pm-table thead th { position: sticky; top: 0; background: #0b1d3a; color: var(--ds-muted, #8ea4c4); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; z-index: 1; }
.pm-table tbody th[scope=row] { min-width: 230px; }
.pm-area { display: block; font-weight: 600; color: #fff; }
.pm-fixed { display: block; font-size: 12px; font-weight: 400; color: var(--ds-faint, #6f86a8); }
.pm-group th { background: #0b1d3a; color: #8fd3ff; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 12px; }
.pm-table tr.ro .pm-area { color: var(--ds-text-2, #c9d6ea); }
#cpage .pm-sel { min-height: 34px; padding: 0 8px; border-radius: 999px; font: 600 13px var(--ds-font, system-ui); cursor: pointer; }
.pm-table td.dirty { box-shadow: inset 0 0 0 2px var(--ds-gold, #f5c84b); border-radius: 8px; }
.pm-save { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; align-items: center; padding: 10px 12px 10px 18px; border-radius: 14px;
  background: #102446; border: 1px solid var(--ds-gold, #f5c84b); box-shadow: 0 10px 30px rgba(0,0,0,.5); color: #fff; font-weight: 600; }
@media (max-width: 767px) { .pm-save { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 24px); justify-content: space-between; } .pm-h1 { font-size: 21px; } }
#cpage .pm-sel.t-none { background: #15233d !important; color: #8ea4c4 !important; border: 1px solid #23426f !important; }
#cpage .pm-sel.t-own { background: #2a2350 !important; color: #cdbdff !important; border: 1px solid rgba(185,162,255,.5) !important; }
#cpage .pm-sel.t-view { background: #12355c !important; color: #8fd3ff !important; border: 1px solid rgba(78,168,255,.5) !important; }
#cpage .pm-sel.t-create { background: #123f35 !important; color: #7ef0bd !important; border: 1px solid rgba(95,224,166,.5) !important; }
#cpage .pm-sel.t-edit { background: #43320e !important; color: #ffd27a !important; border: 1px solid rgba(246,180,60,.55) !important; }
#cpage .pm-sel.t-manage { background: #4a1f25 !important; color: #ffa3a3 !important; border: 1px solid rgba(255,107,107,.55) !important; }
#cpage .pm-sel option { background: #0b1d3a; color: #e8eef7; }
/* wide forms (New task, Edit match…) widen the dialog itself — the 560 px box used to clip them sideways */
#modal:has(.ck-form.wide) { width: min(780px, 94vw); }
#modal .ck-form.wide { min-width: 0; }

/* Tournament ops (?tops) — accounts, workstations, runbook */
.to-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.to-sum .ck-dim { font-size: 12.5px; flex-basis: 100%; }
.to-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.to-card { background: var(--ds-card); border: 1px solid var(--ds-card-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.to-card.dim { opacity: .62; }
.to-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.to-card h3 { margin: 0 auto 0 0; font-size: 16px; overflow-wrap: anywhere; }
.to-kv { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; font-size: 13.5px; }
.to-kv span { color: var(--ds-muted); }
.to-kv b { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.to-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.to-notes { font-size: 13.5px; border-top: 1px dashed var(--ds-card-line); padding-top: 6px; }
.to-warn { margin: 2px 0; font-size: 13px; color: var(--ds-amber); }
.to-card footer { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.to-card footer span { display: flex; gap: 6px; }
.to-runbook { max-width: 860px; }
.tn-hact { display: flex; gap: 8px; flex-wrap: wrap; }
.to-probe { margin-bottom: 14px; }
.to-probe ol { margin: 6px 0 8px 1.2em; padding: 0; display: grid; gap: 6px; }
.to-probe code { font-size: 12.5px; overflow-wrap: anywhere; background: var(--ds-inset); padding: 1px 5px; border-radius: 5px; }

/* player intake questionnaire (Create Account step 2) + read-only answers */
#modal:has(.intake-form) { width: min(720px, 94vw); }
.intake-form h2 { margin: 0 0 4px; }
.intake-form h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .02em; color: var(--accent, #f5c84b); }
.intake-form h3 em { font-style: normal; font-weight: 500; color: var(--text-dim); font-size: 13px; letter-spacing: 0; }
.in-lead { color: var(--text-dim); margin: 0 0 6px; }
.in-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 560px) { .in-row2 { grid-template-columns: 1fr; } }
.in-field { display: grid; gap: 4px; margin: 0 0 12px; min-width: 0; align-content: start; }
.in-field > span { font-weight: 600; font-size: 13.5px; }
.in-field small { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.in-field input, .in-field select, .in-field textarea { width: 100%; box-sizing: border-box; }
.in-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 12px; }
.in-checks .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
#in-tags { display: grid; gap: 6px; }
.in-tag { display: flex; gap: 6px; }
.in-tag input { flex: 1; min-width: 0; }
.in-add { justify-self: start; font-size: 13px; }
.in-note { font-size: 12.5px; color: var(--text-dim); margin: -4px 0 12px; }
.in-err { color: var(--danger); min-height: 1.2em; margin: 4px 0; }
.in-view { display: grid; gap: 6px; margin: 8px 0; }
.in-kv { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; font-size: 14px; }
.in-kv span { color: var(--text-dim); }
.in-kv b { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.in-kv code { font-size: 12.5px; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 6px; margin-right: 4px; }
.in-pre { white-space: pre-wrap; font-weight: 500 !important; }
.in-when, .in-none { color: var(--text-dim); font-size: 12.5px; }
.in-details { margin-top: 6px; }
.in-details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.in-h3 { margin: 12px 0 4px; font-size: 15px; }
@media (max-width: 480px) { .in-kv { grid-template-columns: 1fr; gap: 0; } }