/* Majra identity (majra/brand): Teshrin AR+LT is the only typeface. */
@font-face{font-family:"Teshrin";font-weight:400;font-display:swap;src:url(../fonts/teshrin-regular.woff2) format("woff2")}
@font-face{font-family:"Teshrin";font-weight:500;font-display:swap;src:url(../fonts/teshrin-medium.woff2) format("woff2")}
@font-face{font-family:"Teshrin";font-weight:700;font-display:swap;src:url(../fonts/teshrin-bold.woff2) format("woff2")}
@font-face{font-family:"Teshrin";font-weight:800;font-display:swap;src:url(../fonts/teshrin-heavy.woff2) format("woff2")}

/* ── Tokens ───────────────────────────────────────────────────────────
   Majra identity v2 (majra/brand/identity.html): Cobalt for the main action on each screen,
   night ink for text, and pink only for what waits on the client.
   Status colours carry meaning only: cobalt design, amber ready, pink client, green done,
   burnt orange needs-change, coral late. Neutrals lean slightly blue so they sit with Cobalt. */
:root{
  --bg:#F6F7FB; --surface:#FFFFFF; --sunk:#EEF0F7; --ink:#0B0F2B; --ink-2:#3F4463; --muted:#646A84;
  --line:#E2E5F0; --line-2:#CDD2E3;
  --brand:#2448FF; --brand-ink:#2443E8; --brand-soft:#E8ECFF; --brand-hover:#1E3BD0;
  --coral:#FF6A3D; --coral-ink:#C2410C; --coral-soft:#FFF0EA;
  --t-draft:#646A84; --t-review:#A04A08; --t-ready:#0E7490; --t-design:#2443E8; --t-client:#C2185F; --t-fix:#C2410C; --t-ok:#047857; --t-pub:#0E7490;
  /* Filled controls: text on them stays at 4.5:1 or better in both themes. */
  --action:#2443E8; --action-hover:#1E3BD0; --on-action:#FFFFFF; --on-ok:#FFFFFF; --badge:#D63F12; --on-badge:#FFFFFF; --on-fix:#FFFFFF;
  --shadow:0 1px 0 rgba(11,15,43,.04);
  --shadow-lift:0 2px 4px rgba(11,15,43,.06),0 12px 28px rgba(11,15,43,.10);
  --head:"Teshrin",system-ui,"Segoe UI",Tahoma,sans-serif; --body:"Teshrin",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r:13px; --r-sm:8px; --pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --tap:36px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
/* Dark follows the device unless the person picked a theme; the client portal always pins light. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070A1C; --surface:#10142B; --sunk:#0C1024; --ink:#EDEFFA; --ink-2:#C4C8DE; --muted:#969BB5;
  --line:#232848; --line-2:#2E3458;
  --brand:#5B78FF; --brand-ink:#8CA1FF; --brand-soft:#18204D; --brand-hover:#7B93FF;
  --coral:#FF7D55; --coral-ink:#FF9E80; --coral-soft:#3A1E15;
  --t-draft:#969BB5; --t-review:#F2B84B; --t-ready:#3DC9D0; --t-design:#8CA1FF; --t-client:#FF6FAE; --t-fix:#FF8A4C; --t-ok:#34D399; --t-pub:#3DC9D0;
  --action:#8CA1FF; --action-hover:#A3B4FF; --on-action:#070A1C; --on-ok:#070A1C; --badge:#FF7D55; --on-badge:#070A1C; --on-fix:#070A1C;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 6px 20px rgba(0,0,0,.30);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04),0 14px 32px rgba(0,0,0,.45);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070A1C; --surface:#10142B; --sunk:#0C1024; --ink:#EDEFFA; --ink-2:#C4C8DE; --muted:#969BB5;
  --line:#232848; --line-2:#2E3458;
  --brand:#5B78FF; --brand-ink:#8CA1FF; --brand-soft:#18204D; --brand-hover:#7B93FF;
  --coral:#FF7D55; --coral-ink:#FF9E80; --coral-soft:#3A1E15;
  --t-draft:#969BB5; --t-review:#F2B84B; --t-ready:#3DC9D0; --t-design:#8CA1FF; --t-client:#FF6FAE; --t-fix:#FF8A4C; --t-ok:#34D399; --t-pub:#3DC9D0;
  --action:#8CA1FF; --action-hover:#A3B4FF; --on-action:#070A1C; --on-ok:#070A1C; --badge:#FF7D55; --on-badge:#070A1C; --on-fix:#070A1C;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 6px 20px rgba(0,0,0,.30);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04),0 14px 32px rgba(0,0,0,.45);
  color-scheme:dark}

/* ── Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
.sr-only{position:absolute!important;inset-inline-start:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:100;background:var(--action);color:var(--on-action);padding:8px 16px;border-radius:var(--r-sm);font-weight:700;transform:translateY(-200%);transition:transform .15s var(--ease)}
.skip-link:focus{transform:none;color:var(--on-action)}
.main:focus{outline:none}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.75;direction:rtl;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand-ink);text-underline-offset:3px;transition:color .15s var(--ease)}
a:hover{color:var(--action)}
h1,h2,h3{font-family:var(--head);line-height:1.35;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:2.125rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
h2{font-size:1.15rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--brand) 25%,transparent)}
.muted{color:var(--muted)} .small{font-size:.85rem;line-height:1.65} .num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}

/* Icons: inherit the text colour, never shrink */
.ico{flex:none;display:inline-block;vertical-align:-3px}
.btn .ico{width:16px;height:16px;margin-inline-start:-2px}
.btn.sm .ico{width:14px;height:14px}

/* ── Shell ────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;min-height:100dvh}
.side{--surface:#151A35; --sunk:#10142B; --ink:#EDEFFA; --ink-2:#C4C8DE; --muted:#969BB5; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --brand:#8CA1FF; --brand-ink:#A3B4FF; --shadow:none;
  background:#0B0F2B;color:var(--ink);border-inline-end:1px solid var(--line);padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:1.4rem;padding:0 10px var(--s5);text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo .mark{width:30px;height:28px;flex:none}
.nav{display:grid;gap:2px}
.nav a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;text-decoration:none;color:var(--ink-2);padding:9px 14px;border-radius:var(--pill);font-size:.93rem;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a.on{background:#2448FF;color:#FFFFFF;font-weight:700}
.nav .nl{display:inline-flex;align-items:center;gap:10px}
.nav .ico{color:var(--muted);transition:color .15s var(--ease)}
.nav a:hover .ico{color:var(--ink)}
.nav a.on .ico{color:#FFFFFF}
.me-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.theme-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.badge{font-style:normal;font-size:.72rem;font-weight:700;background:var(--badge);color:var(--on-badge);border-radius:99px;padding:0 7px;min-width:20px;text-align:center;line-height:1.6}
.side .me{margin-top:auto;border-top:1px solid var(--line);padding:var(--s4) 10px 0;font-size:.85rem;display:grid;gap:4px}
.side .me form{margin:0}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.main{padding:var(--s8) max(16px,3vw) 72px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-content:start;max-width:1400px;width:100%}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3)}
.topbar .sub{color:var(--muted);font-size:.9rem;margin-top:2px}
.mobilebar{display:none}
.btn.side-close{display:none}

/* ── Feedback ─────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.flash{background:color-mix(in srgb,var(--t-ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--t-ok) 30%,transparent);color:var(--ink);padding:var(--s3) var(--s4);border-radius:var(--r);animation:rise .25s var(--ease)}
.flash::before{content:"✓ ";color:var(--t-ok);font-weight:800}
.errors{background:var(--coral-soft);border:1px solid color-mix(in srgb,var(--coral) 35%,transparent);padding:var(--s3) var(--s4);border-radius:var(--r);animation:rise .25s var(--ease)}
.errors ul{margin:0;padding-inline-start:18px}
.errors:focus{outline:2px solid var(--coral);outline-offset:2px}
.field-error{display:block;color:var(--coral-ink);font-size:.82rem;font-weight:700;margin-top:2px}
[aria-invalid="true"]{border-color:var(--coral)!important}
/* A button whose form is sending: dimmed, with a small spinner, and not clickable twice. */
.btn.is-busy{opacity:.7;cursor:progress}
.btn.is-busy::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Surfaces ─────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);display:grid;gap:var(--s4);min-width:0;box-shadow:var(--shadow)}
.card.tight{padding:var(--s4);gap:var(--s3)}
.card>h2:first-child,.card>.row:first-child h2{margin-bottom:-4px}
.grid{display:grid;gap:var(--s4)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.row.between{justify-content:space-between}
.stack{display:grid;gap:var(--s3)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s1) 0}

/* ── Status pills and chips ───────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:3px 11px;border-radius:99px;white-space:nowrap;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:0;line-height:1.5}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.t-draft{--c:var(--t-draft)} .t-review{--c:var(--t-review)} .t-ready{--c:var(--t-ready)} .t-design{--c:var(--t-design)}
.t-client{--c:var(--t-client)} .t-fix{--c:var(--t-fix)} .t-ok{--c:var(--t-ok)} .t-pub{--c:var(--t-pub)}
.chip{display:inline-block;font-size:.78rem;padding:2px 12px;border-radius:var(--pill);background:var(--sunk);border:1px solid var(--line);white-space:nowrap;color:var(--ink-2);line-height:1.6}
.chip.warn{background:var(--coral-soft);border-color:transparent;color:var(--coral-ink)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:inline-block;flex:none}
.dot.on{background:var(--t-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-ok) 22%,transparent)}

/* ── Forms ────────────────────────────────────────────────────────── */
label{font-size:.86rem;font-weight:700;display:grid;gap:6px;color:var(--ink)}
label .hint{font-weight:400;color:var(--muted);font-size:.8rem}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=file],select,textarea{
  font:inherit;font-size:.94rem;font-weight:400;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--pill);padding:9px 16px;width:100%;min-width:0;min-height:42px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line-2))}
textarea{min-height:96px;resize:vertical;line-height:1.8;border-radius:var(--r)!important}
input[type=file]{border-radius:var(--r)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input[type=color]{width:64px;height:40px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface)}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.92rem;min-height:32px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.checks{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.req{color:var(--coral-ink)}
.form-grid{display:grid;gap:var(--s4) var(--s4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.form-grid .wide{grid-column:1/-1}
.stars{display:flex;gap:2px;direction:ltr;justify-content:flex-end}
.stars label{font-size:1.4rem;cursor:pointer;color:var(--line-2);font-weight:400;transition:color .12s}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#E8A400}

/* ── Buttons: one primary per area; everything else stays quiet ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.88rem;font-weight:700;border-radius:var(--pill);padding:7px 16px;min-height:var(--tap);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .08s var(--ease)}
.btn:hover{border-color:var(--brand);color:var(--ink)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pri{background:var(--action);border-color:var(--action);color:var(--on-action);box-shadow:0 1px 2px color-mix(in srgb,var(--action) 40%,transparent)}
.btn.pri:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--on-action)}
.btn.ok{background:var(--t-ok);border-color:var(--t-ok);color:var(--on-ok)}
.btn.ok:hover{filter:brightness(1.07);color:var(--on-ok)}
.btn.warn{border-color:color-mix(in srgb,var(--t-fix) 55%,transparent);color:var(--t-fix);background:var(--surface)}
.btn.warn:hover{background:color-mix(in srgb,var(--t-fix) 8%,var(--surface));border-color:var(--t-fix)}
.btn.danger{background:var(--t-fix);border-color:var(--t-fix);color:var(--on-fix)}
.btn.danger:hover{filter:brightness(1.07);color:var(--on-fix)}
.btn.sm{padding:4px 11px;min-height:30px;font-size:.8rem}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--sunk);border-color:transparent}
form.inline{display:inline}

/* ── Tables: calm rows, clear header, easy to scan ────────────────── */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--sunk);font-weight:700;font-size:.78rem;color:var(--muted);white-space:nowrap;padding-block:10px}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
td a.title{font-weight:700;text-decoration:none;color:var(--ink)}
td a.title:hover{color:var(--brand-ink)}
.weekhead td{background:var(--sunk);font-family:var(--head);font-weight:700;font-size:.88rem;padding-block:9px}
.weekhead:hover{background:none}

/* ── Task rows ────────────────────────────────────────────────────── */
.task{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink);min-width:0;box-shadow:var(--shadow);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
a.task:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:var(--shadow-lift);transform:translateY(-1px);color:var(--ink)}
.task.late{border-color:color-mix(in srgb,var(--coral) 50%,var(--line));background:color-mix(in srgb,var(--coral) 5%,var(--surface))}
.task .t{min-width:0}
.task .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task .t span{font-size:.8rem;color:var(--muted)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--on-action);background:var(--action);flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;background:#fff}
.grp{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.01em;margin-top:var(--s2)}
.grp.late{color:var(--coral-ink)}
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:var(--s8) var(--s5);text-align:center;color:var(--muted)}
/* Empty states carry three quiet lanes (identity section 07), in the theme's brand colour */
.empty:not(.cal-day)::before{content:"";display:block;width:120px;height:39px;margin:0 auto var(--s4);background:color-mix(in srgb,var(--brand) 30%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 52'%3E%3Crect x='96' y='4' width='64' height='10' rx='5'/%3E%3Crect x='56' y='4' width='34' height='10' rx='5'/%3E%3Crect x='0' y='4' width='50' height='10' rx='5'/%3E%3Crect x='120' y='21' width='40' height='10' rx='5'/%3E%3Crect x='30' y='21' width='84' height='10' rx='5'/%3E%3Crect x='80' y='38' width='80' height='10' rx='5'/%3E%3Crect x='40' y='38' width='34' height='10' rx='5'/%3E%3Crect x='0' y='38' width='34' height='10' rx='5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 52'%3E%3Crect x='96' y='4' width='64' height='10' rx='5'/%3E%3Crect x='56' y='4' width='34' height='10' rx='5'/%3E%3Crect x='0' y='4' width='50' height='10' rx='5'/%3E%3Crect x='120' y='21' width='40' height='10' rx='5'/%3E%3Crect x='30' y='21' width='84' height='10' rx='5'/%3E%3Crect x='80' y='38' width='80' height='10' rx='5'/%3E%3Crect x='40' y='38' width='34' height='10' rx='5'/%3E%3Crect x='0' y='38' width='34' height='10' rx='5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Greeting band on the overview: Cobalt, text on the reading side, lanes on the far side */
.hello{position:relative;overflow:hidden;background:#2448FF;color:#FFFFFF;border-radius:var(--r);padding:var(--s6) var(--s6);min-height:168px;align-items:flex-start}
.hello>div:first-child{position:relative;z-index:1;max-width:min(560px,58%);display:grid;gap:var(--s2);justify-items:start}
.hello h1{color:#FFFFFF}
.hello .sub,.hello .sub b{color:#E8ECFF}
.hello .btn{background:#FFFFFF;border-color:#FFFFFF;color:#0B0F2B;margin-top:var(--s2)}
.hello .btn:hover{background:#E8ECFF;border-color:#E8ECFF;color:#0B0F2B}
.hello-lanes{position:absolute;inset-block:0;inset-inline-end:0;width:40%}
@media (max-width:720px){.hello-lanes{display:none}.hello>div:first-child{max-width:none}}
/* Lanes band (partials/lanes): fixed Cobalt, a slow right-to-left conveyor; still when motion is reduced */
.lanes-band{background:#2448FF;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/1}
.lanes{display:block;width:100%;height:100%}
.lanes .flow{animation:lanes-flow var(--dur,40s) linear infinite}
@keyframes lanes-flow{to{transform:translateX(var(--d))}}
@media (prefers-reduced-motion:reduce){.lanes .flow{animation:none}}

/* ── KPIs and bars ────────────────────────────────────────────────── */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);display:grid;gap:4px;box-shadow:var(--shadow)}
.kpi b{font-family:var(--head);font-size:2.125rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi span{font-size:.82rem;color:var(--muted)}
.kpi.alert{border-color:color-mix(in srgb,var(--coral) 35%,var(--line))}
.kpi.alert b{color:var(--coral-ink)}
.bar{display:grid;grid-template-columns:110px 1fr 76px;gap:var(--s3);align-items:center;font-size:.86rem}
.track{height:13px;background:var(--sunk);border-radius:99px;overflow:hidden;display:flex}
.track i{display:block;height:100%;transition:width .4s var(--ease)}
.track .d{background:var(--t-ok)} .track .p{background:var(--t-design)} .track .l{background:var(--coral)}

/* ── Post page ────────────────────────────────────────────────────── */
.post-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.post-layout>.stack{gap:var(--s5)!important}
.post-layout.review-mode .side-col{order:-1}
.design{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--sunk);border:1px solid var(--line)}
.design img{display:block;width:100%;height:auto;cursor:crosshair;background:var(--sunk)}
.pin{position:absolute;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;background:var(--coral);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none;animation:rise .2s var(--ease)}
.pin span{transform:rotate(45deg)}
.pin.new{background:var(--brand)}
.gallery{display:grid;gap:var(--s3)}
.filelink{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;color:var(--ink);font-size:.88rem;transition:border-color .15s var(--ease)}
.filelink:hover{border-color:var(--brand);color:var(--ink)}
.comment{display:grid;gap:4px;padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--sunk)}
.comment.client{background:color-mix(in srgb,var(--t-client) 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-client) 30%,transparent)}
.comment small{color:var(--muted);font-size:.76rem}
.comment .body{white-space:pre-wrap;overflow-wrap:anywhere}
.diff del{color:var(--t-fix)} .diff ins{color:var(--t-ok);text-decoration:none}
.events{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.84rem}
.events li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:6px;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;font-size:.92rem;margin:0}
.kv dt{color:var(--muted);font-size:.84rem}
.kv dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
details.action{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;background:var(--surface);transition:border-color .15s var(--ease)}
details.action:hover{border-color:var(--line-2)}
details.action[open]{border-color:var(--line-2)}
details>summary{cursor:pointer;list-style-position:inside}
details.action summary{font-weight:700;font-size:.9rem}
details.action[open] summary{margin-bottom:var(--s3)}
.counter{font-size:.8rem;padding:3px 11px;border-radius:99px;background:var(--sunk);color:var(--ink-2)}
.counter.over{background:var(--coral-soft);color:var(--coral-ink)}
details.fold{border:1px dashed var(--line-2);border-radius:var(--r);padding:10px 14px}
details.fold summary{font-weight:700;font-size:.9rem}
details.fold[open] summary{margin-bottom:var(--s4)}
.draft-note{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--brand);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow-lift);max-width:calc(100vw - 32px);font-size:.9rem;animation:rise .25s var(--ease)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.compare figure{margin:0;display:grid;gap:4px}
.compare figcaption{font-size:.78rem;color:var(--muted);text-align:center}
.compare img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}

/* Collapsible sections that hold a whole form or list */
details.embed{padding:var(--s4) var(--s5)}
details.embed>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:.98rem}
details.embed>summary::marker{color:var(--muted)}
details.embed[open]>summary{margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
details.embed .card{border:0;box-shadow:none;padding:0;background:transparent}
details.embed .card>h2:first-child{display:none}
.preview .feed-media .design img{cursor:crosshair}
.media-empty{display:grid;place-items:center;min-height:220px;color:var(--muted);font-size:.9rem;border-block:1px dashed var(--line-2)}

/* ── Fields editor ────────────────────────────────────────────────── */
.field-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:start}
.field-row .order{display:grid;gap:2px}

/* ── Plan: folded filters and a floating action bar ───────────────── */
details.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;box-shadow:var(--shadow)}
details.filters>summary{font-weight:700;font-size:.9rem}
details.filters[open]>summary{margin-bottom:var(--s3)}
.sendbar{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:12px 16px;margin-top:var(--s3);box-shadow:var(--shadow-lift);animation:rise .2s var(--ease)}
.sendbar .small{color:inherit;opacity:.8}
.sendbar select,.sendbar input{min-height:var(--tap)}

/* ── Theme switch ─────────────────────────────────────────────────── */
.theme-toggle{display:flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--pill);padding:2px;margin-top:8px}
.theme-toggle button{flex:1;font:inherit;font-size:.76rem;border:0;background:transparent;color:var(--muted);padding:5px 6px;border-radius:var(--pill);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.theme-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}

/* ── Client portal: a familiar feed, decisions under the thumb ────── */
.portal{max-width:620px;margin:0 auto;padding:var(--s5) 16px 72px;display:grid;gap:var(--s5)}
.portal-head{display:flex;align-items:center;gap:var(--s3)}
.portal-head .av{width:54px;height:54px;border-radius:14px;font-size:1.2rem}
.timer{font-size:.86rem;background:var(--sunk);border-radius:var(--r-sm);padding:8px 12px;color:var(--muted)}
.timer b{color:var(--ink)}
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap}
.tabs a{font-size:.88rem;padding:7px 16px;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface);transition:background .15s var(--ease)}
.tabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.powered{font-size:.78rem;color:var(--muted);text-align:center}
.feed{padding:0;gap:0;overflow:clip;border-radius:16px}
.feed-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4)}
.feed-head .av{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.feed-head .who{display:grid;line-height:1.4}
.feed-head .who b{font-size:.96rem}
.feed-head .who span{font-size:.78rem;color:var(--muted)}
.feed-head .kind{margin-inline-start:auto}
.feed-media{display:grid;gap:2px;background:var(--sunk)}
.feed-media .design{border:0;border-radius:0}
.video{position:relative;width:100%;aspect-ratio:9/16;max-height:70vh;border:0;border-radius:var(--r-sm);background:var(--sunk)}
.feed-media .video{border-radius:0;max-height:75vh}
.feed-body{padding:var(--s4) var(--s4) var(--s5);display:grid;gap:var(--s4)}
.caption{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;color:var(--ink)}
.caption.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.more{background:none;border:0;padding:4px 0;font:inherit;font-size:.88rem;color:var(--muted);cursor:pointer;font-weight:700}
.more:hover{color:var(--ink)}
.copybox{border-inline-start:4px solid var(--brand);background:var(--brand-soft);border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.copybox small{display:block;color:var(--muted);font-size:.76rem;margin-bottom:2px}
.copybox p{font-family:var(--head);font-weight:700;font-size:1.2rem;line-height:1.5;white-space:pre-wrap}
.copyline{font-family:var(--head);font-weight:700;font-size:1.1rem;background:var(--sunk);border-radius:var(--r-sm);padding:8px 12px}
.countdown{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--t-review);background:color-mix(in srgb,var(--t-review) 11%,transparent);border-radius:99px;padding:4px 12px}
.decide{position:sticky;bottom:0;z-index:5;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s2)}
.decide .btn{width:100%;min-height:48px;font-size:.98rem;border-radius:var(--pill)}
.decide form{margin:0}

/* ── Dashboards ───────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--s3)}
a.kpi{text-decoration:none;color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
a.kpi:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line));box-shadow:var(--shadow-lift);transform:translateY(-1px);color:var(--ink)}
.kpi .kpi-label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.kpi-ring{display:flex;align-items:center;gap:var(--s3)}
.ring{--p:0;--c:var(--t-ok);--size:64px;flex:none;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,var(--surface) 76%,transparent 77% 100%),conic-gradient(var(--c) calc(var(--p) * 1%),var(--sunk) 0)}
.ring b{font-family:var(--head);font-size:.95rem!important;line-height:1}
.ring.sm{--size:46px}
.ring.sm b{font-size:.74rem!important}
.dash-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;background:var(--t-ok)}
.sw.wait{background:color-mix(in srgb,var(--t-review) 70%,transparent)} .sw.design{background:var(--t-design)} .sw.late{background:var(--coral)}
.schedule{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end}
.sday{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:var(--pill);font-size:.72rem;color:var(--muted)}
.sday.today{background:var(--brand-soft);color:var(--brand-ink)}
.sday.weekend .sname{opacity:.6}
.sbar{display:flex;flex-direction:column-reverse;justify-content:flex-start;width:70%;max-width:26px;height:90px;background:var(--sunk);border-radius:var(--pill);overflow:hidden}
.sbar i{display:block;width:100%}
.sbar .ok{background:var(--t-ok)} .sbar .wait{background:color-mix(in srgb,var(--t-review) 70%,transparent)}
.sday>b{font-size:.85rem;color:var(--ink)}
.sname{font-weight:700}
.socc{position:absolute;top:2px;inset-inline-end:4px;color:var(--t-review);font-size:.75rem}
.alert-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--c) 6%,transparent);border-inline-start:3px solid var(--c);transition:background .15s var(--ease)}
.alert-row:hover{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink)}
.alert-row .bullet{width:8px;height:8px;border-radius:50%;background:var(--c)}
.alert-row .t{min-width:0}
.alert-row .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-row .t span{font-size:.8rem;color:var(--muted)}
.pipeline{display:flex;gap:3px;height:16px;border-radius:99px;overflow:hidden}
.pipeline i{display:block;background:var(--c);min-width:6px;transition:flex .3s var(--ease)}
.client-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
.client-card{text-decoration:none;color:var(--ink);gap:var(--s3);padding:var(--s4);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.client-card:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line));box-shadow:var(--shadow-lift);transform:translateY(-1px);color:var(--ink)}
.client-card .av{width:42px;height:42px;border-radius:11px}
.ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-top:1px solid var(--line);padding-top:var(--s3)}
.minis span{display:grid;justify-items:center;font-size:.72rem;color:var(--muted);text-align:center}
.minis b{font-family:var(--head);font-size:1.05rem;color:var(--ink)}
.minis .warn b{color:var(--t-client)} .minis .bad b{color:var(--coral-ink)}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.timeline li:last-child{border-bottom:0}
.timeline .tdot{width:8px;height:8px;border-radius:50%;background:var(--brand);transform:translateY(-1px)}
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:10px}
.chart .col{flex:1;display:grid;justify-items:center;gap:4px;height:100%;align-content:end;font-size:.72rem;color:var(--muted)}
.chart .bars{display:flex;align-items:flex-end;gap:3px;height:140px;width:100%;justify-content:center}
.chart .bars i{display:block;width:40%;max-width:18px;border-radius:5px 5px 0 0;background:var(--c);min-height:2px;transition:height .4s var(--ease)}
.chart .col b{font-size:.8rem;color:var(--ink)}
.hbar{display:grid;grid-template-columns:130px 1fr 54px;gap:var(--s3);align-items:center;font-size:.86rem}
.hbar .track{height:12px}
.hbar .track i{background:var(--c,var(--brand));border-radius:99px}
.rev-row{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px dashed var(--line)}
.rev-row:last-of-type{border-bottom:0}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}

/* ── Search box in the sidebar (Ctrl+K) ───────────────────────────── */
.side-search{display:flex;align-items:center;gap:6px;margin:0 2px var(--s3);padding:0 14px;border:1px solid var(--line);border-radius:var(--pill);background:var(--sunk);color:var(--muted);transition:border-color .15s var(--ease)}
.side-search:focus-within{border-color:var(--brand);background:var(--surface)}
.side-search input[type=search]{border:0;background:transparent;box-shadow:none;padding:7px 0;min-height:36px;font-size:.88rem}
.side-search input[type=search]:focus{box-shadow:none}
.side-search kbd{font:inherit;font-size:.66rem;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:0 5px;white-space:nowrap;direction:ltr}

/* ── View switch and monthly goal ─────────────────────────────────── */
.seg{display:inline-flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.seg a{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;padding:5px 12px;border-radius:6px;text-decoration:none;color:var(--muted)}
.seg a.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.seg label{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;padding:5px 12px;border-radius:6px;color:var(--muted);cursor:pointer;margin:0}
.seg label:has(input:checked){background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus,currentColor);outline-offset:1px}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
/* New post forms (plan quick add, calendar «+»): the caption and design fields show only for a ready post. */
.new-post .ready-only{display:none}
.new-post:has(input[name=kind][value=ready]:checked) .ready-only{display:flex}
.new-post:has(input[name=kind][value=ready]:checked) label.ready-only{display:grid}
.new-post:has(input[name=kind][value=ready]:checked) p.ready-only{display:block}
.new-post:has(input[name=kind][value=ready]:checked) .idea-only{display:none}
.new-post .ready-only-inline{display:none}
.new-post:has(input[name=kind][value=ready]:checked) .ready-only-inline{display:inline}
.pf-icon{flex:none}
.goal{display:inline-flex;align-items:center;gap:var(--s2);padding:3px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.goal .track{height:8px}

/* ── Boards: tasks (drag and drop) and the plan by stage ──────────── */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2);align-items:start}
.wide-board{grid-auto-columns:minmax(146px,1fr);gap:var(--s2)}
.wide-board .board-col{padding:var(--s2)}
.board-col{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);display:grid;gap:var(--s3);align-content:start;min-width:0}
.board-head{display:flex;justify-content:space-between;align-items:center}
.board-list{display:grid;gap:var(--s2);min-height:60px;border-radius:var(--r-sm);transition:background .15s var(--ease)}
.board-list.over{background:color-mix(in srgb,var(--brand) 10%,transparent);outline:2px dashed color-mix(in srgb,var(--brand) 45%,transparent)}
.board-empty{text-align:center;padding:var(--s3) 0}
.bcard-wrap{position:relative}
.row-delete{padding:2px 6px;vertical-align:middle;opacity:.55}
tr:hover .row-delete,.row-delete:focus-visible{opacity:1}
.bcard-wrap .post-delete{position:absolute;top:6px;inset-inline-end:6px}
.bcard-wrap .post-delete .btn{background:var(--surface);opacity:.55}
.bcard-wrap:hover .post-delete .btn,.bcard-wrap .post-delete .btn:focus-visible{opacity:1}
.bcard{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.bcard:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:var(--shadow-lift);color:var(--ink)}
.bcard[draggable="true"]{cursor:grab}
.bcard.dragging{opacity:.45}
.bcard.late{border-color:color-mix(in srgb,var(--coral) 50%,var(--line));background:color-mix(in srgb,var(--coral) 5%,var(--surface))}
.bcard>b{font-size:.92rem;line-height:1.5}

/* ── Unified calendar ─────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line);gap:1px;box-shadow:var(--shadow)}
.cal-name{background:var(--sunk);font-size:.78rem;font-weight:700;color:var(--muted);text-align:center;padding:8px 4px}
.cal-day{background:var(--surface);min-height:118px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
/* «+» to add a post on a day: shows on hover, always on touch screens. */
.cal-add{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px;border:1px dashed color-mix(in srgb,var(--brand) 55%,var(--line));background:var(--surface);color:var(--brand-ink);cursor:pointer;padding:0;line-height:1}
.cal-add:hover,.cal-add:focus-visible{background:var(--brand);border-style:solid;color:#fff}
.cal-day .cal-add{position:absolute;top:5px;inset-inline-end:5px;opacity:0;transition:opacity .12s var(--ease)}
.cal-day:hover .cal-add,.cal-day .cal-add:focus-visible{opacity:1}
@media (hover:none){.cal-day .cal-add{opacity:.8}}
.cal-col{position:relative}
.cal-col .cal-add{position:absolute;top:6px;inset-inline-end:6px}
.cal-month-wrap{position:relative;display:grid}
.cal-month-wrap .cal-add{position:absolute;top:10px;inset-inline-end:10px}
.ig-add{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:4/5;background:var(--surface);border:0;color:var(--brand-ink);font:inherit;cursor:pointer}
.ig-add:hover{background:var(--brand-soft)}
.cal-add-dlg{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.cal-day.out{background:var(--sunk)}
.cal-day.out .cal-date{opacity:.5}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--brand)}
.cal-date{display:flex;align-items:baseline;gap:6px;font-size:.72rem}
.cal-date b{font-size:.92rem}
.cal-day.today .cal-date b{color:var(--brand-ink)}
.cal-wd{display:none}
.cal-occ{font-size:.7rem;color:var(--t-review);background:color-mix(in srgb,var(--t-review) 10%,transparent);border-radius:4px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-item{display:flex;align-items:center;gap:5px;border-inline-start:3px solid var(--client,transparent);font-size:.74rem;line-height:1.45;text-decoration:none;color:var(--ink);padding:2px 5px;border-radius:5px;min-width:0;transition:background .12s var(--ease)}
.cal-item:hover{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink)}
.cal-item i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.cal-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-item .av{width:16px;height:16px;border-radius:4px;font-size:.55rem}
.cal-item.task-item{background:var(--sunk)}

/* ── Client library ───────────────────────────────────────────────── */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s3)}
.lib-item{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;box-shadow:var(--shadow);min-width:0}
.lib-thumb{display:grid;place-items:center;aspect-ratio:4/3;background:var(--sunk) center/contain no-repeat;border-bottom:1px solid var(--line);text-decoration:none}
.lib-ext{font-family:var(--head);font-weight:800;font-size:1.1rem;color:var(--muted);border:2px solid var(--line-2);border-radius:8px;padding:6px 10px;direction:ltr}
.lib-item figcaption{display:grid;gap:4px;padding:var(--s2) var(--s3) var(--s3);min-width:0}
.lib-item figcaption b{font-size:.84rem}

/* ── Format previews: carousel and phone (story / reel) ───────────── */
.carousel{position:relative}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;scroll-snap-align:start}
.carousel .design{border:0;border-radius:0}
.carousel-count{position:absolute;top:10px;inset-inline-end:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.74rem;border-radius:99px;padding:1px 9px;pointer-events:none}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0B0F2B;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.carousel-nav.prev{inset-inline-start:10px} .carousel-nav.next{inset-inline-end:10px}
.phone{position:relative;height:min(75vh,640px);aspect-ratio:9/16;max-width:100%;margin:var(--s3) auto;background:#000;border-radius:22px;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 6px #0B0F2B,var(--shadow-lift)}
.phone-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;height:100%;align-items:center;scrollbar-width:none}
.phone-track::-webkit-scrollbar{display:none}
.phone-track .design{flex:0 0 100%;scroll-snap-align:start;border:0;border-radius:0;background:#000;display:grid;place-items:center}
.phone .design img{width:auto;max-width:100%;max-height:min(75vh,640px);margin:auto}
.phone-video{width:100%;height:100%;border:0}
.phone-empty{color:#cbd5e1;font-size:.9rem}
.phone-top{position:absolute;inset:0 0 auto;z-index:2;padding:10px 12px 18px;display:grid;gap:8px;background:linear-gradient(rgba(0,0,0,.45),transparent);pointer-events:none}
.phone-bars{display:flex;gap:3px}
.phone-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.75)}
.phone-who{display:flex;align-items:center;gap:8px;color:#fff;font-size:.8rem;font-weight:700}
.phone-who .av{width:26px;height:26px;border-radius:50%;font-size:.7rem}

/* ── Calendar views: switcher, week, day/list rows, year, feed, Instagram grid ── */
.cal-views{flex-wrap:wrap;max-width:100%}
.cal-title{min-width:150px;text-align:center}
a.cal-date{text-decoration:none;color:inherit;border-radius:4px}
a.cal-date:hover b{color:var(--brand-ink)}
.cal-thumb{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:var(--sunk);margin-bottom:2px}
.cal.with-images .cal-item{flex-wrap:wrap;align-items:flex-start}
.cal.with-images .cal-item>span{flex:1;min-width:0}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);align-items:start}
.cal-col{display:grid;gap:var(--s2);align-content:start;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);min-width:0;min-height:200px}
.cal-col.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cal-col-head{display:grid;justify-items:center;text-decoration:none;color:var(--ink);font-size:.8rem;padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.cal-col-head b{font-family:var(--head);font-size:1.3rem;line-height:1.2}
.cal-col.today .cal-col-head b{color:var(--brand-ink)}
.cal-entry{display:flex;gap:var(--s3);border-inline-start:4px solid var(--client,var(--line))!important;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);min-width:0}
.cal-entry:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:var(--shadow-lift);color:var(--ink)}
.cal-entry-body{display:grid;gap:4px;min-width:0;flex:1}
.cal-entry-body b{line-height:1.5;overflow-wrap:anywhere}
.cal-entry .av{width:20px;height:20px;border-radius:5px;font-size:.6rem}
.cal-entry-img{width:84px;height:84px;object-fit:cover;border-radius:6px;flex:none;background:var(--sunk)}
.cal-entry.compact{flex-direction:column;gap:var(--s2);padding:var(--s2)}
.cal-entry.compact .cal-entry-img{width:100%;height:auto;aspect-ratio:1}
.cal-entry.compact b{font-size:.84rem}
.cal-entry.compact .pill{font-size:.68rem;padding:1px 8px}
.task-entry{border-style:dashed}
.cal-none{text-align:center;padding:var(--s2) 0}
.cal-list-day .grp{text-decoration:none}
.cal-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.cal-month{text-decoration:none;color:var(--ink);gap:var(--s2);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.cal-month:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line));box-shadow:var(--shadow-lift);color:var(--ink)}
.cal-month.now{border-color:var(--brand)}
.cal-month .av{width:24px;height:24px;border-radius:6px;font-size:.62rem}
.cal-feed{display:grid;gap:var(--s5);max-width:620px;width:100%;margin-inline:auto}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;max-width:620px;background:var(--line);border:1px solid var(--line)}
.ig-tile{position:relative;display:block;aspect-ratio:4/5;background:var(--sunk);overflow:hidden;text-decoration:none;color:var(--ink)}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s var(--ease)}
.ig-tile:hover img{transform:scale(1.03)}
.ig-empty{display:grid;place-items:center;height:100%;padding:var(--s3);text-align:center;font-size:.82rem;color:var(--muted)}
.ig-kind{position:absolute;top:6px;inset-inline-end:6px;background:rgba(0,0,0,.6);color:#fff;font-size:.68rem;border-radius:99px;padding:0 8px}
.ig-meta{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:4px;padding:18px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:.7rem}
.ig-meta .pill{font-size:.62rem;padding:0 7px;background:rgba(255,255,255,.92);color:#0B0F2B}

/* ── Stage legend, time in stage, client colour, design thumbnails ── */
.stage-legend{gap:var(--s1) var(--s4);color:var(--ink-2)}
.stage-legend span{display:inline-flex;align-items:center;gap:6px}
.stage-legend i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.age{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;line-height:1.6;padding:1px 9px;border-radius:99px;white-space:nowrap;color:var(--muted);background:var(--sunk)}
.age-warn{color:var(--t-review);background:color-mix(in srgb,var(--t-review) 12%,transparent);font-weight:700}
.age-late{color:var(--coral-ink);background:var(--coral-soft);font-weight:700}
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--client);margin-inline-end:5px;vertical-align:middle}
.thumb{position:relative;width:44px;height:44px;flex:none;border-radius:9px;background:var(--sunk);box-shadow:0 0 0 2px var(--client)}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block}
.thumb .av{position:absolute;width:20px;height:20px;border-radius:6px;font-size:.58rem;bottom:-5px;inset-inline-end:-5px;box-shadow:0 0 0 2px var(--surface)}
.task-end{display:grid;justify-items:end;gap:4px}
.idea-cell{display:flex;gap:var(--s3);align-items:flex-start}
.row-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;flex:none;background:var(--sunk);border:1px solid var(--line)}
.bcard-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--sunk)}

/* ── Designed confirm dialog (replaces the browser's grey box) ───── */
.dlg{border:0;padding:0;background:transparent;color:var(--ink);width:min(440px,calc(100vw - 32px));max-width:none}
.dlg::backdrop{background:rgba(8,12,20,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg[open]{animation:dlg-in .18s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.dlg-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s6);display:grid;gap:var(--s3);box-shadow:var(--shadow-lift)}
.dlg-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.dlg.danger .dlg-icon{background:var(--coral-soft);color:var(--coral-ink)}
.dlg h2{font-size:1.15rem}
.dlg-body{color:var(--ink-2);white-space:pre-line}
.dlg-actions{display:flex;gap:var(--s2);margin-top:var(--s2)}
.dlg-actions .btn{flex:1;min-height:44px}

/* ── Side panel: posts and tasks open beside the list ─────────────── */
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:60;width:clamp(440px,52vw,780px);display:flex;flex-direction:column;background:var(--bg);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lift);
  transform:translateX(-100%);transition:transform .22s var(--ease)}
.drawer.open{transform:none}
.drawer:focus{outline:none}
.drawer-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--surface);border-bottom:1px solid var(--line);min-height:56px}
.drawer-title{flex:1;min-width:0;font-family:var(--head);font-size:.98rem}
.drawer-nav{display:inline-flex;align-items:center;gap:2px}
.drawer-body{position:relative;flex:1;min-height:0}
.drawer-body iframe{display:block;width:100%;height:100%;border:0;background:var(--bg);transition:opacity .15s var(--ease)}
.drawer.loading iframe{opacity:.35}
.drawer-loading{display:none;position:absolute;top:40%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--brand);animation:spin .7s linear infinite;z-index:1}
.drawer.loading .drawer-loading{display:block}
a.panel-active{outline:2px solid var(--brand);outline-offset:-2px;background:color-mix(in srgb,var(--brand-soft) 60%,var(--surface))}
tr:has(a.panel-active){background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
/* The page inside the panel: no sidebar or phone bar, full width. */
.in-panel .side,.in-panel .mobilebar,.in-panel .skip-link,.in-panel .drawer{display:none!important}
.in-panel .shell{display:block}
.in-panel .main{padding:var(--s5) var(--s5) 72px;max-width:none}
.in-panel body:not([data-panelable]){visibility:hidden}

/* ── Toasts: short confirmations after a background save ─────────── */
.toasts{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:80;display:grid;gap:8px;justify-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--r);box-shadow:var(--shadow-lift);font-size:.9rem;font-weight:700;animation:rise .2s var(--ease);transition:opacity .25s var(--ease)}
.toast.error{background:var(--t-fix);color:var(--on-fix)}
.toast.out{opacity:0}

/* ── Phone and touch ──────────────────────────────────────────────── */
@media (pointer:coarse){
  :root{--tap:44px}
  .btn.sm{min-height:44px;padding:6px 14px}
  .check{min-height:40px}
  .nav a{padding:12px 14px}
}
@media (max-width:860px){
  body{font-size:16px}
  /* 16px inputs stop iOS from zooming into fields. */
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=month],select,textarea{font-size:16px}
  .shell{grid-template-columns:1fr}
  .mobilebar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
  .side{display:none}
  .side.open{display:flex;position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);height:100%;z-index:50;box-shadow:var(--shadow-lift);animation:rise .2s var(--ease)}
  .side.open .side-close{display:inline-flex;position:absolute;top:14px;inset-inline-end:10px;min-height:40px;min-width:40px}
  /* Dim the page behind the open menu; tapping it closes the menu. */
  .side.open+.main::before{content:"";position:fixed;inset:0;z-index:45;background:rgba(8,12,20,.5);animation:rise .2s var(--ease)}
  .main{padding:var(--s5) 16px 72px;gap:var(--s5)}
  h1{font-size:1.4rem}
  .card{padding:var(--s4)}
  .post-layout{grid-template-columns:1fr}
  .bar{grid-template-columns:84px 1fr 64px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:var(--s2)}
  .cols-2,.dash-2{grid-template-columns:1fr}
  .rev-row{grid-template-columns:1fr;gap:var(--s2)}
  .schedule{gap:3px}
  .sbar{height:70px}
  .sday{font-size:.62rem}
  .hbar{grid-template-columns:96px 1fr 44px}
  .task{grid-template-columns:auto 1fr;row-gap:6px}
  .task>.pill,.task>.row:last-child,.task>.task-end{grid-column:2;justify-self:start}
  .task-end{grid-auto-flow:column;justify-items:start}
  .sendbar{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  /* The calendar becomes a list of days that have something. */
  .cal{grid-template-columns:1fr;background:transparent;border:0;gap:var(--s2);box-shadow:none;overflow:visible}
  .cal-name,.cal-day.empty,.cal-day.out{display:none}
  .cal-day{min-height:0;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3)}
  .cal-wd{display:inline}
  .cal-item{font-size:.86rem;padding:4px 6px}
  .board{grid-auto-columns:minmax(240px,82vw)}
  .drawer{width:100vw;border:0}
  .drawer-open body{overflow:hidden}
  .drawer-head .btn span,.drawer #drawerFull{font-size:0;gap:0}
  .drawer #drawerFull .ico{width:18px;height:18px}
  .cal-week{grid-template-columns:1fr}
  .cal-col{min-height:0}
  .cal-col-head{grid-auto-flow:column;justify-content:start;gap:8px;align-items:baseline}
  .cal-entry.compact{flex-direction:row}
  .cal-entry.compact .cal-entry-img{width:64px;height:64px}
  .cal-entry-img{width:64px;height:64px}
  .cal-title{min-width:0;font-size:1rem}
  .cal.with-images .cal-thumb{width:48px;flex:none;margin:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}