/* United States Naval Academy design system — Navy Blue + Vegas Gold, dark-navy canvas.
   Tokens match the design export (Hanken Grotesk + IBM Plex Mono). Chrome is navy/gold;
   event-type colors keep their semantic meaning. */
:root {
  --bg:#080c14; --card:#0e1623; --card-2:#101a2b; --line:rgba(148,163,184,0.12);
  --line-soft:rgba(148,163,184,0.08); --txt:#eaf0f7; --txt-bright:#f4f7fb;
  --muted:#aab8cc; --muted-2:#94a3b8; --muted-3:#9aa8bc;
  --navy:#0c1f3a; --navy-deep:#0a1830; --navy-line:rgba(148,163,184,0.10);
  --gold:#d8bb82; --gold-text:#e3c98f; --gold-bright:#e7d4a8; --gold-deep:#bf9c5a;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --c-commit:#46b06d; --c-decommit:#e08a8a; --c-offer:#5896e6; --c-visit:#d6b264; --c-camp:#b79be0;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--txt); }
header { padding:20px 28px; border-bottom:1px solid var(--line); display:flex;
  align-items:baseline; gap:14px; }
header h1 { margin:0; font-size:22px; }
header .sub { color:var(--muted); font-size:13px; }
main { padding:24px 28px; }
table { width:100%; border-collapse:collapse; background:transparent; border:none; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-soft);
  font-size:14px; vertical-align:top; color:var(--txt); }
td.muted, .muted { color:var(--muted); }
th { font-family:var(--mono); color:var(--muted); font-weight:500; text-transform:uppercase;
  font-size:11px; letter-spacing:.07em; border-bottom:1px solid rgba(148,163,184,0.20); }
tbody tr:hover { background:rgba(148,163,184,0.035); }
tr:last-child td { border-bottom:none; }
.handle { color:var(--muted); font-size:12px; }
.type { text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:.04em; }
.evt.commit .type { color:var(--c-commit); }
.evt.decommit .type { color:var(--c-decommit); }
.evt.offer .type { color:var(--c-offer); }
.evt.visit .type { color:var(--c-visit); }
.evt.camp .type { color:var(--c-camp); }
a { color:var(--c-offer); }
.empty { color:#7e8ca0; margin-top:24px; text-align:center; padding:18px; }
.muted { color:var(--muted); }
.summary { font-size:13.5px; color:#c5cee0; margin:4px 0 18px; }
.banner { background:rgba(214,178,100,0.08); border:1px solid rgba(214,178,100,0.30);
  color:var(--gold-bright); padding:10px 14px; border-radius:8px; }
h2 { margin:28px 0 10px; font-size:15px; font-weight:700; color:#dfe5ee; }
h2 .muted { font-weight:400; font-size:12.5px; color:var(--muted-3); }
.scan-btn { background:var(--gold); color:var(--navy); border:none; padding:11px 20px;
  border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; }
.scan-btn:hover { background:var(--gold-bright); }
.fp-btn { background:transparent; border:1px solid var(--line); border-radius:6px;
  cursor:pointer; font-size:13px; padding:3px 7px; }
.fp-btn:hover { border-color:#f85149; background:#2d1719; }
.actions { white-space:nowrap; }
.confirm-btn { border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:11px;
  font-weight:700; text-transform:uppercase; padding:4px 8px; margin:0 1px; background:rgba(148,163,184,0.05); }
.confirm-btn.commit { color:var(--c-commit); } .confirm-btn.commit:hover { background:rgba(70,176,109,0.14); border-color:rgba(70,176,109,0.4); }
.confirm-btn.decommit { color:var(--c-decommit); } .confirm-btn.decommit:hover { background:rgba(224,106,106,0.12); border-color:rgba(224,106,106,0.4); }
.confirm-btn.offer { color:var(--c-offer); } .confirm-btn.offer:hover { background:rgba(88,150,230,0.12); border-color:rgba(88,150,230,0.4); }
.confirm-btn.visit { color:var(--c-visit); } .confirm-btn.visit:hover { background:rgba(214,178,100,0.12); border-color:rgba(214,178,100,0.4); }
.confirm-btn.camp { color:var(--c-camp); } .confirm-btn.camp:hover { background:rgba(183,155,224,0.12); border-color:rgba(183,155,224,0.4); }
.ignore-btn { border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:11px;
  font-weight:600; padding:4px 9px; margin:0 1px; background:rgba(148,163,184,0.05); color:var(--muted); }
.ignore-btn:hover { background:rgba(148,163,184,0.12); color:#e6edf3; }
.status-banner { background:rgba(216,187,130,0.10); border:1px solid rgba(216,187,130,0.30);
  color:var(--gold-bright); padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13.5px; }
.right-btn { display:inline-flex; align-items:center; gap:5px; background:rgba(70,176,109,0.10);
  border:1px solid rgba(70,176,109,0.35); color:#62c489; border-radius:7px; cursor:pointer;
  font-size:11.5px; font-weight:600; padding:4px 9px; }
.right-btn:hover { background:rgba(70,176,109,0.18); }
.wrong-btn { background:rgba(224,106,106,0.07); border:1px solid rgba(224,106,106,0.28);
  color:var(--c-decommit); border-radius:7px; cursor:pointer; font-size:11.5px; font-weight:600; padding:4px 9px; }
.wrong-btn:hover { background:rgba(224,106,106,0.14); }
/* inline event-type picker — by default looks exactly like the colored label; the native
   pick-list opens on click. No box / no arrow until hovered (the user knows it's editable). */
.event-select { background:transparent; border:1px solid transparent; border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 6px; cursor:pointer; outline:none;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.event-select:hover, .event-select:focus { border-color:var(--line); background:#0a1626; }
.event-select option { background:#101a2b; color:var(--txt); font-weight:600; }
.event-select.commit { color:var(--c-commit); }
.event-select.decommit { color:var(--c-decommit); }
.event-select.offer { color:var(--c-offer); }
.event-select.visit { color:var(--c-visit); }
.event-select.camp { color:var(--c-camp); }
/* inline field editors (Confirmed + Players) — look like plain text; reveal an editable box
   on hover/focus, exactly like the event-type picker. No layout shift. */
/* inline editors are auto-growing textareas: long values WRAP to a second line and the field
   width flexes with the column/window. The ✓ save button sits inline to the right. */
.inline-form { display:flex; align-items:flex-start; gap:4px; max-width:100%; }
.inline-edit { flex:1 1 auto; width:100%; min-width:0; box-sizing:border-box;
  background:transparent; border:1px solid transparent; border-radius:6px; resize:none;
  overflow:hidden; white-space:pre-wrap; word-break:break-word; line-height:1.35;
  font-family:inherit; font-size:14px; color:inherit; padding:3px 6px; cursor:text; outline:none; }
.inline-edit:hover { border-color:var(--line); background:#0a1626; }
.inline-edit:focus { border-color:var(--gold); background:#0a1626; }
.inline-edit::placeholder { color:var(--muted); }
.inline-edit.inline-sm { flex:0 1 70px; max-width:70px; }
.inline-edit.inline-xs { flex:0 1 56px; max-width:56px; text-transform:uppercase; }
/* filter / sort ribbon above the Confirmed + Players tables */
.ribbon { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 14px; }
.ribbon .tf-search { flex:1 1 260px; max-width:400px; background:#0a1626; border:1px solid var(--line);
  color:var(--txt); border-radius:8px; padding:9px 13px; font-size:14px; }
.ribbon .tf-search:focus { border-color:var(--gold); outline:none; }
.ribbon .tf-label { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:7px; }
.ribbon .tf-count { color:var(--muted); font-size:13px; margin-left:auto; white-space:nowrap; }

/* tiny inline save check — only shown by JS once a value changes */
.save-btn { flex:0 0 auto; background:#15301d; border:1px solid #2ea043; color:#3fb950;
  border-radius:6px; cursor:pointer; font-size:12px; font-weight:700; line-height:1;
  padding:4px 7px; margin-top:1px; }
.save-btn:hover { background:#1c4326; }

/* All non-event selects (time range, window, …) use the app's dark theme + a custom caret
   instead of the native browser dropdown chrome. */
select:not(.event-select) {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#0a1626; color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:10px 32px 10px 12px; font-size:14px; font-family:inherit;
  cursor:pointer; line-height:1.2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%238b949e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center;
}
select:not(.event-select):hover { border-color:var(--muted); }
select:not(.event-select):focus { border-color:var(--gold); outline:none; }
select:not(.event-select) option { background:#101a2b; color:var(--txt); }

/* single-value autocomplete combobox (inline school editors) */
.combo { position:relative; }
.combo-input { min-width:90px; }
.combo-menu { position:absolute; top:100%; left:0; z-index:90; min-width:200px; max-height:240px;
  overflow-y:auto; margin-top:3px; background:#101a2b; border:1px solid var(--line);
  border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.5); display:none; }
.combo-menu.open { display:block; }
.combo-option { padding:7px 11px; font-size:13px; cursor:pointer; white-space:nowrap; }
.combo-option:hover, .combo-option.active { background:#16233a; }
/* row delete — hidden until the row is hovered, so the table looks unchanged at rest */
.row-actions { width:1%; white-space:nowrap; }
.row-del { background:transparent; border:none; color:var(--muted); cursor:pointer;
  font-size:14px; padding:3px 7px; border-radius:6px; opacity:0; transition:opacity .12s; }
tr:hover .row-del { opacity:.65; }
.row-del:hover { opacity:1; color:#f85149; background:#2d1719; }

/* wrong-feedback modal */
.modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; }
.modal-backdrop[hidden] { display:none; }
.modal-card { background:#101a2b; border:1px solid var(--line); border-radius:12px;
  padding:20px 24px; min-width:320px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal-card h3 { margin:0 0 14px; font-size:15px; }
.modal-card label { display:block; font-size:14px; padding:6px 0; cursor:pointer; }
.modal-card label input { margin-right:9px; }
.modal-actions { display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }
.modal-cancel { background:#16233a; border:1px solid var(--line); color:var(--txt);
  border-radius:7px; padding:8px 16px; cursor:pointer; font-size:14px; }
.modal-cancel:hover { background:#2a313b; }
.wrong-submit { background:#2d1719; border:1px solid #6e2b2b; color:#f85149;
  border-radius:7px; cursor:pointer; font-size:14px; padding:8px 16px; }
.wrong-submit:hover { background:#3d1d1f; }
.via { font-size:11px; opacity:.8; }
.run-field { display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); }
.modal-card select { background:#0a1626; border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:10px 12px; font-size:14px; }
.modal-card select:focus { border-color:var(--gold); outline:none; }
.nav-link { margin-left:auto; color:#58a6ff; font-size:14px; text-decoration:none; }
.tabs { margin-left:auto; display:flex; gap:6px; }
.tabs a { color:var(--muted); text-decoration:none; font-size:14px; padding:7px 14px;
  border-radius:8px; border:1px solid transparent; }
.tabs a:hover { color:var(--txt); background:#101a2b; }
.tabs a.active { color:var(--txt); background:#101a2b; border-color:var(--line); }
.search-panel .field.time { flex:0 0 150px; }
.search-panel select { background:#0a1626; border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:10px 12px; font-size:14px; }
.exports { margin-left:auto; display:flex; gap:8px; }
.exp-btn { display:inline-block; background:rgba(148,163,184,0.06); border:1px solid var(--line); color:#cdd6e3;
  border-radius:6px; padding:5px 10px; font-size:13px; text-decoration:none; margin:0 2px; }
.exp-btn:hover { border-color:var(--gold); color:#fff; }

.search-panel { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:8px; }
.search-panel .field { display:flex; flex-direction:column; gap:6px; flex:1; }
/* report page: the searched-keyword chips are collapsed (defaults are a long list) */
.kw-chip-toggle { background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:6px; font-size:11px; padding:1px 7px; cursor:pointer; margin-left:2px; }
.kw-chip-toggle:hover { color:var(--txt); border-color:var(--muted); }
.kw-chips[hidden] { display:none; }
.kw-count { font-size:12px; }
.search-panel label { font-family:var(--mono); font-size:10.5px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; }
.search-panel .hint { color:var(--muted-3); font-weight:400; font-family:'Hanken Grotesk',sans-serif;
  text-transform:none; letter-spacing:0; }
.search-panel select { color:var(--txt); }

/* ===== Players list (read-only) + player profile (editable) ===== */
/* name + verified-✓ / mentions stay inline; the edit field flexes, the ✓ rides alongside */
.name-cell { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.name-cell .inline-form { flex:0 1 auto; min-width:0; }
.name-cell .inline-edit { width:auto; min-width:90px; max-width:190px; }
.name-cell .via { flex:none; }
.player-name { color:var(--txt-bright); font-weight:600; font-size:14.5px; text-decoration:none; }
.player-name:hover { color:var(--gold-text); text-decoration:underline; }
.type.commit { color:var(--c-commit); }
.type.decommit { color:var(--c-decommit); }
.type.offer { color:var(--c-offer); }
.type.visit { color:var(--c-visit); }
.type.camp { color:var(--c-camp); }
.profile-card { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 22px; margin-bottom:8px; }
.profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px 24px; }
.profile-field { display:flex; flex-direction:column; gap:7px; }
.profile-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.profile-field .inline-edit { font-size:15px; color:var(--txt-bright); font-weight:500; padding:4px 6px; }
.profile-links { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.profile-links .via { color:var(--c-commit); font-size:12px; opacity:1; }
/* custom multi-select */
.ms { position:relative; }
.ms-control { display:flex; flex-wrap:wrap; gap:6px; align-items:center; cursor:text;
  background:#0a1626; border:1px solid var(--line); border-radius:8px; padding:5px 8px; min-height:42px; }
.ms-control:focus-within { border-color:var(--gold); }
.ms-chips { display:contents; }
.ms-chip { display:inline-flex; align-items:center; gap:6px; background:#16233a;
  border:1px solid var(--line); border-radius:6px; padding:3px 4px 3px 9px; font-size:13px; white-space:nowrap; }
.ms-chip button { background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:15px; line-height:1; padding:0 3px; }
.ms-chip button:hover { color:#f85149; }
.ms-input { flex:1; min-width:130px; background:transparent; border:none; color:var(--txt);
  font-size:14px; outline:none; padding:5px 2px; }
.ms-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#101a2b; border:1px solid var(--line); border-radius:8px; max-height:280px;
  overflow-y:auto; display:none; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.ms-dropdown.open { display:block; }
.ms-option { padding:8px 12px; font-size:14px; cursor:pointer; }
.ms-option:hover { background:#16233a; }
.ms-add { color:#3fb950; }
.ms-empty { padding:10px 12px; color:var(--muted); font-size:13px; }
.feed-title { margin-top:26px; }
.searched { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; font-size:13px; color:#c5cee0; }
.searched strong { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2); font-weight:500; }
.searched .chip { display:inline-block; background:rgba(148,163,184,0.10); border-radius:6px;
  padding:2px 8px; margin:2px 3px; font-size:12.5px; color:#d3dae6; }

/* ---- app shell: left sidebar + content ---- */
.app { display:flex; height:100vh; align-items:stretch; overflow:hidden; }
.sidebar { flex:none; width:236px; background:var(--navy); border-right:1px solid var(--navy-line);
  padding:22px 14px; display:flex; flex-direction:column; }
/* brand */
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; padding:2px 8px 22px; }
.brand-mark { width:32px; height:32px; border-radius:9px; flex:none; display:flex;
  align-items:center; justify-content:center; background:linear-gradient(160deg,var(--gold),var(--gold-deep)); }
.brand-name { font-size:16px; font-weight:700; color:var(--gold-text); letter-spacing:-.01em; }
/* nav */
.side-nav { display:flex; flex-direction:column; gap:3px; }
.nav-section { font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#5a6c84;
  text-transform:uppercase; padding:6px 11px; margin-top:4px; }
.nav-section:not(:first-child) { margin-top:16px; }
.side-nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px;
  font-size:14px; font-weight:600; text-decoration:none; color:#aeb9ca; }
.side-nav a svg { width:18px; height:18px; flex:none; }
.side-nav a:hover { color:#eaeff5; background:rgba(148,163,184,0.06); }
.side-nav a.active { color:var(--gold-text); background:rgba(216,187,130,0.12);
  box-shadow:inset 2px 0 0 var(--gold); }
.nav-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.nav-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#c0392b; color:#fff; font-size:11px; font-weight:700; line-height:18px;
  text-align:center; flex:none; }
.alert-banner { display:block; margin:0 0 16px; padding:11px 15px; border-radius:9px;
  background:rgba(192,57,43,0.14); border:1px solid rgba(192,57,43,0.4); color:#f1b0a8;
  font-size:13.5px; font-weight:600; text-decoration:none; }
.alert-banner:hover { background:rgba(192,57,43,0.2); }
/* user footer */
.side-user-wrap { margin-top:auto; border-top:1px solid var(--navy-line); padding-top:8px; }
.side-user { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  text-decoration:none; color:inherit; }
.side-user:hover { background:rgba(148,163,184,0.08); }
.side-user.active { background:rgba(216,187,130,0.10); }
.side-user-cog { width:15px; height:15px; color:var(--muted); margin-left:auto; flex:0 0 auto; }
.side-user:hover .side-user-cog, .side-user.active .side-user-cog { color:var(--gold-text); }
.side-logout { display:block; text-align:center; font-size:11px; font-family:var(--mono);
  letter-spacing:.04em; color:var(--muted); text-decoration:none; padding:6px 0 2px; }
.side-logout:hover { color:var(--gold-text); }
.side-avatar { width:30px; height:30px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; background:#1b3a5e; color:#c9d6e6; font-size:11px;
  font-weight:700; }
.side-user-text { display:flex; flex-direction:column; line-height:1.25; }
.side-user-text strong { font-size:12.5px; color:#dce3ec; font-weight:600; }
.side-user-text span { font-size:11px; color:var(--muted-3); }
/* content + topbar */
.content { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.topbar { padding:24px 36px; border-bottom:1px solid var(--line-soft); display:flex;
  align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar-text { display:flex; flex-direction:column; gap:5px; }
.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted-2);
  text-transform:uppercase; }
.topbar h1 { margin:0; font-size:24px; font-weight:700; color:var(--txt-bright); letter-spacing:-.015em; }
.topbar-sub { font-size:12.5px; color:#7e8ca0; }
.content main { flex:1; overflow:auto; padding:30px 36px; }

/* ---- preset saved-search cards ---- */
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px; margin-top:6px; }
.preset-card { position:relative; }
.preset-run { width:100%; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:16px 16px 14px; display:flex;
  flex-direction:column; gap:7px; color:var(--txt); font-family:inherit;
  transition:border-color .12s, transform .12s; }
.preset-run:hover { border-color:var(--gold); transform:translateY(-1px); }
.preset-top { display:flex; align-items:center; gap:9px; }
.preset-icon { font-size:20px; }
.preset-name { font-size:15.5px; font-weight:700; }
.preset-meta { color:var(--muted); font-size:12px; }
.preset-sub { color:var(--txt); font-size:12.5px; opacity:.8; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.preset-edit { position:absolute; top:9px; right:10px; color:var(--muted); text-decoration:none;
  font-size:13px; padding:3px 6px; border-radius:6px; opacity:0; transition:opacity .12s; }
.preset-card:hover .preset-edit { opacity:1; }
.preset-edit:hover { background:#16233a; color:var(--txt); }
.preset-new { display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column;
  border:1.5px dashed var(--line); border-radius:12px; color:var(--muted); text-decoration:none;
  min-height:104px; font-size:14px; }
.preset-new:hover { border-color:var(--gold); color:var(--txt); }
.preset-new .plus { font-size:24px; line-height:1; }

/* ---- collapsible report sections ---- */
details.section { margin:28px 0 0; }
details.section > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline;
  gap:9px; padding:8px 2px; }
details.section > summary::-webkit-details-marker { display:none; }
details.section > summary::before { content:'▾'; color:#7b8799; font-size:12px;
  transition:transform .15s; display:inline-block; }
details.section:not([open]) > summary::before { transform:rotate(-90deg); }
details.section > summary .sec-title { font-size:15px; font-weight:700; color:#dfe5ee; }
details.section > summary .sec-meta { color:var(--muted-3); font-weight:400; font-size:12.5px; }
details.section > summary:hover .sec-title { color:var(--gold-text); }
details.section table { margin-top:4px; }

/* ---- saved-search editor form ---- */
.ss-form { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; display:flex; flex-direction:column; gap:18px; max-width:780px; }
.ss-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.ss-input { background:#0a1626; border:1px solid var(--line); color:var(--txt); border-radius:8px;
  padding:10px 12px; font-size:14px; font-family:inherit; }
.ss-input:focus { border-color:var(--gold); outline:none; }
.ss-icon { text-align:center; font-size:18px; }
.ss-actions { display:flex; gap:12px; align-items:center; }
.ss-delete-form { margin-top:14px; max-width:780px; }

/* ===================== Mobile / small screens ===================== */
/* Off-canvas drawer nav + a sticky hamburger top bar. Hidden chrome on desktop. */
.mobile-topbar { display:none; }
.nav-backdrop { display:none; }

@media (max-width: 760px) {
  /* switch the fixed 100vh flex shell to natural document flow so the page scrolls normally */
  .app { display:block; height:auto; min-height:100vh; overflow:visible; }
  .content { overflow:visible; }
  .content main { overflow:visible; }

  /* sidebar becomes an off-canvas drawer */
  .sidebar { position:fixed; top:0; left:0; bottom:0; width:264px; z-index:1200;
    transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
    box-shadow:0 0 40px rgba(0,0,0,.5); }
  .sidebar.open { transform:none; }
  .side-nav a { padding:12px 12px; }   /* larger touch targets */

  /* dim backdrop behind the open drawer */
  .nav-backdrop { display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(4,7,12,.55); opacity:0; pointer-events:none; transition:opacity .22s; }
  .nav-backdrop.open { opacity:1; pointer-events:auto; }

  /* sticky mobile header with the hamburger */
  .mobile-topbar { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:900;
    background:var(--navy); border-bottom:1px solid var(--navy-line); padding:11px 15px; }
  .mobile-topbar .hamb { display:flex; flex-direction:column; gap:4px; background:transparent;
    border:1px solid var(--line); border-radius:8px; padding:9px 10px; cursor:pointer; }
  .mobile-topbar .hamb span { display:block; width:18px; height:2px; background:var(--gold-text);
    border-radius:2px; }
  .mobile-topbar .mt-brand { font-size:15px; font-weight:700; color:var(--gold-text); }

  /* tighter content padding */
  .topbar { padding:16px 18px; }
  .topbar h1 { font-size:20px; }
  .content main { padding:18px 16px; }

  /* wide flex rows + full-width controls */
  .sf-time, .search-panel .field.time { width:100%; flex:1 1 100%; }
  .field-row { flex-direction:column; }

  /* each table gets its own horizontal scroll instead of blowing out the page */
  main table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* single-column grids */
  .settings-grid, .preset-grid, .profile-grid { grid-template-columns:1fr; }
  .stat-bar .stat { flex-basis:calc(50% - 6px); }

  /* saved-search form: the desktop label-left/control-right rows overflow at phone
     width, so stack label-over-control full width and let the list-type toggle wrap */
  .ss-form .field { flex-direction:column; align-items:stretch; }
  .ss-form > .ss-row { flex-direction:column; align-items:stretch; gap:14px; }
  .ss-form .ms, .ss-form .ss-input,
  .ss-form .uiselect, .ss-form .uiselect-btn { width:100%; }
  .kind-toggle { flex-direction:column; }

  /* reports list: the default keyword set is huge — clamp the preview so one row
     isn't a 2000px wall of text (full list is on the report detail page) */
  .kw-cell { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; max-width:52vw; }
}

/* ===================== Search page (design redesign) ===================== */
.scan-btn { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#1a1205; border:none;
  border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:inherit; }
.scan-btn:hover { filter:brightness(1.06); }
.scan-btn svg { width:16px; height:16px; }

.search-row { display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.sf-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.sf-grow { flex:1.5 1 220px; }
.sf-time { width:160px; flex:none; }
.sf-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
/* underline-style multiselect + select */
.ms-underline .ms-control { border:none; border-bottom:1px solid rgba(148,163,184,0.22);
  border-radius:0; background:transparent; padding:8px 2px; min-height:0; }
.ms-underline .ms-control:focus-within { border-bottom-color:var(--gold); }
.ms-underline .ms-input { font-size:14.5px; padding:2px; min-width:90px; }
select.sf-select { -webkit-appearance:none; appearance:none; background:transparent;
  border:none; border-bottom:1px solid rgba(148,163,184,0.22); border-radius:0; padding:9px 22px 9px 2px;
  color:#cdd6e3; font-size:14.5px; font-family:inherit; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236c7a8e' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center; }
select.sf-select:focus { border-bottom-color:var(--gold); outline:none; }

/* saved-search list rows */
.saved-list { margin-top:38px; }
.saved-head { display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:10px; }
.saved-head h2 { margin:0; font-family:var(--mono); font-size:13px; font-weight:600; color:#9aa7ba;
  text-transform:uppercase; letter-spacing:.06em; }
.saved-row { display:flex; align-items:center; border-bottom:1px solid var(--line-soft); }
.saved-run { flex:1; display:flex; align-items:center; gap:14px; padding:16px 6px; min-width:0;
  background:transparent; border:none; cursor:pointer; color:inherit; text-align:left; font:inherit; }
.saved-run:hover { background:rgba(148,163,184,0.04); }
.saved-icon { font-size:16px; flex:none; width:22px; text-align:center; }
.saved-main { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.saved-name { font-size:15px; font-weight:600; color:#eaeff5; }
.saved-schools { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.saved-meta { font-family:var(--mono); font-size:11.5px; color:#7b8799; flex:none; white-space:nowrap; }
.saved-chev { width:16px; height:16px; color:#5a6678; flex:none; }
.saved-edit { flex:none; color:var(--muted-3); text-decoration:none; padding:8px 12px; font-size:13px;
  opacity:0; transition:opacity .12s; }
.saved-row:hover .saved-edit { opacity:1; }
.saved-edit:hover { color:var(--gold-text); }
.saved-new { display:flex; align-items:center; gap:11px; padding:15px 6px; color:#7b8799;
  text-decoration:none; font-size:13.5px; font-weight:500; }
.saved-new svg { width:17px; height:17px; }
.saved-new:hover { color:var(--gold-text); }

/* ===== loading overlay (scan in progress) ===== */
.loading-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center;
  justify-content:center; background:rgba(8,12,20,0.82); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px); }
.loading-overlay[hidden] { display:none; }
.loading-box { display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px 28px; }
.spinner { width:44px; height:44px; border-radius:50%; border:3px solid rgba(216,187,130,0.22);
  border-top-color:var(--gold); animation:rt-spin .8s linear infinite; }
.loading-label { font-size:15px; font-weight:600; color:var(--txt-bright); letter-spacing:-.005em; }
.loading-sub { font-size:12.5px; color:var(--muted); }
@keyframes rt-spin { to { transform:rotate(360deg); } }

/* inline emoji picker (saved-search form) — clickable tiles, no dropdown */
.emoji-picker { display:flex; flex-wrap:wrap; gap:8px; }
.emoji-opt { width:42px; height:42px; font-size:20px; line-height:1; cursor:pointer;
  background:#0a1626; border:1px solid var(--line); border-radius:10px; display:flex;
  align-items:center; justify-content:center; padding:0; }
.emoji-opt:hover { border-color:var(--muted); }
.emoji-opt.selected { border-color:var(--gold); background:rgba(216,187,130,0.14);
  box-shadow:0 0 0 1px var(--gold) inset; }

/* saved-search drag-to-reorder */
.saved-grip { flex:none; display:flex; align-items:center; color:#54647c; cursor:grab;
  padding:0 2px 0 0; opacity:0; transition:opacity .12s; }
.saved-grip svg { width:16px; height:16px; }
.saved-row:hover .saved-grip { opacity:1; }
.saved-row.dragging { opacity:.5; background:rgba(216,187,130,0.06); }
.saved-row[draggable="true"] { cursor:default; }

/* sidebar pinned-list emoji + saved-search pin toggle */
.nav-emoji { width:18px; text-align:center; font-size:14px; flex:none; }
.saved-pin-form { flex:none; display:flex; }
.saved-pin { background:transparent; border:none; cursor:pointer; font-size:13px; padding:8px;
  opacity:0; filter:grayscale(1); transition:opacity .12s; }
.saved-row:hover .saved-pin { opacity:.65; }
.saved-pin.on { opacity:1; filter:none; }
.saved-pin.on:hover { opacity:.8; }

/* saved-list stat bar */
.stat-bar { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.stat { flex:1 1 120px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.stat-num { font-size:26px; font-weight:700; color:var(--txt-bright); line-height:1; letter-spacing:-.02em; }
.stat-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); }
.stat.commit .stat-num { color:var(--c-commit); }
.stat.offer .stat-num { color:var(--c-offer); }
.stat.visit .stat-num { color:var(--c-visit); }
.stat.camp .stat-num { color:var(--c-camp); }
.stat.decommit .stat-num { color:var(--c-decommit); }

/* saved-search form: list-type toggle (school vs player list) */
.kind-toggle { display:flex; gap:12px; }
.kind-opt { flex:1; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:13px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  color:var(--txt-bright); font-weight:600; font-size:14px; cursor:pointer; text-align:left;
  transition:border-color .12s, box-shadow .12s; }
.kind-opt:hover { border-color:var(--gold-deep); }
.kind-opt .kind-sub { font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); font-weight:500; }
.kind-opt.selected { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
/* show only the fields for the chosen list kind (default: school until JS runs) */
.kind-player, .kind-perf { display:none; }
body.list-kind-school .kind-player, body.list-kind-school .kind-perf { display:none; }
body.list-kind-school .kind-school { display:flex; }
body.list-kind-player .kind-player { display:flex; }
body.list-kind-player .kind-school, body.list-kind-player .kind-perf { display:none; }
body.list-kind-perf .kind-perf { display:flex; }
body.list-kind-perf .kind-school, body.list-kind-perf .kind-player { display:none; }
.kind-perf .field { display:block; }

/* player list "big board" */
table.board td { vertical-align:middle; }
.board-name { font-weight:600; color:var(--txt-bright); }
.board-handle { margin-left:7px; font-family:var(--mono); font-size:11.5px; }
.board-row.is-committed { background:rgba(70,176,109,0.05); }
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; }
.status-pill.committed { background:rgba(70,176,109,0.16); color:var(--c-commit); }
.status-pill.open { background:rgba(148,163,184,0.10); color:var(--muted); }
.count-chip { display:inline-block; min-width:21px; text-align:center; padding:1px 7px; border-radius:7px;
  font-weight:700; font-size:12px; margin-right:8px; }
.count-chip.offer { background:rgba(88,150,230,0.16); color:var(--c-offer); }
.count-chip.visit { background:rgba(214,178,100,0.16); color:var(--c-visit); }
.board-list { font-size:12.5px; }

/* index: player-list tag + dual new-list buttons */
.kind-tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(216,187,130,0.16); color:var(--gold-text); padding:1px 6px; border-radius:5px;
  vertical-align:middle; margin-left:6px; font-weight:600; }
.saved-new-row { display:flex; gap:12px; flex-wrap:wrap; }
.saved-new-row .saved-new { flex:1 1 200px; }

/* big board: inline add-player bar */
.add-player-bar { display:flex; align-items:center; gap:12px; margin-bottom:18px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.add-player-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.add-player-input { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; color:var(--txt-bright); font-size:14px; }
.add-player-input:focus { outline:none; border-color:var(--gold); }

/* add-player bar: in-UI combobox fills the row */
.add-player-combo { flex:1; }
.add-player-combo .add-player-input { width:100%; }
.add-player-combo .combo-menu { width:100%; min-width:240px; }

/* "Add to list" popover (Players rows + player profile) */
.addlist { position:relative; display:inline-block; margin-right:10px; }
.addlist-btn { background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:4px 10px; font-size:11.5px; font-weight:600; cursor:pointer;
  font-family:var(--mono); letter-spacing:.02em; }
.addlist-btn:hover { border-color:var(--gold-deep); color:var(--gold-text); }
.addlist.open .addlist-btn { border-color:var(--gold); color:var(--gold-text); }
.addlist-menu { display:none; position:absolute; right:0; top:calc(100% + 5px); z-index:95;
  min-width:210px; background:var(--card-2); border:1px solid var(--line); border-radius:10px;
  padding:6px; box-shadow:0 14px 34px rgba(0,0,0,0.45); }
.addlist.open .addlist-menu { display:block; }
.addlist-head { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:5px 9px 7px; }
.addlist-menu form { margin:0; }
.addlist-opt { display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--txt-bright); padding:8px 9px; border-radius:7px; font-size:13px; font-weight:600;
  cursor:pointer; }
.addlist-opt:hover { background:#16233a; }
.addlist-empty { padding:7px 9px; font-size:12px; color:var(--muted); }
.addlist-new { display:block; margin-top:4px; padding:8px 9px; border-top:1px solid var(--line);
  color:var(--gold-text); font-size:12.5px; font-weight:600; text-decoration:none; }
.addlist-new:hover { background:#16233a; }

/* in-product select skin (replaces native <select> dropdowns) */
.ui-select { display:none !important; }   /* native select hidden; skin renders the menu */
.uiselect { position:relative; display:inline-block; }
.uiselect-btn { display:inline-flex; align-items:center; gap:10px; justify-content:space-between;
  background:#0a1626; border:1px solid var(--line); border-radius:8px; padding:8px 12px;
  color:var(--txt-bright); font-size:13px; cursor:pointer; min-width:128px; }
.uiselect-btn:hover { border-color:var(--gold-deep); }
.uiselect.open .uiselect-btn { border-color:var(--gold); }
.uiselect-caret { color:var(--muted); font-size:10px; }
.uiselect-menu { display:none; position:absolute; left:0; top:calc(100% + 5px); z-index:95;
  min-width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:9px;
  padding:5px; box-shadow:0 14px 34px rgba(0,0,0,0.45); max-height:280px; overflow:auto; white-space:nowrap; }
.uiselect.open .uiselect-menu { display:block; }
.uiselect-option { padding:7px 11px; font-size:13px; border-radius:6px; cursor:pointer; color:var(--txt-bright); }
.uiselect-option:hover { background:#16233a; }
.uiselect-option.selected { color:var(--gold-text); font-weight:600; }

/* corner confirmation toast (add-to-list, etc.) */
.toast-host { position:fixed; bottom:22px; right:22px; z-index:200; display:flex;
  flex-direction:column; gap:10px; }
.toast { background:var(--card-2); border:1px solid var(--gold-deep); border-left:3px solid var(--gold);
  color:var(--txt-bright); padding:12px 16px; border-radius:10px; font-size:13.5px; font-weight:600;
  box-shadow:0 14px 34px rgba(0,0,0,0.5); opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s; max-width:340px; }
.toast.show { opacity:1; transform:translateY(0); }

/* compact, colour-coded skin for the inline event-type editors */
.uiselect.event-select .uiselect-btn { min-width:auto; padding:4px 10px; font-size:12px; font-weight:600;
  background:transparent; border-color:transparent; gap:6px; }
.uiselect.event-select:hover .uiselect-btn, .uiselect.event-select.open .uiselect-btn {
  border-color:var(--line); background:#0a1626; }
.uiselect.event-select.commit  .uiselect-label { color:var(--c-commit); }
.uiselect.event-select.decommit .uiselect-label { color:var(--c-decommit); }
.uiselect.event-select.offer   .uiselect-label { color:var(--c-offer); }
.uiselect.event-select.visit   .uiselect-label { color:var(--c-visit); }
.uiselect.event-select.camp    .uiselect-label { color:var(--c-camp); }

/* scan-report footer nav */
.report-footer { display:flex; gap:10px; margin-top:28px; padding-top:18px;
  border-top:1px solid var(--line); }

/* settings page */
.save-banner { background:rgba(70,176,109,0.12); border:1px solid rgba(70,176,109,0.4);
  color:#bfe6cd; border-radius:10px; padding:11px 16px; font-size:13.5px; font-weight:600;
  margin-bottom:18px; }
.save-banner.warn { background:rgba(224,106,106,0.12); border-color:rgba(224,106,106,0.4); color:#f0c9c9; }
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:start; }
.card-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.card-panel.wide { grid-column:1 / -1; }
.card-panel h2 { margin:0 0 4px; font-size:16px; color:var(--txt-bright); }
.panel-sub { font-size:12.5px; margin:0 0 16px; }
.stack-form { display:flex; flex-direction:column; gap:14px; }
.stack-form .field { display:flex; flex-direction:column; gap:6px; }
.stack-form label { font-size:12.5px; color:var(--muted); font-weight:600; }
.stack-form .ss-input { width:100%; }
.ss-narrow { max-width:140px; }
.ss-port { flex:0 0 110px; }
.field-row { display:flex; gap:14px; }
.field-row .field { flex:1; }
@media (max-width: 860px) { .settings-grid { grid-template-columns:1fr; } }

/* login page */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.login-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:30px 28px; box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.login-title { font-size:22px; margin:0 0 18px; color:var(--txt-bright); }
.login-btn { width:100%; justify-content:center; margin-top:4px; }

/* consistent back link in detail-page topbars */
.back-link { display:inline-flex; align-items:center; gap:5px; background:rgba(148,163,184,0.06);
  border:1px solid var(--line); color:#cdd6e3; border-radius:6px; padding:5px 11px; font-size:13px;
  font-weight:600; text-decoration:none; }
.back-link:hover { border-color:var(--gold); color:#fff; }

/* ===================== Public demo ===================== */
/* sidebar footer badge shown to logged-out demo visitors (replaces the account widget) */
.side-demo { margin-top:auto; border-top:1px solid var(--navy-line); padding:14px 10px 4px;
  display:flex; flex-direction:column; gap:1px; }
.side-demo-mark { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.side-demo strong { color:var(--gold-text); font-size:15px; }
.side-demo-sub { font-size:11px; color:var(--muted); margin-top:2px; }

/* lead-capture / limit interstitial */
.demo-wall { max-width:440px; }
.demo-lead-copy { font-size:15.5px; line-height:1.55; color:var(--txt); margin:0 0 20px; }
.demo-lead-copy strong { color:var(--gold-text); }
.demo-form { margin:0 0 14px; }
.demo-fineprint { font-size:12px; color:var(--muted); margin:0; }