/* per-view layout: grid, feed, emails, campaigns, calendar, board, sheet, home */

/* ---------- the uniform grid (the mock; replaced the masonry) ----------
   auto-fill columns sized by the S/M/L density seg; media heights fixed per
   density so every card is the same height. Phones keep the fixed two-up. */
.gridhead{display:flex;align-items:center;margin:0 2px var(--space-3)}
.gcount{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.gridhead .dens{margin-left:auto}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid[data-density="s"]{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.grid[data-density="l"]{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid .card .media,.grid .card .media.ph{aspect-ratio:auto;height:150px}
.grid[data-density="s"] .card .media,.grid[data-density="s"] .card .media.ph{height:110px}
.grid[data-density="l"] .card .media,.grid[data-density="l"] .card .media.ph{height:190px}
@media (max-width:639px){
  .grid,.grid[data-density="s"],.grid[data-density="l"]{
    --gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid .card .media,.grid .card .media.ph{height:120px}
}

/* ---------- feed: one centred column (the mock) ---------- */
.feed{display:flex;flex-direction:column;gap:var(--space-4);max-width:520px;margin:0 auto;width:100%}

/* ---------- emails ----------
   Row anatomy lives in 3-cards.css (the grouped ListCard). Inside a campaign
   the group hugs its section instead of centering at container width. */
.csec .elist{max-width:none}

/* ---------- campaigns ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap)}
/* campaign detail: back link, big dream hero with the glass name card,
   meta row, then the record sections (the mock's Campaign detail screen) */
.cdetail{max-width:980px;margin:0 auto}
.backlink{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--text-mono);
  color:var(--text-2);margin-bottom:var(--space-4);
}
.backlink:hover{color:var(--text-1)}
.cdhero{
  position:relative;height:190px;border-radius:var(--radius-lg);
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
  border:1px solid var(--border-1);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  scroll-margin-top:calc(var(--topbar-h) + var(--controls-h) + var(--space-5));
}
.cdmeta{
  display:flex;align-items:center;gap:12px;padding:12px 4px 0;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-2);
}
.cdmeta .sp{flex:1}
.hlink{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2)}
.hlink:hover{color:var(--text-1)}
.dashbox{
  border:1px dashed var(--border-2);border-radius:var(--radius-lg);
  padding:22px;text-align:center;font-size:var(--text-caption);color:var(--text-3);
}
.assetnote{margin-top:var(--space-3);font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
@media (max-width:639px){.cdhero{height:150px}.cdhero .glasscard.lg .gn{font-size:15px}}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--space-3)}
.assets figure{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:none;
}
[data-theme="light"] .assets figure{box-shadow:var(--shadow-1)}
.assets img{width:100%;aspect-ratio:1;object-fit:cover}
.assets figcaption{
  padding:7px;font-family:var(--font-mono);font-size:9px;color:var(--text-3);
  display:flex;gap:6px;justify-content:center;
}
/* Inside a campaign the item count is small and arbitrary (often exactly one),
   so a fixed column count either strands a lone card at 50% width beside a
   void or blows it up to a full-bleed hero. auto-fill sizes the CARD instead
   of the grid: one post looks like one card, not a banner. */
.csec .grid{grid-template-columns:repeat(auto-fill,minmax(240px,300px))}
@media (max-width:639px){.csec .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- calendar (the mock's month card) ---------- */
/* the in-view month header: serif month, round steppers, Today, mono summary */
.calhead{display:flex;align-items:center;gap:12px;margin:0 2px var(--space-4);flex-wrap:wrap}
.calhead h2{
  font-family:var(--font-display);font-size:24px;font-weight:var(--weight-display);
  letter-spacing:-.02em;margin:0;
}
.stepper{display:inline-flex;border:1px solid var(--border-1);border-radius:var(--radius-pill);overflow:hidden}
.stepper button{padding:6px 10px;color:var(--text-2);display:flex;cursor:pointer}
.stepper button:hover{background:var(--surface-2);color:var(--text-1)}
.today-btn{
  border:1px solid var(--border-2);border-radius:var(--radius-pill);
  padding:5px 15px;font-size:12.5px;color:var(--text-1);cursor:pointer;
}
.today-btn:hover{background:var(--surface-2)}
.calsum{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3)}
/* one card, hairline-divided cells (replaces the 1px-gap trick) */
.calgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  background:var(--bg-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-float);
}
.dow{
  padding:10px 12px 8px;text-align:right;border-bottom:1px solid var(--border-1);
  font-family:var(--font-mono);font-size:var(--text-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
/* natural row height: the page scrolls. minmax keeps empty weeks alive. */
.cell{
  background:transparent;min-height:104px;padding:8px;min-width:0;
  border-bottom:1px solid var(--border-1);border-right:1px solid var(--border-1);
  display:flex;flex-direction:column;gap:var(--space-1);
}
/* the 7 .dow headers precede the cells, so column 7 = every 7th child */
.cell:nth-child(7n){border-right:0}
.cell:nth-last-child(-n+7){border-bottom:0}
.cell.wknd{background:color-mix(in oklab,var(--text-1) 2%,transparent)}
.cell.out .n{color:var(--text-3);opacity:.55}
.cell .n{
  align-self:flex-end;flex:none;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);cursor:pointer;
}
.cell .n:hover{background:var(--surface-2);color:var(--text-1)}
/* chassis, not a hue -- 18.4:1 either theme */
.cell.today .n{background:var(--accent);color:var(--accent-text)}
.cell.drop{outline:2px dashed var(--awol-operations);outline-offset:-2px}
/* event chip: campaign-hue wash + hue dot (email events keep the green dot
   via the re-scoped data-fn on .cd). Rings use outline: .cell clips. */
.cchip{
  display:flex;align-items:center;gap:6px;padding:3.5px 7px;min-width:0;
  border-radius:7px;cursor:pointer;overflow:hidden;white-space:nowrap;
  background:var(--c-dim,var(--surface-2));
  transition:filter var(--dur-fast) var(--ease-out);
}
.cchip:hover{filter:brightness(1.25)}
[data-theme="light"] .cchip{background:var(--c-tint,var(--surface-2))}
[data-theme="light"] .cchip:hover{filter:brightness(.97)}
.cchip:focus-visible{outline:2px solid var(--awol-operations);outline-offset:-2px;box-shadow:none}
.cchip .cd{width:6px;height:6px;border-radius:2px;flex:none;background:var(--c,var(--text-3))}
.cchip .ct{
  overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
  font-size:11px;font-weight:var(--weight-medium);color:var(--text-1);
}
.cchip .cw{display:none;font-family:var(--font-mono);font-size:9px;color:var(--text-1);opacity:.75;flex:none}
@media (min-width:1180px){.cchip .cw{display:inline}}
.more{font-size:var(--text-eyebrow);color:var(--text-2);cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs)}
.more:hover{background:var(--surface-2)}
/* mobile: date strip + agenda */
.strip{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.sday{
  flex:none;width:56px;height:64px;border-radius:var(--radius-md);
  background:var(--surface-1);border:1px solid var(--border-1);box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  scroll-snap-align:center;cursor:pointer;
}
[data-theme="light"] .sday{box-shadow:var(--shadow-1)}
.sday .w{font-family:var(--font-mono);font-size:9px;color:var(--text-3);text-transform:uppercase}
.sday .d{font-size:17px;font-weight:var(--weight-semibold)}
.sday.on{background:var(--accent);color:var(--accent-text);border-color:transparent}
.sday.on .w{color:color-mix(in oklab,var(--accent-text) 60%,transparent)}
.sday .pip{width:4px;height:4px;border-radius:1.5px;background:var(--accent)}
.sday.on .pip{background:var(--accent-text)}
.agenda{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-3)}
.acard{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-left:3px solid var(--c,var(--border-2));
  border-radius:var(--radius-md);box-shadow:none;
  padding:var(--space-3) var(--space-4);cursor:pointer;
  display:flex;align-items:center;gap:var(--space-3);
}
[data-theme="light"] .acard{box-shadow:var(--shadow-1)}
.acard .ath{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex:none;background:var(--sunken)}
.acard .ath.ph{width:44px;height:44px;font-size:8px}
.acard .ab{flex:1;min-width:0}
.acard .t{font-size:var(--text-body-sm);font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .m{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);margin-top:3px}
.acard .m::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:2px;
  background:var(--sc,var(--text-3));margin-right:var(--space-2);vertical-align:middle;
}

/* ---------- board (the mock: open columns, hairline separators) ---------- */
/* max-width rides --n so ONE populated column (every empty one is hidden)
   reads as a column, not a full-bleed banner */
.board{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;
  align-items:stretch;overflow-x:auto;max-width:calc(var(--n) * 440px);
}
.board.wide{grid-template-columns:repeat(var(--n),280px)}
.col{
  background:transparent;border:0;border-right:1px solid var(--border-1);
  border-radius:0;display:flex;flex-direction:column;min-width:0;
  padding:0 var(--space-3);
  max-height:calc(100vh - var(--topbar-h) - var(--controls-h) - 96px);
}
.col:first-child{padding-left:0}
.col:last-child{border-right:0;padding-right:0}
.colhead{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px var(--space-2)}
.colhead .cn{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--weight-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.colhead .cc{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
}
.colbody{display:flex;flex-direction:column;gap:10px;padding:var(--space-1) 2px var(--space-3);overflow-y:auto;overscroll-behavior:contain;min-height:60px;-webkit-overflow-scrolling:touch}
.col.drop{outline:2px dashed var(--awol-operations);outline-offset:-2px}
.matrix{display:grid;gap:var(--space-3)}
.mrow{display:grid;grid-template-columns:132px 1fr;gap:var(--space-3);align-items:start}
.mlabel{
  position:sticky;left:0;font-family:var(--font-mono);font-size:var(--text-eyebrow);
  color:var(--text-2);text-transform:uppercase;letter-spacing:var(--tracking-caps);padding-top:var(--space-3);
}
@media (max-width:899px){
  /* 74vw, not 82: the next column has to visibly peek or the board reads as a
     single broken column -- especially when the first one (Idea) is empty. */
  .board,.board.wide{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74vw;overflow-x:auto;scroll-snap-type:x mandatory}
  .col{max-height:none}
  .board .col{scroll-snap-align:start}
  .mrow{grid-template-columns:1fr}
  .mlabel{padding-top:0}
}

/* ---------- detail sheet -- the kit's SheetCard --------------------------
   View mode presents the record (hero + serif title + read-only box +
   grouped rows); Edit mode is the form. The subtree wears the light chassis
   (JS sets data-theme="light" on #sheet, per the compose mockup). */
.sheet{
  position:fixed;z-index:60;background:var(--surface-1);display:flex;flex-direction:column;
  top:0;right:0;bottom:0;width:440px;max-width:100vw;border-left:1px solid var(--border-1);
  box-shadow:var(--shadow-3);
  /* the subtree flips to the light chassis: colour must resolve INSIDE the
     flip, not inherit the dark body's near-white (invisible on white) */
  color:var(--text-1);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.sheet.on{transform:none}
/* desktop: a centred 560px modal over the blurred scrim (the mock) */
@media (min-width:900px){
  .sheet{
    left:50%;top:50%;right:auto;bottom:auto;width:560px;
    max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);
    border:1px solid var(--border-1);border-radius:var(--radius-xl);overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.35),0 32px 80px rgba(0,0,0,.55);
    transform:translate(-50%,-50%) translateY(8px);opacity:0;
    transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);
  }
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
}
/* --- view mode internals --- */
/* the mock's hero: a 96px dream strip with a glass kicker pill */
.vhero{position:relative;height:96px;flex:none;background:var(--sunken);overflow:hidden}
.vhero img{width:100%;height:100%;object-fit:cover}
.vhero.dream{background-color:var(--dream-base)}
.vhero.dream .wash{position:absolute;inset:0;background-image:var(--c-dream,var(--gradient-dream-iridescent))}
.kickpill{
  position:absolute;left:16px;bottom:12px;z-index:2;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);padding:4px 12px;
  max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.glassbtn{
  width:32px;height:32px;border-radius:var(--radius-pill);
  border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-1);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  box-shadow:var(--glass-highlight);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.vclose{position:absolute;top:14px;right:14px;z-index:2}
.vkickrow{display:flex;align-items:center;gap:10px}
.vkickrow .kick{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.vkickrow .tag.st{margin-left:auto;flex:none;cursor:pointer}
.vh2{
  font-family:var(--font-display);font-weight:var(--weight-display);font-size:25px;
  letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0;
}
.vfld .flbl,.flbl{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px;
}
.sheet .box{
  background:var(--bg-0);border:1px solid var(--border-1);border-radius:var(--radius-md);
  padding:15px 17px;font-size:14.5px;line-height:1.55;color:var(--text-1);
  white-space:pre-wrap;font-variant-numeric:normal;
}
.sheet .box em{color:var(--operations-bright);font-style:normal}
[data-theme="light"] .sheet .box em,.sheet[data-theme="light"] .box em{color:var(--operations-deep)}
.sheet .box .htags{margin-top:10px}
.mrow{display:flex;gap:10px;flex-wrap:wrap}
.mtile{width:92px;height:80px;border-radius:12px;object-fit:cover;background:var(--sunken)}
.vgrp{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden;
}
.vrow{position:relative;display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13.5px;min-width:0}
.vrow+.vrow::after{content:"";position:absolute;top:0;left:56px;right:0;border-top:1px solid var(--border-1)}
.vrow .tile{
  flex:none;width:28px;height:28px;border-radius:9px;
  background:var(--c-dim,var(--surface-2));color:var(--c-bright,var(--text-2));
  display:flex;align-items:center;justify-content:center;
}
.sheet[data-theme="light"] .vrow .tile{background:var(--c-tint,var(--surface-2));color:var(--c-deep,var(--text-2))}
.vrow .rm{flex:1;min-width:0;font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .val{
  flex:none;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--text-2);
}
.vrow .val a{color:var(--link)}
.vrow code{font-family:var(--font-mono);font-size:11px}
.epre{width:100%;height:440px;border:1px solid var(--border-1);border-radius:var(--radius-md);background:#f4f4f2}
.erow2{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* ---------- post lightbox -- the mock's platform-mimic preview card ------ */
.pvcard{
  background:var(--bg-0);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden;flex:none;
}
.pvhead{display:flex;align-items:center;gap:10px;padding:11px 14px}
.pvhead .tag.st{margin-left:auto;flex:none;cursor:pointer}
.pfwho{flex:1;min-width:0;display:flex;flex-direction:column}
.pfwho b{font-size:13px;font-weight:var(--weight-semibold)}
.pfwho small{font-family:var(--font-mono);font-size:10px;color:var(--text-3)}
.pvcard .av.logo{width:32px;height:32px}
.pvcard .av.logo::after{inset:6px;border-width:4px}
.pvmedia{
  height:230px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-1);overflow:hidden;
}
.pvmedia img{width:100%;height:100%;object-fit:cover}
.pvmedia.ph{
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
}
.pvcard .pcap{padding:0 14px 12px}
.pvcard .fbcap{padding-top:2px}
.pvcard .igcap{padding:3px 14px 13px;font-size:12.5px;color:var(--text-2)}
.pvcard .prow-fb{margin-top:0}
.pvcard[data-ch="facebook"] .prow-ig,.pvcard[data-ch="facebook"] .igcap{display:none}
.pvcard[data-ch="instagram"] .prow-fb,.pvcard[data-ch="instagram"] .fbcap{display:none}
.pcap{font-size:13px;line-height:1.55}
.pcap b{font-weight:var(--weight-semibold);margin-right:5px}
.pcap em{color:var(--operations-bright);font-style:normal}
.sheet[data-theme="light"] .pcap em{color:var(--operations-deep)}

/* ---------- email lightbox -- From / Subject rows + the real render ------ */
.mailrows{display:flex;flex-direction:column;gap:5px;padding:0 2px}
.mailrows .mr{display:flex;align-items:baseline;gap:10px;font-size:12px;min-width:0}
.mailrows .mr>span:first-child{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);width:52px;flex:none;
}
.mailrows .mr b{font-size:13.5px;font-weight:var(--weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis}
.mailrows .mr .pv{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailrows .mr em{font-style:normal;font-size:11px;color:var(--text-3);margin-left:auto;flex:none}
.mailpv{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.mailpv .epre{height:480px;border:0;border-radius:0;display:block}

/* the tappable Status row inside the grouped facts */
.vrow.act{cursor:pointer}
.vrow.act:hover{background:var(--surface-2)}
.vrow .val .dot{
  display:inline-block;width:6px;height:6px;border-radius:2px;
  background:var(--sc,var(--text-3));margin-right:6px;vertical-align:middle;
}
.vrow.act .val{text-transform:capitalize;color:var(--sc,var(--text-2))}
.sheet footer .metanote{
  font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3);
  align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.sheet footer .sp{flex:1}
.sheet footer .id{font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3);align-self:center}
.sheet header{
  display:flex;align-items:center;gap:10px;
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-1);
  padding-top:calc(var(--space-3) + env(safe-area-inset-top));
}
.sheet header .id{font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3)}
/* overflow-x hidden + min-width:0 below: a select's min-content width (e.g. a
   long campaign id) otherwise forces the form wider than the sheet, and iOS
   drift-scrolls it sideways -- clipping the first letter of every label. */
.sheet .sbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
/* children must NOT flex-shrink: an overflow:hidden child (the grouped rows
   card, the preview) otherwise collapses to its borders when the body is
   taller than the sheet -- the body scrolls instead */
.sheet .sbody>*{flex:none}
.sheet footer{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--border-1);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
}
.fld{display:flex;flex-direction:column;gap:5px}
.fld>span{
  font-family:var(--font-mono);font-size:var(--text-micro);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3);
}
/* 16px minimum: anything smaller makes iOS Safari zoom on focus */
.fld input,.fld select,.fld textarea{
  width:100%;font-size:var(--text-body);padding:9px 11px;
  border:1px solid var(--border-2);border-radius:var(--radius-sm);
  background:var(--sunken);color:var(--text-1);
}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:none;border-color:var(--awol-operations);
  box-shadow:0 0 0 3px var(--operations-dim);
}
.fld textarea{resize:vertical;line-height:var(--leading-body);min-height:90px}
.frow2{display:flex;gap:10px}
.frow2>*{flex:1;min-width:0}
.fld select{max-width:100%;text-overflow:ellipsis}
.note{background:var(--sunken);border-radius:var(--radius-md);padding:10px var(--space-3);font-size:var(--text-body-sm);line-height:var(--leading-body)}
.note .w{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);margin-bottom:4px;display:flex;gap:var(--space-2);align-items:center}
.note .w .done{margin-left:auto;cursor:pointer;color:var(--text-3);border:1px solid var(--border-2);border-radius:var(--radius-pill);padding:1px 8px}
.note .w .done:hover{background:var(--surface-2);color:var(--text-1)}
.note.done{opacity:.55}
/* neutral: colour means channel or status only, and marketing-purple already
   means Instagram. The byline in .note .w carries the authorship. */
.note.claude{border-left:3px solid var(--border-2)}
/* upload affordance */
.uploader{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.uplnote{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3)}
.uplbar{width:100%;height:4px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.uplbar i{display:block;height:100%;width:0;background:var(--awol-operations);transition:width var(--dur-fast) var(--ease-out)}
#media-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}
#media-list figure{border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden;background:var(--sunken)}
#media-list img{width:100%;aspect-ratio:1;object-fit:cover}
#media-list figcaption{padding:5px 6px;font-family:var(--font-mono);font-size:9px;color:var(--text-3)}
/* ---------- compose (the mock's New modal) ---------- */
.vhero.compose{height:120px}
.glassseg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);padding:3px;box-shadow:var(--glass-highlight);
}
.glassseg span{
  padding:6px 18px;border-radius:var(--radius-pill);font-size:var(--text-mono);
  font-weight:var(--weight-medium);color:var(--text-1);cursor:pointer;white-space:nowrap;
}
.glassseg span.on{background:var(--accent);color:var(--accent-text)}
.ckick{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.sbody.compose{gap:var(--space-4)}
.sbody.compose .vh2{margin-top:-8px}
.sbody.compose form{display:flex;flex-direction:column;gap:var(--space-4)}
.cfld{display:flex;flex-direction:column;gap:6px}
.cfld>span{
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.cfld input,.cfld textarea{
  width:100%;background:var(--bg-0);border:1px solid var(--border-1);
  border-radius:var(--radius-md);padding:12px 16px;
  font-size:var(--text-body);color:var(--text-1);
}
.cfld input:focus-visible,.cfld textarea:focus-visible{
  outline:none;box-shadow:none;border-color:var(--awol-operations);
}
.cfld textarea{resize:vertical;line-height:1.55;min-height:96px;font-variant-numeric:normal}
.chanrow{display:flex;gap:8px}
.chanchip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border-1);border-radius:var(--radius-pill);
  padding:8px 15px;font-size:var(--text-mono);font-weight:var(--weight-medium);cursor:pointer;
}
.chanchip i{width:6px;height:6px;border-radius:2px;flex:none;background:var(--c,var(--text-3))}
.chanchip.on{border-color:var(--text-1);background:var(--surface-2)}
.cmedia{display:flex;flex-direction:column;gap:10px}
.addtile{
  width:92px;height:76px;border-radius:12px;flex:none;
  border:1px dashed var(--border-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}
.addtile:hover{border-color:var(--text-3);color:var(--text-2)}
.addtile.off{cursor:default}
.vrow .val.two{display:flex;gap:8px}
.vrow .val input,.vrow .val select{
  border:1px solid var(--border-1);border-radius:8px;background:var(--bg-0);
  padding:6px 8px;font-size:var(--text-caption);color:var(--text-1);
  min-width:0;max-width:100%;
}
.sheet.compose .vrow .val{max-width:64%}

@media (max-width:899px){
  .sheet{
    top:auto;left:0;right:0;bottom:0;width:auto;height:88dvh;
    border-left:0;border-top:1px solid var(--border-1);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;transform:translateY(100%);
  }
  .sheet.on{transform:none}
  .sheet header{padding-top:var(--space-3)}
  .vhero{border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .epre{height:380px}
}

/* ---------- settings ---------- */
.setwrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}
.setsec .flbl{margin-bottom:8px}
.setsec .vrow{gap:10px}
.setin{
  flex:1;min-width:0;font-size:var(--text-body);padding:7px 10px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--text-1);
}
.setin:hover{border-color:var(--border-1)}
.setin:focus{border-color:var(--awol-operations);background:var(--sunken);outline:none}
.swrow{display:flex;gap:6px;align-items:center;flex:none}
.sw{
  width:22px;height:22px;border-radius:7px;flex:none;cursor:pointer;
  border:1px solid var(--border-2);
  transition:transform var(--dur-fast) var(--ease-out);
}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 2px var(--bg-0),0 0 0 4px var(--awol-operations)}
.sw.neutral{background:transparent;position:relative}
.sw.neutral::after{
  content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;
  background:var(--border-2);transform:rotate(-45deg);
}
.setsec .avtile img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.cnt2{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);font-style:normal;flex:none}
.setadd{display:flex;gap:8px;margin-top:10px;align-items:center}
.setadd .setin{border:1px solid var(--border-2);background:var(--sunken);max-width:240px}
@media (max-width:639px){
  .setsec .vrow{flex-wrap:wrap}
  .swrow{margin-left:40px}
}

/* ---------- phone panel ---------- */
.phonepanel{padding:var(--space-2) var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
.phonepanel .bigurl{
  font-family:var(--font-mono);font-size:var(--text-mono);word-break:break-all;
  background:var(--sunken);border:1px solid var(--border-1);
  border-radius:var(--radius-sm);padding:var(--space-3);color:var(--text-1);
}
.phonepanel p{font-size:var(--text-caption);color:var(--text-2);line-height:var(--leading-body)}
.phonepanel .alturl{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);word-break:break-all}

/* ---------- selection bar ---------- */
.selbar{
  position:fixed;z-index:50;left:50%;transform:translateX(-50%);
  bottom:max(var(--space-4),env(safe-area-inset-bottom));
  background:var(--accent);color:var(--accent-text);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-3);
  padding:var(--space-2) 10px var(--space-2) var(--space-5);
  display:flex;align-items:center;gap:var(--space-2);max-width:94vw;overflow-x:auto;
}
.selbar .n{font-family:var(--font-mono);font-size:var(--text-caption);white-space:nowrap}
.selbar button{
  height:30px;padding:0 var(--space-3);border-radius:var(--radius-pill);
  font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--accent-text);
  border:1px solid color-mix(in oklab,var(--accent-text) 25%,transparent);white-space:nowrap;
}
.selbar button:hover{background:color-mix(in oklab,var(--accent-text) 14%,transparent)}
@media (max-width:899px){.selbar{bottom:calc(72px + env(safe-area-inset-bottom))}}

/* ---------- home dashboard (the mock) ---------- */
.home{max-width:1020px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}
.hgreet h1{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(30px,4.2vw,40px);letter-spacing:var(--tracking-display);
  line-height:1.06;margin:8px 0 0;
}
.hsum{margin-top:10px;font-size:14.5px;color:var(--text-2)}
.homehero{
  position:relative;height:150px;border-radius:var(--radius-lg);
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
  border:1px solid var(--border-1);overflow:hidden;
  display:flex;align-items:flex-end;gap:8px;padding:16px;
}
.hstats{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.hstat{
  display:inline-flex;align-items:baseline;gap:7px;
  border:1px solid var(--glass-border);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);padding:6px 14px;box-shadow:var(--glass-highlight);
  font-size:11.5px;color:var(--text-1);white-space:nowrap;
}
.hstat b{font-family:var(--font-mono);font-size:var(--text-mono);font-weight:var(--weight-semibold)}
.glassbtn.hcust{
  margin-left:auto;width:auto;padding:0 14px;height:32px;gap:7px;
  font-size:12.5px;flex:none;
}
.hrow{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}
.hcol{flex:1;min-width:280px}
.hweek{width:340px;flex:none}
@media (max-width:729px){.hweek{width:100%}}
.hlbl{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);display:block;padding:0 2px 10px;
}
.hlblrow{display:flex;align-items:baseline;padding:0 2px 10px}
.hlblrow .hlbl{padding:0}
.hlblrow .hlink{margin-left:auto}
.upnext{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-float);overflow:hidden;
}
.unrow{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 14px;font-size:var(--text-mono);cursor:pointer;min-width:0;
}
.unrow+.unrow::after{
  content:"";position:absolute;top:0;left:14px;right:0;border-top:1px solid var(--border-1);
}
.unrow:hover{background:var(--surface-2)}
.unrow time{font-family:var(--font-mono);font-size:11px;color:var(--text-3);width:88px;flex:none;white-space:nowrap}
.unrow .ut{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unrow.none{color:var(--text-3);cursor:default}
.week{
  display:flex;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.week:hover{border-color:var(--border-2)}
.wday{flex:1;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.wday+.wday{border-left:1px solid var(--border-1)}
.wday small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--text-3)}
.wday b{
  font-size:13.5px;font-weight:var(--weight-semibold);
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.wday.on b{background:var(--accent);color:var(--accent-text)}
.wdots{display:flex;gap:3px;height:6px}
.wdots i{width:6px;height:6px;border-radius:2px;background:var(--c,var(--text-3))}
.hnote{margin:10px 2px 0;font-size:12px;color:var(--text-3)}
.dscroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dscroll::-webkit-scrollbar{display:none}
.dcard{
  flex:none;width:220px;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:16px;padding:10px;cursor:pointer;box-shadow:var(--shadow-1);
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.dcard:hover{border-color:var(--border-2);transform:translateY(-1px)}
.dmedia{
  height:84px;border-radius:10px;background-color:var(--dream-base);
  overflow:hidden;margin-bottom:9px;
}
.dmedia.ph{
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
  display:flex;align-items:flex-end;padding:7px;
}
.dmedia img{width:100%;height:100%;object-fit:cover}
.dcard p{
  margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;
}
.dmeta{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
}
.dmeta .dot{width:6px;height:6px;border-radius:2px}
.dmeta em{margin-left:auto;font-style:normal}
.minis{display:flex;gap:14px;flex-wrap:wrap}
.minicamp{
  flex:1;min-width:240px;display:flex;align-items:center;gap:12px;
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:16px;
  padding:12px 14px;cursor:pointer;box-shadow:var(--shadow-1);color:var(--text-3);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.minicamp:hover{border-color:var(--border-2)}
.mswatch{
  flex:none;width:40px;height:40px;border-radius:12px;
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
}
.mbody{flex:1;min-width:0}
.mbody b{
  font-size:13.5px;font-weight:var(--weight-semibold);display:block;color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mbody small{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- artifact mode -------------------------------------------------
   No real viewport in the artifact frame (see 2-base.css): nothing may rely
   on fixed positioning or dvh. The sheet becomes an in-flow card placed at
   the tap position by JS; full-height view rules relax to natural height. */
html.artifact .cell{min-height:104px}
html.artifact .col{max-height:none}
html.artifact .board{grid-auto-columns:86vw}
/* The artifact has no viewport: a `fixed`/`sticky` sheet can't track the
   user's actual scroll position (see 2-base.css), and the old "render the
   whole record inline, no cap" approach meant a record with a few notes or
   grouped rows easily topped 1400px -- the tap that opened it landed inside
   the visible fold, but most of the sheet's OWN content did not, which read
   as "the popup opens halfway down the screen." Capping the sheet's own
   height and scrolling INSIDE it keeps the whole thing within one screenful
   of whatever was on screen at the tap, everywhere on a long page. */
html.artifact .sheet{
  position:absolute;left:8px;right:8px;top:0;bottom:auto;width:auto;height:auto;
  max-height:500px;border:1px solid var(--border-1);border-radius:var(--radius-xl);
  transform:none;transition:none;z-index:60;opacity:1;margin:0 auto;max-width:600px;
  display:flex;flex-direction:column;overflow:hidden;
}
html.artifact .sheet .sbody{flex:1;max-height:none;overflow-y:auto}
html.artifact .selbar{position:absolute;left:50%;bottom:auto;transform:translateX(-50%)}