/* Zwinne AI UI 1.0 — Mailjet geometry, Zwinne AI palette. See docs/styleguide.md. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('./dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('./dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  color-scheme: light;
  --ink: #14231e; --ink-soft: #324740; --muted: #5b6b64;
  --green: #12382c; --green-dark: #0b2c22; --green-soft: #e4eee8; --green-pale: #f1f6f2;
  --surface: #fff; --surface-subtle: #f8faf9; --line: #dce2de; --line-strong: #89968f;
  --danger: #9f2f2f; --danger-soft: #fff2f0; --success: #246746; --warning: #76530c; --warning-soft: #fff8e9;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 3px; --text-small: 12px; --text-body: 14px; --text-label: 16px; --text-section: 20px; --text-title: 24px;
  --sidebar-width: 248px; --topbar-height: 48px; --content-width: 1280px; --control-height: 36px;
  --shadow: 0 4px 16px #14231e14;
  font-family: 'DM Sans', system-ui, sans-serif; font-synthesis: none; color: var(--ink); background: var(--surface);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scroll-padding-top: 72px; }
body { margin: 0; min-width: 320px; min-height: 100dvh; font-size: var(--text-body); line-height: 1.5; background: var(--surface); }
h1,h2,h3,h4,p,dl { margin-top: 0; }
h1 { font-size: var(--text-title); line-height: 32px; font-weight: 500; overflow-wrap: anywhere; }
h2 { font-size: var(--text-section); line-height: 1.4; font-weight: 500; margin-bottom: var(--space-4); overflow-wrap: anywhere; }
h3,h4 { font-size: var(--text-label); line-height: 1.5; font-weight: 600; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
p { margin-bottom: var(--space-4); }
strong { font-weight: 600; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
button,input,textarea,select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
input,textarea,select { width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 12px; line-height: 20px; min-height: var(--control-height); color: var(--ink); background: var(--surface); }
input[type=checkbox],input[type=radio] { width: 16px; height: 16px; min-height: 0; flex: 0 0 16px; accent-color: var(--green); }
textarea { resize: vertical; }
input,textarea,select { font-weight: 400; }
input:hover,textarea:hover,select:hover { border-color: var(--green); }
input:focus,textarea:focus,select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
label { display: grid; gap: var(--space-2); color: var(--ink-soft); font-size: var(--text-body); font-weight: 600; }
fieldset { min-width: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.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; }
.skip-link { position: fixed; z-index: 200; top: -100px; left: 16px; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 8px; }
.ui-icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; fill: currentColor; vertical-align: middle; }
.ui-illustration { display: block; flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
.button,.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: fit-content; max-width: 100%; min-height: var(--control-height); border: 1px solid transparent; border-radius: var(--radius); padding: 7px 16px; font-size: var(--text-body); font-weight: 500; line-height: 20px; text-decoration: none; text-align: center; }
.button:hover { text-decoration: none; }
.button-primary { background: var(--green); border-color: var(--green); color: #fff; }
.button-primary:hover { background: var(--green-dark); color: #fff; }
.button-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--green); }
.button-secondary:hover { background: var(--green-pale); border-color: var(--green); }
.button-quiet { background: transparent; color: var(--ink-soft); padding-inline: var(--space-2); }
.button-quiet:hover { background: var(--green-pale); color: var(--green); }
.button-danger,.chat-delete { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.button-danger:hover { background: var(--danger-soft); }
.button-wide { width: 100%; }
.icon-button { width: 36px; padding: 7px; background: var(--surface); color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand strong { font-size: 16px; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); min-height: 100dvh; }
.app-column { min-width: 0; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); z-index: 40; }
.sidebar > .brand { height: var(--topbar-height); flex-shrink: 0; padding: 8px 16px; }
.sidebar-toggle { position: absolute; right: -12px; top: 12px; width: 24px; min-height: 24px; padding: 2px; border: 1px solid var(--line); border-radius: 50%; }
.sidebar-toggle .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
.main-nav { min-height: 0; overflow-y: auto; padding-block: var(--space-2); }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 24px; border-radius: var(--radius); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.nav-link:hover { background: var(--green-pale); text-decoration: none; }
.nav-link[aria-current=page] { background: var(--green-soft); color: var(--green); }
.nav-label { margin: 16px 24px 4px; font-size: var(--text-small); color: var(--muted); }
.nav-status { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.account-nav-label { border-top: 1px solid var(--line); padding-top: 16px; }
.domain-picker { margin: 8px 12px; min-width: 0; }
.domain-picker-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); text-align: left; }
.domain-picker-trigger > span { display: grid; flex: 1; min-width: 0; }
.domain-picker-trigger small { color: var(--muted); font-size: 12px; }
.domain-picker-trigger strong { font-size: 14px; overflow-wrap: anywhere; }
.domain-picker-panel { position: fixed; z-index: 80; top: 64px; left: 264px; width: min(400px,calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.domain-picker-panel > label { margin-bottom: 12px; }
.domain-picker-panel { display: flex; flex-direction: column; }
.domain-picker-panel > :not(.domain-picker-list) { flex-shrink: 0; }
.domain-picker-list { display: grid; gap: 4px; min-height: 0; overflow-y: auto; }
.domain-picker-option { display: grid; gap: 4px; padding: 12px; border-radius: var(--radius); text-decoration: none; overflow-wrap: anywhere; }
.domain-picker-option:hover,.domain-picker-option[aria-current=true] { background: var(--green-soft); text-decoration: none; }
.domain-picker-option small { color: var(--muted); }
.domain-picker-footer { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.compact-domain-picker { display: none; min-width: 0; }
.is-collapsed .sidebar .domain-picker,.is-collapsed .wide-context { display: none; }
.is-collapsed .compact-domain-picker { display: block; }
.compact-domain-picker .domain-picker { margin: 0; }
.compact-domain-picker .domain-picker-trigger { border: 0; padding: 2px 0; }
.compact-domain-picker .domain-picker-trigger small { display: none; }
.compact-domain-picker .domain-picker-trigger strong { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-collapsed .domain-picker-panel { left: 80px; }
#services,#settings,#add-domain { scroll-margin-top: 72px; }
[data-history-only] [data-wcag-start],[data-history-only] [data-seo-start],
[data-history-only] [data-mail-settings-link],[data-history-only] [data-mail-new],
[data-history-only] [data-mail-back],[data-history-only] .mail-compose button[type=submit],
[data-history-only] [data-mail-send],[data-history-only] .mail-compose > p:last-child { display: none; }
.domain-service-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.domain-service-links a { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 1023px) {
  .compact-domain-picker { display: block; }
  .wide-context { display: none; }
  .domain-picker-panel,.is-collapsed .domain-picker-panel { left: 16px; top: 64px; }
  .topbar-context { flex: 1; }
  .compact-domain-picker .domain-picker-trigger strong { max-width: min(320px,calc(100vw - 152px)); }
  .domain-picker-trigger { min-height: 44px; }
}
.sidebar-footer { margin-top: auto; padding: 8px 16px; border-top: 1px solid var(--line); }
.logout-form { margin: 0; }
.logout-form .button { width: 100%; justify-content: flex-start; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-height); padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar-context { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--muted); }
.topbar-context > strong { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.context-change { flex-shrink: 0; font-size: 12px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #fff; background: var(--green); font-size: 12px; font-weight: 600; }
.account-menu { position: relative; margin-left: auto; }
.account-menu > summary { display: flex; align-items: center; gap: 12px; height: 44px; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker,.mobile-menu summary::-webkit-details-marker { display: none; }
.account-summary { display: grid; max-width: 230px; }
.account-summary strong,.account-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-summary strong { font-size: 13px; font-weight: 400; }
.account-summary small { font-size: 12px; color: var(--muted); }
.account-menu-panel { position: absolute; top: 46px; right: 0; width: min(320px,calc(100vw - 32px)); padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.account-menu-panel > strong,.account-menu-panel > small { display: block; margin-bottom: 8px; }
.account-menu-panel > small { color: var(--muted); }
.account-menu-panel .nav-link { padding-inline: 8px; font-size: 14px; }
.mobile-menu { display: none; }
.app-shell.is-collapsed { grid-template-columns: 64px minmax(0,1fr); }
.is-collapsed .sidebar .brand > span,.is-collapsed .sidebar .nav-link > span,.is-collapsed .sidebar .nav-label,.is-collapsed .sidebar-footer { display: none; }
.is-collapsed .sidebar .nav-link { justify-content: center; padding-inline: 0; }
.is-collapsed .sidebar-toggle .ui-icon { transform: rotate(180deg); }
.main { min-width: 0; min-height: calc(100dvh - var(--topbar-height)); }
.content-frame { width: 100%; max-width: var(--content-width); margin-inline: auto; padding: 24px 24px 64px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin-bottom: 24px; }
.page-header-copy,.page-header > div { min-width: 0; }
.page-header h1 { margin: 0 0 8px; }
.page-header p:last-child { margin-bottom: 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.page-description { max-width: 80ch; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.page-back-link,.report-breadcrumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 16px; font-size: 12px; }
.panel,.report-section,.report-verdict,.plugin-settings,.plugin-setup,.empty-state,.standalone-state { min-width: 0; margin-bottom: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel > :last-child,.report-section > :last-child { margin-bottom: 0; }
.panel-heading { display: flex; align-items: start; gap: 16px; margin-bottom: 24px; }
.panel-heading h2 { margin-bottom: 8px; }
.panel-heading p { color: var(--muted); margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.settings-grid .panel { margin-bottom: 0; }
.stack-form { display: grid; gap: 16px; max-width: 680px; }
.stack-form p { margin: 0; }
.stack-form + h2 { margin-top: 24px; }
.mail-actions + p { margin-top: 16px; }
.stack-form .button { justify-self: start; }
.stack-form .button-wide { width: 100%; }
.form-actions,.mail-actions,.mail-toolbar,.empty-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-message { color: var(--danger); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.form-message:empty,[role=status]:empty { display: none; }
.form-message.success { color: var(--success); }
.form-message.is-pending,.field-help,.page-footnote,.muted,.muted-copy,.wcag-note { color: var(--muted); }
.field-help { font-size: 12px; font-weight: 400; }
.page-footnote,.wcag-note { margin-top: 24px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 76px; }
.password-toggle { position: absolute; right: 2px; top: 2px; min-height: 32px; padding: 4px 12px; border: 0; background: transparent; color: var(--green); font-size: 12px; }
.notice,.api-key-guidance { margin-bottom: 24px; padding: 16px 24px; color: var(--ink-soft); background: var(--green-pale); border: 1px solid var(--line); border-radius: var(--radius); }
.notice-success { color: var(--success); }
.api-key-guidance { font-size: 12px; }
.account-email { margin-block: 12px; overflow-wrap: anywhere; }
.account-email span { margin-right: 8px; }
.method-list { border-top: 1px solid var(--line); }
.method-row,.plugin-setting-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.method-row > div,.plugin-setting-status > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.method-row span:not(.method-status),.plugin-setting-status > div > span { color: var(--muted); font-size: 12px; }
.method-status,.report-state,.tag-row span,.delta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius); color: var(--muted); background: var(--surface-subtle); font-size: 12px; font-weight: 500; width: fit-content; }
.method-status.is-on,.report-state.is-ready,.delta.is-up { color: var(--success); background: var(--green-pale); }
.report-state.is-progress { color: var(--warning); background: var(--warning-soft); }
.report-state.is-problem,.delta.is-down { color: var(--danger); background: var(--danger-soft); }
.session-actions { display: grid; gap: 12px; }
.session-actions form { margin: 0; }
.plugin-setting-form,.plugin-setting-remove { display: grid; gap: 16px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.plugin-setting-remove { border-bottom: 0; padding-bottom: 0; }
.plugin-setting-form h2,.plugin-setting-remove h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.plugin-setting-form > div > p,.plugin-setting-remove > div > p { color: var(--muted); }
.plugin-setting-remove form { display: grid; justify-items: start; gap: 8px; }
.empty-state { display: grid; justify-items: start; gap: 8px; }
.empty-state p,.plugin-setup > p { max-width: 680px; color: var(--muted); }
.empty-icon { display: inline-flex; align-items: center; color: var(--green); margin-bottom: 16px; }
.standalone-state { width: min(600px,100%); margin: 0 auto; }
.standalone-state .brand { margin-bottom: 32px; }
.section-heading,.view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading h2,.view-heading h2 { margin: 0; }
.plugin-list,.site-list,.report-history { border: 1px solid var(--line); border-radius: var(--radius); margin-block: 24px; }
.plugin-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); }
.plugin-row:last-child,.site-list-row:last-child,.report-history-row:last-child,.domain-plugin:last-child { border-bottom: 0; }
.plugin-graphic { color: var(--green); }
.plugin-row-copy { min-width: 0; }
.plugin-row-copy h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.plugin-row-copy p,.plugin-summary-unavailable { margin: 0; color: var(--muted); font-size: 12px; }
.plugin-metrics { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.plugin-metrics > span { display: grid; font-size: 12px; color: var(--muted); }
.plugin-metrics strong { color: var(--ink); font-size: 14px; }
.list-open,.report-open { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; }
.reports-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.reports-summary > div { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 130px; padding: 24px 24px 24px 104px; border: 1px solid var(--line); border-radius: var(--radius); }
.reports-summary dt { color: var(--muted); font-size: 12px; }
.reports-summary dd { order: -1; margin: 0; font-size: 24px; font-weight: 500; overflow-wrap: anywhere; }
.reports-summary .ui-illustration { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
.report-tabs,.report-section-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.report-tabs a,.report-section-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; background: var(--surface); color: var(--muted); border: 0; border-bottom: 3px solid transparent; text-decoration: none; font-size: 14px; font-weight: 500; }
.report-tabs a[aria-current=page],.report-section-tabs button[aria-selected=true] { color: var(--green); border-bottom-color: var(--green); }
.report-refresh-status { color: var(--muted); }
.report-refresh-status:empty { display: none; }
.site-list-row,.report-history-row { display: grid; grid-template-columns: minmax(140px,1.3fr) repeat(4,minmax(80px,1fr)) auto; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); }
.site-list-row > div,.report-history-row > div { min-width: 0; overflow-wrap: anywhere; }
.report-domain strong { display: block; }
.report-cell-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.report-unavailable,.report-pending-copy { color: var(--muted); font-size: 12px; }
.domain-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 16px; margin-block: 24px; }
.domain-grid > .panel { margin: 0; }
.domain-card h2 { margin-bottom: 12px; }
.domain-card h2 a { text-decoration: none; }
.domain-card h3 { font-size: 14px; }
.domain-latest,.domain-cost { overflow-wrap: anywhere; }
.domain-plugin,.billing-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--line); }
.domain-plugin h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.domain-plugin p,.billing-line p { margin-bottom: 4px; }
.domain-plugin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-plugin-actions:empty { display: none; }
.domain-service { min-width: 0; padding-block: 24px; border-top: 1px solid var(--line); }
.domain-service:first-child { border-top: 0; padding-top: 0; }
.domain-service:last-child { padding-bottom: 0; }
.domain-service > .form-message { margin-top: 16px; }
.domain-service-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.domain-service-heading > div { min-width: 0; }
.domain-service-heading h2,.domain-service-heading h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.domain-service-heading p { color: var(--muted); margin-bottom: 0; }
.domain-service-heading .method-status { flex-shrink: 0; }
.domain-service-result { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; }
.domain-service-result > div { min-width: 0; }
.domain-service-result p { max-width: 70ch; margin-bottom: 8px; }
.domain-service-result p:last-child { margin-bottom: 0; }
.domain-result-title { font-size: var(--text-section); font-weight: 500; line-height: 1.4; }
.domain-service.is-problem .domain-result-title { color: var(--danger); }
.domain-service.is-progress .domain-result-title { color: var(--warning); }
.domain-service.is-ready .domain-result-title { color: var(--success); }
.domain-history { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.domain-history:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.domain-history > h2 { color: var(--muted); }
.domain-history .domain-result-title { font-size: var(--text-label); }
.domain-access-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 16px 24px; margin-bottom: 16px; }
.domain-access-summary p { margin-bottom: 4px; }
.domain-access-summary h2,#services .stack-form > h2,#settings .settings-links h2 { font-size: var(--text-label); line-height: 1.5; font-weight: 600; margin-bottom: 8px; }
#settings .settings-links h2 { margin-bottom: 4px; }
.domain-other-services { margin-top: 16px; border-top: 1px solid var(--line); }
.domain-other-services ul { list-style: none; padding: 0; margin: 0; }
.domain-other-services li { display: grid; gap: 4px; padding-block: 12px; border-top: 1px solid var(--line); }
.domain-other-services li > span { color: var(--muted); }
.plugin-choices { display: grid; gap: 12px; }
.plugin-choices label { display: flex; align-items: center; gap: 12px; }
.plugin-choices small { display: block; color: var(--muted); font-weight: 400; }
.billing-line { padding-inline: 0; }
[data-purchase-quote]:not(:empty) { margin-top: 24px; }
[data-purchase-quote] button { margin: 8px 12px 8px 0; }
/* Product layouts use shared typography, surfaces, forms and actions above. */
.mail-toolbar { margin-bottom: 24px; }
.mail-toolbar label { min-width: min(200px,100%); flex: 1; }
.mail-workspace { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.6fr); gap: 16px; align-items: start; }
.mail-workspace:has(.mail-ai:not([hidden])) { grid-template-columns: minmax(170px,.6fr) minmax(0,1.2fr) minmax(280px,1fr); }
.mail-workspace .panel { margin: 0; padding: 16px; }
.mail-workspace h2 { font-size: 16px; font-weight: 600; }
.mail-list { max-height: 76dvh; overflow-y: auto; }
.mail-list .mail-item { display: grid; width: 100%; text-align: left; justify-content: start; gap: 4px; padding: 16px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); overflow-wrap: anywhere; }
.mail-item:hover { background: var(--green-pale); }
.mail-item small,.mail-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.mail-text,.mail-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-text { padding-block: 24px; }
.mail-compose { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.mail-ai { position: sticky; top: 72px; }
.mail-ai-messages { max-height: 45dvh; overflow-y: auto; margin-block: 16px; }
.mail-chat-message { background: var(--surface-subtle); padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.mail-chat-message.is-user { background: var(--green-pale); }
.mail-chat-message p { margin-bottom: 0; }
.mail-settings details,.seo-google details { margin-block: 24px; }
details > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-weight: 500; }
.mail-settings details[open] > summary,.seo-google details[open] > summary { margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.mail-onboarding { display: grid; justify-items: start; gap: 8px; }
.mail-onboarding > .ui-illustration { margin-bottom: 16px; }
.wcag-history,.seo-google { margin-top: 24px; }
.wcag-history-item { display: flex; justify-content: flex-start; text-align: left; width: 100%; padding: 16px; margin: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 0; background: var(--surface); overflow-wrap: anywhere; }
.wcag-history-item:last-child { border-bottom: 1px solid var(--line); }
.wcag-history-item:hover { background: var(--green-pale); }
.wcag-url,.wcag-issue p,[data-wcag-report] details,[data-seo-report] details,.seo-google { overflow-wrap: anywhere; }
.wcag-issue { padding: 16px 24px; margin-block: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.wcag-issue pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 240px; overflow: auto; }
.wcag-ai { position: fixed; inset: 0 0 0 auto; width: min(520px,100%); z-index: 100; overflow-y: auto; margin: 0; border-radius: 0; box-shadow: var(--shadow); }
.wcag-ai h2 { margin: 0; }
.wcag-ai > p { margin-top: 16px; }
body:has(.wcag-ai:not([hidden])) { overflow: hidden; }
.scan-config-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.seo-google form { margin-block: 24px; }
.chat-notice { margin-bottom: 24px; }
.chat { display: grid; grid-template-columns: 260px minmax(0,1fr); height: max(540px,calc(100dvh - 220px)); max-height: 900px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.chat-sidebar { min-width: 0; overflow-y: auto; border-right: 1px solid var(--line); }
.chat-list-heading,.chat-conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-list-heading { position: sticky; top: 0; z-index: 2; }
.chat-list-heading h2,.chat-conversation-header h2 { margin: 0; font-size: 14px; font-weight: 600; }
.chat-conversation-header > div:first-child { min-width: 0; flex: 1; }
.chat-conversation-header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-header p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.chat-conversation-header [data-chat-cost]:not([hidden])::before { content: ' · '; }
.chat-list-empty { margin: 16px; color: var(--muted); }
.chat ul { padding: 0; margin: 0; list-style: none; }
.chat ul li { border-bottom: 1px solid var(--line); }
.chat ul button { display: grid; min-width: 0; width: 100%; gap: 4px; text-align: left; min-height: 64px; padding: 12px 16px; border: 0; border-left: 3px solid transparent; color: var(--ink); background: var(--surface); }
.chat ul button:hover { background: var(--green-pale); }
.chat ul button[aria-current=true] { background: var(--green-soft); border-left-color: var(--green); }
.chat ul button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chat ul button span { color: var(--muted); font-size: 12px; }
.chat-conversation { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto auto; min-width: 0; min-height: 0; }
.chat-actions { display: flex; flex-shrink: 0; gap: 4px; }
.chat-actions .button { font-size: 12px; padding-inline: 8px; }
.chat-messages { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 16px; min-height: 0; overflow-y: auto; padding: 24px; scroll-behavior: smooth; }
.chat-messages > a { overflow-wrap: anywhere; }
.message { display: grid; gap: 4px; max-width: 88%; margin: 0; white-space: pre-wrap; }
.message-role { font-size: 12px; color: var(--muted); }
.message p { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-subtle); overflow-wrap: anywhere; }
.message.user { justify-self: end; }
.message.user .message-role { text-align: right; }
.message.user p { background: var(--green-pale); }
.message.failed p { color: var(--danger); background: var(--danger-soft); }
.message.streaming p::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 4px; background: var(--green); animation: chat-caret .8s steps(1) infinite; }
@keyframes chat-caret { 50% { opacity: 0; } }
.chat-empty { display: grid; justify-items: center; align-self: center; justify-self: center; gap: 8px; max-width: 360px; margin: auto; padding: 24px; text-align: center; }
.chat-empty p { color: var(--muted); margin: 0; }
.chat-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; padding: 16px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer textarea { min-height: 48px; max-height: 180px; }
.chat-status { padding: 0 16px 12px; }
/* Detailed reports share the same panel and type scales. */
.report-document,.report-panel { display: grid; gap: 24px; min-width: 0; }
.report-document > .page-header,.report-document > .report-section-tabs,.report-document .report-breadcrumb a { margin-bottom: 0; }
.report-document .panel,.report-document .report-section,.report-document .report-verdict { margin: 0; }
.report-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.report-score-hero { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.score-dial { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100px; height: 100px; border: 9px solid var(--green-soft); border-radius: 50%; color: var(--green); }
.score-dial span { font-size: 28px; font-weight: 500; }
.score-dial small { font-size: 12px; color: var(--muted); }
.score-story h2 { margin: 4px 0 8px; }
.score-story > p { color: var(--muted); }
.report-key-metrics,.model-submetrics { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 16px; margin: 16px 0 0; border-top: 1px solid var(--line); }
.report-key-metrics div,.model-submetrics div { display: grid; }
.report-key-metrics dt,.model-submetrics dt { color: var(--muted); font-size: 12px; }
.report-key-metrics dd,.model-submetrics dd { margin: 0; font-size: 20px; }
.report-section-heading { margin-bottom: 24px; }
.report-section-heading > p { color: var(--muted); }
.report-summary ul { display: grid; gap: 12px; padding-left: 20px; }
.report-summary li { color: var(--ink-soft); }
.report-summary li strong { display: block; }
.verdict-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.verdict-card { display: flex; align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.verdict-card p { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.verdict-symbol { display: flex; color: var(--muted); }
.verdict-card.is-positive .verdict-symbol { color: var(--success); }
.verdict-card.is-negative .verdict-symbol { color: var(--danger); }
.top-recommendation { display: grid; gap: 4px; padding: 16px; margin-top: 16px; border-left: 3px solid var(--warning); background: var(--warning-soft); }
.top-recommendation span { color: var(--warning); font-size: 12px; }
.report-section-tabs { position: sticky; top: 48px; z-index: 20; background: var(--surface); margin: 0; }
.report-panels { min-width: 0; }
.model-score-grid,.question-models,.competitor-grid,.content-map-grid,.change-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.model-score-card,.question-card,.competitor-card,.problem-card,.recommendation-card,.content-map-card,.change-group,.answer-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.model-score-head,.recommendation-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.model-score-head strong { font-size: 24px; color: var(--green); }
.model-score-head small { font-size: 12px; }
.question-list,.recommendation-list,.answer-list,.problem-grid { display: grid; gap: 16px; }
.question-card { padding: 0; }
.question-card > header { padding: 16px; border-bottom: 1px solid var(--line); }
.question-card > header > span,.model-label,.content-map-card > span { font-size: 12px; color: var(--muted); }
.question-card h3 { margin-top: 8px; }
.question-outcome { color: var(--muted); margin-bottom: 0; }
.question-models { gap: 0; }
.question-models > div { padding: 16px; min-width: 0; }
.question-models > div + div { border-left: 1px solid var(--line); }
.question-models p { overflow-wrap: anywhere; }
.inline-details { padding: 0 16px; border-top: 1px solid var(--line); }
.inline-details ul,.report-list,.recommendation-tasks,.plan-tasks { padding-left: 20px; }
.competitor-card { display: flex; gap: 12px; }
.competitor-card p,.competitor-card small { color: var(--muted); font-size: 12px; }
.competitor-mark { color: var(--green); }
.problem-card,.recommendation-card,.plan-step { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 16px; }
.problem-number,.recommendation-rank,.plan-marker span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--green-soft); color: var(--green); font-weight: 600; }
.evidence-note { color: var(--muted); font-size: 12px; }
.fix-note,.target-note { color: var(--green); }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.example-box,.score-change { background: var(--green-pale); padding: 16px; border-radius: var(--radius); margin-top: 16px; }
.example-box > strong,.plan-period { font-size: 12px; color: var(--muted); }
.example-box p { margin: 8px 0 0; }
.plan-timeline { display: grid; gap: 24px; }
.plan-period { margin-bottom: 4px; }
.plan-step p { color: var(--ink-soft); }
.content-map-card p { color: var(--muted); }
.score-change { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.score-change > div { display: grid; }
.score-change span { font-size: 12px; color: var(--muted); }
.score-change strong { font-size: 20px; }
.delta { margin-left: auto; }
.change-grid { margin-top: 16px; }
.question-changes li { margin-bottom: 12px; }
.question-changes li span { display: block; color: var(--muted); }
.answer-card { padding: 0; }
.answer-card summary { display: grid; gap: 4px; padding: 16px; }
.answer-card summary span { font-size: 12px; color: var(--muted); }
.answer-body { padding: 16px; border-top: 1px solid var(--line); }
.answer-body > p { white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-sources { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.report-secondary { padding: 0; }
.report-secondary > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; }
.report-secondary > details > summary > span:first-child { display: grid; }
.report-secondary > details > div { padding: 0 24px 24px; }
.report-footer { display: flex; justify-content: space-between; gap: 16px; }
/* Authentication follows the same surfaces and control scales. */
.auth-page { display: grid; place-items: center; padding: 32px 16px; background: var(--surface-subtle); }
.auth-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width: min(1040px,100%); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.auth-intro { display: flex; flex-direction: column; gap: 48px; padding: 40px; background: var(--green-pale); }
.auth-intro h1 { margin-bottom: 16px; }
.auth-intro p { color: var(--muted); }
.auth-benefits { padding-left: 20px; margin-top: auto; }
.auth-benefits li { margin-bottom: 8px; }
.auth-card { display: grid; align-content: start; gap: 16px; padding: 40px; }
.auth-card-heading h2 { font-size: 24px; margin-bottom: 8px; }
.auth-card-heading p { color: var(--muted); }
.auth-hint { font-size: 12px; color: var(--muted); margin: 0; }
.google-login { display: grid; place-items: center; min-height: 44px; max-width: 100%; }
.google-login > div,.google-login iframe { max-width: 100% !important; }
.google-login.is-pending { pointer-events: none; opacity: .6; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.auth-divider::before,.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.email-code { border-top: 1px solid var(--line); }
.email-code-content { display: grid; gap: 16px; padding-top: 8px; }
.email-code-content > p { color: var(--muted); margin-bottom: 0; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Responsive contract: content reflows; navigation becomes a left drawer. */
@media (max-width: 1199px) {
  .site-list-row,.report-history-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .report-domain { grid-column: span 2; }
  .reports-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reports-summary > div:last-child { grid-column: 1 / -1; }
  .plugin-row { grid-template-columns: 32px minmax(0,1fr) auto; }
  .plugin-metrics { grid-column: 2; }
  .plugin-row .list-open { grid-column: 3; grid-row: 1 / span 2; }
  .mail-workspace:has(.mail-ai:not([hidden])) { grid-template-columns: minmax(0,1fr) minmax(270px,1fr); }
  .mail-workspace:has(.mail-ai:not([hidden])) .mail-list { grid-column: 1 / -1; max-height: 220px; }
}
@media (max-width: 1023px) {
  .app-shell,.app-shell.is-collapsed { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; }
  .topbar { padding-inline: 16px; }
  .mobile-menu { display: block; }
  .mobile-menu > summary { display: flex; align-items: center; justify-content: center; width: 40px; min-height: 44px; padding: 8px; list-style: none; cursor: pointer; }
  .mobile-menu-panel { position: fixed; inset: 48px auto 0 0; width: min(280px,calc(100vw - 48px)); z-index: 60; overflow-y: auto; padding: 8px 0 16px; background: var(--surface); border-right: 1px solid var(--line); box-shadow: 12px 0 24px #14231e18; }
  .mobile-menu-panel .logout-form { border-top: 1px solid var(--line); margin: 16px; padding-top: 8px; }
  body:has(.mobile-menu[open]) { overflow: hidden; }
  .settings-grid { grid-template-columns: 1fr; }
  .verdict-grid { grid-template-columns: 1fr; }
  .account-summary { max-width: 180px; }
}
@media (max-width: 767px) {
  .content-frame { padding: 24px 16px 48px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; }
  .page-actions { flex: auto; }
  .topbar-context { font-size: 12px; gap: 8px; }
  .topbar-context > .ui-icon,.account-summary { display: none; }
  .topbar-context > strong { max-width: min(180px,32vw); }
  .context-change { font-size: 11px; }
  .topbar { gap: 8px; }
  .account-menu > summary { gap: 4px; }
  .panel,.report-section,.report-verdict,.plugin-settings,.plugin-setup,.empty-state { padding: 16px; }
  .reports-summary { grid-template-columns: 1fr; }
  .reports-summary > div { padding: 16px 16px 16px 96px; }
  .plugin-row { grid-template-columns: 32px minmax(0,1fr); align-items: start; padding: 16px; }
  .plugin-row .list-open,.plugin-metrics { grid-column: 2; grid-row: auto; }
  .domain-plugin,.billing-line { align-items: flex-start; flex-direction: column; padding: 16px; gap: 12px; }
  .domain-service-heading { flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .domain-service-result { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .billing-line { padding-inline: 0; }
  .model-score-grid,.question-models,.competitor-grid,.content-map-grid,.change-grid { grid-template-columns: 1fr; }
  .question-models > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .report-score-hero { grid-template-columns: 100px minmax(0,1fr); padding: 16px; gap: 16px; }
  .report-key-metrics { gap: 16px; }
  .recommendation-head { flex-direction: column; }
  .chat { grid-template-columns: minmax(0,1fr); height: auto; max-height: none; overflow: visible; }
  .chat-sidebar { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-conversation { min-height: 520px; }
  .chat-messages { max-height: 65dvh; min-height: 300px; padding: 16px; }
  .chat-conversation-header { align-items: start; }
  .chat-actions { flex-wrap: wrap; justify-content: end; }
  .message { max-width: 95%; }
  .mail-workspace,.mail-workspace:has(.mail-ai:not([hidden])) { grid-template-columns: minmax(0,1fr); }
  .mail-list { max-height: 240px; }
  .mail-ai { position: fixed; inset: 0; z-index: 100; overflow-y: auto; border-radius: 0; padding: 16px; }
  body:has(.mail-ai:not([hidden])) { overflow: hidden; }
  .auth-shell { grid-template-columns: minmax(0,1fr); }
  .auth-intro { padding: 24px; gap: 24px; }
  .auth-benefits { display: none; }
  .auth-card { padding: 24px; }
}
@media (max-width: 479px) {
  :root { --control-height: 44px; }
  input,textarea,select { font-size: 16px; }
  .site-list-row,.report-history-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .report-domain,.report-row-action { grid-column: 1 / -1; }
  .report-score-hero { grid-template-columns: minmax(0,1fr); }
  .report-key-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-tabs,.report-section-tabs { gap: 16px; }
  .chat-composer { grid-template-columns: minmax(0,1fr); }
  .chat-composer .button { width: 100%; }
  .topbar-context > span { display: none; }
  .method-row { align-items: flex-start; flex-wrap: wrap; }
  .form-actions { align-items: flex-start; }
  .page-actions .button { flex: 1; }
  .auth-page { padding: 0; }
  .auth-shell { border: 0; }
  .auth-intro,.auth-card { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  body { background: #fff; }
  .sidebar,.topbar,.skip-link,.print-report,.report-breadcrumb,.report-section-tabs,.report-footer { display: none !important; }
  .app-shell { display: block; }
  .main { min-height: 0; }
  .content-frame { padding: 0; max-width: none; }
  [data-report-panel][hidden] { display: grid !important; }
  .report-section,.report-verdict { padding: 12px; box-shadow: none; }
  .report-score-hero,.report-section-heading,.verdict-card,.top-recommendation,.model-score-card,.question-card,.competitor-card,.problem-card,.recommendation-card,.plan-step,.content-map-card,.answer-card { break-inside: avoid; }
  .report-section-heading { break-after: avoid-page; }
  .answer-card:not([open]) > .answer-body,.report-secondary details:not([open]) > div { display: block !important; }
}

/* Setting ownership follows the existing account/domain boundary. */
.settings-links { display: grid; gap: 24px; margin-block: 16px 24px; }
.settings-links > div { min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.settings-links > div:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-links h3 { margin-bottom: 4px; }
.settings-links p { max-width: 680px; margin-bottom: 8px; color: var(--muted); }
.settings-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Measurement content shared with the report/PDF snapshot. */
.measurement-row { padding: 20px 0; border-bottom: 1px solid var(--line); }
.measurement-row h3 { margin-bottom: 6px; }
.measurement-frequencies { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.measurement-frequencies dt { font-size: 12px; line-height: 1.5; }
.measurement-frequencies dd { margin: 8px 0 0; font-size: 24px; overflow-wrap: anywhere; }
.measurement-summary details summary,.measurement-row details summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.measurement-summary details p { overflow-wrap: anywhere; }
@media print { #kontrola { display: none !important; } .measurement-row { break-inside: avoid; } }

.evidence-import-values { display: grid; gap: 12px; margin: 20px 0; }
.evidence-import-values > div { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.evidence-import-values dt { font-size: 12px; line-height: 1.5; }
.evidence-import-values dd { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
@media (min-width: 768px) { .evidence-import-values { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }

.evidence-source-link { display: inline-flex; min-height: 44px; align-items: center; margin-right: 12px; text-decoration: underline; }