/* PRES. Content Board
   Design tokens first. Never hardcode a colour below the token block. */

/* ---------- 1. tokens ---------- */
:root{
  /* brand, canonical, do not edit */
  --navy-deep:#080F23; --navy:#0D1B3E; --navy-soft:#132449;
  --gold:#C4A96A; --gold-soft:#D8C391; --gold-deep:#A8894E;
  --cream:#F8F6F1;

  /* light theme surfaces. neutrals carry a navy bias so nothing reads as flat grey */
  --bg:#F1EEE7;
  --surface:#FFFFFF;
  --surface-2:#FAF8F3;
  --surface-3:#F3F0E9;
  --line:#E3DED2;
  --line-soft:#EDE9E0;
  --ink:#131A2C;
  --ink-2:#545C6E;
  --ink-3:#8B909C;
  --accent-ink:#8A6E33;        /* gold that is actually legible on light */
  --focus:#3B6BD8;
  --shadow-1:0 1px 2px rgba(13,27,62,.06), 0 2px 8px rgba(13,27,62,.05);
  --shadow-2:0 8px 28px rgba(13,27,62,.14), 0 2px 6px rgba(13,27,62,.08);
  --shadow-3:0 24px 70px rgba(8,15,35,.34);

  /* status. semantic, kept away from gold so brand never reads as a state */
  --st-draft:#6E7684;  --st-draft-bg:#ECEEF2;  --st-draft-ink:#4E5666;
  --st-wait:#C98A2E;   --st-wait-bg:#FAF0DC;   --st-wait-ink:#835811;
  --st-ok:#3E7D5A;     --st-ok-bg:#E5F0E9;     --st-ok-ink:#2A5A3F;
  --st-change:#B0483C; --st-change-bg:#FAE8E5; --st-change-ink:#8A3327;
  --st-posted:#0D1B3E; --st-posted-bg:#E7EAF1; --st-posted-ink:#0D1B3E;

  --rail:238px;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px;
  --ff:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dur:.18s;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#070C1A; --surface:#0F1730; --surface-2:#131E3C; --surface-3:#182549;
    --line:#22305200; --line:#223052; --line-soft:#1A2542;
    --ink:#EFECE4; --ink-2:#A9B1C4; --ink-3:#6F7A93;
    --accent-ink:#D8C391;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 8px 28px rgba(0,0,0,.5);
    --shadow-3:0 24px 70px rgba(0,0,0,.65);
    --st-draft-bg:#1E273B; --st-draft-ink:#9BA4B6;
    --st-wait-bg:#38290F;  --st-wait-ink:#E4B466;
    --st-ok-bg:#123125;    --st-ok-ink:#6DBE92;
    --st-change-bg:#3A1A15;--st-change-ink:#E08E80;
    --st-posted-bg:#1B2748;--st-posted-ink:#B9C6E6;
  }
}
/* the viewer's own toggle must beat the OS preference in both directions */
:root[data-theme="dark"]{
  --bg:#070C1A; --surface:#0F1730; --surface-2:#131E3C; --surface-3:#182549;
  --line:#223052; --line-soft:#1A2542;
  --ink:#EFECE4; --ink-2:#A9B1C4; --ink-3:#6F7A93; --accent-ink:#D8C391;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 28px rgba(0,0,0,.5);
  --shadow-3:0 24px 70px rgba(0,0,0,.65);
  --st-draft-bg:#1E273B; --st-draft-ink:#9BA4B6;
  --st-wait-bg:#38290F;  --st-wait-ink:#E4B466;
  --st-ok-bg:#123125;    --st-ok-ink:#6DBE92;
  --st-change-bg:#3A1A15;--st-change-ink:#E08E80;
  --st-posted-bg:#1B2748;--st-posted-ink:#B9C6E6;
}
:root[data-theme="light"]{
  --bg:#F1EEE7; --surface:#FFFFFF; --surface-2:#FAF8F3; --surface-3:#F3F0E9;
  --line:#E3DED2; --line-soft:#EDE9E0;
  --ink:#131A2C; --ink-2:#545C6E; --ink-3:#8B909C; --accent-ink:#8A6E33;
  --shadow-1:0 1px 2px rgba(13,27,62,.06), 0 2px 8px rgba(13,27,62,.05);
  --shadow-2:0 8px 28px rgba(13,27,62,.14), 0 2px 6px rgba(13,27,62,.08);
  --shadow-3:0 24px 70px rgba(8,15,35,.34);
  --st-draft-bg:#ECEEF2; --st-draft-ink:#4E5666;
  --st-wait-bg:#FAF0DC;  --st-wait-ink:#835811;
  --st-ok-bg:#E5F0E9;    --st-ok-ink:#2A5A3F;
  --st-change-bg:#FAE8E5;--st-change-ink:#8A3327;
  --st-posted-bg:#E7EAF1;--st-posted-ink:#0D1B3E;
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 var(--ff);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
::selection{background:var(--gold-soft); color:var(--navy-deep)}
.num{font-variant-numeric:tabular-nums}
.boot{display:grid; place-items:center; height:100vh}
.bootmsg{color:var(--ink-3); font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.hidden{display:none !important}

/* ---------- 3. shell ---------- */
.shell{display:grid; grid-template-columns:var(--rail) 1fr; height:100vh; height:100dvh}

.rail{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:#DCE1EC; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid rgba(196,169,106,.14);
}
/* The board is the product; PRES. signs it. So the wordmark is small and quiet above a
   name set as the actual heading. */
.rail-top{padding:22px 20px 18px}
.rail-logo{width:62px; height:auto; display:block; opacity:.72}
.rail-name{
  margin-top:13px; font-size:14px; font-weight:600; line-height:1.2;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(242,245,251,.94);
  white-space:nowrap;
}
.rail-build{
  margin-top:6px; font-size:9.5px; letter-spacing:.05em;
  color:rgba(196,169,106,.5); font-variant-numeric:tabular-nums;
}
.rail-scroll{flex:1; min-height:0; overflow-y:auto; padding:6px 12px 12px}
.rail-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 8px 8px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(220,225,236,.38);
}
.rail-add{
  width:22px; height:22px; border-radius:6px; color:rgba(220,225,236,.6);
  display:grid; place-items:center; font-size:16px; line-height:1;
  transition:background var(--dur), color var(--dur);
}
.rail-add:hover{background:rgba(255,255,255,.09); color:#fff}

.client{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r-m); text-align:left; color:rgba(220,225,236,.72);
  transition:background var(--dur), color var(--dur);
}
.client:hover{background:rgba(255,255,255,.06); color:#fff}
.client.on{background:rgba(196,169,106,.15); color:#fff}
.client.on .cl-name{font-weight:600}
.cl-av{
  width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--navy-deep);
  background:var(--gold-soft);
}
.cl-body{min-width:0; flex:1}
.cl-name{font-size:13.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-meta{font-size:11px; color:rgba(220,225,236,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-dot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--st-wait)}
.cl-dot.none{display:none}

.rail-foot{
  border-top:1px solid rgba(255,255,255,.08); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.rail-foot .cl-av{background:rgba(255,255,255,.14); color:#fff}
.rf-name{font-size:12.5px; color:rgba(220,225,236,.9); line-height:1.3}
.rf-role{font-size:11px; color:rgba(220,225,236,.4)}
.rf-btn{
  margin-left:auto; width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:rgba(220,225,236,.5); transition:background var(--dur), color var(--dur);
}
.rf-btn:hover{background:rgba(255,255,255,.09); color:#fff}

.main{display:flex; flex-direction:column; min-width:0; min-height:0}

/* ---------- 4. topbar ---------- */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:0 20px; flex:none;
}
.tb-row{display:flex; align-items:center; gap:14px; min-height:62px}
.tb-menu{display:none}
.tb-title{min-width:0}
.tb-h1{font-size:17px; font-weight:650; letter-spacing:-.01em; line-height:1.2; display:flex; align-items:center; gap:6px}
.tb-h2{font-size:12px; color:var(--ink-3); margin-top:1px}
/* the name is the control for renaming it, because that is where she looks for it */
.tb-title.edit{text-align:left; padding:4px 8px; margin-left:-8px; border-radius:var(--r-m); transition:background var(--dur)}
.tb-title.edit:hover{background:var(--surface-2)}
/* the pencil is always visible, never hover-only: on a phone there is no hover, and a
   control that has to be discovered by accident is one she will not find */
.tb-title.edit .tb-h1 svg{color:var(--ink-3); opacity:.5; transition:opacity var(--dur)}
.tb-title.edit:hover .tb-h1 svg,
.tb-title.edit:focus-visible .tb-h1 svg{opacity:1}
.tb-spacer{flex:1}

.viewtabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px}
.viewtabs::-webkit-scrollbar{display:none}
.vtab{
  padding:0 12px 11px; margin-top:-1px; font-size:13.5px; color:var(--ink-2); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--dur), border-color var(--dur);
}
.vtab:hover{color:var(--ink)}
.vtab.on{color:var(--ink); font-weight:600; border-bottom-color:var(--gold-deep)}
.vtab-lock{font-size:10px; opacity:.55; margin-left:5px}

.periodnav{display:flex; align-items:center; gap:2px}
.pn-btn{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  color:var(--ink-2); transition:background var(--dur), color var(--dur);
}
.pn-btn:hover{background:var(--surface-3); color:var(--ink)}
.pn-label{
  min-width:172px; text-align:center; font-size:13.5px; font-weight:600; letter-spacing:-.005em;
}
.pn-today{
  margin-left:6px; padding:0 11px; height:30px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--line); color:var(--ink-2); transition:background var(--dur), border-color var(--dur);
}
.pn-today:hover{background:var(--surface-3); border-color:var(--ink-3)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border-radius:9px; font-size:13.5px; font-weight:550; white-space:nowrap;
  border:1px solid transparent; transition:background var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.btn.pri{background:var(--navy); color:#fff}
.btn.pri:hover{background:var(--navy-soft)}
.btn.sec{border-color:var(--line); background:var(--surface); color:var(--ink)}
.btn.sec:hover{background:var(--surface-3)}
.btn.ghost{color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink)}
.btn.ok{background:var(--st-ok); color:#fff}
.btn.ok:hover{filter:brightness(1.08)}
.btn.warn{border-color:var(--st-change); color:var(--st-change-ink); background:var(--st-change-bg)}
.btn.warn:hover{filter:brightness(.97)}
.btn.sm{height:29px; padding:0 10px; font-size:12.5px; border-radius:8px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-ico{font-size:15px; line-height:1}

/* client-view switch */
.cvsw{display:flex; align-items:center; gap:8px; padding-left:14px; border-left:1px solid var(--line)}
.cvsw-lb{font-size:12px; color:var(--ink-3); white-space:nowrap}
.sw{width:38px; height:22px; border-radius:11px; background:var(--line); position:relative; transition:background var(--dur); flex:none}
.sw::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--surface); box-shadow:var(--shadow-1); transition:transform var(--dur);
}
.sw.on{background:var(--gold-deep)}
.sw.on::after{transform:translateX(16px)}

/* client-view banner */
.cvbar{
  display:none; align-items:center; gap:10px; padding:7px 20px; font-size:12.5px;
  background:var(--st-wait-bg); color:var(--st-wait-ink);
  border-bottom:1px solid var(--line);
}
body.cv .cvbar{display:flex}
body.cv .cvbar.off{display:none}
.cvbar b{font-weight:650}
.cvbar .btn{height:26px; font-size:12px; margin-left:auto}

/* things that vanish for the client, and things only the client sees */
body.cv .cv-hide{display:none !important}
.cv-only{display:none !important}
body.cv .cv-only{display:flex !important}

.canvas{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch}

/* ---------- 5. week view ---------- */
.week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line-soft); min-height:100%}
.day{background:var(--bg); display:flex; flex-direction:column; min-width:0; padding-bottom:14px}
.day.today{background:var(--surface-2)}
.day-h{
  position:sticky; top:0; z-index:3; background:inherit; padding:12px 10px 9px;
  border-bottom:1px solid var(--line-soft); display:flex; align-items:baseline; gap:6px;
}
.day-n{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.day-d{font-size:15px; font-weight:650}
.day.today .day-n{color:var(--accent-ink)}
.day.today .day-d{color:var(--accent-ink)}
.day-today{
  margin-left:auto; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold-deep); color:#fff; padding:2px 6px; border-radius:5px; font-weight:700;
}
/* not flex:1, so the Add button sits directly under the last card rather than being
   pushed to the bottom of a tall empty column */
.day-body{padding:9px 8px 0; display:flex; flex-direction:column; gap:8px}
.day-add{
  margin:9px 8px 0; height:32px; border-radius:8px; border:1px dashed var(--line);
  color:var(--ink-3); font-size:12.5px; background:var(--surface-2);
  transition:opacity var(--dur), color var(--dur), border-color var(--dur), background var(--dur);
}
.day-add:hover{color:var(--accent-ink); border-color:var(--gold-deep); background:var(--surface)}
.day-empty{padding:12px 8px; font-size:12px; color:var(--ink-3); opacity:.6}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; text-align:left; width:100%; box-shadow:var(--shadow-1);
  transition:transform var(--dur), box-shadow var(--dur), border-color var(--dur);
  position:relative;
}
.card:hover{transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:var(--ink-3)}
.card-strip{height:3px; background:var(--st-draft)}
.card[data-st="waiting"] .card-strip{background:var(--st-wait)}
.card[data-st="approved"] .card-strip{background:var(--st-ok)}
.card[data-st="change"]   .card-strip{background:var(--st-change)}
.card[data-st="posted"]   .card-strip{background:var(--st-posted)}
.card-media{aspect-ratio:4/5; background:var(--surface-3); position:relative; overflow:hidden}
.card-media img,.card-media video{width:100%; height:100%; object-fit:cover; display:block}
/* A reel and a story are 1080 x 1920, so their cards are 9:16. This rule already existed,
   was already called r916, and set 4/5 anyway, so every reel on the board was drawn in a
   feed crop. Corrected 15 Aug 2026 on Nikol's report. The profile grid further down stays
   4:5 on purpose: that is genuinely how Instagram crops a reel on a profile. */
.card-media.r916{aspect-ratio:9/16}
.card-badge{
  position:absolute; top:6px; left:6px; display:flex; align-items:center; gap:4px;
  background:rgba(8,15,35,.62); backdrop-filter:blur(6px); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 6px; border-radius:5px;
}
.card-cnt{
  position:absolute; top:6px; right:6px; background:rgba(8,15,35,.62); backdrop-filter:blur(6px);
  color:#fff; font-size:10px; font-weight:600; padding:3px 6px; border-radius:5px;
}
.card-body{padding:8px 9px 9px}
.card-time{font-size:10.5px; color:var(--ink-3); font-weight:600; letter-spacing:.02em}
.card-title{
  font-size:12.5px; line-height:1.35; margin-top:2px; font-weight:550;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-foot{display:flex; align-items:center; gap:5px; margin-top:7px; flex-wrap:wrap}

.chip{
  display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 6px; border-radius:5px;
  font-size:10px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
}
.chip.draft{background:var(--st-draft-bg); color:var(--st-draft-ink)}
.chip.waiting{background:var(--st-wait-bg); color:var(--st-wait-ink)}
.chip.approved{background:var(--st-ok-bg); color:var(--st-ok-ink)}
.chip.change{background:var(--st-change-bg); color:var(--st-change-ink)}
.chip.posted{background:var(--st-posted-bg); color:var(--st-posted-ink)}
.chip.plain{background:var(--surface-3); color:var(--ink-2); text-transform:none; letter-spacing:0; font-weight:600}
.cmt{font-size:10.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:3px}
.cmt.new{color:var(--st-change-ink); font-weight:650}

/* stories strip inside a day */
.stories{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-1)}
.stories-h{
  display:flex; align-items:center; gap:6px; padding:7px 9px; border-bottom:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700;
}
.stories-h .n{margin-left:auto; color:var(--ink-2)}
.stories-r{display:flex; gap:5px; padding:8px 9px; overflow-x:auto; scrollbar-width:none}
.stories-r::-webkit-scrollbar{display:none}
.stories-r img{width:30px; height:53px; border-radius:5px; object-fit:cover; flex:none; border:1px solid var(--line-soft)}

/* ---------- 6. month view ---------- */
.monthwrap{overflow-x:auto; padding:0}
.month{min-width:860px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line-soft)}
.mdow{
  background:var(--surface); padding:9px 10px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; position:sticky; top:0; z-index:3;
}
.mcell{background:var(--bg); min-height:118px; padding:7px 7px 8px; display:flex; flex-direction:column; gap:4px}
.mcell.out{opacity:.38}
.mcell.today{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--gold-deep)}
.mnum{font-size:12px; font-weight:650; color:var(--ink-2); display:flex; align-items:center; gap:5px; min-height:19px}
.mcell.today .mnum{color:var(--accent-ink)}
.madd{
  margin-left:auto; width:19px; height:19px; border-radius:5px; display:grid; place-items:center;
  font-size:14px; line-height:1; color:var(--ink-3); opacity:0;
  transition:opacity var(--dur), background var(--dur), color var(--dur);
}
.mcell:hover .madd{opacity:1}
.madd:hover{background:var(--gold-deep); color:#fff}
@media (hover:none){ .madd{opacity:.55} }
.mchip{
  display:flex; align-items:center; gap:5px; width:100%; text-align:left;
  padding:3px 5px; border-radius:6px; background:var(--surface); border:1px solid var(--line);
  font-size:11px; line-height:1.3; transition:border-color var(--dur), background var(--dur);
}
.mchip:hover{border-color:var(--ink-3); background:var(--surface-2)}
.mbar{width:3px; align-self:stretch; border-radius:2px; background:var(--st-draft); flex:none}
.mchip[data-st="waiting"] .mbar{background:var(--st-wait)}
.mchip[data-st="approved"] .mbar{background:var(--st-ok)}
.mchip[data-st="change"] .mbar{background:var(--st-change)}
.mchip[data-st="posted"] .mbar{background:var(--st-posted)}
.mf{font-size:9px; font-weight:750; letter-spacing:.06em; color:var(--ink-3); flex:none}
.mt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0}
.mmore{font-size:10.5px; color:var(--ink-3); padding:1px 5px; text-align:left}
.mmore:hover{color:var(--accent-ink)}
.mstory{
  display:flex; align-items:center; gap:5px; font-size:10px; color:var(--ink-3);
  padding:2px 5px; border-radius:6px; background:var(--surface-3); font-weight:600;
  min-width:0;   /* a flex item defaults to min-width:auto, which refuses to shrink and
                    spills the word "stories" into the next day's column on a phone */
}
.mstory .stw{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

/* ---------- 7. grid preview ---------- */
.gridwrap{max-width:520px; margin:0 auto; padding:22px 16px 60px}
.gridhead{display:flex; align-items:center; gap:14px; padding:0 2px 18px}
.gh-av{width:56px; height:56px; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; font-weight:700; color:var(--navy-deep); flex:none}
.gh-name{font-size:15px; font-weight:650}
.gh-meta{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.gh-note{font-size:11.5px; color:var(--ink-3); margin-top:6px}
.igrid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px}
.gcell{aspect-ratio:4/5; position:relative; background:var(--surface-3); overflow:hidden}
.gcell img,.gcell video{width:100%; height:100%; object-fit:cover; display:block}
/* `video` was missing here, which is why a reel uploaded before thumbnails existed
   showed an empty square on the profile grid: the element was there and had no size. */
.gcell .gi{position:absolute; top:5px; right:5px; color:#fff; font-size:12px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.gcell.ghost{display:grid; place-items:center; border:1px dashed var(--line); background:transparent}
.gcell.ghost span{font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
.gcell.pending::after{
  content:""; position:absolute; inset:0; border:2px dashed var(--st-wait); opacity:.85; pointer-events:none;
}
.gdate{
  position:absolute; left:0; right:0; bottom:0; padding:14px 6px 5px; color:#fff; font-size:10px;
  font-weight:600; letter-spacing:.02em; text-align:left; opacity:0;
  background:linear-gradient(transparent, rgba(8,15,35,.72)); transition:opacity var(--dur);
}
.gcell:hover .gdate{opacity:1}
@media (hover:none){ .gdate{opacity:1} }

/* grid controls inside the post modal */
.gridrow{display:flex; gap:12px; align-items:flex-start}
.gridthumb{
  width:62px; height:78px; border-radius:8px; overflow:hidden; flex:none;
  border:1px solid var(--line); background:var(--surface-3); display:grid; place-items:center;
}
.gridthumb img,.gridthumb video{width:100%; height:100%; object-fit:cover; display:block}
.gridthumb.off{opacity:.35; filter:grayscale(1)}
.gridthumb-e{font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.gridstate{font-size:13.5px; font-weight:600}
.gridnote{font-size:12.5px; color:var(--ink-2); line-height:1.45; margin-top:3px}
.gridacts{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}

/* ---------- 8. labels ----------
   A label is a marker, not a state, so it must never look like a status chip. Statuses are
   filled and coloured; labels are outlined and quiet, except a trial reel, which is the one
   that changes what the board does and so is allowed to say so. */
.labels{display:flex; flex-wrap:wrap; gap:6px}
.lab{
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  transition:border-color var(--dur), background var(--dur), color var(--dur);
}
.lab:hover{border-color:var(--ink-3); color:var(--ink)}
.lab.on[data-tone="tt"]{color:var(--ink); background:var(--surface-3); border-color:var(--ink-3)}
.lab.on[data-tone="fb"]{color:#2C5AA8; background:#E8EEF9; border-color:#B8CBEA}
.lab.on[data-tone="trial"]{color:var(--st-wait-ink); background:var(--st-wait-bg); border-color:var(--st-wait)}
.lab.on[data-tone="own"]{color:var(--accent-ink); background:var(--surface-3); border-color:var(--gold-deep)}
.lab.add{border-style:dashed; color:var(--ink-3)}

.labs{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.m-labs{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
.m-labs:empty{display:none}
.lab.mini{
  font-size:10px; font-weight:700; padding:2px 7px; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--ink-3); background:var(--surface-2); pointer-events:none;
}
.lab.mini[data-tone="fb"]{color:#2C5AA8; background:#E8EEF9; border-color:#CFDDF3}
.lab.mini[data-tone="trial"]{color:var(--st-wait-ink); background:var(--st-wait-bg); border-color:var(--st-wait-bg)}
.lab.mini[data-tone="own"]{color:var(--accent-ink); border-color:var(--line)}

/* Facebook blue is the one colour here that comes from outside the palette, so it needs
   its own dark treatment rather than inheriting a light-theme swatch. */
:root[data-theme="dark"] .lab.on[data-tone="fb"],
:root[data-theme="dark"] .lab.mini[data-tone="fb"]{color:#9DBBEE; background:#16244A; border-color:#2C4478}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lab.on[data-tone="fb"],
  :root:not([data-theme="light"]) .lab.mini[data-tone="fb"]{color:#9DBBEE; background:#16244A; border-color:#2C4478}
}

.hint{font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-top:6px}

/* ---------- 8b. hashtag library ---------- */
.htpanel{
  margin-top:9px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface-2); padding:9px 11px 11px;
}
.ht-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-3);
}
.ht-set{margin-top:9px}
.ht-name{display:flex; align-items:baseline; gap:8px; font-size:12px; font-weight:650; color:var(--ink-2)}
.ht-all{font-size:11px; color:var(--accent-ink); font-weight:600}
.ht-all:hover{text-decoration:underline}
.ht-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.ht-tag{
  font-size:11.5px; padding:3px 8px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); transition:border-color var(--dur), color var(--dur);
}
.ht-tag:hover{border-color:var(--gold-deep); color:var(--accent-ink)}
.htedit-row{border:1px solid var(--line); border-radius:var(--r-m); padding:10px; margin-bottom:9px; background:var(--surface-2)}
.htedit-row .ta{margin-top:8px}

/* ---------- 8c. the bell ---------- */
.bell{position:relative; flex:none}
.bell-btn{
  width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-m);
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  transition:border-color var(--dur), color var(--dur);
}
.bell-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.bell-btn.lit{color:var(--st-change); border-color:var(--st-change-bg)}
.bell-n{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--st-change); color:#fff; font-size:10.5px; font-weight:800;
  display:none; place-items:center; pointer-events:none;
}
.bell-n.on{display:grid}
.bellpanel{
  position:absolute; top:calc(100% + 8px); right:0; width:330px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-2); z-index:60; overflow:hidden;
}
.bellpanel.off{display:none}
.bp-head{
  padding:11px 13px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--ink-3); border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:8px;
}
.bp-sub{text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-2)}
.bp-row{
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; padding:10px 13px;
  border-bottom:1px solid var(--line-soft); transition:background var(--dur);
}
.bp-row:hover{background:var(--surface-2)}
.bp-kind{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 6px; border-radius:5px; flex:none; margin-top:1px;
}
.bp-kind.chg{background:var(--st-change-bg); color:var(--st-change-ink)}
.bp-kind.cmt{background:var(--st-draft-bg); color:var(--st-draft-ink)}
.bp-title{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-note{font-size:11.5px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-when{font-size:10.5px; color:var(--ink-3); flex:none}
.bp-empty{padding:18px 14px; font-size:12.5px; color:var(--ink-3); line-height:1.5; text-align:center}

/* ---------- 8d. resolving a comment thread ---------- */
.resolve{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 2px; padding:9px 11px;
  border:1px solid var(--st-wait); background:var(--st-wait-bg); border-radius:var(--r-m);
  font-size:12.5px; color:var(--st-wait-ink); font-weight:600;
}
.resolve .btn{margin-left:auto}
.resolved{font-size:11.5px; color:var(--ink-3); margin:8px 0 2px; font-style:italic}

/* ---------- 9. ideas + shot list ---------- */
.ideas{padding:18px 20px 60px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; max-width:1240px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.panel-h{padding:13px 15px; border-bottom:1px solid var(--line-soft)}
.panel-t{font-size:14px; font-weight:650}
.panel-s{font-size:12px; color:var(--ink-3); margin-top:2px}
.quickadd{display:flex; gap:6px; padding:11px 13px; border-bottom:1px solid var(--line-soft); background:var(--surface-2); flex-wrap:wrap}
.inp{
  flex:1; min-width:130px; height:32px; padding:0 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px;
  transition:border-color var(--dur);
}
.inp:focus{border-color:var(--gold-deep); outline:none}
.inp::placeholder{color:var(--ink-3)}
select.inp{padding-right:6px; flex:none; width:auto; min-width:96px}
.panel-b{padding:8px 13px 14px; display:flex; flex-direction:column; gap:7px}
.idea{border:1px solid var(--line); border-radius:var(--r-m); padding:10px 11px; background:var(--surface)}
.idea-top{display:flex; align-items:flex-start; gap:8px}
.idea-t{font-size:13.5px; font-weight:600; line-height:1.35; flex:1; min-width:0}
.idea-n{font-size:12.5px; color:var(--ink-2); line-height:1.45; margin-top:4px}
.idea-a{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.shotgroup{margin-top:4px}
.sg-h{
  display:flex; align-items:center; gap:8px; padding:9px 2px 6px; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700;
}
.sg-h .n{margin-left:auto; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink-3)}
.shot{display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
.shot + .shot{margin-top:5px}
.cbox{
  width:19px; height:19px; border-radius:5px; border:1.5px solid var(--line); flex:none; margin-top:1px;
  display:grid; place-items:center; color:transparent; font-size:12px; transition:background var(--dur), border-color var(--dur), color var(--dur);
}
.cbox:hover{border-color:var(--ink-3)}
.shot.done .cbox{background:var(--st-ok); border-color:var(--st-ok); color:#fff}
.shot-t{flex:1; font-size:13px; line-height:1.4}
.shot.done .shot-t{color:var(--ink-3); text-decoration:line-through}
.xbtn{color:var(--ink-3); font-size:15px; line-height:1; padding:2px 4px; border-radius:5px; opacity:0; transition:opacity var(--dur), color var(--dur)}
.idea:hover .xbtn,.shot:hover .xbtn,.lrow:hover .xbtn{opacity:1}
.xbtn:hover{color:var(--st-change-ink); background:var(--st-change-bg)}
.empty{padding:22px 4px; text-align:center; font-size:12.5px; color:var(--ink-3)}

/* ---------- 9b. dragging a post to another day ---------- */
.dragghost{
  position:fixed; z-index:95; pointer-events:none; margin:0;
  box-shadow:var(--shadow-3); opacity:.94; border-radius:var(--r-m);
  transform-origin:center; will-change:transform;
}
.dragsource{opacity:.32}
body.dragging{cursor:grabbing; user-select:none}
body.dragging *{cursor:grabbing !important}
.day[data-drop],.mcell[data-drop]{transition:background var(--dur), box-shadow var(--dur)}
.day.dropping{background:var(--st-wait-bg)}
.day.dropping .day-h{background:var(--st-wait-bg)}
.mcell.dropping{background:var(--st-wait-bg); box-shadow:inset 0 0 0 2px var(--gold-deep)}
.card,.mchip,.stories{touch-action:manipulation}

/* ---------- 9c. client links ---------- */
.link{border:1px solid var(--line); border-radius:var(--r-m); padding:11px 12px; background:var(--surface)}
.link + .link{margin-top:7px}
.link.off{opacity:.62}
.link-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.link-name{font-size:13.5px; font-weight:650}
.link-seen{font-size:11.5px; color:var(--ink-3); margin-left:auto}
.link-url{
  font-size:11.5px; color:var(--ink-2); margin-top:7px; padding:6px 8px; border-radius:7px;
  background:var(--surface-3); word-break:break-all; line-height:1.45;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.link-a{display:flex; gap:6px; margin-top:9px; align-items:center; flex-wrap:wrap}

/* ---------- 10. modal ---------- */
.scrim{
  position:fixed; inset:0; z-index:60; background:rgba(8,15,35,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:26px;
  animation:fade var(--dur) ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-3);
  width:100%; max-width:1000px; max-height:100%; display:flex; overflow:hidden;
  animation:rise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise{from{opacity:0; transform:translateY(10px) scale(.99)}to{opacity:1; transform:none}}
.modal.narrow{max-width:520px; flex-direction:column}
.m-close{position:absolute; top:14px; right:16px; z-index:5; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; background:rgba(8,15,35,.4); font-size:15px}
.m-close:hover{background:rgba(8,15,35,.65)}

.m-left{
  width:392px; flex:none; background:var(--navy-deep); position:relative;
  display:flex; align-items:flex-start; justify-content:center; padding:22px 0;
  overflow-y:auto; overscroll-behavior:contain;
}
.m-left > *{margin:auto 0}
.m-right{flex:1; min-width:0; display:flex; flex-direction:column; min-height:0}
.m-head{padding:18px 56px 13px 20px; border-bottom:1px solid var(--line-soft)}
.m-eyebrow{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; display:flex; align-items:center; gap:8px}
.m-title{font-size:17px; font-weight:650; line-height:1.3; margin-top:7px; letter-spacing:-.01em}
.m-body{flex:1; min-height:0; overflow-y:auto; padding:16px 20px}
.m-foot{padding:12px 20px; border-top:1px solid var(--line-soft); display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--surface-2)}
.m-sec{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:0 0 8px}
.m-cap{
  font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:12px 13px;
}
.m-block + .m-block{margin-top:20px}

.threadtabs{display:flex; gap:2px; border-bottom:1px solid var(--line-soft); margin-bottom:12px}
.ttab{padding:0 11px 8px; font-size:12.5px; color:var(--ink-3); border-bottom:2px solid transparent}
.ttab:hover{color:var(--ink-2)}
.ttab.on{color:var(--ink); font-weight:600; border-bottom-color:var(--gold-deep)}
.ttab .n{font-size:10.5px; color:var(--ink-3); margin-left:4px}
.ttab-int{color:var(--st-change-ink)}
.msg{display:flex; gap:9px; padding:9px 0}
.msg + .msg{border-top:1px solid var(--line-soft)}
.msg-av{width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:10px; font-weight:700; background:var(--surface-3); color:var(--ink-2)}
.msg-av.me{background:var(--navy); color:#fff}
.msg-who{font-size:12px; font-weight:650}
.msg-when{font-size:11px; color:var(--ink-3); font-weight:400; margin-left:6px}
.msg-txt{font-size:13px; line-height:1.5; margin-top:2px; white-space:pre-wrap}
.composer{display:flex; gap:7px; margin-top:12px; align-items:flex-end}
.ta{
  flex:1; min-height:38px; max-height:150px; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px;
  line-height:1.5; resize:vertical; transition:border-color var(--dur);
}
.ta:focus{border-color:var(--gold-deep); outline:none}
.intwarn{
  font-size:11.5px; color:var(--st-change-ink); background:var(--st-change-bg);
  padding:6px 9px; border-radius:7px; margin-bottom:10px;
}

/* ---------- 11. instagram phone ---------- */
.phone{
  width:340px; background:#000; border-radius:34px; padding:9px;
  box-shadow:0 0 0 2px #2A2F3D, 0 22px 48px rgba(0,0,0,.55); position:relative;
}
.screen{background:#000; border-radius:26px; overflow:hidden; position:relative; color:#fff; font-size:13px}
.notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:86px; height:22px; background:#000; border-radius:12px; z-index:9}
.ig-status{display:flex; align-items:center; padding:9px 18px 4px; font-size:11.5px; font-weight:650; letter-spacing:.02em}

/* A REEL AND A STORY TAKE OVER THE WHOLE SCREEN, so the device has to be a real phone
   shape: 9:19.5, not 9:16 with a status bar bolted on top. That is what made it read as
   too wide. The bar now floats over the video the way it does on a phone, and the screen
   is the height of an actual iPhone. The video stays 1080 x 1920 and is never cropped;
   the black above and below it is what a phone shows too. */
.phone.full{width:300px}
.screen.full{aspect-ratio:9/19.5; display:grid; place-items:center}
.screen.full .ig-status{position:absolute; top:0; left:0; right:0; z-index:8; padding-top:11px}
.ig-status .r{margin-left:auto; letter-spacing:.06em; opacity:.9}

/* feed post */
.ig-feed{background:#000}
.ig-ph{display:flex; align-items:center; gap:9px; padding:9px 11px}
.ig-av{width:31px; height:31px; border-radius:50%; flex:none; padding:2px; background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.ig-av span{width:100%; height:100%; border-radius:50%; background:var(--gold-soft); color:#111; display:grid; place-items:center; font-size:10px; font-weight:800}
.ig-user{font-size:12.5px; font-weight:650}
.ig-loc{font-size:11px; opacity:.72; margin-top:-1px}
.ig-dots{margin-left:auto; opacity:.85; font-size:15px; letter-spacing:1px}
.ig-media{position:relative; background:#0A0A0A; overflow:hidden}
.ig-track{display:flex; transition:transform .28s cubic-bezier(.25,.8,.3,1); touch-action:pan-y}
.ig-track.drag{transition:none}
.ig-slide{width:100%; flex:none; position:relative}
.ig-slide img,.ig-slide video{width:100%; display:block; object-fit:cover}
.ig-count{position:absolute; top:9px; right:10px; background:rgba(0,0,0,.6); padding:2px 8px; border-radius:11px; font-size:11px; font-weight:650}
.ig-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.85); color:#111; display:grid; place-items:center; font-size:13px; font-weight:800;
  opacity:0; transition:opacity var(--dur);
}
.ig-media:hover .ig-arrow{opacity:.92}
.ig-arrow.l{left:7px} .ig-arrow.r{right:7px}
.ig-arrow[disabled]{display:none}
.ig-dotsrow{display:flex; justify-content:center; gap:4px; padding:9px 0 3px}
.ig-dot{width:5px; height:5px; border-radius:50%; background:#3A3A3C; transition:background var(--dur)}
.ig-dot.on{background:#0A84FF}
.ig-acts{display:flex; align-items:center; gap:14px; padding:6px 12px 2px; font-size:19px}
.ig-acts .sp{margin-left:auto}
.ig-likes{padding:3px 12px 0; font-size:12.5px; font-weight:650}
.ig-cap{padding:4px 12px 0; font-size:12.5px; line-height:1.42}
.ig-cap b{font-weight:650; margin-right:5px}
.ig-more{color:#8E8E93; cursor:pointer}
.ig-cmts{padding:4px 12px 0; font-size:12.5px; color:#8E8E93}
.ig-time{padding:4px 12px 12px; font-size:10.5px; color:#8E8E93; text-transform:uppercase; letter-spacing:.03em}

/* reel */
.ig-reel{position:relative; background:#000; width:100%; height:100%; display:grid; place-items:center}
.ig-reel video,.ig-reel img{width:100%; display:block; aspect-ratio:9/16; object-fit:cover}
.ig-reel-ov{position:absolute; inset:auto 0 0 0; padding:14px 12px 16px; background:linear-gradient(transparent,rgba(0,0,0,.72))}
.ig-reel-rail{position:absolute; right:9px; bottom:82px; display:flex; flex-direction:column; gap:17px; align-items:center; font-size:20px; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ig-reel-rail i{font-style:normal; display:block; text-align:center}
.ig-reel-rail em{font-style:normal; font-size:10.5px; display:block; text-align:center; margin-top:2px; font-weight:600}
.ig-reel-u{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.ig-reel-u .ig-av{width:27px; height:27px}
.ig-reel-cap{font-size:12.5px; line-height:1.4; max-width:76%}
.ig-reel-audio{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:11.5px; opacity:.92}
.ig-play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:4;
  background:rgba(0,0,0,.18); transition:opacity var(--dur);
}
.ig-play span{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.9); color:#111; display:grid; place-items:center; font-size:20px; padding-left:4px}
.ig-play.gone{opacity:0; pointer-events:none}
/* Buffering. A reel is a big file and loading one takes as long as it takes; being told
   nothing while it happens is what made it look broken rather than slow. */
.ig-play.busy span{padding-left:0; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* story */
.ig-story{position:relative; background:#000; width:100%; height:100%; display:grid; place-items:center}
.ig-story img,.ig-story video{width:100%; display:block; aspect-ratio:9/16; object-fit:cover}
.ig-story-bars{position:absolute; top:9px; left:9px; right:9px; display:flex; gap:3px; z-index:3}
.screen.full .ig-story-bars{top:31px}
.screen.full .ig-story-h{top:42px}
.ig-story-bars i{flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.35)}
.ig-story-bars i.on{background:#fff}
.ig-story-h{position:absolute; top:20px; left:11px; right:11px; display:flex; align-items:center; gap:8px; z-index:3}
.ig-story-h .ig-av{width:26px; height:26px}
.ig-story-nav{position:absolute; inset:0; display:flex; z-index:2}
.ig-story-nav button{flex:1}
.ig-story-cnt{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; opacity:.75; z-index:3}

.phone-cap{
  text-align:center; color:rgba(220,225,236,.5); font-size:11px; margin-top:12px;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- 12. composer form ---------- */
.field{margin-bottom:14px}
.lbl{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:6px}
.frow{display:flex; gap:10px}
.frow > *{flex:1}
.drop{
  border:1.5px dashed var(--line); border-radius:var(--r-m); padding:18px; text-align:center;
  color:var(--ink-3); font-size:13px; transition:border-color var(--dur), background var(--dur); cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--gold-deep); background:var(--surface-2); color:var(--accent-ink)}

/* Upload progress. A reel is tens of megabytes and takes real time; without this the
   composer sat there saying nothing, which reads as broken rather than busy. */
.uprog{margin-top:10px}
.uprog-t{font-size:11.5px; color:var(--ink-2); margin-bottom:5px}
.uprog-b{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.uprog-b i{display:block; height:100%; width:0; border-radius:3px; background:var(--gold-deep); transition:width .2s linear}

.thumbs{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.thumb{position:relative; width:58px; height:74px; border-radius:7px; overflow:hidden; border:1px solid var(--line); background:var(--surface-3)}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover; display:block}
.thumb .x{position:absolute; top:2px; right:2px; width:17px; height:17px; border-radius:5px; background:rgba(8,15,35,.72); color:#fff; font-size:11px; display:grid; place-items:center}
.thumb .ord{position:absolute; bottom:2px; left:2px; background:rgba(8,15,35,.72); color:#fff; font-size:9px; padding:1px 4px; border-radius:4px; font-weight:700}
.thumb .mv{position:absolute; bottom:2px; right:2px; display:flex; gap:1px}
.thumb .mv button{width:15px; height:15px; background:rgba(8,15,35,.72); color:#fff; font-size:9px; display:grid; place-items:center; border-radius:4px}

/* ---------- 13. toast ---------- */
.toasts{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none}
.toast{
  background:var(--navy-deep); color:#fff; padding:9px 15px; border-radius:10px;
  font-size:13px; box-shadow:var(--shadow-2); animation:rise .18s ease;
  border:1px solid rgba(196,169,106,.25);
}
.toast.good{border-color:rgba(62,125,90,.6)}

/* ---------- 14. login ---------- */
.login{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 70%)}
.login-card{width:100%; max-width:392px; background:var(--surface); border-radius:var(--r-xl); padding:30px; box-shadow:var(--shadow-3)}
.login-logo{width:74px; margin:0 auto 20px; display:block; opacity:.85}
.login-h{font-size:19px; font-weight:650; text-align:center; letter-spacing:.02em}
.login-s{font-size:13px; color:var(--ink-3); text-align:center; margin-top:6px; line-height:1.5}
.login-b{margin-top:22px; display:flex; flex-direction:column; gap:8px}
.login-btn{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--r-m); text-align:left; transition:border-color var(--dur), background var(--dur);
}
.login-btn:hover{border-color:var(--gold-deep); background:var(--surface-2)}
.login-btn .cl-av{background:var(--navy); color:#fff}
.login-n{font-size:13.5px; font-weight:600}
.login-r{font-size:11.5px; color:var(--ink-3)}
.login-note{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-3); line-height:1.6}
.login-note b{color:var(--ink-2); font-weight:600}
.login-again{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px}
.login-b .btn.wide{width:100%; height:40px; justify-content:center; font-size:13.5px}
/* The code is read off a phone and typed in one go, so it is set wide and monospaced:
   digits that line up are easier to check against the email than proportional ones. */
.login-code{
  width:100%; height:40px; padding:0 12px; border-radius:10px; text-align:center;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  font-size:17px; font-weight:600; letter-spacing:.28em; font-variant-numeric:tabular-nums;
  transition:border-color var(--dur);
}
.login-code:focus{border-color:var(--gold-deep); outline:none; background:var(--surface)}
.login-code::placeholder{font-size:13px; font-weight:400; letter-spacing:.02em; color:var(--ink-3)}
.login-err{margin-top:12px; font-size:12px; line-height:1.5; color:var(--st-change-ink); background:var(--st-change-bg); border:1px solid var(--st-change); border-radius:9px; padding:9px 11px}

/* ---------- 15. responsive ---------- */
@media (max-width:1180px){
  .m-left{width:340px}
  .phone{width:296px}
  .phone.full{width:262px}
}
@media (max-width:980px){
  .ideas{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{
    position:fixed; z-index:70; inset:0 auto 0 0; width:270px;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  }
  body.nav .rail{transform:none; box-shadow:var(--shadow-3)}
  .navscrim{position:fixed; inset:0; z-index:69; background:rgba(8,15,35,.5); display:none}
  body.nav .navscrim{display:block}
  .tb-menu{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; color:var(--ink-2); flex:none; margin-left:-4px}
  .tb-menu:hover{background:var(--surface-3)}
  .cvsw{display:none}
  .topbar{padding:0 14px}
  .viewtabs{margin:0 -14px; padding:0 14px}

  /* the top bar reflows onto two rows instead of squeezing into one */
  .tb-row{flex-wrap:wrap; gap:9px; min-height:0; padding:9px 0 3px}
  .tb-title{flex:1; min-width:0}
  .tb-h1{font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tb-h2{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tb-spacer{display:none}
  .periodnav{order:5; width:100%; justify-content:center; padding-bottom:3px}
  .pn-label{min-width:0; flex:1; text-align:center; font-size:13px}

  /* week becomes a vertical agenda */
  .week{display:block; background:var(--bg)}
  .day{border-bottom:1px solid var(--line); padding-bottom:10px}
  .day-h{position:sticky; top:0; background:var(--bg); padding:10px 14px}
  .day.today .day-h{background:var(--surface-2)}
  .day-body{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px; padding:10px 14px 0}
  .day-add{opacity:1; margin:8px 14px 0}
  .day-empty{padding:8px 14px}
  /* The month grid carries an 860px minimum so seven columns stay readable on a laptop.
     Below the rail breakpoint there is no rail either, so the width is not needed and the
     minimum only produces a sideways scroll. iPad portrait is 768, which is exactly where
     this used to bite. */
  .month{min-width:0}
  .mcell{min-height:100px; padding:6px 5px 7px}
  .mchip{padding:2px 4px; font-size:10px}   /* .mt already truncates, see the base rule */

  .list{padding:12px 14px 60px}
  .ldate{width:auto; min-width:78px; font-size:11.5px}
  .lcap{display:none}
  .ideas{padding:14px}
  .gridwrap{padding:16px 12px 60px}

  /* modal goes full screen and stacks */
  .scrim{padding:0}
  .modal{max-width:none; border-radius:0; height:100%; flex-direction:column}
  .m-left{width:100%; flex:none; padding:12px 0; max-height:62vh; overflow-y:auto}
  .phone{width:218px; border-radius:24px; padding:6px}
  .phone.full{width:196px}
  .screen{border-radius:19px}
  .ig-status{padding:7px 13px 3px; font-size:10px}
  .notch{width:66px; height:17px; top:7px}
  .m-foot{position:sticky; bottom:0}
}
/* THE MONTH ON A PHONE. Without this the grid keeps its 860px minimum and the whole month
   scrolls sideways: you see three days at a time, which is not a month view, it is a wide
   table in a small window. Seven columns on a 375px screen means ~52px each, so the post
   title cannot fit and is dropped; what survives is the format and the status colour, which
   is what the month is actually read for. Tap a day to see the detail. */
@media (max-width:700px){
  .monthwrap{overflow-x:hidden}
  .month{min-width:0}
  .mdow{padding:7px 2px; font-size:8.5px; letter-spacing:.04em; text-align:center}
  .mcell{min-height:74px; padding:5px 3px 6px; gap:3px}
  .mnum{font-size:11px; gap:2px; min-height:17px}
  .madd{width:17px; height:17px; font-size:13px; border-radius:4px}
  .mchip{padding:2px 3px; gap:3px; font-size:9.5px; border-radius:5px}
  .mchip .mt{display:none}          /* no room for a title in a 52px column */
  .mf{font-size:8.5px; letter-spacing:.02em}
  .mbar{width:2.5px}
  .mstory{font-size:9px; padding:2px 3px; gap:3px}
}

@media (max-width:420px){
  /* auto-fit, not "1fr 1fr": with two or more posts on a day you get two columns, and with
     ONE post the empty column collapses so the card fills the width instead of sitting at
     half size next to a gap. Most days have one post, and this board is for looking at
     pictures. */
  .day-body{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .btn{padding:0 11px}
  .tb-row .btn.pri .btn-lbl{display:none}
  .tb-row .btn.pri{padding:0 11px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

@media print{ .rail,.topbar,.m-foot{display:none} }