/* /admin — the owner's back office: contacts (CRM), website words and pages
   (CMS), live games and site settings. Built from app.css's design-system
   tokens; nothing here is seen by players or hosts. */

.adm{ min-height:100dvh; padding:0 var(--gutter) max(40px,env(safe-area-inset-bottom)); }
.adm h2{ font-size:24px; line-height:30px; }
.adm h3{ font-size:19px; line-height:24px; }
.adm section{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.adm a{ color:var(--fig); }
.adm a.btn{ color:var(--on-eden); text-decoration:none; }
.adm a.btn.ghost{ color:var(--eden); }
.sub{ font-size:14px; }
.grow{ flex:1 1 auto; min-width:0; }
.ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mono{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; color:var(--ink-muted); word-break:break-all; }
.due{ color:var(--pomegranate) !important; font-weight:800; }
.empty{ padding:18px; text-align:center; }
button.link{ color:var(--fig); font-weight:800; text-decoration:underline; text-underline-offset:2px; padding:0; }
.hidden{ display:none !important; }

/* ---- frame: a quiet back office. Plain parchment (no sunrise art behind the
   numbers), a grouped sidebar on wide screens, a scrolling strip on phones. */
body{ background:var(--surface); }
.adm{ min-height:100dvh; padding:0; }
.adm-shell{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100dvh; }
.adm-side{ position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:18px; padding:20px 14px 18px;
  background:var(--surface-raised); border-right:1px solid var(--line); overflow-y:auto; }
.adm-brand{ display:flex; align-items:center; gap:10px; padding:0 8px; }
.adm-brand .lockup{ height:28px; }
.adm-tag{ font-family:var(--font-display); font-weight:600; font-size:13px; padding:2px 10px; border-radius:var(--radius-pill);
          background:var(--eden); color:var(--on-eden); }
.adm-nav{ display:flex; flex-direction:column; gap:14px; }
.nav-group{ display:flex; flex-direction:column; gap:2px; }
.nav-label{ padding:0 10px 4px; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); opacity:.8; }
.adm-nav a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-weight:800; font-size:15px;
  color:var(--ink) !important; text-decoration:none; }
.adm-nav a .ico{ width:18px; height:18px; flex:none; color:var(--ink-muted); }
.adm-nav a .nav-text{ flex:1; white-space:nowrap; }
.adm-nav a:hover{ background:var(--surface); }
.adm-nav a.on{ background:var(--dew); color:var(--eden) !important; box-shadow:inset 3px 0 0 var(--eden); }
.adm-nav a.on .ico{ color:var(--eden); }
.adm-side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:0 4px; }
.adm-side-foot .btn{ justify-content:center; }
.adm-side-foot .btn .ico{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.side-link{ display:inline-flex; align-items:center; gap:8px; padding:4px 6px; font-weight:800; font-size:14px; color:var(--ink-muted) !important; text-decoration:none; }
.side-link .ico{ width:16px; height:16px; }
.side-link:hover{ color:var(--eden) !important; }

.adm-body{ min-width:0; padding:0 clamp(16px,3vw,40px) max(40px,env(safe-area-inset-bottom)); }
.adm-bar{ display:flex; align-items:center; gap:12px; padding:16px 0; margin-bottom:8px; border-bottom:1px solid var(--line); }
.adm-bar .crumb{ font-size:14px; font-weight:700; color:var(--ink-muted); }
.adm-bar .crumb b{ color:var(--ink); }
.adm-bar .sp{ flex:1; }
.adm-bar .updated{ font-size:13px; color:var(--ink-muted); }
.adm-bar .btn .ico{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill);
        font-size:12px; background:var(--surface-sunk); color:var(--eden); }
.count.alert{ background:var(--pomegranate); color:#fff; }
.adm-main{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding-top:16px; }

@media (max-width:1023px){
  .adm-shell{ grid-template-columns:minmax(0,1fr); }
  .adm-side{ position:sticky; top:0; z-index:20; height:auto; flex-direction:column; gap:8px; padding:10px 0 0; border-right:0;
    border-bottom:1px solid var(--line); overflow:visible; }
  .adm-brand{ padding:0 16px; }
  .adm-side-foot{ display:none; }
  .adm-nav{ flex-direction:row; gap:4px; overflow-x:auto; padding:0 12px 8px; scrollbar-width:none; }
  .adm-nav::-webkit-scrollbar{ display:none; }
  .nav-group{ flex-direction:row; gap:4px; }
  .nav-label{ display:none; }
  .adm-nav a{ flex:none; padding:7px 12px; border-radius:var(--radius-pill); font-size:14px; }
  .adm-nav a.on{ background:var(--eden); color:var(--on-eden) !important; box-shadow:none; }
  .adm-nav a.on .ico{ color:var(--on-eden); }
  .adm-bar{ padding:12px 0; }
}

/* ---- shared bits */
.btn.danger{ background:var(--surface-raised); color:var(--danger); box-shadow:inset 0 0 0 2px var(--danger), 0 5px 0 var(--line); }
.btn.danger:hover{ background:#fbe6e4; filter:none; }
label.btn{ cursor:pointer; }
.actions{ display:flex; gap:6px; align-items:center; }
.actions.wrap{ flex-wrap:wrap; }
.two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; align-items:start; }
.stack{ display:flex; flex-direction:column; gap:12px; }

.badge{ display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; white-space:nowrap; vertical-align:middle; }
.badge.owner{ background:var(--sunfruit); color:var(--ink-on-sun); }
.badge.host{ background:var(--dew); color:var(--eden); }
.badge.pending{ background:#fcefcc; color:var(--soil); }
.badge.off{ background:var(--surface-sunk); color:var(--ink-muted); }
.tag{ display:inline-block; margin:2px 4px 2px 0; padding:1px 8px; border-radius:6px; font-size:12px; font-weight:700;
      background:var(--surface-sunk); color:var(--ink-muted); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; }

/* Pipeline stages, one colour each. */
.stage-new{ --st:#fcefcc; --st-ink:var(--soil); }
.stage-contacted{ --st:#dceaf5; --st-ink:var(--river); }
.stage-onboarding{ --st:var(--dew); --st-ink:var(--eden); }
.stage-active{ --st:var(--eden); --st-ink:var(--on-eden); }
.stage-inactive{ --st:var(--surface-sunk); --st-ink:var(--ink-muted); }
.badge[class*="stage-"]{ background:var(--st); color:var(--st-ink); }

.avatar{ width:40px; height:40px; border-radius:50%; flex:none; background:var(--eden); color:var(--on-eden);
         display:inline-grid; place-items:center; font-weight:800; overflow:hidden; vertical-align:middle; }
.avatar.manual{ background:var(--surface-sunk); color:var(--soil); box-shadow:inset 0 0 0 2px var(--line); }
.avatar.sm{ width:30px; height:30px; font-size:13px; }
.avatar.lg{ width:72px; height:72px; font-size:30px; font-family:var(--font-display); }
.avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---- overview */
.ov-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ov-head h1{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,36px); line-height:1.1; }
.ov-head p{ margin:6px 0 0; }
.panel{ display:flex; flex-direction:column; gap:14px; padding:18px 20px; border-radius:var(--radius-lg); background:var(--surface-raised);
  box-shadow:0 0 0 1px var(--line), 0 6px 18px rgba(31,77,43,.05); min-width:0; }
.panel.quiet{ background:transparent; box-shadow:0 0 0 1px var(--line); }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.adm .panel-head h2{ margin:0; font-size:18px; line-height:1.3; font-family:var(--font-body); font-weight:900; }
.panel-head a{ display:inline-flex; align-items:center; gap:4px; font-weight:800; text-decoration:none; }
.panel-head a .ico{ width:14px; height:14px; }
.panel .empty{ padding:14px 0; text-align:left; }
.panel .list{ padding:0; }
.ov-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.ov-grid.wide{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
@media (max-width:1100px){ .ov-grid, .ov-grid.wide{ grid-template-columns:1fr; } }

/* Needs your attention: one row per thing to do, the button on the right. */
.attn{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.attn-item{ display:flex; align-items:center; gap:14px; padding:12px 0; }
.attn-item + .attn-item{ border-top:1px solid var(--line); }
.attn-ico{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--surface-sunk); color:var(--ink-muted); }
.attn-ico .ico{ width:20px; height:20px; }
.attn-item.alert .attn-ico{ background:#fbe3e1; color:var(--pomegranate); }
.attn-item.warn .attn-ico{ background:#fcefcc; color:var(--soil); }
.attn-item.info .attn-ico{ background:var(--dew); color:var(--eden); }
.attn-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.attn-text b{ font-size:15px; }
.attn-text span{ font-size:13px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attn-item .btn{ flex:none; }
.attn-clear{ display:flex; align-items:center; gap:12px; color:var(--eden); }
.attn-clear .ico{ width:22px; height:22px; padding:8px; box-sizing:content-box; border-radius:50%; background:var(--dew); }

/* The four numbers: the first one leads. */
.kpis{ display:grid; grid-template-columns:1.35fr repeat(3,minmax(0,1fr)); gap:16px; }
.kpi{ position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 20px 16px; border-radius:var(--radius-lg);
  background:var(--surface-raised); box-shadow:0 0 0 1px var(--line), 0 6px 18px rgba(31,77,43,.05); color:var(--ink) !important;
  text-decoration:none; overflow:hidden; min-width:0; transition:box-shadow .15s ease; }
.kpi:hover{ box-shadow:0 0 0 2px var(--fig), 0 10px 24px rgba(31,77,43,.1); }
.kpi-label{ font-size:14px; font-weight:800; color:var(--ink-muted); }
.kpi-value{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,3vw,40px); line-height:1.05; font-variant-numeric:tabular-nums; }
.kpi-value small{ font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink-muted); }
.kpi-delta{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.kpi-delta.up{ color:var(--fig); }
.kpi-delta.down{ color:var(--pomegranate); }
.kpi-delta.flat{ color:var(--ink-muted); font-weight:700; }
.kpi-delta span{ font-size:10px; }
.spark{ display:block; width:100%; height:34px; margin-top:4px; }
.spark-line{ fill:none; stroke:var(--fig); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.spark-area{ fill:var(--fig); opacity:.1; }
.spark-flat{ stroke:var(--line); stroke-width:2; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.kpi.hero{ background:var(--eden); color:var(--on-eden) !important; box-shadow:0 14px 34px rgba(19,48,27,.22); }
.kpi.hero .kpi-label, .kpi.hero .kpi-value small{ color:rgba(251,246,233,.78); }
.kpi.hero .kpi-delta.up{ color:var(--sprout); }
.kpi.hero .kpi-delta.down{ color:#ffb4ad; }
.kpi.hero .kpi-delta.flat{ color:rgba(251,246,233,.7); }
.kpi.hero .spark-line{ stroke:var(--sprout); }
.kpi.hero .spark-area{ fill:var(--sprout); opacity:.18; }
.kpi.hero .spark-flat{ stroke:rgba(251,246,233,.3); }
.kpi.hero:hover{ box-shadow:0 0 0 2px var(--sprout), 0 14px 34px rgba(19,48,27,.28); }
@media (max-width:1100px){ .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .kpi{ padding:14px; } .kpi-value{ font-size:28px; } .kpi-delta{ font-size:12px; } }

/* Bars: games per day or week. */
.chart{ display:block; width:100%; height:auto; }
.chart .grid{ stroke:var(--line); stroke-width:1; }
.chart .axis{ font-size:11px; font-weight:700; fill:var(--ink-muted); font-family:var(--font-body); }
.chart .val{ fill:var(--fig); }
.chart .hit{ fill:transparent; }
.chart .bar:hover .val{ fill:var(--eden); }
.chart .bar:hover .hit{ fill:var(--surface-sunk); }

/* The funnel: label, bar, count, share from the step above. */
.funnel{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.funnel li{ display:grid; grid-template-columns:minmax(110px,9.5em) minmax(0,1fr) 3em 3em; align-items:center; gap:10px; font-size:14px; }
.f-name{ font-weight:800; }
.f-bar{ height:14px; border-radius:var(--radius-pill); background:var(--surface-sunk); overflow:hidden; }
.f-bar span{ display:block; height:100%; border-radius:inherit; background:var(--fig); }
.funnel li:last-child .f-bar span{ background:var(--sunfruit); }
.f-n{ text-align:right; font-weight:900; font-variant-numeric:tabular-nums; }
.f-conv{ text-align:right; font-size:12px; font-weight:800; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* Top churches and quizzes. */
table.mini{ width:100%; border-collapse:collapse; font-size:14px; }
table.mini th{ text-align:left; font-size:12px; font-weight:800; color:var(--ink-muted); padding:0 8px 8px; border-bottom:1px solid var(--line);
  background:none; text-transform:none; letter-spacing:0; position:static; }
table.mini td{ padding:9px 8px; border-bottom:1px solid var(--line); }
table.mini tr:last-child td{ border-bottom:0; }
table.mini tr[data-href]{ cursor:pointer; }
table.mini tr[data-href]:hover td{ background:var(--surface); }
table.mini th.num, table.mini td.num{ text-align:right; }
@media (max-width:560px){
  table.mini th:nth-child(4), table.mini td:nth-child(4){ display:none; }
  table.mini td, table.mini th{ padding-left:4px; padding-right:4px; }
  .who-cell .avatar{ display:none; }
}
.who-cell{ display:flex; align-items:center; gap:10px; min-width:0; font-weight:800; }
.who-cell small{ display:block; font-weight:600; font-size:12px; color:var(--ink-muted); }
.rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; counter-reset:r; }
.rank li{ display:grid; grid-template-columns:1.6em minmax(0,1fr); gap:2px 8px; counter-increment:r; }
.rank li::before{ content:counter(r); grid-row:span 3; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink-muted); }
.rank-title{ font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-bar{ height:6px; border-radius:var(--radius-pill); background:var(--surface-sunk); overflow:hidden; }
.rank-bar span{ display:block; height:100%; background:var(--fig); border-radius:inherit; }
.rank-n{ font-size:12px; color:var(--ink-muted); font-weight:700; }

/* Activity grouped by day. */
.feed{ padding:0; }
.feed-day{ padding:12px 0 6px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.feed-day:first-child{ padding-top:0; }
.feed .list-row{ padding:8px 4px; }
.feed .list-row + .list-row{ border-top:0; }
.feed-ico{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--surface-sunk); color:var(--ink-muted); }
.feed-ico .ico{ width:15px; height:15px; }
.feed-ico.t-game{ background:#fcefcc; color:var(--sun-deep); }
.feed-ico.t-signup, .feed-ico.t-added{ background:var(--dew); color:var(--fig); }
.feed-ico.t-approved{ background:var(--dew); color:var(--eden); }
.feed-ico.t-revoked, .feed-ico.t-removed{ background:#fbe3e1; color:var(--pomegranate); }
.feed-ico.t-note, .feed-ico.t-email{ background:#e1edf7; color:var(--river); }

.live-dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--answer-fruit); box-shadow:0 0 0 4px rgba(200,50,60,.16); }

/* Pipeline: one stacked bar and a legend that filters the contacts. */
.pipe-bar{ display:flex; gap:3px; height:14px; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-sunk); }
.pipe-bar span{ background:var(--st); min-width:6px; }
.pipe-bar .stage-new{ --st:#e9c46a; }
.pipe-bar .stage-contacted{ --st:#7fb2d9; }
.pipe-bar .stage-onboarding{ --st:var(--sprout); }
.pipe-legend{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px 12px; }
.pipe-legend a{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; font-weight:700; color:var(--ink) !important; text-decoration:none; }
.pipe-legend a:hover{ color:var(--fig) !important; }
.pipe-legend i{ width:10px; height:10px; border-radius:3px; background:var(--st); flex:none; }
.pipe-legend .stage-new{ --st:#e9c46a; }
.pipe-legend .stage-contacted{ --st:#7fb2d9; }
.pipe-legend .stage-onboarding{ --st:var(--sprout); }
.pipe-legend b{ margin-left:auto; font-variant-numeric:tabular-nums; }
.pipe-legend span{ width:3em; text-align:right; font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* Site at a glance: quiet facts, each a link. */
.glance{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:4px 16px; }
.glance a{ display:flex; flex-direction:column; gap:2px; padding:8px 0; text-decoration:none; color:var(--ink) !important; }
.glance span{ font-size:13px; color:var(--ink-muted); font-weight:700; }
.glance b{ font-size:16px; }
.glance a:hover b{ color:var(--fig); }

/* Number tiles on other tabs (Subscriptions). */
.stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
@media (max-width:1000px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat{ padding:16px 18px; text-decoration:none; color:var(--ink); }
a.stat:hover{ box-shadow:var(--leaf-lift), inset 0 0 0 2px var(--fig); }
.stat b{ display:block; font-family:var(--font-display); font-size:30px; font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; }
.stat span{ font-size:14px; color:var(--ink-muted); }
.stat.alert b{ color:var(--pomegranate); }

.person{ display:flex; gap:12px; align-items:flex-start; }
.person .who{ min-width:0; flex:1; }
a.name{ font-weight:900; color:var(--ink) !important; text-decoration:none; }
a.name:hover{ color:var(--fig) !important; text-decoration:underline; }

.list{ display:flex; flex-direction:column; padding:6px; }
.list-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); font-size:15px;
           color:var(--ink) !important; text-decoration:none; }
a.list-row:hover{ background:var(--surface-sunk); }
.list-row + .list-row{ border-top:1px solid var(--line); }
.when{ flex:none; font-size:13px; color:var(--ink-muted); white-space:nowrap; }

/* Activity dots, by what happened. */
.dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
.dot.t-signup{ background:var(--sprout); }
.dot.t-approved{ background:var(--fig); }
.dot.t-revoked, .dot.t-removed{ background:var(--pomegranate); }
.dot.t-game{ background:var(--sunfruit); }
.dot.t-note{ background:var(--river); }
.dot.t-stage{ background:var(--eden); }
.dot.t-added{ background:var(--soil); }
.dot.t-email{ background:var(--sun-deep); }
/* Sent emails: one row each, opening to show the message. */
details.mail-row{ display:block; }
details.mail-row summary{ list-style:none; }
details.mail-row summary::-webkit-details-marker{ display:none; }
.mail-text{ white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.5 inherit; font-family:inherit; margin:10px 0 4px;
  background:var(--surface-sunk); border-radius:var(--radius-sm); padding:12px 14px; max-height:360px; overflow:auto; }
.dot.t-signin{ background:var(--line); box-shadow:inset 0 0 0 2px var(--line-strong); }

/* ---- contacts */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn{ padding:7px 14px; border-radius:var(--radius-pill); font-weight:800; font-size:14px; background:var(--surface-raised);
           color:var(--ink-muted); box-shadow:inset 0 0 0 2px var(--line); }
.chip-btn b{ margin-left:4px; color:var(--ink); }
.chip-btn:hover{ box-shadow:inset 0 0 0 2px var(--line-strong); }
.chip-btn.on{ background:var(--st,var(--eden)); color:var(--st-ink,var(--on-eden)); box-shadow:inset 0 0 0 2px var(--st-ink,var(--eden)); }
.chip-btn.on b{ color:inherit; }

.tools{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tools .field{ font-size:16px; padding:10px 14px; width:auto; flex:1 1 220px; }
.tools select.field{ flex:0 1 auto; }

.seg{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--radius-pill); background:var(--surface-sunk); }
.seg button, .seg label span{ display:inline-block; padding:7px 14px; border-radius:var(--radius-pill); font-weight:800; font-size:14px; color:var(--ink-muted); cursor:pointer; }
.seg button.on, .seg input:checked + span{ background:var(--eden); color:var(--on-eden); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px; }

.table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--leaf-lift); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th, td{ padding:10px 12px; text-align:left; vertical-align:middle; }
th{ font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; background:var(--surface-sunk); }
tr + tr td{ border-top:1px solid var(--line); }
td.nowrap{ white-space:nowrap; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
tr.clickable{ cursor:pointer; }
tr.clickable:hover td{ background:#fdfaf1; }
table.contacts td:nth-child(2){ max-width:260px; }

/* Board view */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:10px; overflow-x:auto; padding-bottom:6px; }
.col{ display:flex; flex-direction:column; gap:8px; padding:10px; min-height:220px; border-radius:var(--radius-lg);
      background:var(--surface-sunk); box-shadow:inset 0 4px 0 var(--st); transition:box-shadow .1s ease, background .1s ease; }
.col.over{ background:var(--dew); box-shadow:inset 0 4px 0 var(--st), inset 0 0 0 2px var(--fig); }
.col-head{ display:flex; justify-content:space-between; align-items:center; padding:4px 4px 0; }
.col-head span{ font-weight:800; color:var(--ink-muted); }
.col-hint{ padding:0 4px; margin-top:-6px; }
.col-empty{ text-align:center; padding:20px 0; }
.bcard{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:var(--radius-md); text-decoration:none; color:var(--ink) !important;
        box-shadow:0 2px 0 var(--line); cursor:grab; }
.bcard:hover{ box-shadow:0 2px 0 var(--line), inset 0 0 0 2px var(--fig); }
.bcard.dragging{ opacity:.5; }
.bmeta:empty{ display:none; }

/* ---- forms */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; align-items:start; }
.form-grid .span2{ grid-column:1 / -1; }
.adm label{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:800; color:var(--ink); }
/* Upload buttons are labels around a hidden file input: keep them looking like buttons. */
.adm label.btn{ display:inline-flex; flex-direction:row; color:var(--on-eden); font-weight:600; }
.adm label small{ font-weight:600; font-size:13px; }
.adm label.check, .adm label.radio{ flex-direction:row; align-items:center; gap:8px; font-weight:700; cursor:pointer; }
.adm input[type="checkbox"], .adm input[type="radio"]{ width:18px; height:18px; accent-color:var(--eden); margin:0; }
.adm fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.adm legend{ padding:0; margin-bottom:6px; font-size:14px; font-weight:800; }
.adm textarea.field{ resize:vertical; line-height:1.45; }

.switch{ flex-direction:row !important; align-items:center; gap:10px !important; cursor:pointer; font-size:16px !important; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch span{ position:relative; width:48px; height:28px; border-radius:var(--radius-pill); background:var(--line-strong); transition:background .15s; }
.switch span::after{ content:''; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch input:checked + span{ background:var(--fig); }
.switch input:checked + span::after{ transform:translateX(20px); }
.switch input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px; }

.savebar{ position:sticky; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
          padding:10px 14px; border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:var(--leaf-lift), inset 0 0 0 2px var(--line); }
.blocks{ padding:16px !important; border-radius:var(--radius-md); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.blocks legend{ float:left; width:100%; font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:4px; }
.blocks .link{ align-self:flex-start; }

/* ---- contact page */
.profile{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.profile h2{ font-size:28px; line-height:34px; }
.detail{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px; align-items:start; }
.detail .card{ display:flex; flex-direction:column; gap:14px; }
dl.facts{ display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:8px 18px; margin:0; font-size:15px; }
dl.facts dt{ color:var(--ink-muted); }
dl.facts dd{ margin:0; min-width:0; overflow-wrap:anywhere; }

.note-form{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.timeline li{ position:relative; display:flex; gap:12px; padding:10px 0 10px 2px; font-size:15px; }
.timeline li + li{ border-top:1px solid var(--line); }
.timeline .dot{ margin-top:7px; }
.timeline li.t-note .grow{ background:#f3f8fc; border-radius:var(--radius-sm); padding:10px 12px; box-shadow:inset 3px 0 0 var(--river); }
.note-text{ font-weight:600; white-space:normal; overflow-wrap:anywhere; }

/* ---- website + pages */
#ann-preview .announce{ border-radius:var(--radius-md); }
#ann-preview .announce.off{ opacity:.55; }
.slug{ display:flex; align-items:center; gap:4px; font-weight:700; }
.slug .field{ flex:1; min-width:0; }

.editor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.ed-pane{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.toolbar{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.toolbar button, .toolbar select{ padding:6px 10px; border-radius:var(--radius-sm); font-weight:800; font-size:14px; background:var(--surface-raised);
                                  box-shadow:inset 0 0 0 2px var(--line); color:var(--ink); }
.toolbar button:hover{ box-shadow:inset 0 0 0 2px var(--line-strong); }
.toolbar select{ border:0; }
.toolbar a{ margin-left:6px; font-weight:800; }
#pg-body{ min-height:440px; flex:1; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:15px; font-weight:500; line-height:1.55; }
.prose.preview{ margin:0; max-width:none; flex:1; font-size:16px; padding:20px 24px; box-shadow:inset 0 0 0 2px var(--line);
                max-height:640px; overflow:auto; }
.prose.preview h1{ font-size:30px; }

/* ---- images */
.dropzone{ padding:22px; border-radius:var(--radius-lg); text-align:center; font-weight:800; color:var(--ink-muted);
           border:2px dashed var(--line-strong); background:rgba(255,255,255,.5); }
.dropzone.over{ background:var(--dew); color:var(--eden); border-color:var(--fig); }
.media{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.media figure{ margin:0; padding:10px; display:flex; flex-direction:column; gap:8px; }
.media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); background:var(--surface-sunk); display:block; }

/* ---- games */
.games{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.game ol{ margin:10px 0 0; padding-left:22px; font-size:14px; }
.game li{ padding:2px 0; }

.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10; max-width:calc(100vw - 32px);
        background:var(--eden); color:var(--on-eden); padding:12px 18px; border-radius:var(--radius-md); box-shadow:var(--leaf-lift); font-weight:700; }

@media (max-width:900px){
  .detail, .editor{ grid-template-columns:1fr; }
  .pipeline{ grid-template-columns:repeat(5,minmax(96px,1fr)); overflow-x:auto; }
  #pg-body{ min-height:300px; }
}
@media (max-width:600px){
  .form-grid{ grid-template-columns:1fr; }
  dl.facts{ grid-template-columns:1fr; gap:2px; }
  dl.facts dd{ margin-bottom:8px; }
  .hide-sm{ display:none; }
  .logo .lockup{ height:30px; }
  .profile{ align-items:flex-start; }
}

/* Blog tab: category filter buttons. */
.chip-btn{ padding:6px 14px; border-radius:var(--radius-pill); font-weight:800; font-size:14px;
  background:var(--surface-raised); box-shadow:inset 0 0 0 2px var(--line); }
.chip-btn.on{ background:var(--eden); color:var(--on-eden); box-shadow:none; }
.chip-btn.on .dim{ color:var(--sprout); }

/* ---------------------------------------------------------------- journeys -- */
.journey-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:14px; margin-top:12px; }
.jcard{ display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none; min-width:0; }
a.jcard:hover{ box-shadow:inset 0 0 0 2px var(--line-strong); }
.jcard.tpl{ background:var(--surface-sunk); }
.jstats{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:14px; color:var(--ink-muted); }
.jstats b{ color:var(--ink); font-size:16px; }
.meter{ height:8px; border-radius:99px; background:var(--surface-sunk); overflow:hidden; }
.meter span{ display:block; height:100%; background:var(--eden); }
.title-field{ font:700 22px/1.3 var(--font-display,inherit); width:100%; padding:6px 10px; }
.j-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; margin-top:20px; }
@media (max-width:900px){ .j-layout{ grid-template-columns:minmax(0,1fr); } }
.flow{ display:flex; flex-direction:column; min-width:0; }
.step{ padding:0; overflow:hidden; border-left:5px solid var(--line-strong); }
.step-email{ border-left-color:var(--sunfruit); }
.step-wait{ border-left-color:var(--river); }
.step-check{ border-left-color:var(--fig); }
.step-update{ border-left-color:var(--soil); }
.step-trigger, .step-end{ border-left-color:var(--eden); }
.step-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-sunk); }
.step-head .btn{ padding:4px 9px; min-width:0; }
.step-n{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--eden); color:var(--on-eden); font-weight:800; font-size:13px; flex:none; }
.step-body{ display:flex; flex-direction:column; gap:10px; padding:14px; }
.step-body label{ display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:14px; }
.step-body label.row, .step-body label.check{ flex-direction:row; align-items:center; }
.step-body textarea{ resize:vertical; min-height:120px; font-size:15px; line-height:1.5; }
.add-step{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0; }
.add-step .line{ width:2px; height:14px; background:var(--line-strong); }
.add-step .row{ opacity:.55; transition:opacity .15s; }
.add-step:hover .row, .add-step:focus-within .row{ opacity:1; }
.add-step .chip-btn{ padding:4px 10px; font-size:13px; }
.conds{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.cond{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; }
.cond select, .cond input{ width:auto; max-width:100%; }
.cond .btn{ padding:4px 9px; }
.savebar.sticky{ margin-top:16px; }
.modal{ position:fixed; inset:0; z-index:50; background:rgba(19,48,27,.55); display:grid; place-items:center; padding:16px; }
.modal-card{ width:min(760px,100%); max-height:94vh; overflow:auto; }