/* Apple Design System (jdcasey1117/apple-design) applied to the Content Planner.
   One accent (Action Blue). Pill CTAs. Hairlines, no chrome shadows. Weights 400/600/700 ONLY (500 banned).
   Depth = surface change + hairline + scrim. Pages use these tokens/classes; never raw hex/shadows. */
:root{
  /* Modelled on the Planner artifact: cool near-white + one electric blue, Sora / Manrope / JetBrains Mono, big radii, glass. */
  --primary:#0a6cff;--primary-focus:#3d8bff;--primary-on-dark:#4d9bff;--on-primary:#ffffff;
  --ink:#10141d;--ink80:#2d3648;--ink48:#8691a5;--on-dark:#ffffff;--body-muted:#aab3c5;
  --canvas:#ffffff;--parchment:#f3f6fc;--pearl:#f7f9fd;--tile1:#171d2a;--black:#0a0d13;
  --hairline:#e1e6f0;--soft:#edf1f8;--scrim:rgba(5,8,14,.5);--glass:rgba(255,255,255,.72);--glow:#dce9ff;--ring:rgba(10,108,255,.16);
  --danger:#e5483c;--success:#1d8a4b;--warning:#a86400;--success-ink:#1d8a4b;--warning-ink:#a86400;
  --success-bg:#e6f6ec;--warning-bg:#fff3dd;--danger-bg:#ffedeb;--primary-bg:#e5efff;
  --r-sm:10px;--r-md:14px;--r-lg:22px;--r-xl:28px;--pill:999px;
  --s-xxs:2px;--s-xs:4px;--s-sm:8px;--s-md:12px;--s-base:16px;--s-lg:20px;--s-xl:24px;--s-xxl:32px;--s-xxxl:48px;--s-huge:64px;
  --tap:48px;--navH:48px;--tabH:60px;
  --gold:var(--primary);--cream:var(--parchment);--card:var(--canvas);--line:var(--hairline);--muted:var(--ink48);--okbg:var(--success-bg);--radius:var(--r-lg);
  --font:"Manrope","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-display:"Sora","Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
/* Dark follows the phone's setting, exactly like the artifact */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --primary:#4d9bff;--primary-focus:#7ab3ff;--primary-on-dark:#4d9bff;--on-primary:#06101f;
  --ink:#eef2fa;--ink80:#cbd3e2;--ink48:#7d889e;--on-dark:#ffffff;--body-muted:#aab3c5;
  --canvas:#111620;--parchment:#0a0d13;--pearl:#0e131c;--tile1:#171d2a;--black:#05070b;
  --hairline:#222a3a;--soft:#171d2a;--scrim:rgba(0,0,0,.62);--glass:rgba(17,22,32,.72);--glow:#13233f;--ring:rgba(77,155,255,.22);
  --danger:#ff7a6e;--success:#4cc380;--warning:#e0a24a;--success-ink:#4cc380;--warning-ink:#e0a24a;
  --success-bg:#10261b;--warning-bg:#2a2010;--danger-bg:#2c1513;--primary-bg:#12253f;color-scheme:dark}}
:root[data-theme="dark"]{
  --primary:#4d9bff;--primary-focus:#7ab3ff;--primary-on-dark:#4d9bff;--on-primary:#06101f;
  --ink:#eef2fa;--ink80:#cbd3e2;--ink48:#7d889e;--on-dark:#ffffff;--body-muted:#aab3c5;
  --canvas:#111620;--parchment:#0a0d13;--pearl:#0e131c;--tile1:#171d2a;--black:#05070b;
  --hairline:#222a3a;--soft:#171d2a;--scrim:rgba(0,0,0,.62);--glass:rgba(17,22,32,.72);--glow:#13233f;--ring:rgba(77,155,255,.22);
  --danger:#ff7a6e;--success:#4cc380;--warning:#e0a24a;--success-ink:#4cc380;--warning-ink:#e0a24a;
  --success-bg:#10261b;--warning-bg:#2a2010;--danger-bg:#2c1513;--primary-bg:#12253f;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:radial-gradient(900px 380px at 50% -60px,var(--glow),transparent 70%) no-repeat,var(--parchment);background-color:var(--parchment);background-attachment:fixed;color:var(--ink);font:400 16px/1.5 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
/* type: 700 headlines (tight), 600 emphasis, 400 body */
h1,h2,h3,.brand{font-family:var(--f-display);font-weight:700;line-height:1.05;margin:.2em 0 .45em;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(34px,7vw,52px);letter-spacing:-.045em}h2{font-size:26px}h3{font-size:20px;font-weight:600;letter-spacing:-.022em}
b,strong,th{font-weight:600}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
small,.caption{font-size:13px}
.muted{color:var(--ink48)}.err{color:var(--danger)}.ok{color:var(--success-ink)}.pad{padding:var(--s-base)}

/* global nav: ultra-thin black bar; phone gets a bottom tab bar */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s-base);height:calc(var(--navH) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--s-xl) 0;border-bottom:1px solid var(--hairline);color:var(--ink);isolation:isolate}
/* glass lives on a pseudo-element: backdrop-filter on .top itself would trap the fixed phone tab bar inside the header */
.top::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
.top a{color:var(--ink)}.top a:hover{text-decoration:none}
.brand{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.nav{display:flex;gap:2px;flex:1;min-width:0}
.nav a,.more summary{display:flex;align-items:center;min-height:var(--navH);padding:0 12px;font-size:14px;font-weight:400;letter-spacing:-.016em;color:var(--ink);opacity:.55;list-style:none;cursor:pointer;border:0;background:none}
.nav a:hover,.more summary:hover{opacity:1;text-decoration:none}
.nav a.on{opacity:1;font-weight:600}
.more summary::-webkit-details-marker{display:none}.more{position:relative}
.more-menu{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:rgba(255,255,255,.92)!important;position:fixed;right:var(--s-base);top:calc(var(--navH) + env(safe-area-inset-top) + 6px);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-xs);min-width:220px;z-index:40;overflow:hidden}
.more-menu a{display:flex;align-items:center;min-height:52px;padding:0 var(--s-base);color:var(--primary);font-size:17px;border-radius:var(--r-md);opacity:1}
.more-menu a+a{border-top:1px solid var(--soft);border-radius:0}.more-menu a:active{background:var(--parchment)}
.top-right{display:flex;align-items:center;gap:var(--s-sm);margin-left:auto}
.saved{font:600 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink48);min-width:5em;text-align:right}.saved.ok{color:var(--success-ink)}.saved.err{color:var(--danger)}
#editBtn{min-height:30px;padding:0 14px;font-size:13px}

.app{max-width:980px;margin:0 auto;padding:var(--s-xl) var(--s-xl) calc(var(--s-huge) + var(--s-xl))}
@media(max-width:759px){
  h1{font-size:clamp(32px,9vw,40px)}
  .app{padding:var(--s-base) var(--s-base) calc(var(--tabH) + var(--s-xxl) + env(safe-area-inset-bottom))}
  .top{padding-left:var(--s-base);padding-right:var(--s-base)}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabH) + env(safe-area-inset-bottom));padding:0 var(--s-sm) env(safe-area-inset-bottom);gap:0;justify-content:space-around;align-items:stretch;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--hairline)}
  .nav a,.more summary{flex:1 1 0;justify-content:center;min-height:var(--tabH);padding:0 4px;color:var(--ink48);opacity:1;font-size:12px;font-weight:600;letter-spacing:0}
  .nav a.on,.more[open] summary{color:var(--primary)}
  .more{flex:1 1 0;display:flex}.more summary{width:100%}
  .more-menu{top:auto;bottom:calc(var(--tabH) + env(safe-area-inset-bottom) + 8px);right:var(--s-base);left:var(--s-base)}
}

/* cards: white, 1px hairline, radius lg, NO shadow */
.card{background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg);margin:0 0 var(--s-base)}
.card.flat{background:var(--parchment)}
.row{display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center}.row.end{justify-content:flex-end}.row.between{justify-content:space-between}
.stack>*+*{margin-top:var(--s-md)}.grid{display:grid;gap:var(--s-md)}

/* buttons: pills. primary filled blue; outline = ghost pill; weight 400, press scale .95 */
.btn{appearance:none;border:1px solid var(--primary);background:var(--canvas);color:var(--primary);font:400 17px/1.2 var(--font);letter-spacing:-.022em;min-height:var(--tap);padding:var(--s-md) var(--s-xl);border-radius:var(--pill);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-sm);touch-action:manipulation;transition:transform .15s ease-out,background .15s ease-out}
.btn:hover{text-decoration:none}.btn:active{transform:scale(.95)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.gold{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--primary)}
.btn.ghost-light{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.small{min-height:40px;padding:var(--s-sm) var(--s-base);font-size:15px}
.btn.block{width:100%}.btn.big{min-height:56px;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* inputs: 1px hairline, radius md, blue 1px when focused (2px only for selection) */
.input,select.input,textarea.input{width:100%;font:400 17px/1.4 var(--font);letter-spacing:-.022em;padding:var(--s-md) var(--s-base);min-height:var(--tap);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);color:var(--ink);appearance:none;-webkit-appearance:none}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--ink48) 50%),linear-gradient(135deg,var(--ink48) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
textarea.input{min-height:120px;resize:vertical}
.input::placeholder{color:var(--ink48)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}
label.lbl{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink48);margin:var(--s-lg) 0 var(--s-xs)}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);width:22px;height:22px}

/* chips & status badges: pills. Active/open = filled blue; everything else = parchment + semantic ink */
.chip{display:inline-flex;align-items:center;padding:3px var(--s-sm);border-radius:var(--pill);font:600 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;background:var(--parchment);color:var(--ink80);white-space:nowrap;line-height:1.5}
.chip.st-assets-in{color:var(--warning-ink)}.chip.st-ready{background:var(--primary);color:var(--on-primary);font-weight:600}
.chip.st-posted{color:var(--success-ink);font-weight:600}
.chip.warn{background:var(--warning-bg);color:var(--warning-ink);white-space:normal;border-radius:var(--r-md);padding:var(--s-sm) var(--s-md)}
.chip.type{background:var(--ink);color:#fff;font-weight:600}
.progress{height:6px;background:var(--hairline);border-radius:3px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--primary);border-radius:3px}

/* edit-only controls: hidden (not greyed) when locked */
.edit-only{display:none!important}
body.is-editor .edit-only{display:revert!important}
body.is-editor .btn.edit-only,body.is-editor .row.edit-only{display:inline-flex!important}
body.is-editor div.edit-only,body.is-editor section.edit-only,body.is-editor form.edit-only{display:block!important}
[hidden]{display:none!important}

/* toast: pinned top, dark pill-ish, no shadow. alert = centered dialog; sheet = bottom sheet. scrim is the depth. */
.toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + var(--navH) + var(--s-sm));display:flex;flex-direction:column;align-items:center;gap:var(--s-sm);z-index:60;pointer-events:none;padding:0 var(--s-base)}
.toast{pointer-events:auto;background:rgba(29,29,31,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;padding:var(--s-md) var(--s-lg);border-radius:var(--r-lg);display:flex;gap:var(--s-base);align-items:center;max-width:92%;font-size:15px;animation:toastIn .22s ease-out}
.toast .btn{background:transparent;border-color:var(--primary-on-dark);color:var(--primary-on-dark);min-height:32px;padding:0 var(--s-md);font-size:14px}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.modal-wrap{position:fixed;inset:0;background:var(--scrim);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--canvas);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s-xl) var(--s-xl) calc(var(--s-xl) + env(safe-area-inset-bottom));animation:sheetUp .24s ease-out}
.modal h2{font-size:20px;font-weight:600;text-align:center;margin-top:0}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:700px){.modal-wrap{align-items:center}.modal{border-radius:var(--r-lg);animation:dlgIn .18s ease-out}@keyframes dlgIn{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}}
.sr{position:absolute;left:-9999px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.top,.nav,.toasts,.no-print,.edit-only,#modal{display:none!important}body{background:#fff;font-size:12pt}.app{max-width:none;padding:0}.card{break-inside:avoid}}