/* Google Snippet Draft Studio — route-local layer. The shared release-gate
   stylesheet remains byte-identical for its guide and lab dependents. */
:root{--brand-solid:#087f78;--scene:#e8eef7;--scene-line:#b9c6d8;--scene-ink:#202124;--scene-muted:#5f6368;--scene-blue:#1a0dab;--heat-lower:#168363;--heat-boundary:#b56a00;--heat-beyond:#c9362b}
[data-theme="dark"]{--brand-solid:#087f78;--scene:#0d171d;--scene-line:#38505c;--scene-ink:#eef4f6;--scene-muted:#b9c6cc;--scene-blue:#8ab4f8;--heat-lower:#63d8b2;--heat-boundary:#ffd166;--heat-beyond:#ff8a80}
.primary,.mode-switch button[aria-pressed="true"]{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff}
.draft-studio{position:relative;margin:4px 0 44px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.draft-studio::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:190px;background:radial-gradient(circle at 84% 0,color-mix(in srgb,var(--brand) 22%,transparent),transparent 52%),linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),var(--surface))}
.draft-studio-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 26px 18px;border-bottom:1px solid var(--line)}
.draft-studio-head h2,.advanced-intro h2{margin:0;font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.1;letter-spacing:-.025em}.draft-studio-head p{max-width:720px;margin:8px 0 0;color:var(--muted)}.draft-studio-head .eyebrow,.advanced-intro .eyebrow{margin:0 0 7px;color:var(--brand-2)}
.privacy-chip{min-height:48px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--brand-solid);color:#fff;font-size:.8rem;font-weight:850;letter-spacing:.02em}
.draft-grid{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.42fr)}
.draft-controls{padding:22px 24px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 60%,var(--surface))}.draft-controls textarea{min-height:94px}.draft-controls .field small{min-height:22px;color:var(--muted);font-variant-numeric:tabular-nums}.draft-controls .field small[data-band="boundary"]{color:var(--review);font-weight:800}.draft-controls .field small[data-band="beyond"]{color:var(--block);font-weight:800}
.viewport-control{display:grid;gap:8px;margin:4px 0 16px}.viewport-control label{display:flex;justify-content:space-between;gap:12px;font-weight:800}.viewport-control output{font-variant-numeric:tabular-nums;color:var(--brand-2)}.viewport-control input{min-height:48px;padding:0;accent-color:var(--brand-solid);cursor:ew-resize}
.draft-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.draft-actions .primary{grid-column:1/-1}.draft-actions button{min-width:0;min-height:48px;padding-inline:10px}.draft-status{min-height:48px;margin:12px 0 0;padding:11px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:.87rem}.draft-status[data-state="frozen"]{border-style:solid;border-color:color-mix(in srgb,var(--pass) 55%,var(--line));background:color-mix(in srgb,var(--pass) 8%,transparent);color:var(--text)}.draft-status[data-state="stale"]{border-style:solid;border-color:color-mix(in srgb,var(--review) 55%,var(--line));color:var(--text)}
.draft-scene-panel{min-width:0;padding:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--scene) 92%,var(--surface)),var(--scene))}.scene-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.scene-heading h3{margin:0;font-size:1.12rem}.scene-heading p{margin:3px 0 0;color:var(--muted);font-size:.82rem}.scene-heading>span{min-height:48px;display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--scene-line);border-radius:999px;background:color-mix(in srgb,var(--surface) 86%,transparent);font-size:.78rem;font-weight:850;white-space:nowrap}
.draft-scene-stage{position:relative;overflow:hidden;border:1px solid var(--scene-line);border-radius:19px;background:var(--scene);box-shadow:0 18px 40px rgba(28,43,57,.12)}#snippet-draft-canvas{display:block;width:100%;height:auto;aspect-ratio:960/620;touch-action:none;cursor:ew-resize;background:var(--scene)}#snippet-draft-canvas:focus-visible{outline:4px solid var(--focus);outline-offset:-4px}
.draft-scene-stage:fullscreen{display:grid;place-items:center;padding:clamp(8px,2vw,24px);background:var(--scene)}.draft-scene-stage:fullscreen #snippet-draft-canvas{width:min(100%,calc((100vh - 48px)*960/620));max-height:calc(100vh - 48px)}
.band-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:.75rem}.band-legend span{min-height:30px;display:inline-flex;align-items:center;gap:6px}.band-legend i{width:18px;height:7px;border-radius:99px;background:var(--heat-lower)}.band-legend i[data-band="boundary"]{background:var(--heat-boundary)}.band-legend i[data-band="beyond"]{background:var(--heat-beyond)}
.draft-artifacts{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:20px;padding:22px 24px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--pass) 5%,var(--surface))}.draft-artifacts[hidden]{display:none!important}.draft-artifacts h3{margin:0 0 5px}.draft-artifacts p{margin:0;color:var(--muted)}.draft-artifacts .artifact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.draft-artifacts .artifact{background:var(--surface)}
.advanced-intro{margin:0 0 14px;padding-top:8px}.advanced-intro p{max-width:760px;margin:7px 0 0;color:var(--muted)}
@media(min-width:901px){.page{padding-top:10px}.breadcrumb{display:none}.hero{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(420px,1.18fr);column-gap:34px;row-gap:5px;padding:8px 0 14px}.hero .eyebrow{grid-column:1;grid-row:1;margin:0}.hero h1{grid-column:1;grid-row:2;font-size:clamp(2.5rem,4vw,3.45rem)}.hero .lede{grid-column:2;grid-row:1/3;align-self:center;margin:0;max-width:680px}.hero .boundary{grid-column:1/-1;grid-row:3;margin-top:4px}}
@media(max-width:900px){.draft-grid{grid-template-columns:1fr}.draft-scene-panel{grid-row:1;border-bottom:1px solid var(--line)}.draft-controls{grid-row:2;border-right:0}.draft-artifacts{grid-template-columns:1fr}.draft-artifacts .artifact-grid{grid-template-columns:1fr}}
@media(max-width:540px){.draft-studio{margin-top:0;border-radius:18px}.draft-studio-head{padding:16px;display:grid;gap:10px}.draft-studio-head h2{font-size:1.28rem}.draft-studio-head>div>p:last-child{font-size:.87rem}.privacy-chip{justify-self:start}.draft-scene-panel{padding:12px}.scene-heading{display:grid;gap:7px}.scene-heading p{font-size:.75rem}.scene-heading>span{justify-self:start;min-height:40px}.draft-controls{padding:14px}.draft-actions{grid-template-columns:1fr 1fr}.draft-artifacts{padding:16px}.band-legend{gap:9px}.band-legend span{font-size:.68rem}.advanced-intro{padding-inline:2px}.advanced-intro h2{font-size:1.35rem}}
@media(max-width:340px){.head-inner{min-height:52px}.page{padding-top:8px}.hero{padding:7px 0 10px}.hero .eyebrow{margin-bottom:4px}.hero h1{font-size:1.72rem}.hero .lede{display:none}.hero .boundary{margin-top:6px}.draft-studio-head{padding:12px;gap:6px}.draft-studio-head h2{font-size:1.18rem}.draft-studio-head>div>p:last-child{display:none}.privacy-chip{min-height:48px}.scene-heading{gap:5px;margin-bottom:9px}.scene-heading h3{font-size:1.02rem}.scene-heading p{font-size:.7rem;line-height:1.35}.scene-heading>span{min-height:34px;padding-block:4px}.draft-scene-panel{padding:10px}.band-legend{margin-top:8px}}