/* ============================================================================
   Channel pages. One skeleton, four channels. Every component here exists to
   carry a fact: what the channel gives us, what we can do with it, what we
   cannot, and what the surface actually looks like.
   ========================================================================== */

/* ---- hero role badges ---------------------------------------------------- */
.ch-roles{display:flex;flex-wrap:wrap;gap:.45rem}
.ch-role{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-pill);
  padding:.35rem .75rem;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  background:var(--bg-surface);border:1.5px solid var(--border-2);color:var(--fg-2)}
.ch-role.on{background:var(--cs);border-color:transparent;color:var(--cd)}
.ch-role i,.ch-role svg{width:14px;height:14px;flex:none}
.ch-role.off{border-style:dashed;color:var(--fg-3)}

.ch-mark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.ch-mark .bi{width:18px;height:18px;fill:var(--c);flex:none}

/* ---- the ledger: reads / writes / cannot --------------------------------- */
.ledger{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.ledger{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.led{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-xl);
  padding:clamp(1.1rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--sh-xs)}
.led.no{background:none;border-style:dashed;border-color:var(--border-2);box-shadow:none}
/* the guardrails column: present, not negated */
.led.soft{background:var(--bg-subtle);border-color:var(--border-2);box-shadow:none}
.led.soft .led-h .k{background:var(--bg-surface);color:var(--fg-2)}
.led.soft li::before{background:var(--fg-4)}
.led-h{display:flex;align-items:center;gap:.55rem}
.led-h .k{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--cs);color:var(--cd)}
.led-h .k svg{stroke:currentColor}
.led.no .led-h .k{background:var(--bg-subtle);color:var(--fg-3)}
.led-h .k svg,.led-h .k i{width:14px;height:14px}
.led-h b{font-size:var(--fs-lg);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.01em}
.led-h small{display:block;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-regular)}
.led ul{display:grid;gap:.6rem;list-style:none;margin:0;padding:0}
.led li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:.55rem;align-items:start;
  font-size:var(--fs-sm);line-height:1.45;color:var(--fg-2)}
.led li b{color:var(--fg-1);font-weight:var(--fw-bold)}
.led li .m{display:block;font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-3);margin-top:.1rem}
.led li::before{content:"";width:9px;height:9px;margin-top:.42em;border-radius:2px;
  background:var(--c-grad,var(--c));transform:rotate(12deg)}
.led.no li::before{background:none;border:1.5px solid var(--border-3);border-radius:2px;transform:none;
  width:10px;height:2px;margin-top:.62em;border-width:0 0 2px 0}
.led.no li{color:var(--fg-3)}
.led.no li b{color:var(--fg-2)}

/* ---- product surface panel ----------------------------------------------- */
.srf{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-2xl);
  overflow:hidden;box-shadow:var(--sh-md)}
.srf-bar{display:flex;align-items:center;gap:.55rem;padding:.65rem .85rem;
  border-bottom:1px solid var(--border-1);background:var(--neutral-50)}
.srf-bar .bi,.srf-bar .lucide{width:16px;height:16px;flex:none}
.srf-bar .bi{fill:var(--c)}
.srf-bar b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
.srf-bar .rt{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.srf-bar .rt i.d{width:6px;height:6px;border-radius:50%;background:var(--grass);display:block}
.srf-b{padding:clamp(.75rem,1.6vw,1rem)}
.srf-cap{display:grid;gap:.15rem;padding:.75rem .85rem;border-top:1px solid var(--border-1);
  background:var(--neutral-50)}
.srf-cap b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
.srf-cap span{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}

.srf-grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:940px){.srf-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- worked example: numbered beats -------------------------------------- */
.beats{display:grid;gap:.6rem;counter-reset:beat}
@media (min-width:820px){.beats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
.beat{display:grid;grid-template-columns:32px minmax(0,1fr);gap:.85rem;align-items:start;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);
  padding:.85rem .95rem}
.beat::before{counter-increment:beat;content:counter(beat,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:var(--fw-bold);color:var(--fg-1);
  background:var(--cs);border-radius:7px;height:26px;display:grid;place-items:center;letter-spacing:.02em}
.beat b{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.3}
.beat p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5;margin-top:.2rem}
.beat .ch{display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.beat .ch .bi{width:12px;height:12px;fill:currentColor}

/* ---- where it lands: four destinations ----------------------------------- */
.lands{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.lands{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.lands{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
.land{display:grid;gap:.4rem;align-content:start;padding-top:.9rem;border-top:2px solid var(--c)}
.land b{font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.01em}
.land p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5}
.land a{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--link)}

/* ---- sibling channel navigation ------------------------------------------ */
.chan-more{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.chan-more{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.cm{display:flex;align-items:center;gap:.7rem;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--r-lg);padding:.85rem .95rem;transition:border-color var(--t-base),transform var(--t-base)}
.cm:hover{border-color:var(--c);transform:translateY(-2px)}
.cm .bi{width:22px;height:22px;fill:var(--c);flex:none}
.cm .tx{min-width:0;flex:1}
.cm b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
.cm small{font-size:var(--fs-xs);color:var(--fg-3)}
.cm .ar{width:16px;height:16px;color:var(--fg-4);flex:none}

/* ============================================================================
   SURFACE INTERNALS. Each one is a real screen from the product, rebuilt in
   markup so it stays legible, themable and honest about its own sample data.
   ========================================================================== */

/* inbox: list + thread */
.ib{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:760px){.ib{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.ib-list{display:grid;gap:.3rem;align-content:start}
.ib-c{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.55rem;align-items:center;
  padding:.5rem;border-radius:var(--r-md);border:1px solid transparent}
.ib-c.on{background:var(--cs);border-color:var(--c)}
.ib-c .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:.625rem;font-weight:var(--fw-bold)}
.ib-c .tx{min-width:0}
.ib-c .tx b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-c .tx small{display:block;font-size:.6875rem;color:var(--fg-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-c .ow{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3)}
.ib-th{background:var(--bg-subtle);border-radius:var(--r-lg);padding:.7rem;display:grid;gap:.5rem;align-content:start}
.ib-b{max-width:82%;border-radius:12px;padding:.5rem .65rem;font-size:var(--fs-xs);line-height:1.45}
.ib-b.in{background:var(--bg-surface);border:1px solid var(--border-1);color:var(--fg-2);justify-self:start}
.ib-b.out{background:var(--grass-soft);color:#0B3B22;justify-self:end}
.ib-b time{display:block;font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3);margin-top:.2rem}
.ib-note{border-left:3px solid var(--sun);background:var(--sun-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.45rem .6rem;font-size:var(--fs-xs);color:#3A2E00;line-height:1.4}
.ib-note b{font-weight:var(--fw-bold)}
.ib-meta{display:flex;flex-wrap:wrap;gap:.3rem;padding-top:.15rem}
.ib-meta span{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:.15rem .45rem;color:var(--fg-2)}

/* template library */
.tpl-lib{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.tpl-lib{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tpl-i{border:1px solid var(--border-1);border-radius:var(--r-md);padding:.6rem .7rem;display:grid;gap:.35rem;
  background:var(--bg-surface)}
.tpl-i .r1{display:flex;align-items:center;gap:.4rem}
.tpl-i .nm{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tpl-i .st{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.12rem .45rem;font-weight:var(--fw-bold);flex:none}
.tpl-i .st.ok{background:var(--grass-soft);color:var(--grass-deep)}
.tpl-i .st.wait{background:var(--sun-soft);color:var(--sun-deep)}
.tpl-i p{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.45}
.tpl-i .var{background:var(--sun-soft);color:var(--sun-deep);border-radius:4px;padding:0 3px;
  font-family:var(--font-mono);font-size:.9em}
.tpl-i .cat{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3)}

/* broadcast launch gates + pacing */
.gates{display:grid;gap:.4rem}
.gate{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:.55rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.45rem .6rem;font-size:var(--fs-xs);color:var(--fg-2)}
.gate .tick{width:18px;height:18px;border-radius:50%;background:var(--grass-soft);color:var(--grass-deep);
  display:grid;place-items:center}
.gate .tick svg{width:11px;height:11px;stroke:currentColor;stroke-width:3.2;fill:none}
.gate.hold .tick{background:var(--sun-soft);color:var(--sun-deep)}
.gate b{color:var(--fg-1);font-weight:var(--fw-bold)}
.gate .v{font-family:var(--font-mono);font-size:.625rem;color:var(--fg-3);white-space:nowrap}
.pace-meter{display:grid;gap:.4rem;background:var(--bg-subtle);border-radius:var(--r-md);padding:.6rem .7rem}
.pace-meter .hd{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.pace-meter .hd b{color:var(--fg-1)}
.pace-bar{height:8px;border-radius:99px;background:var(--border-2);position:relative}
.pace-bar i{display:block;height:100%;border-radius:99px;background:var(--grass);width:var(--w,0%)}
/* pace-cap, not cap: .cap is already the capability card on platform.html and
   the tabpanel on index.html, and its tile treatment was overriding this to a
   42px grid square. Sizing is explicit so it cannot be inherited again. */
.pace-bar .pace-cap{position:absolute;top:-3px;bottom:-3px;left:var(--cap,80%);
  width:2px;height:auto;min-width:0;padding:0;display:block;border-radius:1px;
  background:var(--coral-deep)}
.pace-note{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.45}

/* content grid with per-post metrics */
.cgrid{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cg{border:1px solid var(--border-1);border-radius:var(--r-md);overflow:hidden;background:var(--bg-surface)}
/* .th is a <span>: without display:block it stays a non-replaced inline box,
   aspect-ratio has no effect, and the img sets the height at its natural
   ratio, pushing the metrics row past .cg's overflow boundary. */
.cg .th{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-subtle)}
.cg .th img{width:100%;height:100%;object-fit:cover;display:block}
.cg .th .kind{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.72);color:#fff;
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.1rem .3rem;border-radius:3px}
.cg .mt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem .4rem;padding:.45rem .5rem}
.cg .mt div{min-width:0}
.cg .mt b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-extra);color:var(--fg-1);
  letter-spacing:-.01em;line-height:1.1}
.cg .mt small{display:block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-3)}

/* captured comment stream */
.stream{display:grid;gap:.4rem}
.sc{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.55rem;align-items:start;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.5rem .6rem}
.sc .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:0.6875rem;font-weight:var(--fw-bold)}
.sc .tx{min-width:0;font-size:var(--fs-xs);line-height:1.45;color:var(--fg-2)}
.sc .tx b{color:var(--fg-1);font-weight:var(--fw-bold);margin-right:.3rem}
.sc .fl{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.sc .fl span{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.1rem .4rem;font-weight:var(--fw-bold)}
.sc .fl .st{background:var(--cs);color:var(--cd)}
.sc .fl .ct{background:var(--violet-soft);color:var(--violet-deep)}
.sc .fl .no{background:var(--bg-surface);border:1px solid var(--border-2);color:var(--fg-3)}

/* 28-day trend */
.trend{display:grid;gap:.55rem}
.trend .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem}
.trend .hd b{font-size:var(--fs-2xl);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.03em;line-height:1}
.trend .hd small{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3)}
.trend .hd .dl{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--grass-deep)}
.tbars{display:flex;align-items:flex-end;gap:2px;height:62px}
.tbars i{flex:1;border-radius:2px 2px 0 0;background:var(--cs);display:block;height:var(--h,20%);
  transform-origin:bottom}
.tbars i.on{background:var(--c)}
/* the site drives reveals off the scroll timeline, not a class */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tbars i{animation:chBar both linear;animation-timeline:view();
      animation-range:entry calc(6% + var(--i,0) * 1.6%) entry calc(46% + var(--i,0) * 1.6%)}
  }
}
@keyframes chBar{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
.tscale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.6875rem;
  color:var(--fg-3);letter-spacing:.06em}

/* review store */
.rvs{display:grid;gap:.4rem}
.rvw{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.55rem;background:var(--bg-subtle);
  border-radius:var(--r-md);padding:.55rem .65rem}
.rvw .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:0.6875rem;font-weight:var(--fw-bold)}
.rvw .tx{min-width:0}
.rvw .r1{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.rvw .r1 b{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.rvw .st{color:var(--sun-star);font-size:.6875rem;letter-spacing:.06em}
.rvw .dt{margin-left:auto;font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3)}
.rvw p{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.45;margin-top:.2rem}
.rvw .fl{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
.rvw .fl span{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:.1rem .4rem;color:var(--fg-2)}

/* keyword table */
.kw{display:grid;gap:2px}
.kw .r{display:grid;grid-template-columns:minmax(0,1fr) 46px 58px;gap:.5rem;align-items:center;
  padding:.4rem .55rem;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.kw .r.h{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);padding-bottom:.2rem}
.kw .r:nth-child(even){background:var(--bg-subtle)}
.kw .q{color:var(--fg-1);font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw .n{font-family:var(--font-mono);color:var(--fg-2);text-align:right}
.kw .sp{height:14px}
.kw .sp svg{width:100%;height:100%;display:block;color:var(--c)}

/* metric strip */
.mstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
@media (min-width:520px){.mstrip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mstrip div{background:var(--bg-subtle);border-radius:var(--r-md);padding:.55rem .6rem}
.mstrip b{display:block;font-size:var(--fs-xl);font-weight:var(--fw-extra);color:var(--fg-1);
  letter-spacing:-.03em;line-height:1.1}
.mstrip small{display:block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);margin-top:.1rem}

/* page post with sealed thumbnail */
.fbp{display:grid;gap:.5rem}
.fbp .hd{display:flex;align-items:center;gap:.5rem}
.fbp .hd .av{width:30px;height:30px;border-radius:50%;background:var(--ch-fb-deep);color:#fff;
  display:grid;place-items:center;font-size:.625rem;font-weight:var(--fw-bold);flex:none}
.fbp .hd b{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);display:block}
.fbp .hd small{font-size:.625rem;color:var(--fg-3)}
.fbp .bd{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.5}
.fbp .im{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9}
.fbp .im img{width:100%;height:100%;object-fit:cover;display:block}
.fbp .seal{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:.25rem;
  background:rgba(16,16,18,.82);color:#fff;font-family:var(--font-mono);font-size:0.625rem;
  letter-spacing:.07em;text-transform:uppercase;padding:.15rem .4rem;border-radius:4px}
.fbp .seal svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.6;fill:none}

/* dark theme */
:root[data-theme="dark"] .srf-bar,:root[data-theme="dark"] .srf-cap{background:var(--bg-subtle)}
:root[data-theme="dark"] .ib-b.out{background:#123B27;color:#DCF8E6}
:root[data-theme="dark"] .ib-note{background:#3A2E00;color:#FFF3CC;border-left-color:var(--sun)}
:root[data-theme="dark"] .cg .mt b,:root[data-theme="dark"] .beat b{color:var(--fg-1)}

@media (prefers-reduced-motion:reduce){
  .tbars i{transform:scaleY(1);transition:none}
  .cm:hover{transform:none}
}

/* ============================================================================
   WRITE AFFORDANCES. The surfaces have to show the capability the page claims,
   not a caption asserting it.
   ========================================================================== */

/* composer: caption, media, product tags, publish or schedule */
.cmp{display:grid;gap:.5rem;background:var(--bg-subtle);border-radius:var(--r-md);padding:.6rem}
.cmp .fld{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:.5rem .6rem;font-size:var(--fs-xs);color:var(--fg-3);line-height:1.45}
.cmp .fld b{color:var(--fg-1);font-weight:var(--fw-semibold)}
.cmp .car{display:inline-block;width:1.5px;height:.85em;background:var(--fg-1);vertical-align:-1px;margin-left:1px;
  animation:cmpCar 1.05s steps(1) infinite}
@keyframes cmpCar{0%,55%{opacity:1}56%,100%{opacity:0}}
.cmp .row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.cmp .chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.28rem .6rem;
  font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-2);white-space:nowrap}
.cmp .chip.tag{background:var(--cs);border-color:transparent;color:var(--cd)}
.cmp .chip svg,.cmp .chip i{width:11px;height:11px;flex:none}
.cmp .go{margin-left:auto;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:.3rem .75rem;font-size:.625rem;font-weight:var(--fw-extra);white-space:nowrap}
.cmp .thumbs{display:flex;gap:.3rem}
.cmp .thumbs img{width:36px;height:36px;border-radius:6px;object-fit:cover;display:block}

/* a reply drafted by Auto Pilot, waiting on a person */
.draft{border:1.5px solid var(--violet);background:var(--violet-soft);border-radius:var(--r-md);
  padding:.5rem .6rem;display:grid;gap:.4rem;margin-top:.45rem}
.draft .lb{display:flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:0.625rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--violet-deep);font-weight:var(--fw-bold)}
.draft .lb svg,.draft .lb i{width:10px;height:10px}
.draft p{font-size:var(--fs-xs);color:#241247;line-height:1.45}
.draft .acts{display:flex;flex-wrap:wrap;gap:.3rem}
.draft .acts span{border-radius:var(--r-pill);padding:.24rem .6rem;font-size:0.6875rem;font-weight:var(--fw-extra)}
.draft .acts .ok{background:var(--ink);color:#fff}
.draft .acts .alt{background:var(--bg-surface);border:1px solid var(--border-2);color:var(--fg-2);font-weight:var(--fw-bold)}

/* moderation controls on a captured comment */
.mod{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.mod span{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--border-2);
  border-radius:var(--r-pill);padding:.18rem .5rem;font-size:0.625rem;font-weight:var(--fw-bold);
  color:var(--fg-2);background:var(--bg-surface);white-space:nowrap}
.mod span svg,.mod span i{width:9px;height:9px;flex:none}
.mod span.dz{color:var(--coral-deep)}

/* one inbox: the channel filter and the per-conversation channel dot */
.ib-filt{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;margin-bottom:.45rem;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
.ib-filt::-webkit-scrollbar{display:none}
.ib-filt span{flex:none;display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--border-2);
  border-radius:var(--r-pill);padding:.22rem .55rem;font-size:0.6875rem;font-weight:var(--fw-bold);
  color:var(--fg-2);background:var(--bg-surface);white-space:nowrap}
.ib-filt span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ib-filt span i.dot{width:6px;height:6px;border-radius:50%;display:block;flex:none}
.ib-c .cdot{width:7px;height:7px;border-radius:50%;display:block;flex:none;margin-left:auto}
.ib-c .tx{display:flex;align-items:center;gap:.4rem}
.ib-c .tx .t2{min-width:0;flex:1}

/* a reply composer under a thread */
.ib-send{display:flex;align-items:center;gap:.4rem;background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--r-pill);padding:.35rem .35rem .35rem .7rem;font-size:var(--fs-xs);color:var(--fg-3)}
.ib-send .go{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none}
.ib-send .go svg{width:12px;height:12px;fill:currentColor}

/* sentiment score on a review */
.senti{display:inline-flex;align-items:center;gap:.3rem;border-radius:var(--r-pill);padding:.12rem .45rem;
  font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold)}
.senti.pos{background:var(--grass-soft);color:var(--grass-deep)}
.senti.neu{background:var(--bg-subtle);color:var(--fg-2)}
.senti.neg{background:var(--coral-soft);color:var(--coral-text)}

:root[data-theme="dark"] .draft{background:rgba(139,92,246,.16)}
:root[data-theme="dark"] .draft p{color:#EDE7FF}
@media (prefers-reduced-motion:reduce){.cmp .car{animation:none}}

/* dark: thread timestamps and list previews were tuned against a light bubble */
:root[data-theme="dark"] .ib-b time,:root[data-theme="dark"] .ib-c .tx small{color:#9DAAB3}
:root[data-theme="dark"] .ib-b.in{background:#1C222A;border-color:#2C333D;color:#D7DEE4}
:root[data-theme="dark"] .srf-bar .rt,:root[data-theme="dark"] .trend .hd small{color:#98A4AD}
:root[data-theme="dark"] .trend .hd .dl{color:var(--grass-deep)}
:root[data-theme="dark"] .fbp .hd .av{background:var(--ch-fb-deep);color:#fff}

/* ============================================================================
   EMAIL AND YOUTUBE SURFACES
   ========================================================================== */

/* an email as it arrives, with the plain-text alternative one tap away */
.mail{border:1px solid var(--border-1);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-surface)}
.mail-tabs{display:flex;gap:.25rem;padding:.45rem .55rem;border-bottom:1px solid var(--border-1);background:var(--neutral-50)}
.mail-tabs span{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.2rem .55rem;font-weight:var(--fw-bold);color:var(--fg-3)}
.mail-tabs span.on{background:var(--ink);color:#fff}
.mail-h{display:grid;gap:.15rem;padding:.6rem .7rem;border-bottom:1px solid var(--border-1)}
.mail-h .sub{font-size:var(--fs-sm);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.01em;line-height:1.3}
.mail-h .pre{font-size:var(--fs-xs);color:var(--fg-3);line-height:1.4}
.mail-h .fr{font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-4);letter-spacing:.05em;margin-top:.15rem}
.mail-b{padding:.7rem;display:grid;gap:.5rem}
.mail-b img{width:100%;border-radius:var(--r-sm);display:block;aspect-ratio:16/7;object-fit:cover}
.mail-b p{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.55}
.mail-b .cta{justify-self:start;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:.32rem .8rem;font-size:.625rem;font-weight:var(--fw-extra)}
.mail-f{border-top:1px dashed var(--border-2);background:var(--bg-subtle);padding:.55rem .7rem;
  display:grid;gap:.25rem}
.mail-f small{font-size:0.6875rem;color:var(--fg-3);line-height:1.45}
.mail-f .lk{font-size:0.6875rem;font-weight:var(--fw-bold);color:var(--link);text-decoration:underline}
.mail-f .lock{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-mono);
  font-size:0.625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-4)}
.mail-f .lock svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.4;fill:none}
.mail-plain{padding:.7rem;font-family:var(--font-mono);font-size:.625rem;line-height:1.7;color:var(--fg-2);
  white-space:pre-wrap}

/* suppression, shown as the cross-channel fact it is */
.supp{display:grid;gap:.35rem}
.supp .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.45rem .6rem}
.supp .r b{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);display:block}
.supp .r small{font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3)}
.supp .dots{display:flex;gap:.2rem}
.supp .dots i{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;flex:none}
.supp .dots i svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;fill:none}

/* one journey, two channels. Named .jseq, not .jstep: that name already belongs
   to the industries step list in pages.css, whose grid tracks were leaking in
   and pushing these connectors into a phantom second column. */
.jseq{display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:.35rem}
.jseq .s{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:.55rem;align-items:center;
  border:1px solid var(--border-1);border-radius:var(--r-md);padding:.5rem .6rem;background:var(--bg-surface)}
.jseq .s .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none}
.jseq .s .ic svg,.jseq .s .ic i{width:12px;height:12px}
.jseq .s b{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);display:block}
.jseq .s small{font-size:0.6875rem;color:var(--fg-3)}
.jseq .s .on{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-4);white-space:nowrap}
.jseq .lnk{height:.6rem;width:2px;justify-self:start;background:var(--border-3);border-radius:2px;margin-left:11px}

/* video library with the numbers YouTube reports */
.vids{display:grid;gap:.4rem}
.vid{display:grid;grid-template-columns:74px minmax(0,1fr);gap:.6rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.45rem;overflow:hidden}
.vid .th{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/9}
.vid .th img{width:100%;height:100%;object-fit:cover;display:block}
.vid .th .dur{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.8);color:#fff;
  font-family:var(--font-mono);font-size:0.625rem;padding:.05rem .2rem;border-radius:2px}
.vid .tx{min-width:0}
.vid .tx b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid .mm{display:flex;flex-wrap:wrap;gap:.15rem .6rem;margin-top:.2rem}
.vid .mm span{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.05em;color:var(--fg-3);white-space:nowrap}
.vid .mm span b{display:inline;font-size:.625rem;color:var(--fg-1);font-weight:var(--fw-extra)}

/* the weekly view: every channel in one table, which is YouTube's whole point */
.week{display:grid;gap:2px}
.week .r{display:grid;grid-template-columns:20px minmax(0,1fr) 52px 56px;gap:.5rem;align-items:center;
  padding:.4rem .5rem;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.week .r.h{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.week .r:nth-child(even){background:var(--bg-subtle)}
.week .r .bi{width:14px;height:14px}
.week .q{color:var(--fg-1);font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.week .n{font-family:var(--font-mono);color:var(--fg-2);text-align:right}
.week .n.up{color:var(--grass-deep);font-weight:var(--fw-bold)}
.week .r.tot{border-top:1.5px solid var(--border-2);margin-top:.15rem;font-weight:var(--fw-extra)}
.week .r.tot .q,.week .r.tot .n{color:var(--fg-1);font-weight:var(--fw-extra)}

:root[data-theme="dark"] .mail-tabs,:root[data-theme="dark"] .mail-plain{background:var(--bg-subtle)}

/* use-case cards borrow .cm, which expects a filled brand mark; a lucide glyph
   is stroked instead */
.cm .lucide{width:22px;height:22px;color:var(--c);flex:none}

/* use-case blocks: .land plus an icon and a trigger line */
.land .uc-i{width:20px;height:20px;color:var(--c)}
.land .uc-t{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-4)}

/* link out of a tab panel to that industry's own page */
.indmore{align-self:start;margin-top:.6rem}
/* The industry detail pages reuse .ind-body outside .tabpanel.ind, where the
   phone tier's width guards were scoped. Guard the grid child itself so the
   crew panel cannot exceed its track at any width. */
.ind-body>.ind-side{min-width:0;max-width:100%}
.ind-side .ind-crew{max-width:100%}
.ind-side .ind-crew svg{max-width:100%;height:auto}

/* ============================================================================
   INDUSTRY DETAIL SURFACES. The channel pages already own .srf, .ib, .gates,
   .rvs, .kw, .trend and .tpl-lib; these are the pieces those pages did not
   need: the tool chip on a journey step, a contact record, an audit chain and
   a journey-flow canvas that is not welded to the film's absolute layout.
   ========================================================================== */

/* tool named on a journey step, beside the channel chip */
.jstep .tools{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.jstep .tool{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-subtle);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.2rem .5rem;
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-2);white-space:nowrap}
.jstep .tool i,.jstep .tool svg{width:10px;height:10px;flex:none}

/* contact record: identity, consent, and the channels it has joined */
.crec{display:grid;gap:.55rem}
.crec-id{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.6rem;align-items:center}
.crec-id .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:.75rem;font-weight:var(--fw-bold)}
.crec-id b{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.2}
.crec-id small{display:block;font-family:var(--font-mono);font-size:.625rem;color:var(--fg-3)}
.crec-rows{display:grid;gap:2px}
.crec-r{display:grid;grid-template-columns:88px minmax(0,1fr);gap:.5rem;align-items:baseline;
  padding:.35rem .5rem;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.crec-r:nth-child(odd){background:var(--bg-subtle)}
.crec-r .k{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.crec-r .v{color:var(--fg-1);font-weight:var(--fw-semibold);min-width:0}
.crec-r .v em{font-style:normal;color:var(--fg-3);font-weight:var(--fw-regular)}
.crec-ch{display:flex;flex-wrap:wrap;gap:.3rem}
.crec-ch span{display:inline-flex;align-items:center;gap:.3rem;border-radius:var(--r-pill);
  padding:.18rem .5rem;font-size:0.6875rem;font-weight:var(--fw-bold);background:var(--bg-surface);
  border:1px solid var(--border-2);color:var(--fg-2)}
.crec-ch span .bi{width:11px;height:11px}

/* hash-chained audit rows, standalone from the film's height-keyed version */
.alog{display:grid;gap:.3rem}
.alog-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-sm);padding:.4rem .55rem}
.alog-r .t{min-width:0;font-size:var(--fs-xs);color:var(--fg-2);line-height:1.4}
.alog-r .t b{color:var(--fg-1);font-weight:var(--fw-bold)}
.alog-r .h{font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3);white-space:nowrap}
.alog-ok{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;
  background:var(--grass-soft);color:var(--grass-deep);border-radius:var(--r-pill);
  padding:.22rem .55rem;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:var(--fw-bold)}
.alog-ok svg{width:10px;height:10px;stroke:currentColor;stroke-width:3;fill:none}

/* journey flow: trigger, condition, branches. Vertical first, never absolute. */
.jflow{display:grid;gap:.5rem;background:var(--bg-subtle);border-radius:var(--r-lg);padding:.8rem}
.jfn{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.55rem;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);
  padding:.5rem .6rem;position:relative}
.jfn .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--cs);color:var(--cd)}
.jfn .ic svg,.jfn .ic i{width:13px;height:13px}
.jfn .tx{min-width:0}
.jfn b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.25}
.jfn small{display:block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-3);margin-top:.1rem}
.jfn.trig{border-color:var(--c);border-width:1.5px}
.jfn.wait{background:none;border-style:dashed}
.jf-split{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:520px){.jf-split{grid-template-columns:1fr 1fr}}
.jf-wire{justify-self:center;width:2px;height:.6rem;background:var(--border-3);border-radius:2px}
.jf-note{font-size:var(--fs-xs);color:var(--fg-2);line-height:1.45;padding-top:.15rem}
.jf-note b{color:var(--fg-1);font-weight:var(--fw-bold)}

/* what changed: a before and after pair */
.baf{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.baf{grid-template-columns:1fr 1fr;gap:1rem}}
.baf-c{border-radius:var(--r-lg);padding:.9rem 1rem;display:grid;gap:.5rem;align-content:start}
.baf-c.was{background:none;border:1px dashed var(--border-2)}
.baf-c.now{background:var(--bg-surface);border:1px solid var(--border-1);box-shadow:var(--sh-xs)}
.baf-c h4{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);font-weight:var(--fw-semibold)}
.baf-c.now h4{color:var(--cd)}
.baf-c ul{display:grid;gap:.45rem;list-style:none;margin:0;padding:0}
.baf-c li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.5rem;align-items:start;
  font-size:var(--fs-sm);line-height:1.45;color:var(--fg-2)}
.baf-c.was li::before{content:"";width:10px;height:2px;background:var(--border-3);margin-top:.6em}
.baf-c.now li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c);
  transform:rotate(12deg);margin-top:.42em}
.baf-c.now li b{color:var(--fg-1);font-weight:var(--fw-bold)}

:root[data-theme="dark"] .baf-c.now{background:var(--bg-surface)}

/* A brand mark inside a tag-line is a flex row, the same as .ch-mark, .cm and
   .jstep .where. styles.css sets svg{display:block}, so inline vertical-align
   could never have worked here. */
.cap .tag-line{display:inline-flex;align-items:center;gap:.3rem}
.cap .tag-line svg{width:12px;height:12px;flex:none}

/* ============================================================================
   PILL SIZING. A flex row defaults to align-items:stretch, so a chip in a row
   next to a taller sibling grew to that sibling's height and rendered as a
   lozenge with its text stuck at the top. Every chip row pins its own height.
   ========================================================================== */
.sc .tx{display:block}
.sc .fl,.rvw .fl,.mod,.crec-ch,.ib-meta,.bc-pace,.ch-roles,.jstep .tools{align-items:flex-start}
.sc .fl>span,.rvw .fl>span,.mod>span,.crec-ch>span,.ib-meta>span,
.jstep .tools>span,.ch-roles>span{align-self:flex-start;flex:0 0 auto}
/* a chip is one line of text plus its padding, never a stretched block */
.sc .fl>span,.rvw .fl>span,.crec-ch>span,.ib-meta>span{
  display:inline-flex;align-items:center;min-height:0;line-height:1.5;white-space:nowrap}