/* Simple Help Social: styling.

   THE BRAND. Three colours, taken from simplehelpfoundation.co.za and
   confirmed by the charity:  orange #F4A623, teal #2BBFBF, dark #1A1A1A.
   Type is Nunito for headings and Open Sans for everything else.

   Contrast is worked out, not assumed. White text on the orange is about 2:1
   and on the teal about 2.2:1, both far below the 4.5:1 that text needs, so
   neither is ever used behind white text. Filled buttons are orange with DARK
   text (about 9:1). Teal is used for accents and the "today" marker, and its
   text-sized uses are set in dark. The tints below are the brand colours mixed
   with white, so there is no fourth hue. */

:root{
  --orange:#F4A623;
  --orange-dark:#E0920F;          /* hover: the orange, slightly deeper */
  --orange-tint:#FEF3DF;
  --teal:#2BBFBF;
  --teal-tint:#E4F7F7;
  --teal-ink:#0E6B6B;             /* the teal darkened until text on white passes 4.5:1 */
  --dark:#1A1A1A;
  --pearl:#FAF8F4;
  --silver:#E8E4DC;
  --muted:#5F5B53;                /* 6.4:1 on the page background */
  --white:#FFFFFF;

  --ok:#15803D; --ok-bg:#E8F6EC;
  --warn:#9A5B00; --warn-bg:#FEF3DF;
  --err:#B42318; --err-bg:#FEECEA;
  --info:#0E6B6B; --info-bg:#E4F7F7;

  /* Names kept from the structure this was forked from, now mapped to the brand. */
  --blue:var(--orange); --blue-dark:var(--orange-dark); --blue-tint:var(--orange-tint);
  --graphite:var(--dark); --onyx:var(--dark);

  --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(26,26,26,.05), 0 8px 24px rgba(26,26,26,.06);
  --display:"Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --sans:"Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* The browser hides [hidden] elements with `display:none` from its own default
   stylesheet, which ANY author rule outranks. `.login` sets display:grid and
   `.toast` sets display:flex, so both kept drawing while marked hidden, and the
   sign-in card stayed on top of a perfectly working dashboard. This one rule
   makes the hidden attribute mean what it says, for every element. */
[hidden]{display:none !important}
body{
  font-family:var(--sans);
  color:var(--graphite);
  background:var(--pearl);
  /* the dot grid from the creatives, kept faint */
  background-image:radial-gradient(var(--silver) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.45;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.005em}
.muted{color:var(--muted)}
.error{color:var(--err);font-size:13px;margin:6px 0 0}
.mono{font-family:var(--mono);font-size:12px}

/* ── buttons ── */
.btn{
  border:1px solid var(--silver); background:var(--white); color:var(--graphite);
  border-radius:999px; padding:8px 16px; cursor:pointer; font-weight:500;
  transition:background .12s, border-color .12s, transform .06s;
}
.btn:hover{background:var(--pearl)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);border-color:var(--orange);color:var(--dark);font-weight:700}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--silver)}
.btn-danger{color:var(--err);border-color:#F3C9C4}
.btn-danger:hover{background:var(--err-bg)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:5px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{
  border:none;background:transparent;cursor:pointer;border-radius:8px;
  width:34px;height:34px;display:grid;place-items:center;font-size:18px;color:var(--muted);
}
.icon-btn:hover{background:var(--silver);color:var(--graphite)}

/* ── sign in ── */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:var(--gut);background:var(--pearl);
  background-image:radial-gradient(var(--silver) 1px,transparent 1px);background-size:24px 24px;z-index:50}
.login-card{background:var(--white);border:1px solid var(--silver);border-radius:var(--r-lg);
  padding:32px;width:min(380px,100%);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.login-logo{height:96px;width:auto;object-fit:contain;align-self:center;margin-bottom:6px}
.login-card h1{font-size:22px;text-align:center}
.login-card > p{text-align:center}
.login-card p{margin:0 0 14px}
.login-card label{font-size:13px;font-weight:500;margin-top:8px}
.login-card input{border:1px solid var(--silver);border-radius:var(--r);padding:11px 12px;background:var(--white)}
.login-card input:focus{outline:2px solid var(--dark);outline-offset:-1px;border-color:var(--dark)}
.login-card button{margin-top:16px}

/* ── top bar ── */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:12px var(--gut); background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:3px solid var(--orange);
}
.topbar-logo{height:44px;width:auto;margin:-4px 0}
.topbar-sub{font-weight:600;color:var(--muted);font-size:14px;letter-spacing:.02em;
  border-left:1px solid var(--silver);padding-left:10px;margin-left:2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tz-chip{display:inline-flex;align-items:center;gap:7px;background:var(--teal-tint);color:var(--teal-ink);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;white-space:nowrap}
.tz-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.dry-chip{background:var(--teal-tint);color:var(--teal-ink)}
.pause-chip{background:var(--warn-bg);color:var(--warn);border-radius:999px;padding:5px 12px;
  font-size:13px;font-weight:600;white-space:nowrap}

/* ── summary ── */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;padding:16px var(--gut) 0}
.stat{background:var(--white);border:1px solid var(--silver);border-radius:var(--r);padding:12px 14px;cursor:pointer;
  transition:border-color .12s, box-shadow .12s;text-align:left}
.stat:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.stat.active{border-color:var(--orange);background:var(--orange-tint)}
.stat .n{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.stat.is-err .n{color:var(--err)}
.stat.is-warn .n{color:var(--warn)}
.stat.is-ok .n{color:var(--ok)}

/* ── tabs ── */
.tabs{display:flex;gap:4px;padding:16px var(--gut) 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none;background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;
  font-weight:600;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.tab:hover{background:var(--silver)}
.tab.active{background:var(--graphite);color:#fff}
.tab .pill{font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;background:rgba(0,0,0,.08)}
.tab.active .pill{background:rgba(255,255,255,.22)}
.tab .off{font-size:11px;font-weight:500;opacity:.75}

/* ── controls ── */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px var(--gut) 0}
.viewswitch{display:inline-flex;background:var(--white);border:1px solid var(--silver);border-radius:999px;padding:3px}
.viewswitch button{border:none;background:transparent;padding:6px 14px;border-radius:999px;cursor:pointer;
  font-weight:500;color:var(--muted);font-size:14px}
.viewswitch button.active{background:var(--orange);color:var(--dark);font-weight:700}
.nav-group{display:flex;align-items:center;gap:4px}
.period{font-weight:600;margin-left:8px;min-width:150px}
.filters{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.filters input,.filters select{
  border:1px solid var(--silver);background:var(--white);border-radius:999px;padding:7px 13px;font-size:14px}
.filters input{min-width:210px}
.filters input:focus,.filters select:focus{outline:2px solid var(--blue);outline-offset:-1px}

.notice{margin:14px var(--gut) 0;padding:11px 14px;border-radius:var(--r);font-size:14px;
  background:var(--warn-bg);color:var(--warn);border:1px solid #F5D9A8}
.notice strong{font-weight:600}

/* ── review bar ── */
.reviewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px var(--gut) 0;
  padding:10px 14px;background:var(--white);border:1px solid var(--silver);border-radius:var(--r)}
.reviewbar-actions{margin-left:auto;display:flex;gap:8px}
.reviewbar strong{font-weight:600}

/* ── views ── */
.view{padding:14px var(--gut) 8px}

/* month grid */
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  padding:2px 4px 6px;text-align:center}
.cell{background:var(--white);border:1px solid var(--silver);border-radius:var(--r);min-height:112px;
  padding:6px;display:flex;flex-direction:column;gap:5px;transition:border-color .12s, background .12s;
  /* A grid item defaults to min-width:auto, so it refuses to shrink below its
     content. A long caption then pushed every column wide and five of the seven
     days ran off the right of the screen. */
  min-width:0;overflow:hidden}
.cell.out{background:transparent;border-style:dashed;opacity:.5}
.cell.today{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.cell.drop{border-color:var(--blue);background:var(--blue-tint)}
.cell-date{font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.cell.today .cell-date{color:var(--teal-ink);font-weight:700}
.cell-date .n{font-variant-numeric:tabular-nums}

.chip{display:flex;gap:7px;align-items:center;background:var(--pearl);border:1px solid var(--silver);
  border-radius:8px;padding:4px;cursor:grab;text-align:left;width:100%;transition:border-color .12s}
.chip:hover{border-color:var(--blue)}
.chip:active{cursor:grabbing}
.chip.dragging{opacity:.4}
.chip img{width:34px;height:42px;object-fit:cover;border-radius:5px;background:var(--silver);flex:none}
.chip .meta{min-width:0;flex:1}
.chip .time{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.chip .cap{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* week view */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wcol{background:var(--white);border:1px solid var(--silver);border-radius:var(--r);padding:8px;min-height:220px;
  display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden}
.wcol.today{border-color:var(--teal)}
.wcol.drop{border-color:var(--blue);background:var(--blue-tint)}
.wcol h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.wcard{border:1px solid var(--silver);border-radius:var(--r);overflow:hidden;cursor:grab;background:var(--white)}
.wcard:hover{border-color:var(--blue)}
.wcard img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--silver)}
.wcard .body{padding:7px}
.wcard .cap{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* list view */
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:12px;align-items:center;background:var(--white);border:1px solid var(--silver);
  border-radius:var(--r);padding:10px;cursor:pointer;transition:border-color .12s}
.row:hover{border-color:var(--blue)}
.row img{width:46px;height:58px;object-fit:cover;border-radius:6px;background:var(--silver);flex:none}
.row .main{flex:1;min-width:0}
.row .when{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.row .cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.row .right{display:flex;align-items:center;gap:8px;flex:none}

.empty{text-align:center;color:var(--muted);padding:56px 20px;background:var(--white);
  border:1px dashed var(--silver);border-radius:var(--r-lg)}

/* ── status badges ── */
.badge{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap;
  border:1px solid transparent;display:inline-block}
.badge.draft{background:var(--silver);color:var(--muted)}
.badge.needsreview{background:var(--warn-bg);color:var(--warn)}
.badge.approved{background:var(--info-bg);color:var(--info)}
.badge.scheduled{background:var(--info-bg);color:var(--info);border-color:#9ADCDC}
.badge.publishing{background:var(--info-bg);color:var(--info)}
.badge.published{background:var(--ok-bg);color:var(--ok)}
.badge.failed{background:var(--err-bg);color:var(--err)}
.badge.cancelled{background:var(--silver);color:var(--muted);text-decoration:line-through}
.badge.rejected{background:var(--err-bg);color:var(--err)}
.badge.stale{background:var(--warn-bg);color:var(--warn)}
.platform-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}

/* ── media library ── */
.library{margin:18px var(--gut) 0;background:var(--white);border:1px solid var(--silver);border-radius:var(--r-lg);overflow:hidden}
.library-toggle{width:100%;display:flex;align-items:center;gap:12px;padding:13px 16px;border:none;
  background:transparent;cursor:pointer;font-weight:600;text-align:left}
.library-toggle:hover{background:var(--pearl)}
.library-toggle .chev{margin-left:auto;transition:transform .15s;color:var(--muted)}
.library-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.library-body{padding:0 16px 16px;border-top:1px solid var(--silver)}
.lib-group{margin-top:14px}
.lib-group h4{font-size:13px;margin:0 0 8px;color:var(--muted);font-weight:600}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.lib-item{border:1px solid var(--silver);border-radius:var(--r);overflow:hidden;background:var(--white);position:relative}
.lib-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--silver)}
.lib-item .cap{padding:6px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-item .tag{position:absolute;top:5px;left:5px;font-size:10px;font-weight:600;border-radius:999px;padding:2px 7px}
.tag-unused{background:var(--warn-bg);color:var(--warn)}
.tag-used{background:var(--ok-bg);color:var(--ok)}
.tag-block{background:var(--err-bg);color:var(--err)}

/* ── detail panel ── */
.btn-close-sheet{display:none}
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.34);z-index:40;backdrop-filter:blur(2px)}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--white);
  border-left:1px solid var(--silver);z-index:41;overflow-y:auto;box-shadow:-12px 0 40px rgba(10,10,10,.1);
}
.panel-head{position:sticky;top:0;background:var(--white);border-bottom:1px solid var(--silver);
  padding:14px 18px;display:flex;align-items:center;gap:10px;z-index:2}
.panel-head h2{font-size:16px;flex:1}
.panel-body{padding:18px;display:flex;flex-direction:column;gap:18px}
.preview{width:100%;border-radius:var(--r);border:1px solid var(--silver);background:var(--pearl);display:block}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.field textarea,.field input,.field select{
  border:1px solid var(--silver);border-radius:var(--r);padding:10px 12px;background:var(--white);
  font-family:var(--sans);resize:vertical}
.field textarea:focus,.field input:focus,.field select:focus{outline:2px solid var(--blue);outline-offset:-1px}
.field .hint{font-size:12px;color:var(--muted)}
.field .hint.over{color:var(--err);font-weight:600}
.kv{display:grid;grid-template-columns:132px 1fr;gap:7px 12px;font-size:14px}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;overflow-wrap:anywhere;word-break:normal}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;position:sticky;bottom:0;background:var(--white);
  border-top:1px solid var(--silver);padding:14px 18px;margin:0 -18px -18px}
.alert{border-radius:var(--r);padding:11px 13px;font-size:13px;border:1px solid transparent}
.alert-warn{background:var(--warn-bg);color:var(--warn);border-color:#F5D9A8}
.alert-err{background:var(--err-bg);color:var(--err);border-color:#F3C9C4}
.alert-ok{background:var(--ok-bg);color:var(--ok);border-color:#BFE3CB}
.alert-info{background:var(--info-bg);color:var(--info);border-color:#9ADCDC}
.section-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  border-top:1px solid var(--silver);padding-top:14px}
.attempts{display:flex;flex-direction:column;gap:6px;font-size:13px}
.attempt{border:1px solid var(--silver);border-radius:8px;padding:8px 10px}
.audit{max-height:230px;overflow:auto;font-size:12px;display:flex;flex-direction:column;gap:5px}
.audit .a{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--pearl)}
.audit .a time{color:var(--muted);flex:none;font-family:var(--mono);font-size:11px}

/* ── toast ── */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;
  background:var(--graphite);color:#fff;border-radius:999px;padding:9px 10px 9px 18px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);font-size:14px;max-width:calc(100vw - 32px)}
.toast .btn-ghost{color:#8FB6FF;font-weight:600}
.toast .btn-ghost:hover{background:rgba(255,255,255,.12)}
.toast .icon-btn{color:rgba(255,255,255,.6)}
.toast .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:16px var(--gut) 40px;color:var(--muted);font-size:13px}

.only-mobile{display:none}

/* ── mobile ──
   A phone is not a small desktop. The month grid becomes an agenda, empty days
   disappear rather than making you scroll past 29 blank boxes, and the summary
   stops eating half the screen before you see any content. */
@media (max-width:860px){
  :root{--gut:12px}
  body{font-size:14px}
  .only-mobile{display:grid}

  /* header: keep the logo and the sign-out reachable, shrink the rest */
  .topbar{padding:8px var(--gut);gap:8px}
  .topbar-logo{height:18px}
  .topbar-sub{display:none}
  .topbar-right{gap:4px}
  .tz-chip{font-size:11px;padding:3px 9px}
  .tz-chip .dot{width:5px;height:5px}
  .pause-chip{font-size:11px;padding:3px 9px}
  .icon-btn{width:30px;height:30px;font-size:16px}

  /* summary: three across, two short rows, not a wall */
  .summary{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px var(--gut) 0}
  .stat{padding:7px 9px;border-radius:9px}
  .stat .n{font-size:17px}
  .stat .l{font-size:10px;line-height:1.2;margin-top:1px}

  .tabs{padding:10px var(--gut) 0;gap:4px}
  .tab{padding:8px 12px;font-size:13px;gap:6px}
  .tab .off{display:none}
  .tab .pill{font-size:10px;padding:1px 5px}

  /* controls: one tidy stack instead of a wrapped mess */
  .controls{padding:10px var(--gut) 0;gap:8px}
  .viewswitch{order:1;flex:1}
  .viewswitch button{flex:1;padding:6px 0;font-size:13px}
  .nav-group{order:0;width:100%;gap:2px}
  .period{margin-left:auto;min-width:0;font-size:14px}
  .filters{order:2;width:100%;margin-left:0;gap:6px}
  .filters input{min-width:0;flex:1 1 100%}
  .filters select{min-width:0;flex:1 1 30%;font-size:13px;padding:7px 10px}

  .reviewbar{margin:10px var(--gut) 0;padding:9px 12px;font-size:13px;gap:8px}
  .reviewbar-actions{width:100%;margin-left:0}
  .reviewbar-actions .btn{flex:1}

  .view{padding:10px var(--gut) 8px}

  /* month becomes a day-by-day agenda */
  .month{grid-template-columns:1fr;gap:6px}
  .dow{display:none}
  .cell{min-height:0;padding:8px;gap:6px}
  /* a spillover day still carries posts, so it stays; only empty days go */
  .cell.out{opacity:1}
  .cell.out .cell-date{color:var(--muted)}
  .month .cell:not(:has(.chip)){display:none}
  .cell-date{width:100%;font-size:13px;font-weight:700}
  .cell-date::after{content:attr(data-long);color:var(--muted);font-weight:500;margin-left:6px}
  .chip{padding:6px;gap:9px}
  .chip img{width:52px;height:65px}
  .chip .time{font-size:12px}
  .chip .cap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px}

  .week{grid-template-columns:1fr;gap:6px}
  .wcol{min-height:0;padding:8px}
  .wcard{display:flex;gap:9px;align-items:stretch}
  .wcard img{width:80px;height:auto;aspect-ratio:4/5;flex:none}
  .wcard .body{padding:7px 8px 7px 0;flex:1;min-width:0}

  .row{padding:8px}
  .row img{width:52px;height:65px}
  .row .cap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px}
  .row .right{flex-direction:column;align-items:flex-end;gap:4px}

  .library{margin:12px var(--gut) 0}
  .library-toggle{padding:11px 13px;font-size:14px;flex-wrap:wrap}
  .library-toggle .muted{font-size:12px;width:100%;order:3}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}

  /* detail panel: a sheet from the bottom, thumb-reachable actions.
     It stops short of the top so there is a real strip of dimmed page to tap,
     not a sliver hiding behind the header. dvh, because a phone browser's
     address bar makes vh lie about the usable height. */
  .panel{width:100%;top:auto;height:86vh;height:86dvh;border-left:none;
    border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(10,10,10,.22);
    transition:transform .18s ease-out;overscroll-behavior:contain}
  .panel-head{border-radius:18px 18px 0 0;padding:18px 12px 12px 16px;gap:8px}
  .panel-head h2{font-size:15px}
  /* the grab handle: says "you can pull this down" without a word of text */
  .panel-head::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:var(--silver)}
  /* the one control people hunt for, so it gets a full-size touch target */
  .panel-head .icon-btn{width:42px;height:42px;font-size:24px;background:var(--pearl);color:var(--graphite)}
  .panel-body{padding:14px;gap:14px}
  .kv{grid-template-columns:1fr;gap:1px 0}
  .kv dt{margin-top:9px;font-size:12px}
  .panel-actions{padding:12px 14px calc(12px + env(safe-area-inset-bottom));margin:0 -14px -14px;gap:6px}
  .panel-actions .btn{flex:1 1 44%;padding:11px 12px}
  .panel-actions .btn-close-sheet{display:block;flex:1 1 100%;order:99;margin-top:2px;
    background:var(--graphite);color:#fff;border-color:var(--graphite);font-weight:600}

  /* While the sheet is open the page behind is pinned, so a scroll that runs
     off the end of the sheet cannot drag the calendar around underneath. */
  body.sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

  .empty{padding:36px 16px;font-size:14px}
  .foot{padding:14px var(--gut) 32px;font-size:12px;flex-direction:column;gap:4px}
  .toast{left:12px;right:12px;transform:none;bottom:14px;font-size:13px}
}

/* phones ── four platform names will not sit in one row at this width without
   the active pill spilling over its neighbour, so stack them two by two. */
@media (max-width:560px){
  .tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .tab{padding:8px 6px;justify-content:center;min-width:0;overflow:hidden}
  .filters{display:grid;grid-template-columns:1fr 1fr}
  .filters input{grid-column:1/-1;width:100%}
  .filters select{width:100%}
  #clear-filters{grid-column:1/-1}
}

/* very narrow phones */
@media (max-width:340px){
  .summary{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:1fr}
}

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

.month-empty{grid-column:1/-1;padding:40px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ── admin ──
   What is running, and through whose machines. Every status is read live. */
.admin{display:flex;flex-direction:column;gap:10px;max-width:860px}
.admin-head{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.admin-head h2{font-size:19px}
.auto-card{background:var(--white);border:1px solid var(--silver);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.auto-card.is-live{border-left:3px solid var(--ok)}
.auto-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.auto-chain{display:flex;align-items:center;gap:6px}
.auto-arrow{color:var(--muted);font-size:13px}
.auto-name{font-weight:700;font-size:15px;flex:1;min-width:120px}
.auto-detail{font-size:13.5px;color:var(--graphite);line-height:1.5}
.auto-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  font-size:12.5px;color:var(--muted);border-top:1px solid var(--pearl);padding-top:8px}
.auto-stat{font-weight:600;color:var(--graphite)}
.auto-who{margin-left:auto}
.auto-blocked{font-size:13px;background:var(--warn-bg);color:var(--warn);
  border:1px solid #F5D9A8;border-radius:9px;padding:8px 11px}
.admin-note{font-size:12.5px;color:var(--muted);line-height:1.55;padding:4px 2px 0}
.tab-admin{margin-left:auto;border:1px solid var(--silver)}
@media (max-width:860px){
  .tab-admin{margin-left:0}
  .auto-who{margin-left:0;width:100%}
}

.btn-back{align-self:flex-start;padding:7px 13px;font-size:13px;margin-bottom:2px}
@media (max-width:860px){
  /* admin on a phone: the chain of logos and the status need their own lines */
  .admin{max-width:none}
  .admin-head h2{font-size:17px}
  .btn-back{width:100%;text-align:center;padding:10px}
  .auto-card{padding:12px 13px;gap:8px}
  .auto-top{gap:8px}
  .auto-name{font-size:14px;flex:1 1 100%;order:3}
  .auto-chain{order:1}
  .auto-top .badge{order:2;margin-left:auto}
  .auto-detail{font-size:13px}
  .auto-foot{flex-direction:column;gap:3px;font-size:12px}
  .admin-note{font-size:12px}
}

/* ───────── analytics ───────── */
.ana-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:14px 0 18px}
.ana-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ana-card{background:var(--white);border:1px solid var(--silver);border-radius:var(--r-lg);
  padding:18px;min-width:0}
.ana-card h3{margin:0 0 6px;font-size:14px;font-weight:600}
.ana-big{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.ana-sub{margin:26px 0 10px;font-size:14px;font-weight:600}
.ana-note{margin-top:18px;max-width:70ch;line-height:1.5}
.spark-wrap{margin-top:12px}
.spark{display:block;width:100%;height:70px;color:var(--teal-ink);overflow:visible}
.ana-scroll{overflow-x:auto;border:1px solid var(--silver);border-radius:var(--r-lg);
  background:var(--white)}
.ana-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.ana-table th{text-align:left;padding:10px 12px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  border-bottom:1px solid var(--silver);white-space:nowrap}
.ana-table td{padding:10px 12px;border-bottom:1px solid var(--silver);vertical-align:top}
.ana-table tr:last-child td{border-bottom:0}
.ana-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ana-table a{color:var(--dark);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:3px}
.ana-table a:hover{text-decoration-color:var(--dark)}
.small{font-size:12px}

/* analytics: platform switcher, thumbnails, deltas */
.ana-switch{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 18px}
.ana-pill{appearance:none;border:1px solid var(--silver);background:var(--white);
  color:var(--graphite);border-radius:999px;padding:7px 16px;font:inherit;font-size:13px;
  font-weight:500;cursor:pointer;transition:background .12s,border-color .12s}
.ana-pill:hover{border-color:var(--muted)}
.ana-pill.active{background:var(--orange);border-color:var(--orange);color:var(--dark);font-weight:700}
.thumb-cell{width:60px;padding-right:0}
.ana-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block;
  border:1px solid var(--silver);cursor:zoom-in;background:var(--pearl)}
.ana-thumb-none{cursor:default}
.ana-table .up{color:var(--ok);font-weight:600}
.ana-table .down{color:var(--err);font-weight:600}
.ana-table .flat{color:var(--muted)}
.block{display:block}
.img-zoom{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px;cursor:zoom-out}
.img-zoom img{max-width:min(92vw,720px);max-height:76vh;border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.img-zoom p{color:#fff;max-width:60ch;text-align:center;font-size:14px;line-height:1.5;margin:0}

/* ── second row: the social channels ─────────────────────────────────────── */
/* Visibly subordinate to the section row above it, so the two rows read as a
   hierarchy rather than as ten equal destinations on two lines. */
.tabs-sub { padding-top: 6px; }
.tabs-sub .tab { padding-block: 7px; font-size: 13px; }
.tab-section { font-weight: 700; }

/* ── mobile: the two nav rows ────────────────────────────────────────────── */
@media (max-width:560px){
  /* 44px minimum, matching the tap-target standard adopted for the toolbars.
     HEIGHT only: these tabs sit in a 2-column grid, and a width floor would
     push them out of it — the same trade-off the toolbar pass settled on. */
  .tabs .tab{ min-height:44px; }

  /* The channel row stays a single scrolling strip rather than becoming a
     third grid. Six channels at two per row costs three rows before any
     content, on top of three rows of sections — the calendar ends up below
     the fold on a phone purely to list tabs that mostly are not in use. */
  .tabs-sub{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs-sub::-webkit-scrollbar{ display:none; }
  .tabs-sub .tab{ flex:0 0 auto; padding-inline:12px; }
  /* Restored here because the strip has room for it again; the grid hid it. */
  .tabs-sub .tab .off{ display:inline; }
}

/* ── both platforms on one calendar ──────────────────────────────────────── */
.chip{position:relative}
.chip-dot{position:absolute;top:5px;left:5px;width:9px;height:9px;border:1.5px solid var(--white);box-shadow:0 0 0 1px rgba(26,26,26,.15)}
.wcard{position:relative}
.wcard .chip-dot{top:6px;left:6px}
.list .when .platform-dot{display:inline-block;vertical-align:middle;margin-right:2px}

/* ── analytics: a number we could not get is a dash, and says why ───────── */
.ana-card.is-absent{background:var(--pearl);border-style:dashed}
.ana-card.is-absent .ana-big{color:var(--muted)}
.ana-absent ul{margin:0;padding-left:20px;max-width:78ch;font-size:13px;line-height:1.55;color:var(--dark)}
.ana-absent li{margin-bottom:6px}

/* ── the library: a photo missing a file is flagged where it sits ────────── */
.lib-problem{font-size:11px;line-height:1.3;color:var(--err);padding:2px 0 0}