/* Shared editing surfaces. Chat preview colors remain user-controlled. */
:root{--ui-page:#f8f4e9;--ui-surface:#fffdf7;--ui-nested:#f1f4ed;--ui-ink:#173f35;--ui-muted:#52665a;--ui-primary:#173f35;--ui-on-primary:#fffdf7;--ui-line:#cdd8cf;--ui-selected:#eef3ea;--ui-focus:#173f35;--ui-error:#654c2d;--ui-warning:#654c2d;--ui-success:#285a48;--ui-disabled:#66766d;--ui-body:system-ui,-apple-system,sans-serif;--ui-display:Georgia,serif;--ui-radius-control:8px;--ui-radius-card:12px;--ui-radius-dialog:16px}
body.settings-tabs,body:has(.about-nav){background:var(--ui-page);color:var(--ui-ink)}body.settings-tabs{font-family:var(--ui-body)}body.settings-tabs>.card{background:var(--ui-surface)}body.settings-tabs .settings-utilities,body.settings-tabs .section-tabs{border-color:var(--ui-line)}body.settings-tabs #menu a.on{background:var(--ui-selected)!important;color:var(--ui-ink)!important}body.settings-tabs :is(.h,.section-summary,.lead){color:var(--ui-muted)}body.settings-tabs :is(#saveLook,#apply,#saveBudget){background:var(--ui-primary)!important;color:var(--ui-on-primary)!important}body.settings-tabs :is(input,textarea,select){border-radius:var(--ui-radius-control)!important}body.settings-tabs :is(button,a,input,textarea,select,summary):focus-visible{outline-color:var(--ui-focus)!important}
body.settings-tabs :is(#modehelp,.livetag,.pvnote,.field .h,.empty-field),body:has(.about-nav) .feature-art>small{color:var(--ui-muted)!important}
body.settings-tabs :is(.rng,.pn,.pn small,.loaded-source-overview small,.editor-choice small,.head small){color:var(--ui-muted)!important}body.settings-tabs .cs-btn{background:var(--ui-surface)!important;color:var(--ui-ink)!important}body.settings-tabs .cs-btn .cs-label{color:var(--ui-ink)!important}body.settings-tabs .typeprev{background:var(--ui-nested)!important;color:var(--ui-ink)!important}body.settings-tabs .typeprev :is(.tp-h,.tp-b){color:var(--ui-ink)!important}
body.settings-tabs :is(#sec-prompts,#sec-code) summary small{color:var(--ui-muted)!important}
/* Action sizing is independent of label length. Keep utility and reset actions quiet. */
body.settings-tabs .go{min-height:44px!important;box-sizing:border-box;padding-inline:16px}
body.settings-tabs :is(button,input,textarea,select):disabled{opacity:1!important;background:#e8ece7!important;color:var(--ui-disabled)!important;border:1px dashed #99a89e!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}
body.settings-tabs .go:disabled:hover{background:#e8ece7!important}
body.settings-tabs .look-danger .go{color:#7d4138!important;border-color:#cbb3aa!important}
body.settings-tabs :is(#apply,#saveLook,#saveBudget,#sec-finish a,button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--ui-focus)!important;outline-offset:3px!important;box-shadow:0 0 0 2px var(--ui-surface)!important}
body.settings-tabs #load:disabled{background:#e8ece7!important;color:var(--ui-disabled)!important;border:1px dashed #99a89e!important}
body.settings-tabs :is(#del,#resetLink):disabled{background:#e8ece7!important;color:var(--ui-disabled)!important;border:1px dashed #99a89e!important}
/* The editor's type scale does not change with a user's chat theme. */
:root{--ui-type-title:32px;--ui-type-section:18px;--ui-type-subsection:15px;--ui-type-body:14px;--ui-type-label:13px;--ui-type-meta:12px;--ui-leading:1.5;--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-6:24px;--ui-space-8:32px;--ui-space-12:48px;--ui-space-16:64px}
body.settings-tabs #h{font-size:var(--ui-type-title)!important;line-height:1.2;text-wrap:balance}
body.settings-tabs .head b{font-size:var(--ui-type-section)!important;line-height:1.3;overflow-wrap:anywhere}
body.settings-tabs .tile h4{font-size:var(--ui-type-subsection)!important;line-height:1.4}
body.settings-tabs :is(.help,.lead,.section-summary){font-size:var(--ui-type-body)!important;line-height:var(--ui-leading)!important}
body.settings-tabs :is(.flabel,.field>label,.workspace-fields label){font-size:var(--ui-type-label)!important;line-height:var(--ui-leading)!important}
body.settings-tabs :is(.field .h,.head small){font-size:var(--ui-type-meta)!important;line-height:var(--ui-leading)!important}
body.settings-tabs .field{gap:var(--ui-space-2)!important}
body.settings-tabs .field .h{margin:0!important}
body.settings-tabs #settingsFindHint{grid-column:1/-1;font-size:12px;line-height:1.5;margin:8px 0 0!important;color:var(--ui-muted)}
body.settings-tabs #settingsFindStatus:empty{display:none}
body.settings-tabs .helper-example{margin:8px 0 16px;font-size:13px;line-height:1.5}
body.settings-tabs .helper-example summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
body.settings-tabs .helper-example summary::before{content:'+';font-weight:600}
body.settings-tabs .helper-example[open] summary::before{content:'-'}
body.settings-tabs .helper-example p{overflow-wrap:anywhere;margin:8px 0}
html body.settings-tabs #sec-code #codeEditor .helper-example>summary{justify-content:flex-start!important;gap:8px!important;padding:8px 0!important}
/* A selection boundary remains visible without relying on text color. */
body.settings-tabs #settingsNavTop .category-tabs button{border:1px solid transparent!important;border-radius:8px!important}
body.settings-tabs #settingsNavTop .category-tabs button[aria-selected=true]{border-color:var(--ui-ink)!important;background:var(--ui-selected)!important;font-weight:700!important}
body.settings-tabs .go.copy-done::before{content:'✓';margin-right:6px}
/* Native keyboard scrolling leaves room for the single sticky category bar. */
body.settings-tabs :is(input,textarea,button,select,summary,a){scroll-margin-top:148px;scroll-margin-bottom:24px}
@media(min-width:761px){body.settings-tabs :is(input,textarea,button,select,summary,a){scroll-margin-top:88px}}
:root{--ui-border-width:1px;--ui-shadow-menu:0 8px 24px #173f3518;--ui-shadow-dialog:0 20px 60px #173f3528}
body.settings-tabs :is(.go,.cs-btn,.editor-choice){border-radius:var(--ui-radius-control)!important}
body.settings-tabs :is(.tile,.typeprev,.workspace-fields,.workspace-review){border-radius:var(--ui-radius-card)!important;box-shadow:none!important}
body.settings-tabs :is(.settings-help,.preset-dialog,.emoji-dialog){border-radius:var(--ui-radius-dialog)!important;box-shadow:var(--ui-shadow-dialog)!important}
body.settings-tabs .cs-list{border-radius:var(--ui-radius-card)!important;box-shadow:var(--ui-shadow-menu)!important}
body.settings-tabs #col :is(.tile,.typeprev,.workspace-fields,.workspace-review){border-radius:var(--ui-radius-card)!important;box-shadow:none!important}
/* Selection changes stay local; focus rings are immediate. */
body.settings-tabs #settingsNavTop .category-tabs button{transition:background-color .16s cubic-bezier(.2,.8,.2,1),color .16s cubic-bezier(.2,.8,.2,1),border-color .16s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){body.settings-tabs #settingsNavTop .category-tabs button{transition:none!important}}html[data-motion=none] body.settings-tabs #settingsNavTop .category-tabs button{transition:none!important}
/* Mobile settings spend space on controls, not repeated outer padding. */
@media(max-width:760px){
 html body.settings-tabs>.card #h{font-size:24px!important;line-height:1.2!important;padding:0!important;margin-bottom:8px!important}
 html body.settings-tabs>.card #lead{padding:0!important;margin-bottom:8px!important}
 html body.settings-tabs .loaded-app,html body.settings-tabs.simple .loaded-app{padding:0 12px!important;margin:8px 0!important}
 html body.settings-tabs .loaded-app>summary{padding:8px 0;box-sizing:border-box;min-height:44px}
 html body.settings-tabs .loaded-app>p,html body.settings-tabs .loaded-app>small{margin:8px 0}
 html body.settings-tabs .modebar,html body.settings-tabs.simple .modebar{padding:0!important;margin:8px 0!important;gap:8px!important}
 html body.settings-tabs #cfgmode{max-width:none!important;box-sizing:border-box}
 html body.settings-tabs #cfgmode button{min-height:44px!important}
 html body.settings-tabs .modebar .preview-toggle{min-height:44px!important;width:100%!important;box-sizing:border-box}
 html body.settings-tabs .settings-utilities{margin:8px 0!important;padding:8px 0!important}
 html body.settings-tabs .settings-utilities .settings-studio-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 8px!important}
 html body.settings-tabs .settings-studio-actions :is(.app-builder-open,.app-builder-drafts){flex:1 1 100px!important;min-width:0!important;min-height:44px!important;padding:8px!important;font-size:12px!important;white-space:normal!important}
 html body.settings-tabs #settingsNavTop{margin:8px 0!important;padding:4px 0!important}
 html body.settings-tabs #settingsNavTop .category-tabs button{min-height:44px!important;padding:8px!important}
 html body.settings-tabs #settingsFindHint{margin-top:4px!important}
}
/* Selected text is a value, not a teaser. Allow it to wrap in every settings picker. */
html body.settings-tabs .cs .cs-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
/* Ordinary group headings keep the same sentence case as their source labels. */
html body.settings-tabs :is(.grp h4,.pgroup,.otag,.builder-section>summary,#builderFields label,.builder-change strong,#builderDescribe>label){text-transform:none!important;letter-spacing:normal!important}
/* Response snapshots are read-only text, while code and YAML editors remain editable. */
html body.settings-tabs pre.code{background:var(--ui-nested);border:1px solid var(--ui-line);border-radius:8px;padding:12px;cursor:text;white-space:pre-wrap;overflow-wrap:anywhere}
.saved-api-recommendations{margin-top:20px;max-width:100%;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
.saved-api-recommendations article{border-top:1px solid var(--line,#d6dfd3);padding:16px 0}
.saved-api-recommendations article h4{margin:0 0 8px}
.saved-api-recommendations article a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;margin:4px 8px 8px 0;border:1px solid var(--line,#d6dfd3);border-radius:8px;color:inherit}
.saved-api-recommendations article p{margin:8px 0}
.saved-builder-editor-notice{padding:12px 0;line-height:1.5;font-size:14px}
.saved-setup-checks{border-bottom:1px solid var(--line,#d6dfd3);padding-bottom:12px;margin-bottom:14px}
.saved-setup-checks label{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0}
.saved-setup-checks input{flex:0 0 auto;margin-top:3px}
html #sec-search .saved-setup-checks label{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.5;padding:6px 0;min-height:44px}
html #sec-search .saved-setup-checks input{appearance:auto;-webkit-appearance:checkbox;display:block;position:static;width:18px;height:18px;border-radius:2px;margin:2px 0 0;flex:0 0 18px;accent-color:var(--accent,#174439)}
html #sec-search .saved-setup-checks input::before,html #sec-search .saved-setup-checks input::after{display:none}
.builder-final-apis{margin:20px 0;line-height:1.5}
.builder-final-api{border-top:1px solid var(--line,#d6dfd3);padding:18px 0;animation:builder-api-enter 140ms ease-out}
.builder-final-api label{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;min-height:44px}
.builder-final-api input{appearance:auto!important;width:18px!important;height:18px!important;flex:0 0 18px;position:static!important}
.builder-final-api input::before,.builder-final-api input::after{display:none!important}
.builder-final-api h5{font-size:14px;margin:12px 0 4px}.builder-final-api p{margin:4px 0 10px}
.builder-api-links{display:flex;gap:10px;flex-wrap:wrap}.builder-api-links a{display:inline-flex;min-height:44px;align-items:center;border:1px solid var(--line,#d6dfd3);border-radius:8px;padding:8px 12px;color:inherit}
.builder-final-api pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;font-size:12px;line-height:1.5}
@keyframes builder-api-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.builder-final-api{animation:none!important}}
html[data-motion=none] .builder-final-api,html[data-motion=calm] .builder-final-api{animation:none!important}
/* Final API choices: compact catalog first, setup on demand. */
.builder-final-apis{max-width:900px;margin:24px 0}
.builder-final-api{padding:14px 0}
.builder-final-api label strong{font-size:16px;line-height:1.4}
.builder-final-api>p{font-size:14px;max-width:65ch;padding-left:28px;color:var(--muted)}
.builder-final-api details{margin:8px 0 0 28px;border:0;border-radius:0;padding:0}
.builder-final-api summary{min-height:44px;display:flex;align-items:center;font-size:14px;cursor:pointer}
.builder-api-setup[open]{border-top:1px solid var(--line);padding-top:8px}
.builder-final-api .builder-api-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0}
.builder-final-api .builder-api-code pre{border:1px solid var(--line);padding:12px;border-radius:4px;background:var(--bg)}
@media(max-width:480px){.builder-final-api>p{padding-left:0}.builder-final-api details{margin-left:0}.builder-final-apis{margin:24px 0}}
/* Comparable API cards occupy the full review width. */
.builder-final-apis{max-width:none}
.builder-final-api-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:20px}
.builder-final-api{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:18px;animation:none}
.builder-final-api label{margin-bottom:12px;justify-content:space-between;flex-direction:row-reverse!important}
.builder-final-api label strong{font-size:18px}
.builder-final-api h5{font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 5px}
.builder-final-api p{font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.builder-api-purpose p{color:var(--ink)}
.builder-api-fit p{color:var(--muted)}
.builder-final-api .builder-api-links{margin:16px 0 8px;gap:4px 16px}
.builder-final-api .builder-api-links a{padding:0;border:0;border-radius:0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.builder-final-api details{margin:0;border-top:1px solid var(--line);padding:0}
.builder-final-api summary{font-weight:600;justify-content:space-between;min-height:44px}
.builder-final-api summary:after{content:'+';font-size:18px;font-weight:400}
.builder-final-api details[open]>summary:after{content:'-'}
.builder-final-api details[open]{padding-bottom:12px}
@media(max-width:760px){.builder-final-api-grid{grid-template-columns:1fr;gap:12px}.builder-final-api{padding:14px}.builder-final-api label strong{font-size:17px}}
.builder-final-api summary{text-align:left;justify-content:flex-start;gap:8px;list-style:none}
.builder-final-api summary:after{margin-left:auto}
.builder-final-api summary:before{display:none!important}
.builder-final-api summary::-webkit-details-marker{display:none}
/* Short API summaries, local initials and motion tied to real interaction. */
.builder-api-identity{display:flex;align-items:center;gap:10px;min-width:0}
.builder-api-mark{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:6px;background:var(--line);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.03em}
.builder-final-api label strong{overflow-wrap:anywhere}
.builder-api-purpose p,.builder-api-fit p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.builder-final-api.copy-expanded .builder-api-purpose p,.builder-final-api.copy-expanded .builder-api-fit p{display:block;overflow:visible}
.builder-api-more{min-height:44px;border:0;background:none;padding:0;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:inherit}
.builder-final-api{transition:border-color 160ms ease,background-color 160ms ease;animation:builder-api-enter 140ms ease-out}
.builder-final-api[data-selected=true]{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.builder-final-api details[open]>p,.builder-final-api details[open]>pre,.builder-final-api details[open]>h5{animation:builder-api-enter 140ms ease-out}
@media(prefers-reduced-motion:reduce){.builder-final-api,.builder-final-api details[open]>*{transition:none!important;animation:none!important}}
html[data-motion=none] .builder-final-api,html[data-motion=calm] .builder-final-api,html[data-motion=none] .builder-final-api details[open]>*,html[data-motion=calm] .builder-final-api details[open]>*{transition:none!important;animation:none!important}
.app-builder .builder-api-more{background:transparent!important;color:var(--ink)!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:36px;text-align:left;font-weight:400;border-radius:0!important}
.builder-api-purpose h5,.builder-api-fit h5{margin-top:10px}
.builder-final-api .builder-api-links{margin-top:8px}
html:not([data-motion=none]):not([data-motion=calm]) .app-builder .builder-final-api details[open]>p,html:not([data-motion=none]):not([data-motion=calm]) .app-builder .builder-final-api details[open]>pre,html:not([data-motion=none]):not([data-motion=calm]) .app-builder .builder-final-api details[open]>h5{animation:builder-api-enter 140ms ease-out!important}
@media(prefers-reduced-motion:reduce){html .app-builder .builder-final-api details[open]>*{animation:none!important;transition:none!important}}
/* Chosen direction 1: quiet cards, no alternative layout modes. */
.builder-final-api-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.builder-final-api{background:#fff;border-color:#ddd5ca}
.builder-api-mark{border-radius:50%;background:#eee9e2}
.builder-api-fit p{-webkit-line-clamp:1}
@media(max-width:760px){.builder-final-api-grid{grid-template-columns:1fr}}
/* Build with AI is the recommended path: keep the primary treatment in the studio actions row */
html body.settings-tabs .settings-studio-actions .app-builder-open{background:#173f35!important;color:#fffdf7!important;border:1px solid #49684e!important;box-shadow:0 3px 0 #0c2b21!important;font-size:13px!important;font-weight:700!important;padding:11px 16px!important}
html body.settings-tabs .settings-studio-actions .app-builder-open span:first-child{color:#d7ef72}
html[data-theme=dark] body.settings-tabs .settings-studio-actions .app-builder-open{background:#d7ef72!important;color:#173f35!important;border-color:#d7ef72!important;box-shadow:0 3px 0 #6b8520!important}
html[data-theme=dark] body.settings-tabs .settings-studio-actions .app-builder-open span:first-child{color:#173f35}

html body.settings-tabs .loaded-app{padding:8px 16px!important;margin:8px 0 6px!important}
html body.settings-tabs .loaded-app>summary{min-height:36px!important}