/* erkstats - ported from the Claude Design template */
* { box-sizing: border-box; }

/* --brand is the literal brand lime, used for graphic fills (chart areas,
   bars, button backgrounds, dots). --acc is the *text-safe* accent: on light
   backgrounds pure #99CC00 only reaches 1.9:1 contrast, so links and figures
   use a deepened shade while the fills stay on-brand. */
:root, [data-erk-theme="light"] {
  --bg:#f5f6f7; --card:#ffffff; --card2:#eef0f2; --line:#e2e5e8;
  --text:#1b1f22; --mut:#6b7378; --brand:#99CC00; --brand-ink:#101917;
  --acc:#5c7a00; --accD:#455c00;
  --accT:rgba(153,204,0,.16); --down:#c25a4b;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 10px 30px rgba(20,24,28,.07);
}
[data-erk-theme="dark"] {
  --bg:#121416; --card:#1a1d20; --card2:#23272b; --line:#2f3439;
  --text:#eceef0; --mut:#949ba1; --brand:#99CC00; --brand-ink:#101917;
  --acc:#b4e619; --accD:#ccff33;
  --accT:rgba(153,204,0,.15); --down:#e39a8e;
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.3);
}

body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Albert Sans',sans-serif;
  transition:background .3s, color .3s;
  /* footer sits at the viewport bottom on short pages, scrolls on long ones */
  display:flex; flex-direction:column; min-height:100vh;
}
/* width:100% matters: as a flex item with auto margins, main would otherwise
   shrink-to-fit its content instead of filling out to .wrap's max-width */
main { flex:1 0 auto; width:100%; }
.site-footer { margin-top:48px; }
a { color:var(--acc); text-decoration:none; }
a:hover { color:var(--accD); }
input { outline:none; }
input::placeholder { color:var(--mut); }
button { font-family:'Albert Sans',sans-serif; }
h1,h2,h3 { font-family:'Bricolage Grotesque',sans-serif; }
@keyframes erkpulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* header */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); background:color-mix(in oklab, var(--bg) 85%, transparent); }
.site-header .wrap { display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding-top:16px; padding-bottom:16px; }
.logo { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:21px; letter-spacing:-.3px; color:var(--text); }
.logo:hover { color:var(--text); }
.logo span { color:var(--acc); }
.site-nav { display:flex; gap:2px; overflow-x:auto; }
@media (max-width: 820px) {
  /* on narrow screens the nav drops to its own row below the logo */
  .site-nav { order:3; flex-basis:100%; }
}
.site-nav a { font-size:14.5px; font-weight:500; padding:8px 14px; border-radius:12px; color:var(--mut); white-space:nowrap; transition:color .15s; }
.site-nav a:hover { color:var(--text); }
.site-nav a.active { font-weight:600; background:var(--accT); color:var(--acc); }
.searchbox { position:relative; flex:1; min-width:170px; max-width:380px; margin-left:auto; }
.searchbox input { width:100%; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 16px; font-family:inherit; font-size:14px; color:var(--text); box-shadow:var(--shadow); }
.searchbox input:focus { border-color:var(--acc); }
.search-results { position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; z-index:60; }
.search-results a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; color:var(--text); }
.search-results a:hover { background:var(--card2); }
.search-results .rname { font-size:14px; font-weight:500; }
.search-results .rmeta { color:var(--mut); font-size:12.5px; white-space:nowrap; }
.theme-btn { border:1px solid var(--line); background:var(--card); color:var(--mut); cursor:pointer; width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; box-shadow:var(--shadow); }
.theme-btn:hover { color:var(--text); border-color:var(--acc); }
.theme-btn svg { width:17px; height:17px; }
[data-erk-theme="light"] .theme-btn .i-sun { display:none; }
[data-erk-theme="dark"] .theme-btn .i-moon { display:none; }

/* generic */
main { padding:44px 0 72px; }
.pill { display:inline-flex; align-items:center; gap:8px; background:var(--accT); color:var(--acc); border-radius:99px; padding:6px 14px; font-size:13px; font-weight:600; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--brand); animation:erkpulse 2s infinite; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.muted { color:var(--mut); }
.up { color:var(--acc); } .down { color:var(--down); }

h1.page { margin:0 0 8px; font-size:34px; font-weight:700; letter-spacing:-1px; }
p.lede { margin:0 0 26px; color:var(--mut); font-size:15.5px; }

/* hero */
.hero h1 { margin:0 0 10px; font-size:clamp(30px,4.5vw,52px); font-weight:700; letter-spacing:-1.5px; line-height:1.05; white-space:nowrap; }
.hero p { margin:0 0 40px; color:var(--mut); font-size:17px; line-height:1.6; text-wrap:pretty; }
@media (max-width: 700px) {
  .hero h1 { white-space:normal; }
}
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { padding:26px 28px; }
.stat-card .label { font-size:14px; font-weight:500; color:var(--mut); margin-bottom:12px; }
.stat-card .value { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(30px,4vw,42px); font-weight:600; letter-spacing:-1px; line-height:1; }
.stat-card .delta { margin-top:12px; font-size:13.5px; font-weight:500; }

/* chart card */
.chart-card { padding:28px; margin-bottom:48px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.chart-title { font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:600; }
.chart-sub { font-size:13.5px; color:var(--mut); margin-top:2px; }
.ranges { display:flex; gap:2px; background:var(--card2); border-radius:14px; padding:4px; flex-wrap:wrap; }
.ranges a { font-size:13px; font-weight:600; padding:7px 13px; border-radius:11px; color:var(--mut); }
.ranges a:hover { color:var(--text); }
.ranges a.active { background:var(--card); color:var(--text); box-shadow:var(--shadow); }
.chart-body { position:relative; padding-right:52px; }
.chart-body svg { width:100%; height:300px; display:block; }
.ytick { position:absolute; right:0; transform:translateY(-50%); font-size:12px; color:var(--mut); }
.xticks { display:flex; justify-content:space-between; margin-top:12px; }
.xticks span { font-size:12px; color:var(--mut); }
.chart-empty { padding:60px 0; text-align:center; color:var(--mut); font-size:14.5px; }
/* range switching: dim the plot while a range is still being fetched */
.chart-loading .chart-body { opacity:.45; transition:opacity .15s; }
.chart-body { transition:opacity .15s; }

/* peak reference line + label */
.peak-line { stroke:var(--mut); stroke-width:1; stroke-dasharray:4 4; opacity:.55; }
.peak-label { position:absolute; right:52px; transform:translateY(-100%); font-size:11px; font-weight:600; color:var(--mut); background:var(--card); padding:1px 6px; border-radius:6px; pointer-events:none; white-space:nowrap; }

/* hover guide, dot and tooltip. SVG ignores the HTML `hidden` attribute, so
   drive visibility from it explicitly. */
.hover-guide { stroke:var(--acc); stroke-width:1; opacity:.5; }
.hover-dot { fill:var(--brand); stroke:var(--card); stroke-width:2; }
svg [hidden] { display:none; }
.chart-tip { position:absolute; z-index:5; transform:translate(-50%, -120%); background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:7px 11px; font-size:12.5px; line-height:1.35; pointer-events:none; white-space:nowrap; }
.chart-tip .v { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:15px; color:var(--text); }
.chart-tip .t { color:var(--mut); font-size:11.5px; }

/* section heads */
.sect-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.sect-head h2 { margin:0; font-size:23px; font-weight:600; letter-spacing:-.3px; }
.sect-head .more { font-size:14.5px; font-weight:600; }

/* network cards */
.net-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.net-card { display:block; color:var(--text); padding:24px; transition:transform .15s, border-color .15s; }
.net-card:hover { transform:translateY(-2px); border-color:var(--acc); color:var(--text); }
.net-card .top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; }
.net-card .name { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:16px; }
.net-card .trend { font-size:13px; font-weight:600; }
.net-card .users { font-family:'Bricolage Grotesque',sans-serif; font-size:28px; font-weight:600; letter-spacing:-.5px; margin-bottom:3px; }
.net-card .meta { font-size:13px; color:var(--mut); margin-bottom:16px; }
.net-card svg { width:100%; height:34px; display:block; }

/* tables */
.table-card { overflow-x:auto; }
.tbl { min-width:600px; }
.tbl .row { display:grid; gap:8px; align-items:center; padding:13px 24px; border-bottom:1px solid var(--line); }
.tbl .row:last-child { border-bottom:none; }
.tbl .head { padding:16px 24px; font-size:12.5px; font-weight:600; color:var(--mut); }
.tbl .head a, .tbl .head button { color:var(--mut); font-size:12.5px; font-weight:600; border:none; background:none; cursor:pointer; padding:0; text-align:left; }
.tbl .head a.on { color:var(--acc); }
.tbl .row.click { cursor:pointer; }
.tbl .row.click:hover, .tbl .row.hov:hover { background:var(--card2); }
.cols-networks { grid-template-columns:44px 1.6fr 1fr 1fr .7fr 130px; }
.cols-netchans { grid-template-columns:1.4fr 100px 110px 1fr; }
.cols-topchans { grid-template-columns:44px 1.3fr 1fr 100px 110px; }
.tbl .rank { font-size:13px; color:var(--mut); }
.tbl .nm { font-weight:600; font-size:14.5px; color:var(--text); }
.tbl .num { font-size:14px; font-weight:500; }
.tbl .dim { font-size:14px; color:var(--mut); }
.tbl .chan { font-size:14px; font-weight:600; color:var(--acc); }
.tbl .sparkcell { display:flex; align-items:center; gap:10px; }
.tbl .sparkcell svg { width:64px; height:22px; }
.tbl .trend { font-size:12.5px; font-weight:600; }
.sharebar { flex:1; height:6px; border-radius:99px; background:var(--card2); overflow:hidden; display:block; }
.sharebar span { display:block; height:100%; background:var(--brand); border-radius:99px; }
.sharecell { display:flex; align-items:center; gap:10px; }
.sharecell .pct { font-size:12px; color:var(--mut); min-width:42px; text-align:right; }
.topicline { grid-column:1 / -1; font-size:12.5px; color:var(--mut); margin-top:-6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.filter-input { width:100%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 16px; font-family:inherit; font-size:14px; color:var(--text); box-shadow:var(--shadow); margin-bottom:22px; }
.filter-input:focus { border-color:var(--acc); }

/* network detail */
.net-title { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0 8px; }
.net-title h1 { margin:0; font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-1px; }
.mini-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:26px; }
.mini-stat { padding:20px 24px; border-radius:20px; }
.mini-stat .label { font-size:13.5px; font-weight:500; color:var(--mut); margin-bottom:8px; }
.mini-stat .value { font-family:'Bricolage Grotesque',sans-serif; font-size:27px; font-weight:600; letter-spacing:-.5px; }

/* about */
.about p { color:var(--mut); font-size:16px; line-height:1.7; text-wrap:pretty; max-width:76ch; }
.api-list .row { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding:16px 24px; border-bottom:1px solid var(--line); }
.api-list .row:last-child { border-bottom:none; }
.api-list .verb { font-size:12px; font-weight:700; color:var(--acc); background:var(--accT); border-radius:8px; padding:3px 8px; }
.api-list .path { font-family:ui-monospace,monospace; font-size:13px; }
.api-list .desc { font-size:13.5px; color:var(--mut); flex-basis:100%; }

/* footer */
.site-footer .wrap { padding:28px 24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13.5px; color:var(--mut); }
.site-footer .brand { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; color:var(--text); }
.site-footer .brand span { color:var(--acc); }

/* admin */
.admin-form { display:grid; gap:12px; max-width:520px; }
.admin-form label { font-size:13px; font-weight:600; color:var(--mut); display:block; margin-bottom:4px; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password],
.admin-form input[type=url], .admin-form input[type=email], .admin-form input[type=file] {
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-family:inherit; font-size:14px; color:var(--text);
}
.admin-form input:focus { border-color:var(--acc); }
.btn { display:inline-block; border:none; cursor:pointer; background:var(--brand); color:var(--brand-ink); font-weight:600; font-size:14px; padding:10px 18px; border-radius:12px; }
.btn.ghost { background:var(--card2); color:var(--text); }
.btn.danger { background:var(--down); }
.badge { font-size:11.5px; font-weight:700; border-radius:8px; padding:3px 8px; }
.badge.ok { color:var(--acc); background:var(--accT); }
.badge.error { color:var(--down); background:color-mix(in oklab, var(--down) 12%, transparent); }
.badge.pending { color:var(--mut); background:var(--card2); }
/* a network currently held by a collector: in-progress, not a resting state */
.badge.leased { color:var(--brand-ink); background:var(--brand); }
[data-erk-theme="dark"] .badge.leased { color:var(--brand-ink); background:var(--brand); }
.badge.off { color:var(--mut); background:var(--card2); }
.cols-admin { grid-template-columns:1.4fr 1.6fr .5fr .5fr .8fr 1fr; min-width:820px; }

/* background row actions: busy state, removal, and toasts */
.row-busy { opacity:.55; transition:opacity .12s; }
.row-gone { opacity:0; transform:translateX(10px); transition:opacity .18s, transform .18s; }
.icon-btn:disabled, .btn:disabled { opacity:.5; cursor:default; }
.toast-host { position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast { background:var(--card); color:var(--text); border:1px solid var(--acc); border-left-width:4px; border-radius:12px; box-shadow:var(--shadow); padding:11px 16px; font-size:13.5px; font-weight:500; max-width:380px; opacity:1; transform:translateY(0); transition:opacity .25s, transform .25s; }
.toast.error { border-color:var(--down); }
.toast.out { opacity:0; transform:translateY(6px); }

/* admin state strip (networks page) */
.statline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:-8px 0 20px; }
.statchip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:99px; padding:5px 13px; font-size:13px; color:var(--mut); background:var(--card); }
.statchip strong { font-family:'Bricolage Grotesque',sans-serif; font-size:14px; color:var(--text); font-weight:600; }
.statchip.ok strong { color:var(--acc); }
.statchip.error { border-color:color-mix(in oklab, var(--down) 45%, var(--line)); }
.statchip.error strong { color:var(--down); }
.statchip.leased { border-color:var(--brand); }
.statchip.leased strong { color:var(--acc); }
.statchip.queued { border-color:var(--brand); }
.statchip.total { background:var(--card2); }

/* admin list toolbar + pagination */
.list-toolbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.list-toolbar .filter-input { margin-bottom:0; }
.list-toolbar label { display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--mut); white-space:nowrap; }
.list-toolbar select { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-family:inherit; font-size:14px; color:var(--text); box-shadow:var(--shadow); }
.list-toolbar .count { font-size:13.5px; color:var(--mut); margin-left:auto; }
.pager { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.pager a, .pager .cur, .pager .gap { min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border-radius:10px; font-size:13.5px; font-weight:600; }
.pager a { border:1px solid var(--line); background:var(--card); color:var(--mut); }
.pager a:hover { color:var(--text); border-color:var(--acc); }
.pager .cur { background:var(--brand); color:var(--brand-ink); }
.pager .gap { color:var(--mut); }

/* icon action buttons (inline Lucide SVGs) */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--mut); cursor:pointer; padding:0; transition:color .15s, border-color .15s; }
.icon-btn:hover { color:var(--text); border-color:var(--acc); }
.icon-btn.danger:hover { color:var(--down); border-color:var(--down); }
.icon-btn svg { width:16px; height:16px; }
.btn svg { width:16px; height:16px; vertical-align:-3px; margin-right:6px; }

/* pill toggles (checkboxes / radios rendered as pills) */
.pill-toggle { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:99px; padding:8px 16px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--mut); background:var(--card2); user-select:none; transition:color .15s, background .15s, border-color .15s; }
.pill-toggle:hover { color:var(--text); }
.pill-toggle input { position:absolute; opacity:0; pointer-events:none; }
.pill-toggle:has(input:checked) { background:var(--accT); color:var(--acc); border-color:var(--acc); }
.pill-group { display:flex; gap:8px; flex-wrap:wrap; }

/* form layout helpers */
.form-row { display:flex; gap:14px; flex-wrap:wrap; }
.form-row > div { flex:1; min-width:150px; }
.form-section { margin:6px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.form-hint { margin:-4px 0 0; font-size:12.5px; color:var(--mut); line-height:1.5; }
input + .form-hint, select + .form-hint, .pill-group + .form-hint { margin-top:6px; }

/* searchable multi-select (dropdown with search + checkboxes + chips) */
.multiselect { position:relative; }
.ms-control { width:100%; min-height:42px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 34px 6px 12px; cursor:pointer; color:var(--text); user-select:none; position:relative; }
.ms-control:focus { outline:none; border-color:var(--acc); }
.ms-control::after { content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:2px solid var(--mut); border-bottom:2px solid var(--mut); transform:translateY(-70%) rotate(45deg); }
.ms-placeholder { color:var(--mut); font-size:14px; padding:3px 0; }
.ms-chip { display:inline-flex; align-items:center; gap:5px; background:var(--accT); color:var(--acc); border-radius:8px; padding:3px 7px 3px 10px; font-size:13px; font-weight:600; }
.ms-chip-x { color:inherit; cursor:pointer; font-size:15px; line-height:1; opacity:.7; }
.ms-chip-x:hover { opacity:1; }
.ms-panel { border:1px solid var(--line); border-radius:12px; margin-top:6px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.ms-search { width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:10px 14px; font-family:inherit; font-size:14px; color:var(--text); }
.ms-list { max-height:200px; overflow-y:auto; padding:6px; }
.ms-option { display:flex; gap:9px; align-items:center; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text); }
.ms-option:hover { background:var(--card2); }
.ms-option input { accent-color:var(--acc); }
.ms-empty { padding:10px 14px; font-size:13px; color:var(--mut); }

/* poll-log table (inside the log modal) */
.logtable { width:100%; border-collapse:collapse; font-size:13px; }
.logtable th { text-align:left; font-size:11.5px; font-weight:600; color:var(--mut); padding:6px 10px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); }
.logtable td { padding:6px 10px; border-bottom:1px solid var(--line); }
.logtable tr:hover td { background:var(--card2); }
#log-modal-body h2 { font-size:19px; }

/* modal dialogs */
dialog.modal { border:1px solid var(--line); border-radius:22px; background:var(--card); color:var(--text); box-shadow:var(--shadow); padding:28px; max-width:560px; width:calc(100% - 40px); }
dialog.modal::backdrop { background:rgba(10, 20, 18, .45); backdrop-filter:blur(3px); }
dialog.modal h2 { margin:0 0 18px; font-size:20px; }
.modal-close { position:absolute; top:18px; right:18px; }