@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme:light; --paper:#f5f0e6; --surface:#fffcf6; --soft:#ece7dc;
  --ink:#262724; --muted:#67675e; --line:#d5d0c5; --accent:#ed602c;
  --accent-dark:#a43613; --good:#32654a; --danger:#9e342c;
  font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
main { max-width:1200px; margin:auto; padding:20px 28px 72px; }
a { color:var(--accent-dark); text-underline-offset:3px; }
h1,h2,h3,legend,.studio-wordmark { font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:-.035em; }
h1 { font-size:1.75rem; line-height:1.2; margin:0 0 6px; }
h2 { font-size:1.4rem; line-height:1.25; margin:0 0 12px; }
h3 { font-size:1.2rem; margin:26px 0 10px; }
p { color:var(--muted); line-height:1.6; }
button,input,textarea,select { font:inherit; }
button,.project-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 15px; border:1px solid #b8b6aa; border-radius:7px; background:var(--surface); color:var(--ink); font-size:.95rem; font-weight:700; cursor:pointer; text-decoration:none; line-height:1.3; }
button:hover,.project-link:hover { background:var(--soft); border-color:#85867a; }
button:disabled { background:#e9e5dc; color:#858479; border-color:#d6d1c6; cursor:default; }
.primary,.edit-project,#login-form button:first-child,#setup-form>button,#reset-form>button,#schedule-submit { background:var(--accent); color:#241d17; border-color:var(--accent); }
.primary:hover,.edit-project:hover,#login-form button:first-child:hover,#setup-form>button:hover,#reset-form>button:hover,#schedule-submit:hover { background:#ff743e; border-color:#d74e1e; }
.primary:disabled,#schedule-submit:disabled { background:#e9e5dc; color:#858479; border-color:#d6d1c6; }
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible { outline:3px solid #b33d18; outline-offset:3px; }
input,textarea,select { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #b8b6aa; border-radius:7px; background:#fffefb; color:var(--ink); font-size:1rem; line-height:1.5; }
input:hover,textarea:hover,select:hover { border-color:#87887c; }
input:disabled,textarea:disabled,select:disabled { background:var(--soft); color:var(--muted); }
textarea { resize:vertical; min-height:90px; }
label { display:block; font-size:.95rem; font-weight:700; margin:18px 0; line-height:1.5; }
.field-tip { display:block; margin:4px 0 0; color:var(--muted); font-size:.875rem; font-weight:400; line-height:1.55; letter-spacing:0; }
.required-marker { display:inline-block; margin-left:8px; color:var(--accent-dark); font-size:.78rem; font-weight:600; }
.checkbox-label { display:flex; gap:10px; align-items:center; }
.checkbox-label input { margin:0; width:18px; height:18px; accent-color:var(--accent); }
.card { padding:24px; margin:18px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.actions,.preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.page-header,.page-header.editor-header { margin:0 0 20px; }
.top-navigation { min-height:48px; padding:0 0 14px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); }
.studio-wordmark { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-size:21px; white-space:nowrap; }
.studio-wordmark img { flex-shrink:0; }
.studio-wordmark b { color:var(--accent-dark); }
.top-navigation #account-bar { justify-content:flex-end; gap:8px; }
.top-navigation button { min-height:36px; padding:7px 11px; font-size:.85rem; background:transparent; }
.page-title { margin-top:20px; }
.page-title p { margin:0; font-size:.95rem; }
#status:empty,#editor-feedback:empty { display:none; }
#status:not(:empty) { background:#fff1df; border-left:3px solid var(--accent); padding:12px 16px; border-radius:5px; color:#743411; }
#editor-feedback:not(:empty) { margin-top:8px; color:var(--accent-dark); }
.dashboard-filter { justify-content:flex-end; margin:8px 0 16px; }
.filter-label { display:flex; gap:10px; align-items:center; margin:0; font-size:.875rem; }
.filter-label select { width:auto; margin:0; padding:8px 30px 8px 12px; }
#project-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:18px; }
#project-list .card { margin:0; }
.project-card { display:flex; flex-direction:column; }
.project-card-heading { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.project-card-heading h3 { margin:0; font-size:1.3rem; overflow-wrap:anywhere; }
.project-badge { flex-shrink:0; padding:5px 8px; border-radius:5px; background:var(--soft); color:#5a5d53; font-size:.75rem; font-weight:700; }
.project-badge[data-state="live"] { background:#e3ede3; color:var(--good); }
.project-card>p { margin:12px 0 0; font-size:.9rem; }
.project-card .usage-card-summary { font-size:.85rem; }
.project-actions { margin-top:20px; }
.project-management { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); }
.project-management button { min-height:32px; padding:5px 8px; font-size:.8rem; background:transparent; border-color:transparent; }
.danger { color:var(--danger); }
.danger:hover { background:#fbe7e0; border-color:#d9a59a; }
#setup-form { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
#setup-form>button { justify-self:start; grid-column:1/-1; }
#template-preview { grid-column:1/-1; padding:16px; border:1px dashed #b6b5a6; border-radius:8px; background:var(--paper); }
#template-preview summary { cursor:pointer; font-weight:700; }
#template-options { padding-left:22px; }
#template-options li { margin-top:16px; }
#template-options p { margin:6px 0 0; }
#empty-projects { padding:20px 0; }
/* Keep publishing close without sacrificing the preview's scrollable height. */
.toolbar { position:sticky; top:12px; z-index:10; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:20px; padding:16px 20px; margin:18px 0; box-shadow:0 5px 16px #2627240d; border-color:#bab9ab; }
.toolbar>div { min-width:0; }
.toolbar h2 { font-size:1.2rem; margin:0 0 4px; overflow-wrap:anywhere; }
.toolbar p { margin:0; font-size:.825rem; line-height:1.5; }
#project-number { font-variant-numeric:tabular-nums; }
.share-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:6px 0; font-size:.8rem; }
.share-actions button { min-height:28px; padding:4px 8px; font-size:.75rem; }
.publish-summary { text-align:right; }
.publish-summary>.actions,.draft-details { justify-content:flex-end; }
.publish-summary>.actions { align-items:flex-start; }
.toolbar #draft-state { font-size:.9rem; font-weight:700; margin:0 0 6px; }
#draft-state[data-tone="pending"] { color:var(--accent-dark); }
#draft-state[data-tone="current"] { color:var(--good); }
.draft-details { display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; }
.draft-details p:empty { display:none; }
.draft-details:not(:has(p:not(:empty))) { display:none; }
.schedule-actions { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pending-release-link { padding:0; min-height:24px; border:0; border-radius:0; color:var(--accent-dark); font-size:.8rem; font-weight:500; background:transparent; text-decoration:underline; text-underline-offset:3px; }
.pending-release-link:hover { background:transparent; }
.columns { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); align-items:start; gap:20px; }
.columns>.card { margin:0; min-width:0; }
.form-intro { margin:0 0 24px; font-size:.9rem; padding-bottom:20px; border-bottom:1px solid var(--line); }
.option { min-width:0; margin:28px 0 0; padding:18px; border:1px solid var(--line); border-radius:9px; background:#faf7ef; }
.option legend { padding:0 8px; font-size:1.1rem; font-weight:700; }
.option>p { margin-top:4px; font-size:.9rem; }
.option-controls { justify-content:flex-end; margin-bottom:16px; }
.option-controls button,.response-controls button { min-height:34px; padding:7px 10px; font-size:.8rem; }
.response-controls { margin:20px 0; padding:0 14px 10px; border:1px solid #dbd7cb; border-radius:8px; background:var(--soft); }
.response-controls .actions { gap:7px; }
.response-controls label { margin:14px 0; }
.generated-instructions { background:#ece6d8; padding:14px; border-left:3px solid var(--accent); border-radius:5px; font-size:.9rem; }
#menu-mode-tip { font-size:.875rem; }
.audio-upload { margin:18px 0; padding:16px; border:1px dashed #b4512b; border-radius:8px; background:#fff7e9; }
.audio-upload p { margin:6px 0; overflow-wrap:anywhere; }
.audio-upload input[type="file"] { max-width:100%; padding:10px; font-size:.875rem; }
.audio-upload [data-audio-feedback] { font-size:.875rem; color:var(--accent-dark); }
.preview { color:var(--paper); background:var(--ink); border-color:var(--ink); position:sticky; top:calc(var(--editor-toolbar-height,150px) + 28px); max-height:calc(100dvh - var(--editor-toolbar-height,150px) - 44px); overflow-y:auto; scrollbar-gutter:stable; overflow-wrap:anywhere; }
.preview h2 { font-size:1.4rem; }
.preview p { color:#cfcec2; font-size:.9rem; }
.preview .section-label { color:#f7a17d; font-size:.75rem; font-weight:700; letter-spacing:.12em; margin:0 0 10px; }
.preview button { color:var(--paper); background:#393b33; border-color:#65675a; font-size:.875rem; }
.preview button:hover { background:#4c4d40; border-color:#d1c4ab; }
.preview #preview-menu { background:var(--accent); color:#211d17; border-color:var(--accent); }
.preview-actions { gap:8px; }
#option-previews { display:contents; }
#preview-title { padding-top:20px; border-top:1px solid #55564b; font-size:1.05rem; }
#preview-text { padding:14px; background:#34362f; border-radius:7px; line-height:1.7; white-space:pre-wrap; }
#stop-preview { background:transparent; min-height:34px; padding:6px 10px; }
#editor input,#editor textarea,#editor select { scroll-margin-top:calc(var(--editor-toolbar-height,150px) + 28px); }
.usage-panel,.schedule-panel { padding:14px 18px; }
.usage-panel summary,.schedule-panel summary { cursor:pointer; font-size:.9rem; font-weight:700; line-height:1.5; }
.usage-panel p,.schedule-panel p { font-size:.875rem; }
.limit-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.schedule-panel { position:relative; }
.schedule-panel summary { padding-right:88px; min-height:34px; }
#schedule-close { position:absolute; top:12px; right:16px; min-height:32px; padding:5px 9px; font-size:.8rem; }
.schedule-panel form { max-width:none; }
.schedule-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.schedule-row>label { display:flex; align-items:center; gap:10px; margin:0; font-size:.875rem; }
#schedule-at { width:250px; max-width:100%; margin:0; padding:10px; min-height:44px; }
.schedule-row .actions { margin:0; gap:8px; }
.schedule-row button { min-height:44px; padding:10px 14px; font-size:.875rem; }
.schedule-meta { flex:1; min-width:220px; }
.schedule-meta .field-tip,.schedule-meta p { margin:0; font-size:.8rem; }
@media(max-width:520px) { .schedule-row>label { flex-wrap:wrap; width:100%; gap:6px; } #schedule-at { width:100%; min-width:0; } .schedule-meta { min-width:0; flex-basis:100%; } }
#schedule-state,#schedule-feedback,.schedule-card-summary { color:var(--accent-dark); }
#schedule-state:empty,#schedule-feedback:empty { display:none; }
#login,#reset { max-width:480px; margin:36px auto; padding:30px; }
#login h2,#reset h2 { font-size:1.65rem; }
.account-intro { margin:0 0 24px; font-size:.95rem; }
#login-form .actions { justify-content:flex-start; }
#forgot { border-color:transparent; background:transparent; font-weight:500; text-decoration:underline; font-size:.85rem; padding-left:0; }
#loading { max-width:520px; }
#loading h2 { font-size:1.15rem; }
#loading h2::before { content:''; display:inline-block; width:9px; height:9px; margin-right:10px; background:var(--accent); border-radius:50%; animation:signal-pulse 1.4s ease-in-out infinite; }
#loading[data-state="error"] { opacity:1; animation:none; }
#loading[data-state="error"] h2::before { background:var(--danger); animation:none; }
@keyframes signal-pulse { 50% { opacity:.35; } }
@media(max-width:800px) {
  main { padding:16px 20px 56px; }
  .columns { grid-template-columns:1fr; }
  .preview { position:static; max-height:none; overflow:visible; }
  .toolbar { grid-template-columns:1fr; gap:12px; padding:14px 16px; }
  .publish-summary { text-align:left; }
  .publish-summary>.actions,.draft-details { justify-content:flex-start; }
}
@media(max-width:520px) {
  main { padding:14px 14px 48px; }
  .card { padding:18px; }
  .top-navigation { gap:8px; align-items:flex-start; }
  .studio-wordmark { font-size:17px; gap:5px; }
  .studio-wordmark img { width:26px; height:26px; }
  .top-navigation #account-bar { gap:4px; flex-direction:column; align-items:flex-end; }
  .top-navigation button { padding:6px 8px; min-height:32px; font-size:.8rem; }
  .page-title { margin-top:16px; }
  h1 { font-size:1.6rem; }
  #setup-form,.limit-fields { grid-template-columns:1fr; }
  .project-card-heading { flex-wrap:wrap; gap:8px; }
  .toolbar { top:6px; padding:12px; }
  .toolbar button { padding:9px 11px; font-size:.85rem; }
  .option { padding:14px; }
  .option-controls { justify-content:flex-start; }
  #login,#reset { margin:24px auto; padding:22px; }
}
@media(max-height:560px) { .toolbar { position:static; } .preview { position:static; max-height:none; overflow:visible; } }
@media(prefers-reduced-motion:reduce) { #loading h2::before { animation:none; } }

/* Compact option editing: keep related settings together, with room for text. */
#options>.option { margin-top:20px; padding:14px 16px; }
#options .option-controls { gap:6px; margin:0 0 8px; }
#options label { margin:10px 0; }
#options input,#options select { padding:9px 10px; margin-top:6px; }
#options textarea { padding:11px; margin-top:6px; }
#options .field-tip { font-size:.875rem; line-height:1.5; }
.option-fields-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:end; }
.option-fields-row>* { min-width:0; }
#options .wording-row { align-items:start; }
.wording-row:not(:has(label:not([hidden]))) { display:none; }
#options .compact-responses { margin:12px 0; padding:0 12px 10px; }
.response-entry-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:12px; align-items:end; }
.compact-responses .required-marker { font-size:.7rem; margin-left:4px; }
.compact-responses>.field-tip { margin:8px 0 0; }
#options .compact-responses .actions { gap:6px; }
#options .response-settings-row { align-items:start; }
.format-toggle { border:0; padding:0; margin:10px 0; min-width:0; }
.format-toggle legend { padding:0; font:700 .95rem/1.5 'DM Sans',system-ui,sans-serif; letter-spacing:0; margin:0 0 6px; }
.format-toggle>div { display:flex; border:1px solid #b8b6aa; border-radius:7px; background:var(--surface); overflow:hidden; }
#options .format-toggle label { position:relative; display:flex; flex:1; justify-content:center; align-items:center; margin:0; padding:10px 8px; min-height:44px; font-size:.825rem; line-height:1.5; cursor:pointer; }
.format-toggle label+label { border-left:1px solid #b8b6aa; }
#options .format-toggle input { position:absolute; opacity:0; width:1px; height:1px; padding:0; margin:0; }
.format-toggle label:has(input:checked) { background:#fbd8c6; color:#743011; }
.format-toggle label:has(input:focus-visible) { outline:3px solid #b33d18; outline-offset:-3px; }
.format-toggle label:has(input:disabled) { opacity:.5; cursor:default; }
#options .audio-upload { margin:10px 0; padding:12px; }
@media(max-width:520px) {
  .option-fields-row { grid-template-columns:1fr; gap:0; }
  #options>.option { padding:12px; }
  .response-entry-row { grid-template-columns:minmax(0,1fr) 86px; gap:10px; }
}

/* Expanding a response must not anchor scrolling to the text below it. */
#options { overflow-anchor:none; }

/* Fold sections into a navigable outline while leaving values in the form. */
.option>legend { max-width:100%; }
.section-toggle { min-width:0; max-width:100%; justify-content:flex-start; flex-wrap:wrap; gap:8px; padding:5px 3px; min-height:36px; background:transparent; border:0; font:inherit; text-align:left; }
.section-toggle:hover { background:transparent; color:var(--accent-dark); }
.section-chevron { display:inline-block; font:500 1.5rem/1 system-ui,sans-serif; transition:transform .15s; }
.section-toggle[aria-expanded="true"] .section-chevron { transform:rotate(90deg); }
.option-header-label { color:var(--muted); font-size:.95rem; font-weight:500; overflow-wrap:anywhere; }
.option-header-label::before { content:'·'; margin-right:8px; }
.option:has(>legend .section-toggle[aria-expanded="false"]) { padding-top:0!important; padding-bottom:8px!important; }
.response-controls>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; cursor:pointer; font-size:.85rem; font-weight:600; list-style:none; }
.response-controls>summary::-webkit-details-marker { display:none; }
.disclosure-action { flex-shrink:0; color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.response-controls[open]>.response-chooser-body { border-top:1px solid var(--line); padding-top:4px; }
#options .compact-responses:not([open]) { padding-bottom:0; }
#greeting-chooser:not([open]) { padding-bottom:0; }
@media(max-width:520px) { .response-controls>summary { flex-wrap:wrap; gap:4px 10px; } }
@media(prefers-reduced-motion:reduce) { .section-chevron { transition:none; } }

.selected-response { margin:16px 0 4px; border:1px solid #dbd7cb; border-radius:10px; background:var(--soft); overflow:hidden; }
.selected-response .compact-responses { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; padding-right:14px; padding-left:14px; }
.selected-response-fields { padding:0 14px 14px; }
.response-scope-tip { margin:10px 0 12px; font-size:.8rem; }
.selected-response-fields>label:last-child { margin-bottom:0; }

.option-response-count { color:var(--muted); font-size:.85rem; font-weight:500; }

#greeting-chooser label { margin:10px 0; }
#greeting-chooser input,#greeting-chooser select { padding:9px 10px; margin-top:6px; }
#greeting-chooser .actions { gap:6px; }
#greeting-chooser .field-tip { font-size:.875rem; line-height:1.5; }

.option-scheduling { margin:12px 0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.option-scheduling>summary { cursor:pointer; font-size:.875rem; font-weight:600; }
.option-scheduling summary span { color:var(--muted); font-weight:400; }
.option-scheduling .actions { gap:6px; }
.option-scheduling button { min-height:34px; padding:7px 10px; font-size:.8rem; }
[data-range-feedback]:not(:empty) { color:var(--accent-dark); font-weight:600; }