/* ============================================================
   ESC Points - editorial "almanac" styling
   Same fonts + sharp rectangular shapes in both themes;
   only the colour variables change between light and dark.
   ============================================================ */

:root,
[data-theme="light"]{
  color-scheme:light;
  --paper:#f3efe4;
  --card:#fbf9f1;
  --ink:#1d1813;
  --ink2:#5a5147;
  --faint:#938977;
  --line:#ded6c3;
  --line-2:#c7bda6;
  --accent:#cc1659;
  --accent-soft:#f4dae2;
  --accent-line:#e6a9bd;
  --buried-bg:#e7e0cd;
  --buried-ink:#a89c84;
  --warn:#a8503f;
  --row-hover:#ece4d1;
  --on-accent:#ffffff;
}

[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0e1130;
  --card:#161a3d;
  --ink:#eceef6;
  --ink2:#a3a8c8;
  --faint:#6f74a0;
  --line:#2a2f57;
  --line-2:#373d6b;
  --accent:#ff3d87;
  --accent-soft:rgba(255,61,135,.16);
  --accent-line:#9c4a78;
  --buried-bg:#222747;
  --buried-ink:#787da3;
  --warn:#f06a5e;
  --row-hover:#1b2049;
  --on-accent:#0e1130;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Spline Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.wrap{max-width:1160px;margin:0 auto;padding:34px 24px 80px}

/* ---------- masthead ---------- */
header{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:3px solid var(--ink);position:relative;
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:1.5px;background:var(--accent);
}
.brand{display:flex;align-items:center;gap:13px}
.heart{width:30px;height:28px;color:var(--accent);flex:none}
h1{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:34px;letter-spacing:-.02em;line-height:.9;
}
.tag{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink2);margin-top:8px;
}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ---------- form controls ---------- */
select,input,button{font-family:inherit;color:var(--ink)}
select{
  -webkit-appearance:none;appearance:none;
  background-color:var(--card);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1813' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  border:1.5px solid var(--ink);
  padding:7px 30px 7px 11px;
  font-size:13px;font-weight:600;cursor:pointer;
}
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23eceef6' stroke-width='1.7'/%3E%3C/svg%3E");
}
select:hover{background-color:var(--accent-soft)}
.lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;
}

/* theme toggle */
.iconbtn{
  width:36px;height:36px;flex:none;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--card);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.iconbtn:hover{background:var(--accent-soft);color:var(--accent)}
.iconbtn svg{width:16px;height:16px;display:block}
.i-sun{display:none}
[data-theme="dark"] .i-sun{display:block}
[data-theme="dark"] .i-moon{display:none}

/* segmented toggle */
.seg{display:inline-flex;border:1.5px solid var(--ink)}
.seg button{
  font-size:12.5px;font-weight:600;background:transparent;
  border:0;border-left:1.5px solid var(--ink);
  padding:7px 14px;cursor:pointer;white-space:nowrap;
}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--accent-soft)}
.seg button.on{background:var(--accent);color:var(--on-accent)}

/* picker (prev / select / next) */
.picker{display:flex}
.picker select{border-left:0;border-right:0;min-width:170px}
.step{
  font-size:15px;line-height:1;background:var(--card);
  border:1.5px solid var(--ink);color:var(--ink);width:32px;cursor:pointer;
}
.step:hover{background:var(--accent-soft)}

/* search */
.search{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  border:1.5px solid var(--line-2);background:var(--card);padding:0 11px;
}
.search svg{width:14px;height:14px;flex:none;color:var(--faint)}
.search input{border:0;background:transparent;outline:none;padding:7px 0;
  font-size:13px;width:128px}

/* ---------- control deck ---------- */
.deck{
  margin-top:26px;padding:15px 16px 14px;
  background:var(--card);border:1.5px solid var(--ink);
}
.ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctl + .ctl{margin-top:11px}
.hint{
  margin-top:12px;font-family:'Fraunces',Georgia,serif;
  font-style:italic;font-size:13.5px;color:var(--ink2);
}

/* ---------- summary card ---------- */
.summary{
  margin-top:22px;padding:18px 20px;
  background:var(--card);border:1.5px solid var(--ink);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.song-id{display:flex;align-items:center;gap:15px;min-width:220px}
.bigflag{
  width:64px;height:43px;object-fit:cover;
  border:1px solid var(--ink);flex:none;
}
.globe{color:var(--ink2)}
.globe.bigflag{display:flex;align-items:center;justify-content:center;background:var(--card)}
.globe.bigflag svg{width:30px;height:30px}
.song-name{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:27px;line-height:1;letter-spacing:-.012em;
}
.song-show{
  font-size:10px;font-weight:700;letter-spacing:.13em;
  color:var(--faint);margin-top:7px;
}
.metrics{display:flex;margin-left:auto;flex-wrap:wrap}
.metric{padding:1px 20px;border-left:1px solid var(--line)}
.metric:first-child{border-left:0;padding-left:0}
.metric .k{
  font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.metric .v{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:22px;font-weight:600;margin-top:4px;white-space:nowrap;
}
.metric .v.compact{font-size:14px;margin-top:6px}
.metric .v small{
  font-family:'Spline Sans',sans-serif;font-size:11px;
  font-weight:600;color:var(--faint);
}
.metric.hl .v{color:var(--accent)}
.vname{display:flex;align-items:center;gap:7px}

/* ---------- stat strip ---------- */
.strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink2);
  background:var(--card);border:1px solid var(--line-2);
  padding:6px 12px;
}
.chip b{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  color:var(--ink);font-weight:700;
}
.dot{width:7px;height:7px;flex:none}
.dot.cy{background:var(--ink2)}
.dot.gold{background:var(--accent)}
.dot.red{background:var(--warn)}

/* ---------- results table ---------- */
.tablewrap{
  margin-top:14px;background:var(--card);
  border:1.5px solid var(--ink);overflow-x:auto;
}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);text-align:center;padding:11px 8px;white-space:nowrap;
  border-bottom:2.5px solid var(--ink);cursor:pointer;user-select:none;
}
thead th.lead{text-align:left;padding-left:14px}
thead th:hover{color:var(--accent)}
.arr{margin-left:4px;font-size:8px;color:var(--accent);vertical-align:middle}
tbody td{
  border-bottom:1px solid var(--line);
  height:38px;text-align:center;vertical-align:middle;padding:0;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--row-hover)}
.cnum{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:11px;color:var(--faint);width:46px;
}
.cc{
  display:flex;align-items:center;gap:9px;
  text-align:left;padding:0 14px;font-weight:600;font-size:13px;
}
.flag{
  width:27px;height:18px;object-fit:cover;flex:none;
  border:1px solid var(--line-2);
}
.globe.flag{display:flex;align-items:center;justify-content:center;background:var(--card)}
.globe.flag svg{width:13px;height:13px}
.cell{
  display:inline-block;min-width:30px;padding:4px 8px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-weight:600;font-size:13px;
}
.cell.agg{font-weight:700}
.cell.pts{color:var(--ink2)}
.cell.pts.zero{color:var(--faint)}
.cell.na{
  font-family:'Spline Sans',sans-serif;font-size:11px;
  font-weight:500;color:var(--faint);
}
.cell.r1{background:var(--accent);color:var(--on-accent)}
.cell.top3{background:var(--accent-soft)}
.cell.worst{background:var(--buried-bg);color:var(--buried-ink)}
td.empty{
  text-align:center;height:auto;padding:36px 22px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:15px;color:var(--ink2);
}

/* ---------- legend ---------- */
.legend{
  display:flex;flex-wrap:wrap;gap:17px;margin-top:13px;
  font-size:11.5px;color:var(--ink2);
}
.legend span{display:flex;align-items:center;gap:7px}
.sw{width:12px;height:12px;flex:none;border:1px solid var(--line-2)}
.sw.top{background:var(--accent);border-color:var(--accent)}
.sw.mid{background:var(--accent-soft);border-color:var(--accent-line)}
.sw.last{background:var(--buried-bg)}
.sw.na{background:var(--card)}

/* ---------- footer ---------- */
footer{
  margin-top:32px;padding-top:16px;
  border-top:1.5px solid var(--line-2);
  font-size:11.5px;line-height:1.65;color:var(--ink2);max-width:900px;
}
footer b{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--ink)}
footer div + div{margin-top:6px}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .wrap{padding:26px 16px 64px}
  h1{font-size:28px}
  .search{margin-left:0;width:100%}
  .search input{width:100%}
  .metrics{margin-left:0;width:100%;margin-top:8px;
    border-top:1px solid var(--line);padding-top:11px}
  .metric:first-child{padding-left:0}
  .metric{padding:1px 16px}
}