/* Content Studio · 📺 ON AIR control room · 2026-10-17 (v12)
   Audi picked ON AIR: "เอาon airดีกว่า · ทำให้มันดูง่ายขึ้นมากกว่านี้ได้ไหม ตอนนี้ยังดูลายตาอยู่ · ตรงทำงาน เราควรแยก column ไหม
   ว่า action อะไร กับสำหรับ output ไหน · ส่วนอื่นในหน้านี้ยังดูไม่ค่อยเป็น theme ไปทางเดียวกัน".
   One panel language for every section (impeccable §🌗 one identity): dark = charcoal monitor + gold hairline + red/amber
   tally lights · light = brushed aluminium desk panel. Tokens below are the ONLY place the two finishes differ.
   Faint ink is set per surface (PREFLIGHT 11): light ink on charcoal, dark ink on aluminium. */

.studio-shell{
  --oa-bg:linear-gradient(180deg,#1a1c22,#111216);
  --oa-inset:#0d0e11;
  --oa-edge:#30333c;
  --oa-hair:rgba(226,201,143,.28);
  --oa-head:#15171b;
  --oa-ink:#eeebe3;
  --oa-soft:#c2c6cf;
  --oa-line:#272a31;
  --oa-alt:rgba(255,255,255,.025);
  --oa-gold:#e2c98f;
  --oa-amber:#ff9933;
  --oa-faint:#d9dce3;
  --oa-faint-edge:rgba(226,201,143,.55);
  --oa-red:#ff9b8f;
  --oa-green:#8fe0b5;
  --oa-blue:#a9c6f0;
  --oa-shadow:0 22px 60px rgba(0,0,0,.5);
  --oa-grain:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px);
}
html[data-theme=light] .studio-shell{
  --oa-bg:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#f6f7f9,#e3e6eb);
  --oa-inset:#ffffff;
  --oa-edge:#c3c8d0;
  --oa-hair:rgba(122,90,18,.22);
  --oa-head:#eceef2;
  --oa-ink:#1c1f2a;
  --oa-soft:#454c5a;
  --oa-line:#d3d7de;
  --oa-alt:rgba(255,255,255,.5);
  --oa-gold:#6e500e;
  --oa-amber:#c46a10;
  --oa-faint:#474e5c;
  --oa-faint-edge:#a99a72;
  --oa-red:#9a2a1f;
  --oa-green:#14603f;
  --oa-blue:#1f3d66;
  --oa-shadow:0 18px 44px rgba(30,40,60,.16);
  --oa-grain:none;
}

/* ── the panel: every framed thing on the page ── */
.studio-shell .wk-frame,.studio-shell .wk-output,.studio-shell .wk-hero,.studio-shell .wk-posting,.studio-shell .aff-card,
.studio-shell .command-overview,.studio-shell .deadline-panel,.studio-shell .intelligence-card,.studio-shell .cta-card,.studio-shell .week-detail{
  background:var(--oa-bg)!important;color:var(--oa-ink);border:1.5px solid var(--oa-edge)!important;
  box-shadow:var(--oa-shadow),inset 0 0 0 1px var(--oa-hair)!important;border-radius:16px}
.studio-shell .command-overview,.studio-shell .deadline-panel,.studio-shell .intelligence-card{
  --text:var(--oa-ink);--muted:var(--oa-soft);--line:var(--oa-line);--gold:var(--oa-gold)}

/* headings + section copy on the sky */
.wk-head h3 .wk-px{display:inline-block;vertical-align:-6px;margin-right:.55rem}
.wk-eyebrow{margin:0 0 .2rem;font:700 .82rem/1 'Outfit',var(--font-body);letter-spacing:.16em;color:#e2c98f}
html[data-theme=light] .studio-shell .wk-head h3,html[data-theme=light] .studio-shell .intelligence-heading h2{color:#14213d}
html[data-theme=light] .studio-shell .wk-range,html[data-theme=light] .studio-shell .intelligence-heading p{color:#33415c}
html[data-theme=light] .studio-shell .wk-eyebrow,html[data-theme=light] .studio-shell .wk-link{color:#6e500e}
html[data-theme=light] .studio-shell .week-howto{color:#33415c}
html[data-theme=light] .studio-shell .week-howto summary{color:#1f3d66}
html[data-theme=light] .studio-shell .week-howto b{color:#14213d}

/* ── control strip on top of the routine ── */
.wk-frame{position:relative;overflow:hidden}
.wk-frame-top{display:flex;align-items:center;gap:1rem;min-height:46px;padding:0 1.2rem;font:700 .85rem/1 'Outfit',var(--font-body);letter-spacing:.12em;color:var(--oa-soft);background:var(--oa-head);border-bottom:1px solid var(--oa-edge)}
.wk-frame-fields b{margin:0 .35rem 0 .9rem;font-weight:800;color:var(--oa-gold)}
.wk-frame-fields b:first-child{margin-left:0}
.wk-lamp{flex:none;padding:.38rem .75rem;border-radius:6px;font-weight:800;letter-spacing:.18em;color:#fff;background:#c42a20;box-shadow:0 0 0 1px #ff8a7a inset,0 0 18px rgba(255,70,50,.55);animation:wk-lamp 1.6s steps(1,end) .2s both}
@keyframes wk-lamp{0%{opacity:.25;box-shadow:none}12%{opacity:1}18%{opacity:.35}26%,100%{opacity:1}}
.wk-frame::after{content:"";position:absolute;inset:46px 0 0;pointer-events:none;background:var(--oa-grain)}

/* ── tables (routine + posting): rows + hairlines on the panel ── */
.studio-shell .wk-table{background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--oa-ink)}
.studio-shell .wk-posting{overflow:hidden}
.studio-shell .wk-table thead th{background:var(--oa-head);color:var(--oa-gold);font:600 1rem 'Mitr',var(--font-head);letter-spacing:.02em;border-bottom:1px solid var(--oa-edge);padding:.75rem 1.1rem}
.studio-shell .wk-row>th,.studio-shell .wk-row>td{border-bottom:1px solid var(--oa-line);background:transparent}
.studio-shell .wk-daypill{color:var(--oa-ink)}
.studio-shell .wk-date,.studio-shell .wk-none{color:var(--oa-soft)}
.studio-shell .wk-title{color:var(--oa-ink)}
.studio-shell .wk-missing{color:#ffc27a}
html[data-theme=light] .studio-shell .wk-missing{color:#7f3d00}
.studio-shell .wk-item.is-flex .wk-missing{color:var(--oa-soft)}
.studio-shell .wk-items>li+li{border-top:1px solid var(--oa-line)}
.studio-shell button.wk-item:hover{background:rgba(226,201,143,.08)}
.studio-shell .wk-row.is-today>th,.studio-shell .wk-row.is-today>td{background:linear-gradient(90deg,rgba(255,153,51,.15),rgba(255,153,51,.03) 75%)}
.studio-shell .wk-row.is-today>th{box-shadow:inset 5px 0 0 var(--oa-amber)}
.studio-shell .wk-row.is-past>th,.studio-shell .wk-row.is-past>td{background:var(--oa-alt)}
.studio-shell .wk-today{background:var(--oa-amber);color:#1a1005}
html[data-theme=light] .studio-shell .wk-today{background:#ff9933}

/* routine: one row per job · day and 🚀 span the day's rows · stronger line between days */
.wk-routine .wk-row>th{width:8.5rem;vertical-align:top;padding-top:1.05rem}
.wk-routine .wk-post{vertical-align:top;padding-top:.95rem;width:24%}
.wk-routine .wk-act{width:30%}
.studio-shell .wk-routine .wk-jobrow>td{padding:.62rem 1.1rem;vertical-align:middle;border-bottom:1px dashed var(--oa-line)}
.studio-shell .wk-routine .wk-jobrow.is-last>td,.studio-shell .wk-routine .wk-jobrow>th,.studio-shell .wk-routine .wk-jobrow>td.wk-post{border-bottom:1.5px solid var(--oa-edge)}
.wk-routine .wk-jobrow.is-first>td{padding-top:1rem}
.wk-routine .wk-jobrow.is-last>td{padding-bottom:1rem}
.wk-posttail{display:none}
.wk-verb{font-weight:700;color:var(--oa-ink)}
.wk-act.is-flex .wk-verb{font-weight:600;color:var(--oa-soft)}
.wk-act .wk-opt,.wk-hjob .wk-opt{margin-left:.45rem}
.wk-opt{padding:.05rem .5rem;border-radius:99px;border:1px dashed var(--oa-faint-edge);font-size:.8rem;font-weight:600;color:var(--oa-faint);white-space:nowrap}
.wk-for{line-height:2.1}
.wk-for>*{vertical-align:middle}
.wk-wk{display:inline-block;margin-right:.5rem;padding:.12rem .55rem;border-radius:6px;font-size:.84rem;font-weight:800;line-height:1.5;white-space:nowrap;border:1px solid}
.wk-wk.is-this{color:#ffc27a;background:rgba(255,153,51,.14);border-color:rgba(255,153,51,.5)}
.wk-wk.is-next{color:#c6d8f3;background:rgba(159,192,234,.1);border-color:rgba(159,192,234,.42)}
html[data-theme=light] .wk-wk.is-this{color:#7f3d00;background:#fff1df;border-color:#e3a96a}
html[data-theme=light] .wk-wk.is-next{color:#24406e;background:#e9f0fa;border-color:#a3badc}
.wk-out-plain{font-weight:700;color:var(--oa-soft)}
.studio-shell .wk-posts{display:flex;flex-wrap:wrap;gap:.45rem}

/* tags on charcoal / aluminium: solid tags keep their soft tint; faint tags get the surface's faint ink */
.studio-shell .wk-tag.is-flex,.studio-shell .wk-tag.is-ghost{background:transparent;color:var(--oa-faint);border:1.5px dashed var(--oa-faint-edge)}
.studio-shell .wk-tag.is-flex .wk-logo,.studio-shell .wk-tag.is-ghost .wk-logo{opacity:.85;filter:none}
.studio-shell .wk-tag.is-linked{box-shadow:0 0 0 2px var(--oa-amber),0 0 0 5px rgba(255,153,51,.25)}

/* output column */
.studio-shell .wk-output{padding:1.3rem 1.4rem}
.studio-shell .wk-out-title,.studio-shell .wk-out-count{color:var(--oa-ink)}
.studio-shell .wk-out{border-top-color:var(--oa-line)}
.studio-shell .wk-out-types{color:var(--oa-soft)}
.studio-shell .wk-out-note{color:var(--oa-green)}
.studio-shell .wk-out-lane{color:var(--oa-blue)}
.studio-shell .wk-out-future{border-top-color:var(--oa-line)}
.studio-shell .wk-out-future h5,.studio-shell .wk-out-future .wk-out-note{color:var(--oa-soft)}

/* ── today = the live monitor ── */
.studio-shell .wk-hero{border-color:rgba(255,153,51,.55)!important;box-shadow:var(--oa-shadow),inset 0 0 0 1px rgba(255,153,51,.35),0 0 40px rgba(255,153,51,.08)!important}
.studio-shell .wk-hero-kicker{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:6px;background:var(--oa-amber);color:#1a1005;font:800 .85rem 'Outfit',var(--font-body);letter-spacing:.14em}
html[data-theme=light] .studio-shell .wk-hero-kicker{background:#ff9933}
.studio-shell .wk-hero-kicker::before{content:"●";animation:wk-rec 1.4s steps(2,jump-none) infinite}
@keyframes wk-rec{50%{opacity:.25}}
.studio-shell .wk-daypill.is-big{color:var(--oa-ink)}
.studio-shell .wk-hero-date{color:var(--oa-soft)}
.studio-shell .wk-hero-col h4{color:var(--oa-ink)}
.studio-shell .wk-hero .wk-items{background:var(--oa-inset);border:1px solid var(--oa-line);border-radius:12px;padding:.1rem .9rem}
.wk-hjobs{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wk-hjob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.4rem 1rem;align-items:center;padding:.5rem 0;border-bottom:1px dashed var(--oa-line)}
.wk-hjob:last-child{border-bottom:0}

/* ── week tabs, chips, jump bar ── */
.studio-shell .wk-tabs,.studio-shell .desk-jumps{background:var(--oa-head);border:1px solid var(--oa-edge)}
.studio-shell .wk-tab{color:var(--oa-ink)}
.studio-shell .wk-tab small{color:var(--oa-soft)}
.studio-shell .wk-tab.is-active{background:linear-gradient(180deg,#f6e3ae,#e2c98f);color:#1a1405}
.studio-shell .wk-tab.is-active small{color:#4a3a12}
.studio-shell .desk-jumps a{color:var(--oa-ink)}
.studio-shell .desk-jumps a:hover{color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f)}
.studio-shell .wk-chip{background:var(--oa-head)}
html[data-theme=light] .studio-shell .wk-chip-word{color:#1c1f2a}
html[data-theme=light] .studio-shell .wk-chip.is-warn .wk-chip-word{color:#7f3d00}
html[data-theme=light] .studio-shell .wk-chip.is-risk .wk-chip-word{color:#9a2a1f}
html[data-theme=light] .studio-shell .wk-chip.is-ok .wk-chip-word{color:#14603f}

/* ── affiliate cards ── */
.studio-shell .aff-card.is-main{border-color:rgba(226,201,143,.7)!important;box-shadow:var(--oa-shadow),inset 0 0 0 1px rgba(226,201,143,.45),0 0 36px rgba(226,201,143,.08)!important}
.studio-shell .aff-name,.studio-shell .aff-uses li,.studio-shell .aff-facts dd{color:var(--oa-ink)}
.studio-shell .aff-sub,.studio-shell .aff-facts dt{color:var(--oa-soft)}
.studio-shell .aff-uses li{border-top-color:var(--oa-line)}
.studio-shell .aff-facts a{color:var(--oa-gold)}
.studio-shell .aff-ok{background:rgba(143,224,181,.1);color:var(--oa-green);border:1px solid rgba(143,224,181,.35)}
html[data-theme=light] .studio-shell .aff-ok{background:#eaf6ef;border-color:#9fd6b6}
.studio-shell .aff-badge.is-quiet{background:var(--oa-head);color:var(--oa-soft);border:1px solid var(--oa-edge)}

/* ── deals · undated · radar panels (today.css rows recolour through the tokens) ── */
.studio-shell .section-head h3,.studio-shell .deal-head strong,.studio-shell .intelligence-row strong{color:var(--oa-ink)}
.studio-shell .section-head p,.studio-shell .deal-head small,.studio-shell .intelligence-row small,.studio-shell .brief-rows .empty,.studio-shell .work-list .empty,.studio-shell .status-label{color:var(--oa-soft)}
.studio-shell .section-head a,.studio-shell .deal-open{color:var(--oa-gold)}
.studio-shell .deal-body,.studio-shell .deal-facts{color:var(--oa-ink)}
.studio-shell .deal-focus{background:rgba(255,153,51,.12);color:#ffc27a;border:1px solid rgba(255,153,51,.4)}
html[data-theme=light] .studio-shell .deal-focus{background:#fff1df;color:#7f3d00;border-color:#e3a96a}
.studio-shell .deal-tab{color:var(--oa-ink);background:var(--oa-head);border-color:var(--oa-edge)}
.studio-shell .deal-tab:hover{border-color:var(--oa-gold);color:var(--oa-ink)}
.studio-shell .deal-tab[aria-selected="true"]{color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f);border-color:#e2c98f}
.studio-shell .done-btn{color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f)}
.studio-shell .deal-card{border-bottom-color:var(--oa-line)}
.studio-shell .intelligence-row{border-bottom-color:var(--oa-line)}
.studio-shell .source-integrity{color:#c9d1e2}
html[data-theme=light] .studio-shell .source-integrity{color:#33415c}

/* ── detail dialog = a monitor that opens with a short power-on ── */
.studio-shell .week-detail{color:var(--oa-ink)}
.studio-shell .week-detail[open]{animation:wk-power .28s cubic-bezier(.2,.8,.2,1)}
@keyframes wk-power{0%{opacity:0;transform:scaleY(.04) scaleX(.9);filter:brightness(2)}60%{opacity:1;transform:scaleY(1.02) scaleX(1)}100%{transform:none;filter:none}}
.studio-shell .week-detail form{border-top:3px solid var(--oa-amber)}
.studio-shell .week-detail h4{color:var(--oa-ink)}
.studio-shell .week-detail .wd-meta{color:var(--oa-soft)}
.studio-shell .wd-step{border-top-color:var(--oa-line)}
.studio-shell .wd-step b,.studio-shell .wd-step span{color:var(--oa-ink)}
.studio-shell .wd-step.is-late span{color:var(--oa-red)}
.studio-shell .wd-primary{color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f)}
.studio-shell .wd-close{color:var(--oa-ink);border-color:var(--oa-edge);background:transparent}
.studio-shell .wd-cta{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--oa-line);background:var(--oa-inset)}
.studio-shell .wd-cta h5{margin:0 0 .55rem;font:600 1.02rem 'Mitr',var(--font-head);color:var(--oa-ink)}
.studio-shell .wd-cta select{width:100%;min-height:48px;padding:.5rem .7rem;border:1px solid #9aa1ad;border-radius:10px;background:#fff;color:#1c1f2a;font:500 .98rem var(--font-body);color-scheme:light}
.studio-shell .wd-cta-line{margin:.7rem 0 0;font:500 1rem/1.6 'Mitr',var(--font-head);color:var(--oa-ink)}
.studio-shell .wd-cta-none{margin:.6rem 0 0;font-size:.93rem;color:var(--oa-soft)}
.wd-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
.wd-cta-row .cta-btn{min-height:40px}
.studio-shell .wd-cta-msg{font-size:.9rem;font-weight:700;color:var(--oa-green)}
.studio-shell .wd-cta-msg.is-err{color:var(--oa-red)}
.studio-shell .wd-cta a{font-size:.9rem;font-weight:700;color:var(--oa-gold)}

/* ── 🎯 CTA bank: cue tiles on the same panel, amber cue line on top ── */
.cta-add-btn{min-height:48px;padding:0 1.2rem;border:0;border-radius:12px;font:700 1rem var(--font-body);color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f);box-shadow:0 4px 16px rgba(226,201,143,.3);cursor:pointer}
.cta-add-btn:hover{filter:brightness(1.05)}
.cta-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.1rem}
.studio-shell .cta-filter{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem;border-radius:99px;border:1px solid var(--oa-edge);background:var(--oa-head);color:var(--oa-ink);font:600 .95rem var(--font-body);cursor:pointer}
.studio-shell .cta-filter b{font:800 .9rem 'Outfit',var(--font-body);color:var(--oa-gold)}
.studio-shell .cta-filter:hover{border-color:var(--oa-gold)}
.studio-shell .cta-filter[aria-pressed="true"]{background:linear-gradient(180deg,#f6e3ae,#e2c98f);color:#1a1405;border-color:#e2c98f}
.studio-shell .cta-filter[aria-pressed="true"] b{color:#4a3a12}
.cta-status{margin:0 0 .9rem;font-size:.95rem;font-weight:600;color:#d4dbea}
.cta-status:empty{display:none}
html[data-theme=light] .cta-status{color:#33415c}
.cta-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.2rem}
.studio-shell .cta-card{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1.3rem 1.1rem;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.studio-shell .cta-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--oa-amber),rgba(255,153,51,0))}
.studio-shell .cta-card:hover,.studio-shell .cta-card:focus-within{transform:translateY(-2px)}
.cta-type{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:99px;font-size:.9rem;font-weight:800;color:var(--ti);background:var(--tb);border:1px solid var(--tbd)}
.cta-type img{width:18px;height:18px;border-radius:4px}
.ct-comment{--tb:#e8f3f8;--ti:#145571;--tbd:#c6e0ec}
.ct-community{--tb:#eceafd;--ti:#3b2fa0;--tbd:#d2cdf6}
.ct-save{--tb:#f7f0de;--ti:#6b4a07;--tbd:#e4d3a6}
.ct-series{--tb:#f1ecfa;--ti:#4a2b80;--tbd:#d8cdee}
.ct-affiliate{--tb:#e9f6ef;--ti:#14603f;--tbd:#b9e0c9}
.ct-share{--tb:#f9ebf1;--ti:#86244f;--tbd:#ecc8d8}
.studio-shell .cta-line{margin:0;font:500 1.12rem/1.6 'Mitr',var(--font-head);color:var(--oa-ink);overflow-wrap:anywhere}
.studio-shell .cta-when{margin:0;font-size:.95rem;line-height:1.55;color:var(--oa-soft)}
.studio-shell .cta-when b{color:var(--oa-ink)}
.studio-shell .cta-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.75rem;border-top:1px dashed var(--oa-line)}
.cta-btn{min-height:44px;padding:0 .9rem;border-radius:10px;font:700 .93rem var(--font-body);cursor:pointer}
.studio-shell .cta-btn.is-main{border:0;color:#1a1405;background:linear-gradient(180deg,#f6e3ae,#e2c98f)}
.studio-shell .cta-btn.is-sub{border:1px solid var(--oa-edge);background:transparent;color:var(--oa-ink)}
.studio-shell .cta-btn.is-sub:hover{border-color:var(--oa-gold)}
.studio-shell .cta-btn.is-del{border:1px solid transparent;background:transparent;color:var(--oa-red);margin-left:auto}
.studio-shell .cta-btn.is-del:hover{border-color:var(--oa-red)}
.cta-btn:disabled{opacity:.6;cursor:wait}
.studio-shell .cta-field{display:grid;gap:.35rem;font-size:.92rem;font-weight:700;color:var(--oa-soft)}
.cta-field select,.cta-field textarea,.cta-field input{width:100%;min-height:48px;padding:.6rem .75rem;border:1px solid #9aa1ad;border-radius:10px;background:#fff;color:#1c1f2a;font:500 1rem/1.5 var(--font-body);color-scheme:light}
.cta-field textarea{min-height:6.5rem;font-family:'Mitr',var(--font-head)}
.cta-field select:focus,.cta-field textarea:focus,.cta-field input:focus{outline:2px solid var(--oa-amber);outline-offset:1px}
.cta-empty{grid-column:1/-1;margin:0;padding:1.4rem;border:1.5px dashed rgba(226,201,143,.5);border-radius:14px;color:#d4dbea;font-size:1rem;text-align:center}
html[data-theme=light] .cta-empty{color:#33415c;border-color:#a99a72}
.cta-toast{position:fixed;left:50%;bottom:1.4rem;z-index:1200;display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 2rem);padding:.7rem .8rem .7rem 1.1rem;border-radius:14px;border:1px solid rgba(226,201,143,.6);background:#17191e;color:#f4f1e8;font-size:.97rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.45);transform:translateX(-50%)}
.cta-toast[hidden]{display:none}
.cta-toast.is-err{border-color:#ef8b80}
.cta-toast button{min-height:40px;padding:0 .9rem;border-radius:10px;border:0;background:linear-gradient(180deg,#f6e3ae,#e2c98f);color:#1a1405;font-weight:800;cursor:pointer}

/* ── phones: each day stacks as action → output lines, then its posts ── */
@media(max-width:760px){
  .wk-frame-fields{display:none}
  .wk-routine .wk-row>th{width:100%;padding-top:.85rem}
  .wk-routine .wk-jobrow>td.wk-post{display:none}
  .studio-shell .wk-routine .wk-jobrow>td{display:block;width:100%;border-bottom:0;padding:.15rem .9rem}
  .studio-shell .wk-routine .wk-jobrow>td.wk-for{padding-bottom:.6rem;border-bottom:1px dashed var(--oa-line)}
  .wk-routine .wk-posttail{display:block}
  .studio-shell .wk-routine .wk-posttail>td{display:block;width:100%;padding:.6rem .9rem .9rem;border-bottom:1.5px solid var(--oa-edge)}
  .wk-routine .wk-posttail>td::before{content:"🚀 วันนี้ลง";display:block;margin-bottom:.35rem;font-size:.9rem;font-weight:800;color:var(--oa-soft)}
  .wk-routine .wk-make::before,.wk-routine .wk-post::before{content:none}
  .wk-hjob{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.wk-lamp,.studio-shell .wk-hero-kicker::before,.studio-shell .week-detail[open]{animation:none!important}.studio-shell .cta-card{transition:none}}
html[data-motion=paused] .wk-lamp,html[data-motion=paused] .studio-shell .wk-hero-kicker::before,html[data-motion=paused] .studio-shell .week-detail[open]{animation:none!important}
.studio-shell .wk-routine .wk-jobrow>td.wk-post{vertical-align:top;padding-top:1rem}
.studio-shell .wk-table.wk-posting{border-radius:16px;overflow:hidden}
@media(max-width:760px){.studio-shell .wk-routine .wk-jobrow>td.wk-post{display:none}}
@media(max-width:900px){.studio-shell .wk-hero{grid-template-columns:minmax(0,1fr)}.studio-shell .wk-hero-col,.studio-shell .wk-hero .wk-items{min-width:0}}
@media(max-width:760px){.studio-shell .wk-hero .wk-item{grid-template-columns:minmax(0,1fr) auto}.studio-shell .wk-hero .wk-title{grid-column:1/-1}}
@media(max-width:760px){.studio-shell .wk-item,.studio-shell .wk-hero .wk-item{grid-template-columns:minmax(0,1fr);gap:.4rem}.studio-shell .wk-item>.wk-state{grid-column:auto;grid-row:auto;justify-self:start}.studio-shell .wk-item>.wk-tag{max-width:100%;white-space:normal}}

/* ── platform logos: one logo, or a stack of overlapping discs for cross-posted clips (FB · IG · TikTok) ── */
.wk-logos{display:inline-flex;align-items:center;flex:none}
.wk-logos .wk-logo{position:relative;width:22px;height:22px;padding:2px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--tb,#fff),0 1px 3px rgba(0,0,0,.25)}
.wk-logos.is-stack .wk-logo+.wk-logo{margin-left:-8px}
.wk-logos.is-stack .wk-logo:nth-child(1){z-index:3}.wk-logos.is-stack .wk-logo:nth-child(2){z-index:2}.wk-logos.is-stack .wk-logo:nth-child(3){z-index:1}
.wk-tag:hover .wk-logos.is-stack .wk-logo+.wk-logo{margin-left:-3px;transition:margin .18s ease}
@media(prefers-reduced-motion:reduce){.wk-tag:hover .wk-logos.is-stack .wk-logo+.wk-logo{transition:none}}

/* ── how close a must-do post is: red ≤3 days / late, amber 4–7 days ── */
.wk-end{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.4rem;justify-self:end}
.wk-due{padding:.18rem .6rem;border-radius:99px;font-size:.88rem;font-weight:800;white-space:nowrap;border:1px solid}
.wk-due.is-red{color:#fff;background:linear-gradient(180deg,#d8432f,#b3261e);border-color:#ff8a7a;box-shadow:0 0 12px rgba(255,70,50,.35)}
.wk-due.is-amber{color:#ffc27a;background:rgba(255,153,51,.14);border-color:rgba(255,153,51,.55)}
html[data-theme=light] .wk-due.is-amber{color:#7f3d00;background:#fff1df;border-color:#e3a96a}
.studio-shell .wk-item.is-due-red{box-shadow:inset 3px 0 0 #e0483a;background:linear-gradient(90deg,rgba(224,72,58,.12),transparent 60%)}
.studio-shell .wk-item.is-due-amber{box-shadow:inset 3px 0 0 rgba(255,153,51,.8)}
/* a must-do slot with no card yet: red dashed outline, never the faint grey of an optional slot */
.studio-shell .wk-tag.is-missing{background:transparent;color:#ffb0a6;border:1.5px dashed #e0483a}
html[data-theme=light] .studio-shell .wk-tag.is-missing{color:#9a2a1f;border-color:#c0392b}
.studio-shell .wk-item.is-empty:not(.is-flex) .wk-missing{color:#ffb0a6;font-weight:700}
html[data-theme=light] .studio-shell .wk-item.is-empty:not(.is-flex) .wk-missing{color:#9a2a1f}
@media(max-width:760px){.studio-shell .wk-item>.wk-end{justify-self:start;justify-content:flex-start}}
/* CTA card head: type + where the line came from */
.cta-head{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.cta-src{padding:.22rem .6rem;border-radius:99px;font-size:.82rem;font-weight:800;border:1px solid}
.cta-src.is-audi{color:#8fe0b5;background:rgba(143,224,181,.1);border-color:rgba(143,224,181,.4)}
.cta-src.is-draft{color:#ffc27a;background:rgba(255,153,51,.12);border-color:rgba(255,153,51,.45)}
html[data-theme=light] .cta-src.is-audi{color:#14603f;background:#eaf6ef;border-color:#9fd6b6}
html[data-theme=light] .cta-src.is-draft{color:#7f3d00;background:#fff1df;border-color:#e3a96a}
.ct-rocket{--tb:#efeafb;--ti:#4b2a8c;--tbd:#d6cbef}
.ct-web{--tb:#e9f0fa;--ti:#1f3d66;--tbd:#c6d5ec}
/* stack polish: bigger discs, gentler overlap, ring in the surface colour so each disc reads as its own logo */
.wk-logos .wk-logo{width:24px;height:24px}
.wk-logos.is-stack .wk-logo+.wk-logo{margin-left:-5px}
.studio-shell .wk-tag.is-flex,.studio-shell .wk-tag.is-ghost,.studio-shell .wk-tag.is-missing{--tb:#16181d}
html[data-theme=light] .studio-shell .wk-tag.is-flex,html[data-theme=light] .studio-shell .wk-tag.is-ghost,html[data-theme=light] .studio-shell .wk-tag.is-missing{--tb:#eef0f3}
.studio-shell .wk-posting .wk-item,.studio-shell .wk-hero .wk-item{grid-template-columns:minmax(12rem,15.5rem) minmax(0,1fr) auto}
.studio-shell .wk-item>.wk-tag{max-width:100%;white-space:normal}
@media(max-width:760px){.studio-shell .wk-posting .wk-item,.studio-shell .wk-hero .wk-item{grid-template-columns:minmax(0,1fr)}.studio-shell .wk-posting .wk-item>.wk-end,.studio-shell .wk-hero .wk-item>.wk-end{justify-self:start;justify-content:flex-start}}

/* plan switch: 📦 buffer (main) / ⚡ live (make and post the same week) — two real pressable buttons in both themes */
.wk-plan{display:inline-flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0 .2rem;padding:.3rem;border-radius:14px;background:rgba(21,23,27,.9);border:1px solid rgba(226,201,143,.4)}
.wk-plan button{min-height:46px;padding:0 1.05rem;border:0;border-radius:10px;background:transparent;color:#eeebe3;font:600 1rem 'Mitr',var(--font-head);cursor:pointer}
.wk-plan button small{margin-left:.35rem;font:600 .82rem var(--font-body);color:#c2c6cf}
.wk-plan button:hover{background:rgba(226,201,143,.14)}
.wk-plan button[aria-pressed="true"]{background:linear-gradient(180deg,#f6e3ae,#e2c98f);color:#1a1405}
.wk-plan button[aria-pressed="true"] small{color:#4a3a12}
html[data-theme=light] .wk-plan{background:#fffdf8;border-color:#b9a77a}
html[data-theme=light] .wk-plan button{color:#1c1f2a}
html[data-theme=light] .wk-plan button small{color:#454c5a}
html[data-theme=light] .wk-plan button[aria-pressed="true"]{color:#1a1405}

/* ℹ️ supplementary "how to read" notes: always a closed toggle (Audi 2026-10-17 "อะไรที่เป็นข้อมูลเสริม … ให้ทำเป็น toggle เพื่ออ่านเสมอ") */
.studio-shell .section-howto{margin:.2rem 0 .9rem;font-size:.95rem;color:var(--oa-soft)}
.studio-shell .section-howto summary{display:inline-flex;align-items:center;min-height:40px;cursor:pointer;font-weight:800;color:var(--oa-gold)}
.studio-shell .section-howto p{margin:.2rem 0 0;line-height:1.6;max-width:68ch;color:var(--oa-soft)}
.studio-shell .week-howto ul{line-height:1.6}

/* ☑ routine check-offs: a real checkbox (44px hit area), ticked job reads as done without fading text by opacity */
.wk-check{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-6px .55rem -6px -6px;padding:7px;flex:none;vertical-align:middle;cursor:pointer;box-sizing:content-box}
.wk-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wk-check-box{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;border:2px solid var(--oa-faint-edge);background:var(--oa-inset);font:900 .95rem/1 var(--font-body);color:#0d2a1c}
.wk-check:hover .wk-check-box{border-color:var(--oa-gold)}
.wk-check input:focus-visible+.wk-check-box{outline:2px solid var(--oa-amber);outline-offset:2px}
.wk-check.is-done .wk-check-box{background:linear-gradient(180deg,#6fe0a6,#3dbb7c);border-color:#3dbb7c}
.wk-check input:disabled{cursor:wait}
.wk-act.is-checked .wk-verb{color:var(--oa-soft);text-decoration:line-through;text-decoration-color:rgba(111,224,166,.8);text-decoration-thickness:2px}
.wk-act{white-space:normal}
/* day progress pill under the day name */
.wk-prog{display:table;margin-top:.5rem;padding:.16rem .6rem;border-radius:99px;font-size:.84rem;font-weight:800;white-space:nowrap;border:1px solid}
.wk-prog.is-done{color:#8fe0b5;background:rgba(143,224,181,.12);border-color:rgba(143,224,181,.45)}
.wk-prog.is-part{color:#ffd88a;background:rgba(255,190,80,.12);border-color:rgba(255,190,80,.45)}
.wk-prog.is-late{color:#fff;background:linear-gradient(180deg,#d8432f,#b3261e);border-color:#ff8a7a}
.wk-prog.is-none{color:var(--oa-soft);background:transparent;border-color:var(--oa-line)}
html[data-theme=light] .wk-prog.is-done{color:#14603f;background:#eaf6ef;border-color:#9fd6b6}
html[data-theme=light] .wk-prog.is-part{color:#7a4b00;background:#fff4dc;border-color:#e8c27a}
@media(max-width:760px){.wk-routine .wk-row>th .wk-prog{display:inline-block;margin:0 0 0 .3rem}}
.wk-act-line{display:flex;align-items:flex-start;gap:0}
.wk-act-line .wk-check{margin-top:-5px}
.wk-act-words{flex:1;min-width:0;padding-top:.1rem;line-height:1.5}
/* optional / off-plan cards: quiet yellow, dashed, says เสริม — red stays for must-do only */
.wk-due.is-soft{color:#ffe08a;background:rgba(255,214,102,.1);border:1px dashed rgba(255,214,102,.6)}
html[data-theme=light] .wk-due.is-soft{color:#6b4f00;background:#fff8dc;border-color:#d9b84a}
.studio-shell .wk-item.is-due-soft{box-shadow:inset 3px 0 0 rgba(255,214,102,.55)}

/* ═════════ v18 · 2026-10-18 upgrade pass (Audi: "ทำทั้งหมดนั่นแหละ") ═════════ */
/* slim header: no framed hero, sprite title, today box reaches the first screen */
.studio-shell .studio-opening.is-slim{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin:0 0 .4rem;padding:1.2rem 0 .6rem!important;background:none!important;border:0!important;box-shadow:none!important;min-height:0}
.studio-shell .studio-opening.is-slim::before,.studio-shell .studio-opening.is-slim::after{display:none!important}
.studio-shell .studio-opening.is-slim h1{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 0;font:700 clamp(2rem,4vw,2.8rem)/1.1 'Mitr',var(--font-head)}
.studio-shell .studio-opening.is-slim .studio-lede{margin:.35rem 0 0;font-size:.95rem}
.studio-shell .studio-opening.is-slim .opening-pulse{padding:.55rem .8rem;border-radius:12px;background:var(--oa-head);border:1px solid var(--oa-edge)}
.studio-shell .intelligence-heading{margin:0 0 .6rem;padding:0;align-items:center}
.studio-shell .desk-source{margin:0;font-size:.9rem;color:#c9d1e2}
html[data-theme=light] .studio-shell .desk-source{color:#33415c}
html[data-theme=light] .studio-shell .studio-opening.is-slim h1{color:#14213d}

/* sticky jump bar: floating pills, frosted layer only while stuck (PREFLIGHT 28) */
#jumps-sentinel{height:1px}
.studio-shell .desk-jumps{position:sticky;top:var(--studio-jump-top,112px);z-index:40;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.4rem;padding:.45rem;border:0;border-radius:16px;background:transparent;transition:background .2s,box-shadow .2s}
.studio-shell .desk-jumps.is-stuck{background:rgba(21,23,27,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme=light] .studio-shell .desk-jumps.is-stuck{background:rgba(246,247,249,.85)}
.studio-shell .desk-jumps a{min-height:40px;display:inline-flex;align-items:center;padding:0 .85rem;border-radius:99px;border:1px solid var(--oa-edge);background:var(--oa-head);font-weight:700;text-decoration:none}
.studio-shell #week-today,.studio-shell .wk-block,.studio-shell #deals,.studio-shell #content-production,.studio-shell #idea-dump{scroll-margin-top:calc(var(--studio-jump-top,112px) + 70px)}
@media(max-width:760px){.studio-shell .desk-jumps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.studio-shell .desk-jumps::-webkit-scrollbar{display:none}.studio-shell .desk-jumps a{flex:none}}
@media(prefers-reduced-motion:reduce){.studio-shell .desk-jumps{transition:none}}

/* routine strip button + folded days */
.wk-frame-top{flex-wrap:wrap}
.wk-strip-btn{margin-left:auto;min-height:36px;padding:0 .85rem;border-radius:9px;border:1px solid var(--oa-edge);background:var(--oa-inset);color:var(--oa-ink);font:700 .88rem var(--font-body);letter-spacing:0;cursor:pointer}
.wk-strip-btn:hover{border-color:var(--oa-gold)}
.wk-strip-btn[aria-pressed="true"]{background:linear-gradient(180deg,#f6e3ae,#e2c98f);color:#1a1405;border-color:#e2c98f}
.studio-shell .wk-routine .wk-collapsed>th,.studio-shell .wk-routine .wk-collapsed>td{border-bottom:1.5px solid var(--oa-edge);padding:.6rem 1.1rem;vertical-align:middle}
.studio-shell .wk-routine .wk-collapsed>th .wk-prog{display:inline-block;margin:0 0 0 .5rem}
.wk-fold-open{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;width:100%;min-height:44px;padding:.2rem .4rem;border:0;border-radius:10px;background:transparent;color:var(--oa-soft);font:600 .95rem var(--font-body);text-align:left;cursor:pointer}
.wk-fold-open:hover{background:rgba(226,201,143,.08);color:var(--oa-ink)}
.wk-fold-count{font-weight:800;color:var(--oa-gold)}
@media(max-width:760px){.studio-shell .wk-routine .wk-collapsed>th,.studio-shell .wk-routine .wk-collapsed>td{display:block;width:100%}.studio-shell .wk-routine .wk-collapsed>th{border-bottom:0;padding-bottom:0}}

/* auto-ticked boxes: blue with a robot mark, not clickable (Notion owns them) */
.wk-check.is-auto{cursor:help}
.wk-check.is-auto .wk-check-box{background:linear-gradient(180deg,#8fd9ff,#4fa8e0);border-color:#4fa8e0;font-size:.8rem}
.wk-check.is-auto input{cursor:help}

/* 🎯 CTA indicator on clip rows */
.wk-cta{padding:.16rem .6rem;border-radius:99px;font-size:.84rem;font-weight:800;white-space:nowrap;border:1px solid}
.wk-cta.is-set{color:#8fe0b5;background:rgba(143,224,181,.1);border-color:rgba(143,224,181,.45)}
.wk-cta.is-none{color:var(--oa-faint);background:transparent;border-color:var(--oa-faint-edge);border-style:dashed}
html[data-theme=light] .wk-cta.is-set{color:#14603f;background:#eaf6ef;border-color:#9fd6b6}

/* 💡 idea dump: a note pad on the same panel */
.idea-form{display:grid;grid-template-columns:minmax(0,1fr) 12rem auto;gap:.7rem;align-items:end;margin:0 0 1rem}
.idea-field{display:grid;gap:.35rem;font-size:.9rem;font-weight:700;color:var(--oa-soft)}
.idea-field textarea,.idea-field select,.idea-edit textarea,.idea-edit select{width:100%;min-height:48px;padding:.55rem .75rem;border:1px solid #9aa1ad;border-radius:10px;background:#fff;color:#1c1f2a;font:500 1rem/1.5 var(--font-body);color-scheme:light}
.idea-field textarea:focus,.idea-field select:focus,.idea-edit textarea:focus{outline:2px solid var(--oa-amber);outline-offset:1px}
.idea-save{min-height:48px}
.idea-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.idea-list .empty{color:var(--oa-soft);font-size:.95rem;padding:.6rem 0}
.idea-row{padding:.8rem .95rem;border-radius:12px;border:1px solid var(--oa-line);background:var(--oa-inset);border-left:3px solid var(--oa-amber)}
.idea-row.is-done{border-left-color:#3dbb7c}
.idea-head{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.idea-date,.idea-donetag{font-size:.84rem;font-weight:700;color:var(--oa-soft)}
.idea-donetag{color:var(--oa-green)}
.idea-text{margin:.45rem 0 .55rem;font:500 1.04rem/1.6 'Mitr',var(--font-head);color:var(--oa-ink);overflow-wrap:anywhere}
.idea-acts{display:flex;flex-wrap:wrap;gap:.45rem}
.idea-acts .cta-btn{min-height:40px}
.idea-edit{display:grid;gap:.55rem}
.idea-done-group summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:800;color:var(--oa-green)}
.idea-done-group .idea-list{margin-top:.5rem}
@media(max-width:760px){.idea-form{grid-template-columns:1fr}}
.studio-shell .studio-opening.is-slim .desk-kicker{font-size:.9rem;letter-spacing:.04em;color:#e2c98f}
html[data-theme=light] .studio-shell .studio-opening.is-slim .desk-kicker{color:#6e500e}
/* site-shell sets body{overflow-x:hidden}, which makes <body> a scroll container and kills sticky; clip keeps the no-side-scroll guard (same fix as finance-v5) */
body[data-ak-shell]:has(.studio-shell){overflow-x:clip!important;overflow-y:visible!important}
html[data-theme=light] .studio-shell .studio-opening.is-slim .studio-lede a{color:#4f3a0b}
/* idea form v2 (Audi 2026-10-18 "มันเรียงตัวกันไม่ตรงป่าว"): the textarea takes its own full row; type + save share the next row,
   both 48px tall with their bottoms on one line, the label sits above the select only */
.idea-form{grid-template-columns:minmax(0,14rem) auto;justify-content:start;align-items:end}
.idea-form .idea-text{grid-column:1/-1}
.idea-form .idea-text textarea{min-height:72px}
.idea-form select,.idea-form .idea-save{height:48px;min-height:48px;box-sizing:border-box}
.idea-form .idea-save{padding:0 1.2rem;align-self:end}
@media(max-width:760px){.idea-form{grid-template-columns:minmax(0,1fr) auto}}
.idea-form{grid-template-columns:minmax(0,16rem) auto minmax(0,1fr);justify-content:normal}
@media(max-width:760px){.idea-form{grid-template-columns:minmax(0,1fr) auto}}
.cta-filters[hidden]{display:none!important}
/* auto-tick reason as visible text under the job (not a tooltip) */
.wk-auto-note{display:block;margin-top:.2rem;font-size:.84rem;font-weight:600;color:#9fd3f5}
html[data-theme=light] .wk-auto-note{color:#1f4f7a}
.wk-act.is-checked .wk-auto-note{text-decoration:none}