/* ─── Clinchr Coach Dashboard ─── Cornerman's instrument panel. Brand-consistent with the app + public site (Anton display, DM Sans body, DM Mono data, single red accent), but denser and more utilitarian. Dark is the :root default; [data-theme="light"] swaps the semantic tokens (light is the canonical default, set in ). */ /* ─── Self-hosted fonts (no third-party requests) ─── */ @font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Anton-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Anton-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/DMSans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/DMSans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'DM Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/DMSans-Italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/DMMono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/DMMono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } :root { --bg:#0B0B0C; --surface:#121214; --surface-alt:#19191C; --surface-hi:#202024; --border:#1F1F23; --border-light:#2C2C31; --red:#E53935; --red-dark:#C62828; --blue:#1E88E5; --gold:#FFD600; --green:#43A047; --amber:#FFA726; --t1:#F4F4F2; --t2:#9A9A96; --t3:#74746E; --heat0:#17171A; --top:58px; color-scheme: dark; /* native controls (date pickers, scrollbars) match the theme */ --display:'Anton','Arial Narrow',sans-serif; --mono:'DM Mono','SF Mono','Consolas',monospace; --radius:12px; --radius-sm:8px; } [data-theme="light"] { --bg:#FBFBFA; --surface:#FFFFFF; --surface-alt:#F1F1EF; --surface-hi:#ECECEA; --border:#E7E7E3; --border-light:#D7D7D2; --t1:#17171A; --t2:#56564F; --t3:#6F6F68; --heat0:#ECECEA; color-scheme: light; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--t1); line-height:1.5; min-height:100vh; } ::selection { background:var(--red); color:#fff; } .muted { color:var(--t3); } .small { font-size:.75rem; } /* ─── Topbar ─── */ .topbar { height:var(--top); position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .topbar-brand { display:flex; align-items:center; gap:11px; } .topbar-logo { width:26px; height:auto; } .logo { font-family:var(--display); font-size:1.25rem; letter-spacing:.05em; text-transform:uppercase; line-height:1; display:inline-flex; } .logo-light { color:var(--t1); } .logo-accent { color:var(--red); } .topbar-divider { width:1px; height:16px; background:var(--border-light); } .topbar-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--t3); } .topbar-right { display:flex; align-items:center; gap:16px; } .demo-badge { font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); background:color-mix(in srgb, var(--amber) 12%, transparent); padding:4px 9px; border-radius:3px; white-space:nowrap; } .coach-id { display:flex; align-items:center; gap:9px; } .coach-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.72rem; font-weight:500; color:var(--t1); background:var(--surface-alt); border:1px solid var(--border-light); } .coach-meta { display:flex; flex-direction:column; line-height:1.25; } .coach-name { font-size:.82rem; font-weight:600; } .coach-sub { font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:var(--surface); color:var(--t1); cursor:pointer; transition:border-color .18s, transform .12s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover { border-color:var(--t3); } .theme-toggle:active { transform:scale(.92); } .theme-toggle svg { width:17px; height:17px; } .theme-toggle .ico-moon { display:block; } .theme-toggle .ico-sun { display:none; } [data-theme="dark"] .theme-toggle .ico-moon { display:none; } [data-theme="dark"] .theme-toggle .ico-sun { display:block; } /* ─── Shell ─── */ .app-shell { display:grid; grid-template-columns:296px 1fr; height:calc(100vh - var(--top)); } /* ─── Roster rail ─── */ .roster { border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; background:var(--bg); } .roster-head { display:flex; align-items:baseline; gap:8px; padding:18px 18px 10px; } .roster-head h2 { font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--t2); } .roster-count { font-family:var(--mono); font-size:.7rem; color:var(--red); } .roster-search { position:relative; padding:0 14px 12px; } .roster-search svg { position:absolute; left:24px; top:8px; width:15px; height:15px; color:var(--t3); } .roster-search input { width:100%; padding:9px 12px 9px 34px; background:var(--surface); color:var(--t1); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:.82rem; } .roster-search input::placeholder { color:var(--t3); } .roster-search input:focus { outline:none; border-color:var(--border-light); } .roster-list { flex:1; overflow-y:auto; padding:4px 10px 16px; } .roster-empty { padding:16px; } .roster-row { width:100%; display:flex; align-items:center; gap:11px; padding:10px 10px; border:none; cursor:pointer; background:transparent; border-radius:var(--radius-sm); text-align:left; color:inherit; border:1px solid transparent; transition:background .15s, border-color .15s; } .roster-row:hover { background:var(--surface); } .roster-row.is-active { background:var(--surface); border-color:var(--border-light); } .roster-row.is-active::before { content:''; position:absolute; left:0; width:3px; height:26px; background:var(--red); border-radius:0 2px 2px 0; } .roster-row { position:relative; } .roster-avatar { width:38px; height:38px; flex-shrink:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.95rem; color:#fff; letter-spacing:.02em; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .roster-info { flex:1; min-width:0; display:flex; flex-direction:column; } .roster-name { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .roster-div { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .roster-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } .roster-fight { font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.04em; } .roster-fight--soon { color:var(--red); } .roster-fight--near { color:var(--amber); } .roster-fight--far { color:var(--t3); } .load-dot { width:9px; height:9px; border-radius:50%; background:var(--st,var(--t3)); flex-shrink:0; } /* status colour map (shared by dots + readiness pill) */ /* roster load-dot = recent-activity (green ≤2d / amber ≤6d / grey otherwise) */ .status--ok { --st:#43A047; } .status--warn { --st:#FFA726; } .status--none { --st:var(--t3); } /* ─── Dossier ─── */ .dossier { overflow-y:auto; min-height:0; } .dossier-inner { padding:24px 28px 48px; max-width:1180px; } /* Header */ .fighter-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap; } .fighter-id { display:flex; gap:18px; min-width:0; } .fighter-avatar { width:62px; height:62px; flex-shrink:0; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.7rem; color:#fff; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); } .fighter-id-text { min-width:0; } .fighter-namerow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .fighter-name { font-family:var(--display); font-size:2.1rem; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1; } .level-badge { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:4px 8px; border-radius:3px; } .level-badge--pro { color:#fff; background:var(--red); } .level-badge--am { color:#fff; background:var(--blue); } .level-badge--novice { color:var(--t2); background:var(--surface-alt); border:1px solid var(--border-light); } .fighter-sub { font-size:.92rem; color:var(--t1); margin-top:9px; } .fighter-meta { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-top:5px; } .fighter-head-right { display:flex; align-items:stretch; gap:22px; flex-shrink:0; } .record-block { display:flex; align-items:center; padding-right:22px; border-right:1px solid var(--border); } .record-grid { display:grid; grid-template-columns:auto repeat(3, minmax(26px, 1fr)); gap:6px 16px; align-items:center; } .record-h { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); text-align:center; } .record-cat { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t2); } .record-n { font-family:var(--display); font-size:1.55rem; line-height:1; letter-spacing:.02em; color:var(--t1); text-align:center; } .record-n--w { color:var(--red); } .fight-countdown { display:flex; flex-direction:column; justify-content:center; min-width:150px; padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); } .fc-num { font-family:var(--display); font-size:2rem; line-height:1; color:var(--t1); } .fc-num i { font-style:normal; font-size:1rem; color:var(--t3); margin-left:2px; } .fc-unit { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t2); margin-top:5px; } .fc-detail { font-size:.72rem; color:var(--t3); margin-top:6px; } .fight-countdown--soon { border-color:color-mix(in srgb,var(--red) 50%,transparent); } .fight-countdown--soon .fc-num { color:var(--red); } .fight-countdown--near .fc-num { color:var(--amber); } .fight-countdown--none { background:transparent; border-style:dashed; } .fight-countdown--none .fc-num { color:var(--t3); } /* KPI band (6 KPIs: week / 4-wk time / rounds / intensity / rest / load ratio) */ .kpi-band { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:24px; background:var(--surface); } .kpi { padding:16px 18px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:7px; } .kpi:first-child { border-left:none; } .kpi-label { font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t3); } .kpi-val { font-family:var(--display); font-size:1.85rem; line-height:.95; color:var(--t1); } .kpi-val i { font-style:normal; font-size:.95rem; color:var(--t3); margin-left:1px; } .kpi-sub { font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } /* Charts grid */ .charts { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; min-width:0; } .chart-card--wide { grid-column:1 / -1; } .card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; } .card-head h3 { font-size:.92rem; font-weight:600; color:var(--t1); } .card-meta { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } .card-legend { display:flex; gap:18px; margin:2px 0 8px; } .legend { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .legend-bar { width:11px; height:11px; border-radius:2px; background:var(--red); opacity:.5; } .legend-line { width:14px; height:0; border-top:2px solid var(--blue); } .chart-host { width:100%; margin-top:4px; } /* SVG chart primitives */ .chart-svg { width:100%; height:auto; display:block; overflow:visible; } .chart-grid { stroke:var(--border); stroke-width:1; shape-rendering:crispEdges; } .chart-axis { fill:var(--t3); font-family:var(--mono); font-size:11px; letter-spacing:.03em; } .chart-axis-y { font-size:10px; } .chart-line { fill:none; stroke:var(--red); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; } .chart-line--avg { stroke:var(--blue); stroke-width:2; } .chart-grad-top { stop-color:var(--red); stop-opacity:.24; } .chart-grad-bottom { stop-color:var(--red); stop-opacity:0; } .chart-dot { fill:var(--red); } .chart-dot-last { fill:var(--red); stroke:var(--surface); stroke-width:2.5; } .chart-bar { fill:var(--t2); opacity:.3; } .chart-bar-last { fill:var(--red); opacity:1; } .chart-bar:hover, .chart-bar.is-hover { opacity:.6; } .chart-bar-last:hover, .chart-bar-last.is-hover { opacity:1; } .chart-bar--spar { fill:#FF7043; opacity:.5; } .chart-bar--spar.chart-bar-last { fill:#FF7043; opacity:1; } @media (prefers-reduced-motion: reduce) { .chart-line { transition:none !important; stroke-dashoffset:0 !important; } .chart-bar { transition:none !important; transform:scaleY(1) !important; } } /* Work-split horizontal bars */ .hbars { display:flex; flex-direction:column; gap:9px; margin-top:6px; } .hbar-row { display:flex; align-items:center; gap:10px; } .hbar-label { width:96px; flex-shrink:0; font-size:.74rem; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hbar-track { flex:1; height:14px; background:var(--surface-alt); border-radius:3px; overflow:hidden; } .hbar-fill { display:block; height:100%; border-radius:3px; transition:width .8s cubic-bezier(.16,1,.3,1); } .hbar-val { width:42px; text-align:right; flex-shrink:0; font-family:var(--mono); font-size:.68rem; color:var(--t3); } /* Consistency heatmap */ .heat { margin-top:6px; } .heat-grid { display:flex; flex-direction:column; gap:4px; } .heat-row { display:flex; align-items:center; gap:4px; } .heat-wd { width:30px; flex-shrink:0; font-family:var(--mono); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .heat-cell { flex:1; aspect-ratio:1/1; max-width:24px; border-radius:3px; background:var(--heat0); } .heat-1 { background:rgba(229,57,53,.28); } .heat-2 { background:rgba(229,57,53,.5); } .heat-3 { background:rgba(229,57,53,.72); } .heat-4 { background:rgba(229,57,53,.95); } .heat-legend { display:flex; align-items:center; gap:4px; margin-top:12px; padding-left:34px; font-family:var(--mono); font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .heat-legend .heat-cell { width:12px; height:12px; flex:none; } /* Session log */ .log-card { padding:18px 0 6px; } .log-card .card-head { padding:0 18px; } .log-scroll { overflow-x:auto; margin-top:10px; } .log-table { width:100%; border-collapse:collapse; font-size:.8rem; } .log-table th { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); text-align:left; padding:8px 14px; border-bottom:1px solid var(--border); white-space:nowrap; } .log-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; } .log-table tr:last-child td { border-bottom:none; } .log-table tbody tr:hover { background:var(--surface-alt); } .log-num { text-align:left; font-family:var(--mono); } .log-num i { font-style:normal; color:var(--t3); font-size:.85em; } .log-date { font-family:var(--mono); font-size:.74rem; color:var(--t2); white-space:nowrap; } .log-type { vertical-align:top; } .type-cell { display:flex; align-items:flex-start; gap:7px; } .type-stack { display:flex; flex-direction:column; gap:5px; align-items:flex-start; min-width:0; } .coached-dot { width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:5px; } .type-chip { font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--tc,#888); border:1px solid var(--tc,#888); padding:2px 6px; border-radius:3px; white-space:nowrap; } .rpe-chip { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 5px; border-radius:4px; font-family:var(--mono); font-weight:500; font-size:.72rem; } .rpe--easy { background:#43A047; color:#fff; } .rpe--mod { background:#FFA726; color:#1a1400; } .rpe--hard { background:#E53935; color:#fff; } .focus-tag { font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t2); background:var(--surface-alt); padding:2px 6px; border-radius:3px; margin-right:4px; white-space:nowrap; } .log-notes { color:var(--t2); max-width:280px; min-width:200px; } /* Scrollbars */ .roster-list::-webkit-scrollbar, .dossier::-webkit-scrollbar, .log-scroll::-webkit-scrollbar { width:8px; height:8px; } .roster-list::-webkit-scrollbar-thumb, .dossier::-webkit-scrollbar-thumb, .log-scroll::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:6px; } .roster-list::-webkit-scrollbar-track, .dossier::-webkit-scrollbar-track, .log-scroll::-webkit-scrollbar-track { background:transparent; } /* ─── Responsive ─── */ @media (max-width: 1080px) { .charts { grid-template-columns:repeat(2,1fr); } .chart-card--wide { grid-column:1 / -1; } .kpi-band { grid-template-columns:repeat(3,1fr); } .kpi:nth-child(4) { border-left:none; } .kpi:nth-child(n+4) { border-top:1px solid var(--border); } } @media (max-width: 860px) { .app-shell { grid-template-columns:1fr; height:auto; } .roster { border-right:none; border-bottom:1px solid var(--border); height:auto; } .roster-list { display:flex; gap:8px; overflow-x:auto; padding:4px 14px 16px; } .roster-row { flex:0 0 auto; width:auto; min-width:200px; } /* The left accent bar doesn't work on a horizontal strip — mark the active fighter with a red border instead so selection stays obvious on mobile. */ .roster-row.is-active::before { display:none; } .roster-row.is-active { border-color:color-mix(in srgb, var(--red) 55%, transparent); } .dossier { height:auto; overflow:visible; } } @media (max-width: 720px) { .charts { grid-template-columns:1fr; } .kpi-band { grid-template-columns:repeat(2,1fr); } /* 5 KPIs in 2 cols: col-1 cards (odd) drop the left border, col-2 (even) keep the divider, and every card below the first row gets a top border. */ .kpi:nth-child(odd) { border-left:none; } .kpi:nth-child(even) { border-left:1px solid var(--border); } .kpi:nth-child(n+3) { border-top:1px solid var(--border); } .fighter-head-right { flex-direction:column; gap:14px; width:100%; } .record-block { border-right:none; padding-right:0; border-bottom:1px solid var(--border); padding-bottom:12px; flex-direction:row; gap:22px; } .fighter-name { font-size:1.7rem; } .dossier-inner { padding:18px 16px 40px; } } @media (max-width: 420px) { .kpi-band { grid-template-columns:1fr 1fr; } .topbar { padding:0 12px; } .coach-meta { display:none; } } /* ═══ Editable bits + chart interactivity (added in revision) ═══ */ /* Per-session focus editing in the log (the coach tags any logged session) */ .focus-cell { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .focus-edit-btn { flex-shrink:0; display:inline-flex; align-items:center; line-height:1; color:var(--t3); background:transparent; border:1px solid var(--border); border-radius:5px; padding:4px 6px; cursor:pointer; transition:color .15s, border-color .15s; } .focus-edit-btn:hover { color:var(--red); border-color:var(--red); } .focus-edit-btn .ico-pencil { width:12px; height:12px; } .focus-editor { display:flex; flex-wrap:wrap; gap:5px; align-items:center; max-width:340px; } .fchip { font-family:var(--mono); font-size:.56rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t2); background:var(--surface-alt); border:1px solid var(--border); padding:4px 9px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; } .fchip:hover { border-color:var(--t3); color:var(--t1); } .fchip.is-on { background:var(--red); border-color:var(--red); color:#fff; } .focus-done { font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--red); border:none; border-radius:5px; padding:5px 11px; cursor:pointer; margin-left:2px; } .focus-done:hover { background:var(--red-dark); } /* Per-type duration inside a multi-type session chip */ .type-chip-min { font-weight:500; opacity:.85; } /* Fight weight category line in the bout block */ .fc-weight { align-self:flex-start; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--t1); margin-top:7px; padding:3px 8px; border:1px solid var(--border-light); border-radius:4px; } /* Next-fight inline editor */ .fc-edit { display:inline-flex; align-items:center; gap:5px; margin-top:10px; align-self:flex-start; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); background:transparent; border:1px solid var(--border-light); border-radius:4px; padding:4px 9px; cursor:pointer; transition:color .15s, border-color .15s; } .fc-edit:hover { color:var(--t1); border-color:var(--t3); } .fc-edit .ico-pencil { width:11px; height:11px; } .fight-edit { min-width:230px; padding:14px 16px; border:1px solid var(--border-light); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; gap:9px; } .fight-edit-head { font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t2); } .fe-field { display:flex; flex-direction:column; gap:3px; font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .fe-field input { font-family:'DM Sans',sans-serif; font-size:.85rem; text-transform:none; letter-spacing:normal; color:var(--t1); background:var(--bg); border:1px solid var(--border-light); border-radius:6px; padding:7px 9px; } .fe-field input:focus { outline:none; border-color:var(--red); } .fe-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; } .btn-sm { font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:5px; cursor:pointer; border:1px solid var(--border-light); background:var(--surface); color:var(--t1); transition:border-color .15s, background .15s, color .15s; } .btn-sm:hover { border-color:var(--t3); } .btn-sm--primary { background:var(--red); border-color:var(--red); color:#fff; } .btn-sm--primary:hover { background:var(--red-dark); border-color:var(--red-dark); } .btn-sm--ghost { color:var(--t3); } .btn-sm--ghost:hover { color:var(--red); border-color:var(--red); } /* Work-split range control */ .split-controls { display:inline-flex; margin:2px 0 10px; border:1px solid var(--border); border-radius:7px; overflow:hidden; } .seg { font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t2); background:var(--surface); border:none; border-right:1px solid var(--border); padding:6px 13px; cursor:pointer; transition:background .15s, color .15s; } .seg:last-child { border-right:none; } .seg:hover { color:var(--t1); } .seg.is-on { background:var(--red); color:#fff; } .split-custom { display:flex; gap:12px; margin-bottom:10px; flex-wrap:wrap; } .split-custom label { font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); display:flex; align-items:center; gap:6px; } .split-custom input { font-family:'DM Sans',sans-serif; font-size:.8rem; color:var(--t1); background:var(--bg); border:1px solid var(--border-light); border-radius:6px; padding:5px 8px; } .split-custom input:focus { outline:none; border-color:var(--red); } /* Chart bar value labels + floating tooltip */ .chart-host { position:relative; } .chart-bar-value { fill:var(--t2); font-family:var(--mono); font-size:11px; font-weight:500; } .chart-tip { position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-128%); background:var(--t1); color:var(--bg); border-radius:6px; padding:7px 11px; min-width:54px; text-align:center; white-space:nowrap; opacity:0; transition:opacity .12s ease; box-shadow:0 4px 18px rgba(0,0,0,.22); } .chart-tip.is-visible { opacity:1; } .chart-tip .tip-val { display:block; font-family:var(--display); font-size:1.05rem; line-height:1; letter-spacing:.02em; } .chart-tip .tip-lbl { display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; opacity:.82; line-height:1.5; } /* Heatmap month labels + footer note */ .heat-months { display:flex; align-items:center; gap:4px; margin-bottom:5px; } .heat-months .heat-wd { width:30px; flex-shrink:0; } .heat-month { flex:1; max-width:24px; font-family:var(--mono); font-size:.52rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); text-align:left; white-space:nowrap; overflow:visible; } .heat-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; padding-left:34px; } .heat-note { font-size:.62rem; color:var(--t3); } .heat-foot .heat-legend { margin-top:0; padding-left:0; } /* Amber is legible on dark but washes out as text on light — darken the ink in light mode for the always-on demo badge and the "near fight" states. */ [data-theme="light"] .demo-badge { color:#8a5200; background:rgba(255,167,38,.15); border-color:rgba(255,167,38,.5); } [data-theme="light"] .roster-fight--near { color:#9a5b00; } [data-theme="light"] .fight-countdown--near .fc-num { color:#9a5b00; } /* ═══ Launch-readiness additions (Jul 2026) ═══ */ /* ACWR load-ratio KPI — status dot + plain-language band word */ .kpi-sub--band { display:inline-flex; align-items:center; gap:6px; } .acwr-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--t3); } .acwr--ok { background:var(--green); } .acwr--warn { background:var(--amber); } .acwr--spike { background:var(--red); } .acwr--na { background:var(--t3); } [data-theme="light"] .acwr--warn { background:#c77700; } /* First-run panel (no fighters connected yet) */ .first-run { max-width:480px; margin:9vh auto 0; text-align:center; padding:0 8px; } .first-run-logo { width:64px; height:auto; margin-bottom:18px; opacity:.9; } .first-run-title { font-family:var(--display); font-size:1.9rem; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1.1; margin-bottom:14px; } .first-run-pending { display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); background:color-mix(in srgb, var(--amber) 10%, transparent); padding:6px 12px; border-radius:4px; margin-bottom:16px; } [data-theme="light"] .first-run-pending { color:#8a5200; } .first-run-body { font-size:.92rem; color:var(--t2); line-height:1.65; margin-bottom:12px; } .first-run-body strong { color:var(--t1); font-weight:600; } .first-run-note { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } /* Demo-mode banner (unmissable "this is sample data" signal) */ .demo-banner { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:9px 40px 9px 16px; position:relative; text-align:center; font-size:.78rem; color:var(--t1); background:color-mix(in srgb, var(--amber) 10%, var(--bg)); border-bottom:1px solid color-mix(in srgb, var(--amber) 40%, transparent); } .demo-banner strong { font-weight:700; } .demo-banner a { color:var(--red); font-weight:600; text-decoration:none; } .demo-banner a:hover { text-decoration:underline; } .demo-banner-x { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; background:transparent; color:var(--t2); font-size:18px; line-height:1; cursor:pointer; border-radius:6px; } .demo-banner-x:hover { color:var(--t1); background:color-mix(in srgb, var(--t3) 18%, transparent); } /* "Saved on this device" hint for coach edits (localStorage persistence) */ .local-note { font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); }