/* Shared control-room layout. Feature components use the same type and spacing tokens. */
:root { --paper:#f4f6f5; --white:#fff; --ink:#203630; --muted:#60736b; --line:#dfe6e2; --green:#24634d; --radius:12px; }
body { font-size:14px; }
.shell { grid-template-columns:224px minmax(0,1fr); }
.workspace { min-width:0; }
.sidebar { padding:28px 16px 18px; overflow-y:auto; }
.brand { margin-bottom:28px; }
.nav-label { margin:23px 0 8px; color:#798b82; }
.nav-item { font-size:13px; padding:11px 12px; margin:3px 0; }
.nav-item.active { background:#e7f0ea; box-shadow:inset 3px 0 var(--green); }
.sidebar-note { padding-top:28px; }
.topbar { height:64px; padding:0 36px; font-size:12px; background:#ffffffb3; }
.content { max-width:1320px; padding:34px 36px 26px; }
.page-heading { margin-bottom:28px; }
.page-heading h1 { font-size:32px; letter-spacing:-1px; margin-bottom:9px; }
.page-heading .eyebrow { display:none; }
.page-heading .muted { font-size:14px; max-width:650px; }
.panel { box-shadow:0 2px 5px #20363003; }
h2 { font-size:19px; letter-spacing:-.4px; }
h3 { font-size:15px; letter-spacing:-.15px; margin:0 0 8px; }
label,.inline-check,.switch-row label { font-size:13px; }
input:not([type=checkbox]),select,textarea { background:#fff; font-size:14px; line-height:1.45; min-height:44px; border-color:#cbd8d0; }
textarea { line-height:1.65; }
.hint { font-size:12px; line-height:1.65; max-width:80ch; }
.primary,.secondary,.light-button { font-size:13px; min-height:42px; padding:10px 15px; }
.primary { box-shadow:0 1px 2px #143e3020; }
.text-button { font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.section-tabs { margin:24px 0; gap:5px; padding:5px; border:1px solid var(--line); border-radius:10px; background:#ebefec; width:fit-content; max-width:100%; }
.section-tabs button { padding:10px 17px; font-size:13px; }
.section-tabs button[aria-pressed=true] { background:#fff; color:var(--green); box-shadow:0 1px 5px #182d2c14; }
.form-panel { padding:26px; margin:20px 0; }
#view-setup .form-panel,#view-answers .form-panel { max-width:none; }
.advanced-settings { margin:18px 0 0; border-top:1px solid var(--line); padding-top:15px; }
.advanced-settings > summary { color:var(--muted); font-size:12px; }
.advanced-settings[open] > summary { margin-bottom:14px; }
.settings-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:28px; }
.settings-nav { display:flex; flex-direction:column; gap:5px; border-right:1px solid var(--line); padding-right:18px; align-self:start; }
.settings-nav button { background:transparent; text-align:left; padding:11px 12px; border-radius:7px; font-size:13px; color:var(--muted); line-height:1.35; }
.settings-nav button:hover { background:var(--paper); color:var(--ink); }
.settings-nav button[aria-current=true] { background:#edf4ef; color:var(--green); font-weight:600; }
.settings-pane > h2,.settings-pane > .section-heading { margin-top:0; margin-bottom:8px; }
.section-description { color:var(--muted); font-size:13px; margin-bottom:24px; }
.settings-pane > .hint { max-width:75ch; }
.settings-pane .two-columns,.settings-pane .three-columns { gap:18px; }
.sectioned-form > .rule { display:none; }
.save-bar { position:static; bottom:12px; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:12px 16px; margin-top:26px; box-shadow:0 5px 20px #20363009; }
.save-bar > .hint { display:none; }
.form-save-state { font-size:12px; color:var(--muted); margin-right:auto; }
.form-save-state[data-state=dirty] { color:#99661e; }
.form-save-state[data-state=dirty]:before { content:'●'; font-size:8px; margin-right:7px; }
.form-save-state[data-state=saved] { color:var(--green); }
.form-save-state[data-state=error] { color:var(--red); }
.form-feedback { margin:18px 0 0; padding:13px 16px; border:1px solid #ebc9c2; border-radius:8px; background:#fff3ef; color:var(--red); font-size:13px; }
.banner,.context-bar { line-height:1.65; font-size:12px; padding:13px 17px; }
.context-bar { background:transparent; border:1px dashed #cddbd2; }
.switch-row { align-items:flex-start; }
.switch-row > input { margin-top:2px; }
.switch-row label span { font-size:12px; line-height:1.55; }
.enable-row { background:#edf4ef; }
.icon-button { background:none; border:1px solid var(--line); border-radius:7px; min-width:40px; min-height:40px; color:var(--ink); font-size:20px; }
#navigation-toggle { display:none; }
.form-panel > details:first-child { margin-top:0; }
@media(min-width:1500px) { .content { padding-left:48px; padding-right:48px; } }
@media(max-width:1100px) {
  .shell { grid-template-columns:198px minmax(0,1fr); }
  .content { padding:28px 24px; }
  .settings-layout { grid-template-columns:155px minmax(0,1fr); gap:20px; }
  .settings-nav { padding-right:12px; }
}
@media(max-width:760px) {
  .shell { display:block; }
  .sidebar { position:static; height:auto; padding:16px 20px; }
  .brand { margin:0; }
  .sidebar nav { display:none; }
  .sidebar-note,.sidebar-bottom { display:none; }
  .navigation-open .sidebar nav { display:block; padding:15px 0; }
  .navigation-open .sidebar-bottom { display:flex; }
  .navigation-open .nav-label { display:block; }
  .nav-item { width:100%; margin:3px 0; font-size:14px; padding:12px; }
  .nav-item > span { display:block; }
  #navigation-toggle { display:block; }
  .topbar { padding:10px 20px; gap:12px; height:auto; min-height:62px; }
  .topbar > span:first-of-type { flex:1; font-size:11px; }
  .owner-tag { display:none; }
  .content { padding:24px 16px; }
  .page-heading h1 { font-size:29px; }
  .section-tabs { flex-wrap:nowrap; overflow-x:auto; width:100%; }
  .section-tabs button { white-space:nowrap; padding:10px 12px; font-size:12px; }
  .form-panel { padding:20px 16px; }
  .settings-layout { display:block; }
  .settings-nav { flex-direction:row; overflow-x:auto; border:0; border-bottom:1px solid var(--line); padding:0 0 12px; margin:0 0 22px; gap:4px; }
  .settings-nav button { white-space:nowrap; font-size:12px; padding:10px; }
  .settings-pane .two-columns,.settings-pane .three-columns { grid-template-columns:1fr; gap:0; }
  .save-bar { flex-direction:row; bottom:8px; padding:10px 12px; }
  .save-bar .primary { white-space:normal; }
  .form-save-state { font-size:11px; }
}
@media(prefers-reduced-motion:no-preference) { .nav-item,button { transition:background-color .15s,border-color .15s; } }

form[data-save-state=dirty] > .save-bar,form[data-save-state=saving] > .save-bar { position:sticky; }
.settings-disclosure { margin-top:20px; padding:20px 24px; }
.settings-disclosure > summary { font-size:14px; color:var(--ink); }
.settings-disclosure > form.form-panel { border:0; box-shadow:none; padding:16px 0 0; margin:0; }

/* A single connection, with its capabilities beside it. */
#view-setup { max-width:1120px; }
#view-setup .page-heading { margin-bottom:12px; }
#view-setup .page-heading h1 { font-size:clamp(26px,3vw,38px); letter-spacing:-1.1px; }
.setup-connection-summary { color:var(--muted); font-size:12px; margin:0 0 26px; }
.single-connection { margin-top:28px; }
.ai-setup-layout { display:contents; }
.ai-connection-panel { padding:28px 30px; margin:0; box-shadow:0 8px 28px #173e2510; }
.ai-panel-heading { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.ai-panel-heading h2 { margin:0 0 6px; font-size:21px; letter-spacing:-.4px; }
.ai-panel-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.ai-mark { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; border-radius:14px; font-size:30px; color:white; background:#245b48; }
.active-provider-fields { padding:0; margin:6px 0 0; border:0; min-width:0; }
.active-provider-fields .advanced-settings { margin-top:24px; }
.ai-feature-panel { padding:20px 0; }
.ai-feature-panel h2 { margin:0 0 22px; font-size:22px; letter-spacing:-.5px; }
.ai-feature-panel .eyebrow { margin-top:0; }
.connection-feature { padding:19px 0; border-bottom:1px solid var(--line); }
.connection-feature:first-child { padding-top:0; }
.feature-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:space-between; }
.feature-title h3 { margin:0; font-size:14px; font-weight:650; }
.feature-title .status-badge { font-size:10px; }
.connection-feature p { font-size:13px; color:var(--muted); line-height:1.6; margin:9px 0 0; }
.connection-feature .feature-note { font-size:12px; color:#355e52; }
.feature-footnote { margin:22px 0 0; font-size:12px; color:var(--muted); line-height:1.7; }
.single-connection > .save-bar { border:0; box-shadow:none; background:transparent; padding:22px 0 0; margin:0; position:static !important; }
.connection-actions { display:flex; flex-wrap:wrap; gap:10px; }
.connection-check-note { font-size:11px; line-height:1.7; color:var(--muted); max-width:610px; margin:14px 0 0; }
.capability-note { border-left:3px solid #b9cbbb; padding-left:10px; }
@media(max-width:1000px) { .ai-connection-panel { padding:24px; } }
@media(max-width:760px) { .ai-connection-panel { padding:22px 20px; } .ai-feature-panel { padding:18px 8px; } .single-connection > .save-bar { flex-direction:column; align-items:stretch; gap:12px; } .connection-actions { flex-direction:column; } .setup-connection-summary { overflow-wrap:anywhere; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Keep the primary action with the connection, including on a phone. */
.single-connection { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr); column-gap:36px; align-items:start; }
.ai-connection-panel { grid-column:1; grid-row:1; }
.ai-feature-panel { grid-column:2; grid-row:1/6; }
.single-connection > .banner,.single-connection > .form-feedback,.single-connection > .save-bar,.single-connection > .connection-check-note { grid-column:1; }
.single-connection > .save-bar { gap:12px; }
.single-connection .form-save-state { flex-basis:100%; }
@media(max-width:1000px) { .single-connection { column-gap:24px; grid-template-columns:minmax(0,1fr) minmax(250px,.9fr); } }
@media(max-width:760px) {
 .single-connection { grid-template-columns:minmax(0,1fr); }
 .ai-feature-panel { grid-column:1; grid-row:6; margin-top:24px; }
 #view-setup > .section-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; overflow:visible; }
 #view-setup > .section-tabs button { white-space:normal; }
}

.ai-connection-panel .hint { margin-bottom:0; }

/* Discovery previews share the existing panel and form language. */
.discovery-intro,.discovery-toolbar {display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin:1.5rem 0;}
.discovery-intro p {max-width:48rem;}
.discovery-toolbar label {display:flex;align-items:center;gap:.75rem;margin:0;}
.discovery-toolbar select {min-width:12rem;}
.discovery-card h3 {font-size:1.2rem;line-height:1.4;margin:0;}
.discovery-card {overflow-wrap:anywhere;}
.discovery-card > button {margin-top:1rem;}
.discovery-card details {margin-top:1rem;}
.discovery-card summary,.discovery-options summary {cursor:pointer;}
.discovery-feedback {border-top:1px solid var(--line);padding-top:.85rem;margin-top:1rem;}
.discovery-feedback label {margin-top:1rem;}
.discovery-comparison {border-left:3px solid #b6c8ad;padding-left:1rem;}
.discovery-example {padding:1rem 0;border-bottom:1px solid var(--line);}
.discovery-options {margin:1rem 0;}
.discovery-options textarea {margin-bottom:1rem;}
.discovery-run h3 {font-size:1.05rem;}
@media(max-width:600px){.discovery-intro,.discovery-toolbar {align-items:stretch;flex-direction:column;}.discovery-toolbar label{display:block;}.discovery-toolbar select{width:100%;}.discovery-card .card-heading{flex-wrap:wrap;}}

.discovery-intro h2 {font-size:26px;}
.discovery-card {margin-bottom:16px;}
.discovery-options summary {margin-bottom:16px;}