/* XSIGNAL Share Card Studio — local, source-aware cards. */
.studio-intro { padding-block:clamp(3rem,6.5vw,6.5rem) 2.7rem; }
.studio-intro h1 { font-size:clamp(3.2rem,6.2vw,6.3rem); line-height:1.02; margin:1.2rem 0 1.7rem; }
.studio-lead { color:var(--muted); font-size:clamp(1.2rem,1.65vw,1.5rem); line-height:1.65; max-width:58ch; }
.studio-intro .small-note { max-width:80ch; }
.studio-workspace { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); align-items:start; gap:clamp(2rem,4.3vw,4.5rem); padding-block:1rem 5rem; }
.studio-controls,.studio-output { min-width:0; }
.studio-controls fieldset { margin:0; padding:0; border:0; min-width:0; }
.studio-controls legend { display:flex; align-items:center; gap:.9rem; font-size:1.25rem; color:var(--white); margin-bottom:1.2rem; }
.studio-number { display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid #53748b; color:var(--cyan); font:400 .8125rem/1 var(--mono); }
.studio-group-label { color:var(--subtle); font:500 .75rem/1.6 var(--mono); letter-spacing:.07em; margin:1.3rem 0 .6rem; }
.studio-template-list { display:grid; gap:.65rem; }
.studio-option { display:grid; grid-template-columns:18px minmax(0,1fr) 18px; align-items:center; gap:.9rem; border:1px solid #354b5d; background:#09141e; padding:.95rem 1rem; cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.studio-option:hover { border-color:#91c6e3; background:#102332; }
.studio-option:has(input:checked) { background:#112b3c; border-color:var(--cyan); box-shadow:inset 3px 0 0 var(--cyan); }
.studio-option:focus-within { outline:2px solid var(--cyan); outline-offset:3px; }
.studio-option input { appearance:auto; width:17px; height:17px; margin:0; accent-color:var(--cyan); }
.studio-option strong { display:block; color:var(--white); font-size:1.0625rem; font-weight:550; line-height:1.4; }
.studio-option small { display:block; color:var(--subtle); font-size:.8125rem; line-height:1.6; margin-top:.25rem; }
.studio-option b { color:var(--cyan); font-size:1rem; font-weight:400; }
.studio-controls .studio-settings { margin-top:2.2rem; }
.studio-settings label { display:block; font-size:.9375rem; margin:.9rem 0 .4rem; color:var(--white); }
.studio-settings select,.studio-settings input { width:100%; border:1px solid #4b687d; background:#07131e; color:var(--white); border-radius:0; padding:.75rem .85rem; min-height:48px; font:400 1rem/1.5 var(--sans); }
.studio-settings input::placeholder { color:#94a9b8; opacity:1; }
.studio-settings input[aria-invalid="true"] { border-color:#e0a17c; }
.studio-help { font-size:.8125rem; line-height:1.6; color:var(--subtle); margin:.6rem 0 0; }
.studio-error { color:#f4bd9a; font-size:.875rem; line-height:1.6; margin:.5rem 0 0; }
.studio-context { margin-top:2rem; padding:1.3rem 1.5rem; border-left:2px solid #5a829b; background:#0b1a26; }
.studio-context .eyebrow { font-size:.75rem; margin-bottom:.7rem; }
.studio-context p:not(.eyebrow) { font-size:.9375rem; color:var(--muted); line-height:1.7; }
.studio-context .text-link { font-size:.9375rem; }
.studio-preview-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
.studio-preview-heading h2 { font-size:1.4rem; letter-spacing:-.02em; }
.studio-preview-heading span { color:var(--subtle); font:400 .75rem/1.6 var(--mono); }
.studio-preview-frame { border:1px solid #4c7089; box-shadow:0 22px 70px #0005; background:#07101a; }
.studio-preview-frame canvas { display:block; width:100%; height:auto; }
.studio-export-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem; }
.studio-export-actions .button { gap:1rem; cursor:pointer; font-size:1rem; }
.studio-export-actions .button--quiet { color:var(--cyan); border-color:#55788f; background:transparent; }
.studio-export-actions .button--quiet:hover { background:#122939; border-color:var(--cyan); }
.studio-export-actions .button:disabled { opacity:.5; cursor:not-allowed; }
.studio-status { margin:1rem 0; color:var(--subtle); font-size:.9375rem; line-height:1.6; min-height:1.6em; }
.studio-status[data-error] { color:#f4bd9a; }
.studio-transcript { border-top:1px solid #334b5d; border-bottom:1px solid #334b5d; padding:.9rem 0; margin-bottom:1.5rem; }
.studio-transcript summary { cursor:pointer; color:var(--cyan); font-size:.9375rem; }
.studio-transcript p { color:var(--muted); white-space:pre-wrap; font-size:.9375rem; line-height:1.7; margin:1rem 0 0; }
.studio-caption label { display:block; color:var(--white); font-size:1rem; margin-bottom:.7rem; }
.studio-caption textarea { display:block; width:100%; min-height:230px; resize:vertical; padding:1rem; color:var(--muted); background:#08131e; border:1px solid #3c566a; border-radius:0; font:400 .875rem/1.75 var(--sans); overflow-wrap:anywhere; }
.studio-source { margin:1.7rem 0 0; padding:1.4rem 1.5rem; background:#0b1c2a; border:1px solid #35556b; }
.studio-source h3 { font-size:1.2rem; margin-bottom:.8rem; }
.studio-source p { color:var(--muted); font-size:.9375rem; line-height:1.7; }
.studio-source a { display:block; color:var(--cyan); text-decoration:underline; text-underline-offset:4px; font-size:.875rem; overflow-wrap:anywhere; margin:.6rem 0; }
.studio-next { padding-block:3.5rem 5rem; border-top:1px solid var(--line); }
.studio-next h2 { margin-bottom:1.5rem; }
.studio-next > p:not(.eyebrow) { max-width:58ch; color:var(--muted); }
.studio-next .button { margin-top:.8rem; }
.studio-nojs { border:1px solid #52758d; padding:1.5rem; margin-bottom:3rem; font-size:1rem; }
.studio-nojs a { color:var(--cyan); text-decoration:underline; }
@media(max-width:960px) { .studio-workspace { grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr); gap:1.8rem; }.studio-option { padding:.8rem; gap:.7rem; }.studio-export-actions .button { flex:1; justify-content:center; } }
@media(max-width:760px) { .studio-workspace { grid-template-columns:1fr; padding-bottom:3rem; }.studio-intro { padding-bottom:1.5rem; }.studio-template-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.studio-option { grid-template-columns:16px minmax(0,1fr); align-items:start; }.studio-option input { margin-top:.25rem; }.studio-option b { display:none; }.studio-controls .studio-settings { margin-top:1.8rem; }.studio-context { margin-bottom:1rem; }.studio-output { margin-top:.5rem; } }
@media(max-width:480px) { .studio-template-list { grid-template-columns:1fr; }.studio-option { grid-template-columns:18px minmax(0,1fr) 18px; align-items:center; }.studio-option input { margin-top:0; }.studio-option b { display:block; }.studio-intro h1 { font-size:3.15rem; }.studio-export-actions .button { flex:auto; width:100%; }.studio-source { padding:1.2rem; } }
@media(prefers-reduced-motion:reduce) { .studio-option { transition:none; } }