/* reset, shell layout, chrome, generic controls.
   Shell architecture follows Alan's 2026-08 redesign mock (claude.ai/design
   "Marketing planning app design"): desktop = left sidebar + one control row
   (pill filters + view seg + search + New); mobile = brand header with a New
   pill + a floating glass tab bar; the serif page heading sits above the
   controls at every width; the mono function glow (FAMILY 3) sits in the
   negative space at the bottom of the content pane and follows the accent. */

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  display:flex;
  font-family:var(--font-sans);
  font-size:var(--text-body);line-height:var(--leading-body);
  font-weight:var(--weight-body);
  font-variant-numeric:tabular-nums;
  color:var(--text-1);background:var(--bg-0);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
/* the kit's field: mono glow pinned to the viewport's bottom edge, in the
   negative space of the CONTENT pane -- never under the sidebar (the hard
   edge at x=side-w was the "broken gradient" Alan reported). Fixed = it
   holds still while content scrolls over it, exactly like the mockups. */
body::before{
  content:"";position:fixed;left:0;right:0;bottom:0;height:50%;
  background:var(--field);opacity:.8;pointer-events:none;z-index:0;
}
@media (min-width:900px){
  body::before{left:var(--side-w);height:52%;opacity:.75}
}
body.side-min{--side-w:64px}
.maincol{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
/* prose surfaces opt back out of tabular figures */
.cap,.erender p,.note,.fld textarea{font-variant-numeric:normal}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block;flex:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--select-bg);color:var(--text-1)}
[hidden]{display:none !important}

/* ---------- desktop sidebar (per scheduler/desktop.html) ---------- */
.side{display:none}
@media (min-width:900px){
  /* the topbar is display:none here (the sidebar owns its jobs), so every
     calc() that budgets for its height must see 0, not 56px */
  :root{--topbar-h:0px}
  .side{
    display:flex;flex-direction:column;
    width:var(--side-w);flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
    border-right:1px solid var(--border-1);background:var(--bg-0);
    padding:var(--space-5) 14px;z-index:2;
    transition:width var(--dur-med) var(--ease-out);
  }
  .side .mark{display:flex;align-items:center;gap:10px;padding:4px var(--space-2) var(--space-4)}
  .side .mark a{display:flex;align-items:center;gap:10px;min-width:0}
  .side .mark .brand-mark{width:26px;height:26px;flex:none}
  .side .mark b{
    font-family:var(--font-display);font-weight:var(--weight-display);font-size:19px;
    letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .side .clps{
    margin-left:auto;border:1px solid var(--border-2);color:var(--text-3);
    border-radius:var(--radius-pill);width:28px;height:28px;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .side .clps:hover{color:var(--text-1);background:var(--surface-2)}
  .side .nav{display:flex;flex-direction:column;gap:2px}
  .side .nav a{
    display:flex;align-items:center;gap:10px;padding:8px 10px;
    border-radius:var(--radius-sm);font-size:var(--text-body-sm);color:var(--text-2);
    white-space:nowrap;
  }
  .side .nav a svg{opacity:.7}
  .side .nav a:hover{background:var(--surface-2);color:var(--text-1)}
  .side .nav a.on{background:var(--surface-2);color:var(--text-1)}
  .side .lbl{
    font-family:var(--font-mono);font-size:var(--text-eyebrow);
    letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
    padding:var(--space-5) 10px var(--space-2);
  }
  /* channels rail = the kit's grouped ListCard: icon tiles, inset hairlines */
  .chgrp{
    background:var(--surface-1);border:1px solid var(--border-1);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-float);overflow:hidden;
  }
  .side .chn{
    position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    padding:9px 12px;font-size:var(--text-mono);color:var(--text-1);cursor:pointer;
  }
  .side .chn+.chn::after{
    content:"";position:absolute;top:0;left:48px;right:0;border-top:1px solid var(--border-1);
  }
  .side .chn:hover{background:var(--surface-2)}
  .side .chn.on{background:var(--select-bg)}
  .side .chn .tile{
    flex:none;width:26px;height:26px;border-radius:8px;
    background:var(--c-dim,var(--surface-2));color:var(--c-bright,var(--text-2));
    display:flex;align-items:center;justify-content:center;
  }
  [data-theme="light"] .side .chn .tile{background:var(--c-tint,var(--surface-2));color:var(--c-deep,var(--text-2))}
  .side .chn .nl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side .chn em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
  /* the kit's .me row: business profile, opens Settings */
  .side .me{
    margin-top:auto;display:flex;align-items:center;gap:10px;
    padding:var(--space-3) 10px 0;border-top:1px solid var(--border-1);
    border-radius:0;cursor:pointer;min-width:0;
  }
  .side .me:hover .mename{color:var(--text-1)}
  .side .meav{
    width:28px;height:28px;border-radius:50%;flex:none;
    background-color:var(--dream-base);background-image:var(--gradient-dream-iridescent);
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);font-style:normal;
    overflow:hidden;
  }
  .side .meav img{width:100%;height:100%;object-fit:cover}
  .side .me .mename{display:block;font-size:var(--text-mono);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side .me small{display:block;color:var(--text-3);font-size:11.5px;white-space:nowrap}
  .side .foot{
    display:flex;align-items:center;gap:4px;
    padding-top:var(--space-3);flex-wrap:wrap;
  }
  /* collapsed: a slim icon rail. Labels vanish, tiles stay, glyphs centre. */
  .side.min{padding:var(--space-5) 8px}
  .side.min .nl,.side.min .lbl,.side.min .chn em,.side.min .mark b,.side.min .me div{display:none}
  .side.min .mark{padding:4px 0 var(--space-4);justify-content:center}
  .side.min .mark a{display:none}
  .side.min .clps{margin-left:0}
  .side.min .nav a{justify-content:center;padding:8px 0}
  .side.min .chgrp{background:transparent;border-color:transparent;box-shadow:none}
  .side.min .chn{justify-content:center;padding:6px 0}
  .side.min .chn+.chn::after{display:none}
  .side.min .me{justify-content:center;padding-left:0;padding-right:0}
  .side.min .foot{justify-content:center}
  /* on desktop the sidebar owns the brand + utility buttons */
  .maincol .topbar{display:none}
}

/* ---------- top bar (mobile chrome) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--bg-0);
  border-bottom:1px solid var(--border-1);
  padding-top:env(safe-area-inset-top);
}
.topbar-in{
  height:var(--topbar-h);display:flex;align-items:center;gap:var(--space-3);
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.brand{display:flex;align-items:center;gap:9px;flex:none}
/* the mock's donut mark: a light disc with a chassis ring. Token-driven so
   the light theme flips it to the dark-on-light donut the modal uses. */
.brand-mark{width:24px;height:24px;border-radius:50%;background:var(--text-1);position:relative}
.brand-mark::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:3.5px solid var(--bg-0);background:var(--text-1);
}
.brand-txt{font-family:var(--font-display);font-weight:var(--weight-heading);font-size:var(--text-body);letter-spacing:var(--tracking-heading)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:var(--space-1)}
.tb-new{height:30px;padding:0 13px;font-size:12.5px;margin-left:6px;flex:none}
.icobtn{
  width:32px;height:32px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);position:relative;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.icobtn:hover{background:var(--surface-2);color:var(--text-1)}
.icobtn:active{transform:var(--press)}
.icobtn.on{background:var(--accent);color:var(--accent-text)}
.badge{
  position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 4px;
  border-radius:var(--radius-pill);background:var(--danger);color:#fff;
  font-family:var(--font-mono);font-size:var(--text-micro);line-height:15px;text-align:center;
}
[data-theme="dark"] .ico-light,[data-theme="light"] .ico-dark{display:none}
.live{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3)}
/* status dots are rounded SQUARES now (DS lock, 2026-08-07): r = size/3 */
.live i{width:7px;height:7px;border-radius:2.5px;background:var(--text-3)}
.live.ok i{background:var(--ok)}
.live.bad i{background:var(--danger)}

/* ---------- page heading ---------------------------------------------------
   The serif header lives ABOVE the control row at EVERY width now (the
   mock's showHead block) -- 30px on phones, 40px on desktop. Home and the
   campaign detail hide it (they carry their own headers). */
.vheadbar{
  padding-top:var(--space-4);
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  position:relative;z-index:1;
}
.vheadbar .vkick,.vkick{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);display:block;
}
.vheadbar .vtitle,.vtitle{
  font-family:var(--font-display);font-size:clamp(30px,4.2vw,40px);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:var(--leading-display);
  margin:6px 0 4px;
}
.vheadbar .vsub,.vsub{font-size:12.5px;font-family:var(--font-mono);color:var(--text-2);display:block}

/* ---------- control row / toolbar ---------- */
.controls{
  position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:29;
  background:var(--bg-0);border-bottom:1px solid var(--border-1);
}
@media (min-width:900px){.controls{top:0}}
html.artifact .controls{border-top:1px solid var(--border-1);margin-top:var(--space-3)}
.controls-in{
  min-height:var(--controls-h);display:flex;align-items:center;gap:var(--space-3);
  padding-top:var(--space-2);padding-bottom:var(--space-2);
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
/* single-line chips with sideways scroll EVERYWHERE: a wrapped chip row used
   to grow the bar past --controls-h and break every offset calc against it */
.controls-l{
  display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;
  overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.controls-l::-webkit-scrollbar{display:none}
.controls-r{display:flex;align-items:center;gap:var(--space-2);flex:none}
.chips{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
/* the mock's always-visible quick filters: status + channel pill rows with a
   hairline divider. The dot reads --sc (status) or --c (channel), muted when
   neither resolves (the All pill). */
.pillrow{display:flex;gap:6px;flex:none}
.spill{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border-1);border-radius:var(--radius-pill);
  padding:5px 12px;font-size:var(--text-caption);color:var(--text-2);
  background:transparent;cursor:pointer;text-transform:capitalize;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.spill i{width:6px;height:6px;border-radius:2px;flex:none;background:var(--sc,var(--c,var(--text-3)))}
.spill:hover{background:var(--surface-2)}
.spill.on{background:var(--surface-3);border-color:var(--border-2);color:var(--text-1)}
.cdiv{width:1px;height:18px;background:var(--border-1);flex:none}
#filter-btn{padding:0 10px}
.groupsel{display:flex;gap:6px}
.groupsel label{
  display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 10px;height:32px;
  border:1px solid var(--border-2);border-radius:var(--radius-pill);
  font-size:var(--text-caption);color:var(--text-2);
}
/* 16px, not 12px -- anything smaller zooms the page on iOS when tapped */
.groupsel select{
  border:0;background:none;font-size:var(--text-body);font-weight:var(--weight-medium);
  color:var(--text-1);padding:2px;transform:scale(.8);transform-origin:left center;
  margin-right:-14px;
}
/* the kit's search pill (desktop top row) */
.search{
  display:none;align-items:center;gap:8px;
  border:1px solid var(--border-1);background:var(--surface-1);
  border-radius:var(--radius-pill);padding:0 14px;height:32px;
  color:var(--text-3);width:190px;flex:none;
}
.search svg{flex:none}
.search input{
  border:0;background:none;width:100%;min-width:0;font-size:var(--text-body);
  color:var(--text-1);padding:0;
}
.search input::placeholder{color:var(--text-3);font-size:13.5px}
.search:focus-within{border-color:var(--border-2);background:var(--surface-2)}
@media (min-width:1100px){.search{display:flex}}
/* narrow search: a toggled full-width row under the controls (the pill only
   fits the control row at >=1100px per the mock) */
.qbtn{display:inline-flex}
@media (min-width:1100px){.qbtn{display:none}}
.qrow{
  padding:0 max(var(--pad),env(safe-area-inset-left)) var(--space-2);
}
.qrow input{
  width:100%;height:38px;padding:0 var(--space-4);
  border:1px solid var(--border-2);border-radius:var(--radius-pill);
  background:var(--sunken);font-size:var(--text-body);color:var(--text-1);
}
/* DS button: sm = 32px pill */
.btn{
  height:32px;padding:0 var(--space-4);border-radius:var(--radius-pill);
  border:1px solid var(--border-2);background:transparent;color:var(--text-1);
  font-size:var(--text-mono);font-weight:var(--weight-medium);
  display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:var(--press)}
.btn-ink{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.btn-ink:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-1)}
.btn.danger{color:var(--danger)}
.btn-sm{height:28px;padding:0 var(--space-3);font-size:var(--text-caption)}
.btn .cnt{
  font-family:var(--font-mono);font-size:var(--text-micro);
  background:var(--accent);color:var(--accent-text);
  border-radius:var(--radius-pill);padding:1px 5px;
}

/* segmented: recessed track, lifted thumb */
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-pill);padding:3px;gap:2px}
.seg button{
  height:26px;padding:0 var(--space-3);border-radius:var(--radius-pill);
  font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-2);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.seg button:hover{color:var(--text-1)}
.seg button:active{transform:var(--press)}
.seg button.on{background:var(--surface-1);color:var(--text-1);box-shadow:inset 0 0 0 1px var(--border-2)}
[data-theme="light"] .seg button.on{background:var(--white-0);box-shadow:var(--shadow-1)}

/* ---------- main ---------- */
main{
  padding-top:var(--space-4);padding-bottom:var(--space-24);min-height:60vh;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  position:relative;z-index:1;
}
.empty{padding:var(--space-16) 0;text-align:center;color:var(--text-3);font-size:var(--text-body-sm)}
.sec-label{
  font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3);
  margin:var(--space-7) 0 var(--space-3);padding-bottom:var(--space-2);
  border-bottom:1px solid var(--border-1);
}

/* ---------- popover ---------- */
.pop{
  position:absolute;z-index:60;background:var(--surface-1);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);width:288px;max-width:calc(100vw - 24px);
  max-height:70vh;overflow:auto;padding:var(--space-3);
}
.pop h4{
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-3);font-weight:var(--weight-medium);padding:10px 8px 6px;
}
.pop input[type=search]{
  width:100%;height:36px;padding:0 10px;border:1px solid var(--border-2);
  border-radius:var(--radius-sm);background:var(--sunken);font-size:var(--text-body);
}
.prow{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-mono)}
.prow:hover{background:var(--surface-2)}
.prow input{accent-color:var(--info);width:15px;height:15px;flex:none}
.prow .n{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3)}
.prow select.r{margin-left:auto;max-width:56%}
/* Customize popover: accent swatch row + module toggle switches */
.pop .swrow{display:flex;gap:6px;align-items:center;padding:4px 8px 8px}
.tgl{
  margin-left:auto;width:30px;height:18px;border-radius:var(--radius-pill);flex:none;
  background:var(--surface-3);position:relative;
  transition:background var(--dur-med) var(--ease-out);
}
.tgl i{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--white-0);transition:left var(--dur-med) var(--ease-out);
}
.tgl.on{background:var(--ok)}
.tgl.on i{left:14px}
.pop footer{
  display:flex;justify-content:space-between;align-items:center;padding:8px;
  border-top:1px solid var(--border-1);margin-top:6px;
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
}

.scrim{
  position:fixed;inset:0;z-index:55;background:var(--scrim);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
}
/* toast: a surface pill with a tone dot (the mock's bottom-centre toast) */
.toast{
  position:fixed;left:50%;bottom:24px;
  transform:translate(-50%,10px);z-index:80;
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-1);
  padding:10px 18px 10px 14px;border-radius:var(--radius-pill);font-size:var(--text-mono);
  box-shadow:var(--shadow-3);opacity:0;
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);
  pointer-events:none;max-width:86vw;
}
.toast i{width:8px;height:8px;border-radius:2.5px;flex:none;background:var(--text-3)}
.toast[data-tone="ok"] i{background:var(--ok)}
.toast[data-tone="warn"] i{background:var(--warn)}
.toast[data-tone="danger"] i{background:var(--danger)}
.toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- mobile: the mock's floating glass tab bar ----------
   Liquid glass is legal here: the bar sits over the field gradient.
   New lives in the topbar pill; the FAB is gone. */
.pillnav{display:none}
@media (max-width:899px){
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .pillnav{
    display:flex;position:fixed;z-index:40;
    left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));
    border:1px solid var(--glass-border);
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--blur-glass-heavy);backdrop-filter:var(--blur-glass-heavy);
    box-shadow:var(--glass-highlight),var(--shadow-float);
    border-radius:var(--radius-pill);padding:6px;
  }
  .pillnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 0;border-radius:var(--radius-pill);
    font-size:10px;letter-spacing:.02em;color:var(--text-2);
  }
  .pillnav a.on{
    color:var(--text-1);
    background:color-mix(in oklab,var(--text-1) 10%,transparent);
  }
  .controls-in{flex-wrap:nowrap;gap:var(--space-2)}
  .controls-r{order:2;flex:none}
  .controls-l{order:1}
  /* the topbar pill is the New button on mobile */
  .controls-r [data-act="new"]{display:none}
  /* the grouping selects move into the view-options popover on mobile */
  .groupsel{display:none}
  .seg button{padding:0 10px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
  /* safety net: any control smaller than 16px zooms iOS on focus */
  input,select,textarea{font-size:var(--text-body)}
  .vrow .val input,.vrow .val select{font-size:var(--text-body)}
}

/* ---------- artifact mode -------------------------------------------------
   The claude.ai viewer sizes the artifact iframe to its full content height:
   the page itself never scrolls, so position:fixed and dvh are meaningless
   there (the tab bar "floats" mid-document). Chrome must live in the flow. */
html.artifact body{position:relative}
/* no viewport to pin to: the field becomes the page's closing glow, anchored
   to the very bottom of the document (px-capped so a long page can't stretch
   the radial into a smear) */
html.artifact body::before{
  position:absolute;top:auto;left:0;bottom:0;height:560px;opacity:.6;
}
html.artifact .pillnav{display:none}
/* no tab bar here, so no clearance for it either */
html.artifact main{padding-bottom:var(--space-8)}
html.artifact .controls-r [data-act="new"]{display:inline-flex}
/* ONE nav at each width in the artifact -- never both at once.
   >=900px: the sidebar (Alan's call, 2026-08-08 -- "I hate the menu up top,
   it should be sidebar plus collapse icon"). It can't be sticky chrome in a
   frame with no viewport, so it drops in-flow here instead of scrolling with
   the page -- still one clear rail, just not pinned.
   <900px: the in-flow artnav pill row (a sidebar would eat most of a phone
   screen; unchanged from the mobile treatment). */
html.artifact .side{position:static;height:auto;overflow-y:visible}
html.artifact .scrim{position:absolute;height:100%}
html.artifact .toast{
  position:absolute;top:130px;bottom:auto;
}
/* the drag ghost is fixed-positioned from client coords; in a frame that
   never scrolls those coords ARE document coords, so absolute is exact */
html.artifact .drag-ghost{position:absolute}
/* in-flow section nav painted under the topbar by JS */
.artnav{display:none}
html.artifact .artnav{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding:var(--space-2) max(var(--pad),env(safe-area-inset-left));
  border-bottom:1px solid var(--border-1);background:var(--bg-0);
}
html.artifact .artnav a{
  padding:7px 14px;border-radius:var(--radius-pill);
  font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-2);white-space:nowrap;
}
html.artifact .artnav a.on{background:var(--accent);color:var(--accent-text)}
/* AFTER the display:flex block above, or declaration order hands the win
   back to flex and both navs render at once (equal specificity) */
@media (min-width:900px){html.artifact .artnav{display:none}}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}