/* Where's My Toaster — admin console. Always light, warm brand look. */
:root {
  --red: #E63946;
  --red-deep: #BE1E2D;
  --coral: #EF7079;
  --gold: #C9A227;
  --bg: #FBF7F2;
  --surface: #ffffff;
  --surface-2: #FAF5EF;
  --border: rgba(35,31,32,.10);
  --text: #231F20;
  --muted: #7a7076;
  --shadow: 0 18px 40px -24px rgba(35,31,32,.26);
  --shadow-sm: 0 8px 20px -14px rgba(35,31,32,.28);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Montserrat", system-ui, sans-serif; color: var(--text); line-height: 1.5;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(230,57,70,.07), transparent),
    linear-gradient(180deg, #FBF7F2 0%, #FFF6ED 100%);
  background-attachment: fixed;
}

.wordmark { font-family: "Bebas Neue", sans-serif; font-size: 1.55rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
.wm-chip { background: var(--red); color: #fff; border-radius: 8px 8px 11px 11px; padding: 0 .35rem; }

.btn-primary { display: inline-flex; align-items: center; gap: .4rem; background: var(--red); color: #fff; border: none; cursor: pointer; font: inherit; font-weight: 700; padding: .7rem 1.35rem; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 24px -14px rgba(230,57,70,.75); transition: transform .12s ease, background .15s ease; }
.btn-primary:hover { transform: translateY(-1px); background: var(--red-deep); }
.btn-ghost { background: #fff; color: var(--muted); border: 1px solid var(--border); cursor: pointer; font: inherit; font-weight: 600; padding: .55rem 1.15rem; border-radius: 999px; transition: color .15s ease, border-color .15s ease; }
.btn-ghost:hover { color: var(--text); border-color: rgba(35,31,32,.28); }

/* login */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1200px 600px at 50% -10%, rgba(230,57,70,.12), transparent), linear-gradient(180deg, #ffffff 0%, #FFF2E6 100%); }
.login-card { background: #ffffff; border: 1px solid rgba(35,31,32,.10); border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(35,31,32,.4); padding: 2.5rem 2.2rem; width: min(100%, 400px); text-align: center; }
.login-logo { height: 92px; width: auto; margin: 0 auto 1rem; }
.login-card h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: .02em; margin: 0; color: #231F20; }
.login-sub { color: #6b6367; margin: .25rem 0 1.5rem; font-size: .95rem; }
.login-form { display: grid; gap: 1rem; text-align: left; }
.login-form label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 600; color: #6b6367; text-transform: uppercase; letter-spacing: .04em; }
.login-form input { padding: .8rem .95rem; border-radius: 12px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: #231F20; font: inherit; }
.login-form input:focus { outline: 2px solid var(--red); border-color: var(--red); }
.login-form .btn-primary { justify-content: center; margin-top: .5rem; }
.form-error { background: rgba(230,57,70,.10); color: var(--red-deep); border: 1px solid rgba(230,57,70,.3); padding: .7rem; border-radius: 10px; font-weight: 600; font-size: .9rem; margin: 0 0 1rem; }

/* dashboard */
.admin-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1rem,4vw,2.5rem);
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.admin-brand { display: flex; align-items: center; gap: .75rem; }
.admin-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; background: linear-gradient(135deg, var(--gold), #B8901E); padding: .22rem .55rem; border-radius: 6px; box-shadow: 0 4px 10px -6px rgba(201,162,39,.8); }
/* shell: content + right-hand section nav */
.admin-shell { max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem,4vw,2.75rem); display: grid; grid-template-columns: 236px minmax(0,1fr); gap: clamp(1.25rem,3vw,2rem); align-items: start; }
.admin-main { min-width: 0; }

.admin-nav { order: -1; position: sticky; top: 84px; display: flex; flex-direction: column; gap: .25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: .75rem; }
.nav-eyebrow { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .5rem .75rem .35rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .68rem .8rem; border-radius: 12px; font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.nav-label { flex: 1; }
.nav-item.is-active { background: rgba(230,57,70,.10); color: var(--red-deep); font-weight: 700; }
.nav-item.is-active .nav-ico { color: var(--red); }
.nav-item.is-active::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.nav-item.is-disabled { color: #a49da1; cursor: not-allowed; }
.nav-item.is-disabled .nav-ico { color: #c3bcc0; }
.nav-soon { flex: none; font-style: normal; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: .15rem .42rem; border-radius: 999px; }

.section-eyebrow { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: .3rem; }
.admin-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-titlebar h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(1.9rem,4vw,2.6rem); letter-spacing: .02em; margin: 0; }
.admin-sub { color: var(--muted); margin: .2rem 0 0; }

@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; flex-direction: row; overflow-x: auto; order: -1; gap: .3rem; }
  .nav-eyebrow { display: none; }
  .nav-item { white-space: nowrap; padding: .55rem .8rem; }
  .nav-label { flex: none; }
  .nav-soon { display: none; }
  .nav-item.is-active::after { display: none; }
}

.stat-row { display: grid; grid-template-columns: minmax(190px,240px) minmax(0,1fr); gap: 1rem; margin: 1.6rem 0; align-items: stretch; }
.stat-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.35rem 1.6rem; box-shadow: var(--shadow); display: grid; gap: .15rem; align-content: center; }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--red), var(--coral)); }
.stat-num { font-family: "Bebas Neue", sans-serif; font-size: 3rem; line-height: 1; color: var(--red); }
.stat-label { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }

/* subscribers-over-time sparkline */
.chart-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.2rem 1.5rem 1rem; align-content: normal; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chart-range { color: var(--muted); font-weight: 600; font-size: .78rem; white-space: nowrap; }
.spark { width: 100%; height: 92px; display: block; margin-top: auto; }
.spark-area { fill: url(#sparkGrad); }
.spark-line { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart-empty { color: var(--muted); font-size: .9rem; margin: auto 0; }

@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.data-table thead th { background: var(--surface-2); }
.data-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .95rem 1.3rem; border-bottom: 1px solid var(--border); }
.data-table td { padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.cell-email { font-weight: 600; }

/* ===== visitor analytics ===== */
.section-head { margin: 2.75rem 0 0; }
.section-head h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(1.5rem,3vw,2rem); letter-spacing: .02em; margin: 0; }
.section-head .admin-sub { margin-top: .15rem; }

.stat-row-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.viz-wide { margin: 1.6rem 0; }
.spark-area.alt { fill: url(#sparkGrad2); }

.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.viz-card { display: flex; flex-direction: column; gap: .95rem; align-content: normal; }

.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.bar-row { display: grid; grid-template-columns: minmax(72px,42%) 1fr auto; align-items: center; gap: .6rem; }
.bar-label { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--red)); }
.bar-count { font-size: .82rem; font-weight: 700; color: var(--muted); min-width: 1.5ch; text-align: right; }

.donut-wrap { position: relative; width: 132px; height: 132px; margin: .1rem auto; }
.donut { width: 132px; height: 132px; }
.donut circle { fill: none; stroke-width: 3.4; }
.donut-bg { stroke: var(--surface-2); }
.donut-arc { stroke: var(--red); stroke-linecap: round; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-num { font-family: "Bebas Neue", sans-serif; font-size: 1.8rem; line-height: 1; color: var(--text); }
.donut-cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.legend { display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-mobile { background: var(--red); }
.dot-desktop { background: var(--surface-2); border: 1px solid var(--border); }

@media (max-width: 620px) { .stat-row-3 { grid-template-columns: 1fr; } }

.empty-state { text-align: center; padding: 3.5rem 1rem; background: var(--surface); border: 1px dashed rgba(35,31,32,.18); border-radius: 18px; margin-top: 1.6rem; box-shadow: var(--shadow-sm); }
.empty-state p { margin: .2rem 0; font-weight: 600; }
.empty-sub { color: var(--muted); font-weight: 400 !important; }

/* ===== sub-section nav ===== */
.nav-sub { display: flex; flex-direction: column; margin: .1rem 0 .4rem 1.25rem; padding-left: .75rem; border-left: 2px solid var(--border); gap: .05rem; }
.nav-subitem { display: block; padding: .42rem .6rem; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-subitem:hover { background: var(--surface-2); color: var(--text); }
.nav-subitem.is-current { color: var(--red-deep); background: rgba(230,57,70,.09); }

/* ===== SEO controls ===== */
.seo-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 1rem; margin-bottom: 1.6rem; align-items: start; }
.seo-form { display: flex; flex-direction: column; gap: 1rem; align-content: normal; }
.seo-field { display: grid; gap: .4rem; }
.seo-lab { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.seo-muted { text-transform: none; letter-spacing: 0; font-weight: 500; color: #a49da1; }
.cc { font-weight: 700; color: #a49da1; }
.cc.warn { color: var(--red); }
.seo-form input[type=text], .seo-form textarea { width: 100%; padding: .7rem .85rem; border-radius: 11px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: var(--text); font: inherit; resize: vertical; }
.seo-form input[type=text]:focus, .seo-form textarea:focus { outline: 2px solid var(--red); border-color: var(--red); }

.seo-visibility { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #cfc7cb; transition: background .15s ease; flex: none; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.switch input:checked + .switch-track { background: var(--red); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--red); outline-offset: 2px; }
.switch-text { font-size: .92rem; }
.seo-hint { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.seo-hint code { background: rgba(35,31,32,.07); padding: .05rem .3rem; border-radius: 5px; font-size: .92em; }
.seo-form .btn-primary { align-self: flex-start; }

.seo-preview { display: flex; flex-direction: column; gap: .5rem; align-content: normal; }
.seo-sublabel { margin-top: 1.1rem; }
.serp { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.serp-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.serp-fav { width: 18px; height: 18px; border-radius: 50%; background: var(--red); flex: none; }
.serp-site { font-size: .78rem; color: #4a4548; }
.serp-title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin: .1rem 0 .2rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.serp-desc { color: #4d5156; font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seo-ogimg { width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; }

.save-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: #231F20; color: #fff; font-weight: 600; font-size: .9rem; padding: .7rem 1.2rem; border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); z-index: 100; transition: opacity .3s ease; }
.save-toast.hide { opacity: 0; }

@media (max-width: 760px) { .seo-grid { grid-template-columns: 1fr; } }

/* ===== traffic-source popup ===== */
.src-row { cursor: pointer; }
.src-row:hover { background: var(--surface-2); border-radius: 8px; }
.src-row .bar-count { color: var(--red); }
.src-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(35,31,32,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.src-modal[hidden] { display: none; }
.src-modal-card { position: relative; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 1.5rem 1.6rem; width: min(100%, 400px); max-height: 80vh; overflow-y: auto; }
.src-modal-close { position: absolute; top: .5rem; right: .8rem; border: none; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.src-modal-body { margin-top: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.src-host { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.src-host:last-child { border-bottom: none; }
.src-host span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-host b { color: var(--red); }

/* ===== social view ===== */
.social-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; margin: 1.6rem 0; align-items: stretch; }
.social-flow { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; align-content: normal; }
.flow-stat { display: flex; flex-direction: column; gap: .1rem; }
.link-card { margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: .5rem; align-content: normal; }
.link-note { margin: 0 0 .4rem; }
.link-list { display: flex; flex-direction: column; gap: .6rem; }
.link-row { display: grid; grid-template-columns: 108px minmax(0,1fr) auto; gap: .6rem; align-items: center; }
.link-plat { font-size: .78rem; font-weight: 700; color: #fff; text-align: center; padding: .45rem .3rem; border-radius: 9px; }
.plat-instagram { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.plat-facebook { background: #1877F2; }
.plat-tiktok { background: #111; }
.plat-youtube { background: #FF0000; }
.link-input { width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .82rem; }
.link-copy { border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit; font-weight: 600; font-size: .82rem; padding: .55rem .95rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.link-copy:hover { background: var(--surface-2); }
.link-copy.ok { background: var(--red); color: #fff; border-color: var(--red); }

/* ===== crawler activity ===== */
.crawler-card { margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: .8rem; align-content: normal; }
.crawler-body { display: grid; grid-template-columns: minmax(120px,150px) 1fr; gap: 1.3rem; align-items: center; }
.crawler-total { display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 620px) { .crawler-body { grid-template-columns: 1fr; } .link-row { grid-template-columns: 90px minmax(0,1fr) auto; } }

/* ===== subscribers-who-clicked card ===== */
.sub-social-card { display: flex; flex-direction: column; justify-content: center; gap: .15rem; align-content: normal; }
.sub-social-card.is-clickable { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.sub-social-card.is-clickable:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tap-hint { font-size: .72rem; font-weight: 700; color: var(--red); margin-top: .35rem; text-transform: uppercase; letter-spacing: .04em; }

/* ===================================================================== */
/* ===== platform console (Users / Registries / Cash / Services / … ) === */
/* ===================================================================== */

/* Demo/Live toggle in the nav */
.demo-toggle { display: flex; flex-direction: column; gap: .35rem; padding: .35rem .75rem .6rem; }
.demo-lab { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.demo-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.demo-seg .seg { flex: 1; border: none; background: none; font: inherit; font-weight: 700; font-size: .78rem; color: var(--muted); padding: .3rem .7rem; border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.demo-seg .seg.on { background: var(--red); color: #fff; box-shadow: 0 6px 14px -8px rgba(230,57,70,.8); }
.demo-seg .seg:not(.on):hover { color: var(--text); }

/* notice banners */
.notice { border-radius: 14px; padding: .85rem 1.1rem; margin: 1.2rem 0; font-size: .9rem; font-weight: 600; line-height: 1.5; border: 1px solid var(--border); }
.notice code { background: rgba(35,31,32,.07); padding: .05rem .3rem; border-radius: 5px; font-size: .92em; font-weight: 700; }
.notice-demo { background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.35); color: #8a6d10; }
.notice-warn { background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.35); color: #8a6d10; }
.notice-err  { background: rgba(230,57,70,.10); border-color: rgba(230,57,70,.3); color: var(--red-deep); }
.notice-ok   { background: rgba(37,150,90,.12); border-color: rgba(37,150,90,.35); color: #1c7a48; }

/* metric card grid — numbers always fit their box by SHRINKING, never by being
   truncated. Ellipsising a figure like $2,826,543.21 to "$2,826,5…" makes the
   tile useless; the size class comes from the rendered length (see numSize). */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; margin: 1.4rem 0; }
.metric-grid .stat-card { align-content: center; }
.stat-card.metric { gap: .35rem; min-width: 0; }
.metric-num { font-family: "Bebas Neue", sans-serif; line-height: 1; color: var(--red); font-size: clamp(1.5rem, 4vw, 2.3rem); max-width: 100%; white-space: nowrap; }
/* Length-based steps, applied server-side so there is no layout flash. */
.metric-num.n-md { font-size: clamp(1.35rem, 3.2vw, 1.95rem); }
.metric-num.n-sm { font-size: clamp(1.15rem, 2.8vw, 1.65rem); }
.metric-num.n-xs { font-size: clamp(1rem, 2.4vw, 1.35rem); letter-spacing: -.01em; }
.metric-num.sm { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.stat-card.metric.accent .metric-num { color: #B8901E; }
.mini-metrics { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.mini-metrics > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

/* ===== interactive trend chart (htmx-swapped) ===== */
.chart-panel { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 1.1rem; align-content: normal; }
.chart-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.metric-seg { display: inline-flex; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.mseg { border: none; background: none; font: inherit; font-weight: 700; font-size: .78rem; color: var(--muted); padding: .35rem .85rem; border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.mseg.on { background: var(--red); color: #fff; box-shadow: 0 6px 14px -8px rgba(230,57,70,.8); }
.mseg:not(.on):hover { color: var(--text); }
.bars { display: flex; align-items: stretch; gap: .5rem; height: 200px; }
.bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .35rem; }
.bar-val { font-size: .6rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.bar-slot { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; }
.bar-grow { width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--coral), var(--red)); transition: height .35s cubic-bezier(.4,0,.2,1); }
.bar-mo { font-size: .64rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) { .bar-val { display: none; } .bars { height: 150px; } }

/* ===== pagination ===== */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.pager-info { color: var(--muted); font-size: .82rem; font-weight: 600; }
.pager-btns { display: flex; align-items: center; gap: .7rem; }
.pager-page { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pager-btn { border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit; font-weight: 600; font-size: .82rem; padding: .45rem .95rem; border-radius: 999px; cursor: pointer; transition: background .12s ease; }
.pager-btn:hover:not(:disabled) { background: var(--surface-2); }
.pager-btn:disabled { opacity: .4; cursor: default; }
/* htmx: subtle fade while a fragment is loading */
.htmx-request.pager-btn { opacity: .5; }

/* count pill in titlebars */
.count-pill { font-size: .74rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; }

/* table cell helpers */
.cell-strong { font-weight: 700; }
.cell-progress { min-width: 130px; }
.mini-track { display: inline-block; width: 78px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.mini-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--red)); }
.mini-num { font-size: .8rem; font-weight: 700; color: var(--muted); vertical-align: middle; }

/* status / plan pills */
.pill { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: capitalize; letter-spacing: .02em; padding: .22rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.pill-active { background: rgba(37,150,90,.12); border-color: rgba(37,150,90,.3); color: #1c7a48; }
.pill-suspended, .pill-banned, .pill-inactive { background: rgba(35,31,32,.07); border-color: var(--border); color: #6b6367; }
.pill-premium { background: linear-gradient(135deg, var(--gold), #B8901E); border-color: transparent; color: #fff; }
.pill-muted { background: var(--surface-2); color: var(--muted); }
.pill-reported { background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.32); color: var(--red-deep); }

/* recent-activity list */
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.activity-row:last-child { border-bottom: none; }
.activity-text { min-width: 0; }
.activity-when { color: var(--muted); font-weight: 600; font-size: .8rem; white-space: nowrap; }

/* community posts */
.post-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 1.1rem 1.3rem; }
.post-card.is-reported { border-color: rgba(230,57,70,.35); }
.post-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.post-author { font-weight: 700; }
.post-when { margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 600; }
.post-body { margin: 0; color: var(--text); line-height: 1.55; }

/* settings form */
.settings-form { display: flex; flex-direction: column; gap: 1.4rem; align-content: normal; margin-top: 1.4rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; }
.settings-form input[type=number] { width: 100%; padding: .7rem .85rem; border-radius: 11px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: var(--text); font: inherit; }
.settings-form input[type=number]:focus { outline: 2px solid var(--red); border-color: var(--red); }
.settings-flags { display: flex; flex-direction: column; gap: .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; }
.settings-form .btn-primary { align-self: flex-start; }

/* ==========================================================================
   Access control (admin users, roles), audit log, and the scrollable
   subscriber list. Styled entirely from the tokens above so these sections
   follow the console's deliberate always-light brand look (see file header)
   rather than introducing a second theme.
   ========================================================================== */

/* visually-hidden label text that screen readers still announce */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.muted { color: var(--muted); }
.cell-muted { color: var(--muted); font-size: .85rem; }

/* generic panel used by the Access screens */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 1.4rem 1.6rem; margin-top: 1.4rem; }
.card .section-head { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; align-items: end; margin-top: 1rem; }
.form-grid label, .stack label { display: grid; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.form-grid input, .form-grid select,
.stack input, .stack select { padding: .7rem .85rem; border-radius: 11px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: var(--text); font: inherit; text-transform: none; letter-spacing: normal; }
.form-grid input:focus, .form-grid select:focus,
.stack input:focus, .stack select:focus { outline: 2px solid var(--red); border-color: var(--red); }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.2rem; }
.stack { display: grid; gap: .8rem; }

/* destructive action — reads as dangerous without shouting on every row */
.btn-danger-ghost { background: var(--surface); color: var(--red-deep); border: 1px solid rgba(230,57,70,.32); cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; padding: .45rem 1rem; border-radius: 999px; transition: background .15s ease, border-color .15s ease; }
.btn-danger-ghost:hover { background: rgba(230,57,70,.10); border-color: rgba(230,57,70,.55); }

.col-action { width: 1%; white-space: nowrap; text-align: right; }

/* per-row disclosure menu (native <details>, no JS) */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; display: inline-block; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-body { position: absolute; right: 0; z-index: 20; margin-top: .4rem; width: min(90vw, 290px); display: grid; gap: .9rem; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 1rem; }

/* scrollable list: past ~8 rows the pane scrolls instead of growing the page */
.table-scroll.is-scrollable { max-height: 22rem; overflow-y: auto; }
.table-scroll.is-scrollable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.table-hint { color: var(--muted); font-size: .82rem; font-weight: 600; margin: .5rem 0 0; }

/* role → permission matrix */
.role-card .section-head { display: flex; align-items: center; gap: .6rem; }
.perm-group { border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1.1rem 1.1rem; margin: 1.1rem 0 0; }
.perm-group legend { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); padding: 0 .4rem; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; }
.perm-item { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .85rem; cursor: pointer; }
.perm-item:hover { border-color: rgba(35,31,32,.22); }
.perm-item input { margin-top: .18rem; accent-color: var(--red); width: 16px; height: 16px; }
.perm-label { font-weight: 700; font-size: .88rem; }
/* Helper text under a field or a checkbox.
   ⚠️ This was `grid-column: 2`, which was right for .perm-item (a two-column
   `auto 1fr` grid, where the help must sit beside the checkbox and not under
   it) but WRONG everywhere else: naming column 2 CREATES a second column in a
   single-column grid, so every sibling then auto-placed across two columns.
   That is what mangled the contract-template editor into two ragged columns
   with a giant empty Summary box. `1 / -1` spans whatever columns exist and
   never invents one. */
.perm-help { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.perm-item .perm-help { grid-column: 2; }

/* signed-in-as block at the foot of the sidebar */
.nav-whoami { margin-top: .9rem; padding: .75rem .8rem; border-top: 1px solid var(--border); display: grid; gap: .1rem; }
.whoami-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.whoami-name { font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; }
.whoami-role { font-size: .76rem; font-weight: 600; color: var(--red-deep); }

/* audit log */
.audit-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: .12rem .4rem; white-space: nowrap; }

.empty-forbidden { margin-top: 3rem; }
.empty-forbidden h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; letter-spacing: .02em; }

/* status pills used by the Access screens */
.pill-warn { background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.4); color: #8a6f13; }
.pill-disabled { background: rgba(35,31,32,.07); border-color: var(--border); color: var(--muted); }

/* inline single-button form inside a table cell (subscriber delete) */
.inline-form { display: inline; margin: 0; }

/* ==========================================================================
   Table density. The Access → Admin Users table (6 columns) and the platform
   Users table (8, after "Signed up via") overflowed the content column and fell
   back to horizontal scrolling. Tighter cells + slightly smaller type fit them
   without shrinking text to an unreadable size; .table-wrap keeps overflow-x as
   a genuine last resort for narrow screens.
   ========================================================================== */
.data-table { font-size: .875rem; min-width: 0; }
.data-table th { padding: .68rem .8rem; font-size: .64rem; letter-spacing: .06em; }
.data-table td { padding: .62rem .8rem; }

/* Long values wrap instead of forcing the table wider than the page. */
.cell-email { overflow-wrap: anywhere; word-break: break-word; }
.data-table .cell-strong { overflow-wrap: anywhere; }

/* Dates and pills should never be the reason a table overflows. */
.data-table .pill { font-size: .66rem; padding: .1rem .42rem; }
.data-table td:has(> .pill) { white-space: nowrap; }
.audit-action { font-size: .72rem; }

/* The Manage disclosure is a fixed-width popover, so its column can stay narrow. */
.col-action { padding-left: .4rem !important; padding-right: .8rem !important; }
.col-action .btn-ghost { padding: .4rem .8rem; font-size: .8rem; }

/* A little more room for the wide tables on large screens. */
@media (min-width: 1280px) {
  .admin-shell { max-width: 1320px; }
}

/* Sortable column headers. The whole header is the click target; the arrow marks
   the active column and its direction. */
.sort-hdr { display: inline-flex; align-items: center; gap: .25rem; color: inherit; text-decoration: none; white-space: nowrap; }
.sort-hdr:hover { color: var(--text); }
.sort-hdr.is-sorted { color: var(--red-deep); }
.sort-ind { font-size: .6em; line-height: 1; }

/* Numeric columns read better right-aligned and must never wrap. */
.data-table th.num, .data-table td.num { text-align: right; white-space: nowrap; }
.data-table td.nowrap, .data-table th.nowrap { white-space: nowrap; }

/* --- Roles: picker bar, and the roles x permissions matrix --- */
.role-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-top: 1.4rem; }
.role-picker { display: flex; align-items: center; gap: .6rem; }
.role-picker label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.role-picker select { padding: .55rem .8rem; border-radius: 11px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: var(--text); font: inherit; }
.role-picker select:focus { outline: 2px solid var(--red); border-color: var(--red); }
.role-views { display: flex; gap: .4rem; }
.role-views .btn-ghost { text-decoration: none; }
.role-views .is-on { color: var(--red-deep); border-color: rgba(230,57,70,.4); background: rgba(230,57,70,.07); }

.matrix-table th.matrix-role { text-align: center; vertical-align: bottom; }
.matrix-table td.matrix-cell { text-align: center; font-size: 1rem; }
.matrix-table .matrix-perm { min-width: 190px; }
.matrix-table .matrix-perm .perm-label { display: block; font-weight: 600; }
.matrix-table .matrix-perm .perm-help { display: block; grid-column: auto; }
.matrix-group td { background: var(--surface-2); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--red); }
.tick { color: #2f8f4e; font-weight: 700; }
.cross { color: var(--muted); }

/* The Manage popover is absolutely positioned, so an ancestor with overflow-x
   clipped it inside the table. This table is narrow enough not to need the
   scroll, so let the popover escape; below the breakpoint it falls back to
   expanding inline, which can never overflow the viewport. */
.table-wrap.table-menus { overflow: visible; }
@media (max-width: 900px) {
  .row-menu-body { position: static; width: auto; box-shadow: none; margin-top: .5rem; }
}

/* table filter box */
.table-search { display: flex; gap: .5rem; align-items: center; margin: 1.2rem 0 .2rem; }
.table-search input[type=search] { flex: 1 1 260px; max-width: 380px; padding: .6rem .95rem; border-radius: 999px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: var(--text); font: inherit; }
.table-search input[type=search]:focus { outline: 2px solid var(--red); border-color: var(--red); }
.table-search .btn-ghost { text-decoration: none; }

/* clickable row target + detail page definition list */
.row-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.row-link:hover { color: var(--red-deep); border-bottom-color: rgba(230,57,70,.4); }
.crumb { color: var(--red); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.6rem; margin: 1.2rem 0 0; }
.detail-list > div { display: grid; gap: .2rem; min-width: 0; }
.detail-list dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.settings-flags .flag { display: flex; align-items: center; gap: .6rem; font-weight: 600; }

/* ---------- Partners, contracts and provider scripts (2026-08-13) ---------- */

/* Status pills for the new lifecycles. Green means live and earning, gold means
   waiting on somebody, grey means dormant, red means it ended badly. */
.pill-invited, .pill-draft, .pill-paused, .pill-sent { background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.4); color: #8a6f13; }
.pill-signed, .pill-live, .pill-published, .pill-paid, .pill-open { background: rgba(37,150,90,.12); border-color: rgba(37,150,90,.3); color: #1c7a48; }
.pill-archived, .pill-ended, .pill-expired, .pill-disabled, .pill-void { background: var(--surface-2); color: var(--muted); }
.pill-cancelled, .pill-uncollectible { background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.32); color: var(--red-deep); }

/* .flag was only styled inside the settings panel; the partner and script forms
   use it in plain stacks too. */
.flag { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.flag input { width: auto; }

/* Monospace editing surface: the Lua editor and the contract body. wrap="off"
   plus horizontal scroll keeps long link expressions readable rather than
   folding them into an unreadable ribbon. */
.code-area {
  width: 100%; padding: .8rem .9rem; border-radius: 11px;
  border: 1px solid rgba(35,31,32,.18); background: #1f1c1d; color: #f3efe9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.55; tab-size: 2;
  resize: vertical; overflow: auto; white-space: pre;
}
.code-area:focus { outline: 2px solid var(--red); border-color: var(--red); }

/* A contract is a legal document: render it as the fixed-width text it is,
   never reflowed, and let it scroll rather than overflow the card. */
.contract-body {
  margin: .6rem 0 0; padding: 1.1rem 1.25rem; max-height: 34rem; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.hash { word-break: break-all; font-size: .8rem; }
.dry-run { margin-top: 1.2rem; }

/* A row menu holding a full form needs more room than a two-button one. */
/* A wider row menu, for the placement editor's ~10 short fields.
   ⚠️ min-width was WRONG here: it let intrinsic content (a textarea, a long
   input value) push the panel past the viewport with no way to scroll back, so
   the contract-template editor opened half off-screen. A bounded width plus a
   scroll cap is the fix, and anything bigger than this belongs in a full-width
   card rather than a dropdown (see contracts.html). */
.row-menu-wide { width: min(92vw, 460px); max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Partner portal (partners.wheresmytoaster.com) ---------- */

/* Same shell as the console, different tag colour, so nobody confuses the two. */
.partner-tag { background: linear-gradient(135deg, var(--coral), var(--red)); box-shadow: 0 4px 10px -6px rgba(230,57,70,.8); }

/* Contracts waiting for a signature are the one thing a partner must not miss. */
.nav-badge {
  flex: none; min-width: 1.35rem; text-align: center; font-size: .7rem; font-weight: 700;
  color: #fff; background: var(--red); border-radius: 999px; padding: .1rem .4rem;
}

.form-notice { background: rgba(37,150,90,.12); color: #1c7a48; border: 1px solid rgba(37,150,90,.35); padding: .7rem; border-radius: 10px; font-weight: 600; font-size: .9rem; margin: 0 0 1rem; }
.login-secondary { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.login-foot { margin: 1.4rem 0 0; font-size: .82rem; color: var(--muted); }
.welcome-steps { text-align: left; margin: 0 0 1.4rem; padding-left: 1.2rem; display: grid; gap: .55rem; font-size: .92rem; line-height: 1.5; }

/* The portal's range switch is links, not buttons, so it works with no JS. */
a.mseg { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- The Lua editor (Affiliates → Scripts) ---------- */

/* ⚠️ The editor lives inside a <label>, and `.form-grid label, .stack label`
   set text-transform: uppercase, letter-spacing and a small font for the label
   TEXT. A <textarea> shrugged that off, but CodeMirror renders real elements
   which inherit it, so the first build displayed every script in SHOUTING
   CAPITALS. Reset the inherited typography explicitly rather than relying on
   any element default. */
.CodeMirror {
  text-transform: none;
  letter-spacing: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.55;
  height: auto;
  min-height: 26rem;
  max-height: 42rem;
  border-radius: 11px;
  border: 1px solid rgba(35,31,32,.18);
  padding: .5rem 0;
}
.CodeMirror-scroll { min-height: 26rem; }
.CodeMirror-gutters { border-radius: 11px 0 0 11px; border-right: 1px solid rgba(255,255,255,.08); }
.CodeMirror-focused { outline: 2px solid var(--red); border-color: var(--red); }
.CodeMirror pre.CodeMirror-line { text-transform: none; letter-spacing: normal; }

/* The autocomplete popover. CodeMirror renders it at the document root, so it
   inherits nothing from the form and needs its own type. */
.CodeMirror-hints {
  z-index: 60; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; text-transform: none; letter-spacing: normal;
  border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow);
  max-height: 18rem;
}
.CodeMirror-hint { padding: .25rem .6rem; border-radius: 6px; }
li.CodeMirror-hint-active { background: var(--red); color: #fff; }

/* Keyboard hints in help text. */
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: rgba(35,31,32,.07); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; padding: .02rem .3rem;
}

/* ---------- Collapsible nav groups ---------- */

/* The group header is a real <button> so it is keyboard reachable and screen
   readers get the expanded/collapsed state for free. It keeps the eyebrow's
   look, so nothing about the sidebar's appearance changes when it gained the
   ability to collapse. */
.nav-toggle {
  display: flex; align-items: center; gap: .35rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  padding: .5rem .75rem .35rem; border-radius: 8px;
}
.nav-toggle:hover { color: var(--text); background: var(--surface-2); }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.nav-chevron {
  width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg); transition: transform .15s ease;
}
.nav-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(0deg); }
.nav-body { display: flex; flex-direction: column; gap: .25rem; }
.nav-body[hidden] { display: none; }

/* ---------- System dashboard ---------- */

.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.6rem 0; align-items: start; }
.sys-card { margin-top: 0; }
.sys-card.is-down { border-color: rgba(230,57,70,.35); }
.sys-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.sys-head h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; margin: 0; }

/* A status dot beats a word: colour first, text second. */
.sys-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--surface-2); border: 1px solid var(--border); }
.sys-dot.is-up { background: #2ea36a; border-color: #2ea36a; box-shadow: 0 0 0 3px rgba(46,163,106,.18); }
.sys-dot.is-down { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,57,70,.18); }
.sys-dot.is-off { background: #cfc7cb; border-color: #cfc7cb; }

.sys-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .86rem; }
.sys-facts dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.sys-facts dd { margin: 0; overflow-wrap: anywhere; }
.sys-facts code { font-size: .92em; background: rgba(35,31,32,.06); padding: .05rem .3rem; border-radius: 5px; }

.sys-meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: .9rem; }
.sys-meter-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--red)); }

.sys-flags { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.sys-flag { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.sys-flag-label { font-weight: 600; min-width: 12rem; }

/* A configuration switch that is OFF also explains what turning it on takes,
   so the card is actionable rather than merely descriptive. */
.sys-flag { display: block; }
.sys-flag-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sys-env { font-size: .74rem; color: var(--muted); background: rgba(35,31,32,.06); padding: .05rem .35rem; border-radius: 5px; }
.sys-flag-how { margin: .45rem 0 .2rem 1.6rem; padding-left: .9rem; border-left: 2px solid var(--border); }
.sys-flag-how p { margin: 0 0 .35rem; font-size: .82rem; line-height: 1.5; }
.sys-cmd {
  margin: .3rem 0; padding: .55rem .7rem; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.5; white-space: pre;
}

/* --- Partners > Invoicing -------------------------------------------------
   The filter bar wraps rather than scrolls, so a narrow window folds the
   controls onto more rows instead of hiding them off the right edge. */
.invoice-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.invoice-filters button { justify-self: start; }

/* Nine columns of money do not fit a laptop at the console's reading size, and
   width:100% would rather wrap "Standard placement" mid-word than admit it. The
   min-width makes .table-wrap scroll instead, which is the honest answer. */
.invoice-table { min-width: 820px; }
.cell-charge { white-space: nowrap; }
.cell-charge .cell-muted { margin-right: .3rem; }
/* The invoice number is one token and must never be broken: ".data-table
   .cell-strong { overflow-wrap: anywhere }" happily split WMT-202603-00042
   across four lines, which is unreadable and unquotable over the phone. This
   column opts out of that rule instead of inheriting it. */
.cell-invoice { min-width: 11rem; font-weight: 700; }
.cell-invoice > a { white-space: nowrap; }
.cell-invoice .cell-muted { font-weight: 400; overflow-wrap: normal; margin-top: .15rem; }
.cell-state { white-space: nowrap; }
.cell-state .inline-form { display: block; margin-top: .45rem; }
.cell-state .btn-ghost { padding: .32rem .8rem; font-size: .78rem; }
.cell-state .pill + .pill { margin-left: .35rem; }
/* An address or a mail-server error can be arbitrarily long; it is clipped to a
   readable width with the whole value on hover, rather than setting the width of
   the entire table. */
.cell-clip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .3rem; }

/* A rate that is switched off is still shown, because "why is nothing being
   charged in Texas" is answered by seeing the inactive row, not by its absence. */
.row-inactive { opacity: .55; }

/* An expandable form that is not a row action, so it must not inherit the
   absolutely-positioned .row-menu dropdown. */
.disclosure { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.disclosure > summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.disclosure > summary:hover { color: var(--text); }
.disclosure .stack { margin-top: 1rem; max-width: 460px; }

/* A checkbox reads left-to-right, unlike the stacked label/field pairs around
   it, so it opts out of the .stack label grid rather than fighting it. */
.stack label.check { display: flex; align-items: center; gap: .5rem; text-transform: none;
  letter-spacing: normal; font-size: .9rem; color: var(--text); }
.stack label.check input { width: auto; padding: 0; }