@import url('/shared/workspace-nav.css');
/* Campaign studio (8 Oct 2026): the approved studio design on the existing flow. Loaded after
   /style.css (legacy components: picture chooser, design fieldset, publish dialog, brand kit) and
   /brand/studio.css (the design system). Only layout and look change here; every id stays. */
/* Reserve the workspace frame before JavaScript mounts its shared menu. This prevents the
   campaign tool jumping from the old top-navigation layout into the application layout. */
body{background:var(--bg)}
body>.top{display:none}
main{margin-left:232px;padding:0 48px;max-width:1600px;min-height:100vh}
main>header.crumb{margin:0 -48px;padding-left:48px;padding-right:48px;background:var(--band);color:var(--band-muted);border-bottom-color:var(--band-line)}
main>header.crumb{height:auto;min-height:0;padding:10px 20px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--bg)}
.crumb .account{margin-left:auto;margin-right:0}
.top nav a{padding:0;background:none;border-radius:0}.top nav a.active{color:var(--orange);background:none}
.top nav #count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(239,237,228,.12);font-size:11px;margin-left:4px}
/* The studio is a work page: begin with the route chooser, not a promotional hero. */
.hero.intro{display:none}
.hero.intro .wrap{padding-top:64px;padding-bottom:64px}
.hero.intro h1{font-size:clamp(50px,6.6vw,96px);letter-spacing:-.02em;margin:14px 0 18px;color:var(--band-text)}
.hero.intro .lead{color:var(--band-muted);font-size:19px}
.hero .intro-note{border:0;padding:0;min-width:0;justify-self:end;width:min(100%,360px);margin-top:14px;color:var(--band-muted);text-align:right;display:block}
.hero .intro-note span{font-size:10px;letter-spacing:2px;color:var(--orange)}
.hero .intro-note strong{display:block;font-family:var(--display);font-size:26px;line-height:1;margin-top:8px;color:var(--band-text);text-transform:uppercase;letter-spacing:0}
.hero .intro-note p{font-size:13px;color:var(--band-muted);margin-top:6px}
.notice{margin:22px 0 0;background:var(--card);border-color:var(--line);border-radius:var(--radius-s);font-size:13px;color:var(--muted)}
/* Routes as photo tiles */
.studio-chooser.routes{border:0;background:none;border-radius:0;padding:44px 0 12px;margin:0}
.studio-chooser.routes>.wrap>div:first-child{max-width:none}
.studio-chooser .sec-head h2{margin:8px 0 0}
.studio-routes.tiles{margin-top:0}
.studio-route.tile{display:flex;gap:0;padding:22px;border-radius:var(--radius);color:var(--band-text);background:var(--band);border:1.5px solid rgba(239,237,228,.08)}
.studio-route.tile:hover,.studio-route.tile:focus-visible{border-color:var(--orange);box-shadow:var(--shadow)}
.studio-route.tile strong{font-size:34px;font-weight:900;color:var(--band-text)}
.studio-route.tile span.d{font-size:14px;color:var(--band-muted)}
.studio-route.tile b{font-size:14px;color:var(--orange);margin-top:0}
.studio-route.active-route{border-color:rgba(246,141,31,.55)}.studio-route.tile .free{color:var(--ink)}.studio-route.tile.unavailable .free{color:var(--band-text)}
.studio-help{font-size:13px!important;color:var(--muted);margin-top:16px!important}
/* The entry page is only a choice of advert type. The long workbench appears after that choice. */
html.studio-picker .notice,html.studio-picker .studio.bench,html.studio-picker .lower-wrap{display:none}
html.studio-picker .studio-chooser.routes{padding:78px 0 70px}
html.studio-picker .studio-routes.tiles{margin-top:26px}
html.studio-builder .studio-chooser.routes{display:none}
html.studio-builder .notice{margin-top:26px}
/* Workbench: rail · form cards · monitor */
.studio.bench{display:grid;grid-template-columns:72px minmax(0,1fr) 420px;gap:22px;align-items:start;padding-top:28px;padding-bottom:40px}
.bench-main{display:grid;gap:22px;min-width:0}
.panel.form{padding:28px;border-radius:var(--radius)}
.panel.form .panel-heading{border-bottom:0;padding-bottom:0;margin-bottom:18px;gap:14px;align-items:center}
.panel.form .panel-heading .step{border:2px solid var(--orange);color:var(--orange);font:800 12px var(--display);width:36px;height:36px;padding:0;display:grid;place-items:center}
.panel.form .panel-heading h2{font-size:34px;font-weight:900;margin:0}
.panel.form .panel-heading p{font-size:14px;color:var(--muted);margin:4px 0 0}
.panel.form label{display:grid;gap:7px;font-size:12.5px;font-weight:700;margin-bottom:16px}
.panel.form label>input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.panel.form label>textarea,.panel.form label>select,.panel.form .design-grid input,.panel.form .design-grid select{margin-top:0;font-size:15px;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card);color:var(--ink);line-height:1.4}
.panel.form input:focus,.panel.form textarea:focus,.panel.form select:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
.panel.form .row{gap:14px}
.panel.form .hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.primary,.secondary{border-radius:999px;padding:13px 20px;font-size:14px;font-weight:700;line-height:1.2;transition:transform .15s,background .15s,border-color .15s}
.primary{background:var(--orange);color:var(--orange-ink)}.primary:hover{background:var(--orange-hot);transform:translateY(-1px)}
.secondary{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}.secondary:hover{border-color:var(--ink)}
form>.primary,.brief-next{width:100%;margin-top:10px}
.brief-step-head>span{border:2px solid var(--orange);background:var(--card);color:var(--orange);font-family:var(--display);font-size:12px}
.brief-step-head strong{font-weight:900}
.pic-tabs button{border:1.5px solid var(--line);font-weight:600;color:var(--ink2)}.pic-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--band-text)}
.pics,.design,.brand-kit{border-radius:var(--radius-s);border-color:var(--line)}
.pics legend,.design legend{font-family:var(--display);text-transform:uppercase;font-size:16px;font-weight:800;letter-spacing:.02em}
.design-grid label{margin-bottom:12px}
/* Message chips (the real angle buttons) */
#angles.chips{margin:0 0 18px}
#angles button{border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--card)}
#angles button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--band-text)}
#empty{padding:30px 10px 20px}#empty p{font-size:14px;color:var(--muted)}#empty h3{font-size:30px;font-weight:900;margin:0 0 10px}
.rings{border-color:var(--line);background:var(--bg);color:var(--orange)}
.empty-tags.chips{justify-content:center;margin:22px 0 0}.empty-tags .chip{cursor:default;font-size:12px;padding:7px 12px}
.outcome{border-radius:var(--radius-s);background:var(--bg)}
/* AI panel as the price moment, dark */
#cloud-panel.cloud-inline{margin-top:24px;padding:22px;border:0;border-radius:var(--radius);background:var(--band);color:var(--band-text)}
#cloud-panel h3{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:900;letter-spacing:0;margin:0 0 6px;color:var(--band-text)}
#cloud-panel p,#cloud-panel .hint{color:var(--band-muted)}#cloud-panel a{color:var(--band-text)}
#cloud-panel label{color:var(--band-text)}
#cloud-panel select,#cloud-panel input{background:var(--band2);color:var(--band-text);border-color:var(--band-line)}
#cloud-panel .price{margin:4px 0 16px}
#cloud-panel .secondary{background:transparent;color:var(--band-text);border-color:rgba(239,237,228,.35)}#cloud-panel .secondary:hover{border-color:var(--orange);color:var(--orange)}
#cloud-panel #cloud-generate{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}#cloud-panel #cloud-generate:hover{background:var(--orange-hot)}
/* The monitor holds the real preview; a sample card shows until a draft exists */
.prev{padding:18px}
.prev .fmt{font-size:0;align-items:center;gap:8px;color:var(--band-muted)}
.prev .fmt::before{content:"Placement";font-size:11.5px;font-weight:700;padding-left:8px}
.prev .ad-preview{margin:0;border:0;border-radius:12px}
.prev #ad-copy{padding:0 16px 12px}
.prev .typing{margin-top:12px}
.studio.bench:has(#draft[hidden]) .ad-preview{display:none}
.studio.bench:not(:has(#draft[hidden])) .mon-empty{display:none}
/* Lower sections */
.lower-wrap{display:grid;gap:22px;padding-bottom:48px}
.panel.lower{border-radius:var(--radius);margin:0}
#saved h2{font-size:30px;font-weight:900;margin-bottom:6px}
#saved-list>div{border-top-color:var(--line)}
#connections.band{display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;padding:32px;color:var(--band-text);background:var(--band)}
#connections.band::before{content:"";position:absolute;inset:0;background:url('/library/lake-dusk-willows.jpg') center/cover;opacity:.22}
#connections.band>*{position:relative}
#connections.band h2{font-size:34px;font-weight:900;margin:6px 0 10px;color:var(--band-text)}
#connections.band p{color:var(--band-muted);font-size:14px}
#status{border-radius:999px;background:var(--ink);box-shadow:var(--shadow)}
footer.foot{padding:28px 20px;color:var(--band-muted);font-size:13px}
footer.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.desktop{display:inline}
@media(max-width:1180px){.studio.bench{grid-template-columns:64px minmax(0,1fr) 360px}}
@media(max-width:1050px){main{margin-left:195px;padding-left:25px;padding-right:25px}main>header.crumb{margin-left:-25px;margin-right:-25px;padding-left:25px;padding-right:25px}.studio.bench{grid-template-columns:1fr}.rail{position:static;grid-auto-flow:column;justify-content:start;gap:14px}.rail .st{padding:0}.rail .st::after{display:none}.prev{position:static}}
@media(max-width:600px){main{margin:0;padding:0 18px}main>header.crumb{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}.top nav{flex-wrap:nowrap;justify-content:flex-start;row-gap:2px}.top nav .keep{font-size:12px}.hero.intro h1{font-size:50px}.desktop{display:none}.panel.form{padding:20px}.panel.form .row{grid-template-columns:1fr}#connections.band{flex-direction:column;align-items:flex-start;padding:24px}.top nav{gap:10px}.rail{gap:10px}}
.pack-entry{margin:28px 0;padding:28px;border:1px solid #ddd9cb;border-radius:16px;background:white}.pack-entry h2{margin:10px 0 14px}.pack-entry p{margin-bottom:18px}.pack-entry .hint{margin-top:18px;margin-bottom:0}