@import url('/design-system.css');
/* Shared Apple HIG adaptation. Content is opaque; glass is reserved for chrome.
   Loaded after each screen's structural stylesheet. */
:root {
  --body: var(--lw-body-font);
  --paper: var(--lw-canvas);
  --white: var(--lw-white);
  --panel: var(--lw-panel);
  --sub: var(--lw-secondary);
  --line: var(--lw-line);
  --ink: var(--lw-ink);
  --raised: var(--lw-raised);
  --muted: var(--lw-muted);
  --selected: var(--lw-accent-surface);
  --control: var(--lw-control);
  --hover: var(--lw-hover);
  --glass: var(--lw-glass);
  --danger-fill: var(--lw-danger-surface);
  --success-fill: var(--lw-success-surface);
  --shadow: var(--lw-shadow);
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
[hidden], .hidden { display: none !important; }
h1,h2,h3,.brand,.wordmark { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: 34px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 20px; }
p { line-height: 1.6; }
.eyebrow,.micro,.sidebar-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--muted); }
a { text-underline-offset: 3px; }
button,input,textarea,select,.secondary { font-family: var(--font-ui); }
button,.workspace button,.nav button,.secondary,.secondary-button {
  border: 1px solid transparent; border-radius: 999px; background: var(--control); color: var(--ink);
  min-height: 32px; padding: 8px 16px; font-size: 13px; font-weight: 500;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
button:hover:not(:disabled),.workspace button:hover:not(:disabled),.nav button:hover,.secondary:hover,.secondary-button:hover { background: var(--hover); border-color: transparent; filter: none; }
button:active:not(:disabled),.button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary,button.accent,.workspace button.primary,.button,.workspace .workspace-link.primary,.send {
  background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; border-radius: 999px;
}
button.primary:hover:not(:disabled),button.accent:hover:not(:disabled),.workspace button.primary:hover:not(:disabled),.button:hover,.send:hover { background: color-mix(in srgb,var(--accent) 86%,var(--ink)); color: var(--on-accent); border-color: transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input,textarea,select,.workspace input,.workspace textarea,.workspace select,#model-dialog input,#model-dialog select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 15px; padding: 8px 12px;
}
input::placeholder,textarea::placeholder,.workspace input::placeholder,.workspace textarea::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid=true] { border-color: var(--danger); }
summary { cursor: pointer; min-height: 44px; align-content: center; }
.muted,.fine,.caption,.small,.workspace small { color: var(--muted); }
.nav,.topbar,.canvas-toolbar,.rail,.docs-screen>header {
  background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); /* wp-allow: navigation chrome */ border-color: var(--line);
}
.nav { max-width: none; padding: 12px max(24px,calc((100vw - 1200px)/2)); min-height: 68px; height: auto; border-bottom: 1px solid var(--line); }
.nav nav { gap: 20px; font-size: 13px; }
.brand .logo-name,footer .brand .logo-name { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.7px; }
footer { color: var(--muted); border-color: var(--line); font-size: 12px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--surface); color: var(--accent); padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
/* Workspace, authentication, and website detail. */
.app-screen .workspace { max-width: 1200px; padding: 48px 32px 64px; }
.dashboard-top h1,.workspace h1 { font-size: 34px; margin-top: 8px; }
.dashboard-top { margin-bottom: 32px; }
.dashboard-top .eyebrow { margin: 0; }
.auth-panel { margin: 32px auto; padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-sheet); box-shadow: var(--shadow); }
.auth-panel h1 { font-size: 34px; }
.auth-panel .primary { min-height: 44px; }
.library-toolbar { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-top: 32px; }
.library-toolbar h2 { font-size: 20px; margin: 0 0 4px; }
.library-toolbar p { font-size: 13px; color: var(--muted); margin: 0; }
.library-search { width: min(280px,100%); }
.library-search label { display: block; margin-bottom: 4px; }
.workspace .library-search input { margin: 0; border-radius: 999px; }
.site-grid { gap: 20px; margin-top: 20px; }
.workspace .site-card { min-height: 208px; padding: 24px; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-group); background: var(--surface); box-shadow: var(--shadow); }
.workspace .site-card:hover { background: var(--surface); border-color: var(--accent); box-shadow: 0 8px 28px rgb(0 0 0 / 0.05); }
.site-card strong { font-size: 20px; letter-spacing: -.025em; }
.site-card>span:last-child { font-size: 13px; }
.status,.badge { background: var(--selected); color: var(--accent); border: 0; border-radius: 999px; font-size: 11px; letter-spacing: 0; padding: 4px 8px; }
.panel,.request-card,.empty { background: var(--surface); border-color: var(--line); border-radius: var(--radius-group); }
.panel { padding: 28px; }
.site-heading h1 { font-size: 28px; }
.site-welcome { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-sheet); box-shadow: var(--shadow); }
.site-welcome h2 { font-size: 34px; max-width: 620px; }
.workspace .site-next-actions button,.secondary-button { border-radius: 999px; font-size: 15px; min-height: 44px; }
.notice,.email-expectation,.note { background: var(--selected); color: var(--ink); border-color: var(--accent); border-radius: 10px; }
.notice.error,.conflict,#error { background: var(--danger-fill); color: var(--danger); border-color: var(--danger); }
.warning { background: var(--selected); color: var(--ink); }
.eval-metrics { border-radius: 16px; overflow: hidden; }
.eval-finding { background: var(--raised); border-radius: 10px; }
/* Editor: a stable split view with quiet, floating control groups. */
.sidebar { background: var(--surface); }
.tabs,.segmented { background: var(--control); border: 0; border-radius: 999px; padding: 2px; gap: 2px; }
.tabs button[aria-selected=true],.segmented button[aria-pressed=true] { background: var(--surface); color: var(--ink); border: 0; box-shadow: 0 1px 5px rgb(0 0 0 / 0.13); }
.segmented button { border-radius: 999px; font-size: 12px; min-height: 28px; }
.welcome { padding-top: 12px; }
.welcome h1 { font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.welcome p,dialog p { color: var(--muted); }
.send { width: 32px; height: 32px; padding: 0; }
.canvas { background: var(--paper); }
.canvas-toolbar { padding: 12px 20px; }
.loading { background: var(--surface); color: var(--muted); }
.target-list .tag { color: var(--muted); font-size: 11px; }
.chat-entry.user { background: var(--selected); border-color: transparent; border-radius: 16px 16px 6px 16px; }
.field>span,.search-label,.history-item p { font-size: 12px; }
.subtle { background: transparent; color: var(--muted); }
dialog,#model-dialog { color-scheme: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 32px; max-height: calc(100dvh - 48px); overflow: auto; box-shadow: 0 24px 80px rgb(0 0 0 / 0.27); }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); } /* wp-allow: modal scrim is chrome */
dialog h2 { font-size: 28px; font-weight: 600; padding-right: 24px; }
dialog label { font-size: 13px; }
.dialog-close,#close-detail { min-width: 36px; min-height: 32px; padding: 0; color: var(--muted); background: var(--control); border-radius: 50%; }
#agent-details code,pre { background: var(--paper); color: var(--ink); border-color: var(--line); border-radius: 10px; }
/* Onboarding uses grouped steps, matching the workspace. */
.onboarding { max-width: 1200px; }
.onboarding h1 { font-size: 34px; }
.onboarding-intro { font-size: 17px; color: var(--muted); }
.journey { padding: 16px 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; }
.journey li[aria-current=step] { color: var(--ink); }
.journey li[aria-current=step]>span,.preparation li.done>span { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.journey li.complete>span { border-color: var(--success); color: var(--success); }
.browser-frame,.next-change { border-radius: 16px; border-color: var(--line); box-shadow: var(--shadow); }
.browser-bar { background: var(--raised); }
.mini-site { background: var(--paper); border-color: var(--line); border-radius: 10px; }
.mini-nav,.mini-body i,.mini-cards i { background: var(--line); border-radius: 6px; }
.mini-body i:last-child,.mini-image { background: var(--selected); }
.preparation li.active>span { border-color: var(--line); border-top-color: var(--accent); }
/* Administration: source data remains readable in every appearance. */
.admin-screen .rail { width: 236px; padding: 28px 16px; color: var(--ink); border-right: 1px solid var(--line); }
.admin-screen .brand { display: block; padding: 0 12px; font-size: 22px; }
.admin-screen .brand span { font: 12px var(--font-ui); letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.admin-screen .rail nav { margin-top: 32px; gap: 4px; }
.admin-screen .rail nav button { gap: 12px; border-radius: 10px; font: 13px var(--font-ui); padding: 12px 12px; color: var(--muted); }
.admin-screen .rail nav button span { color: var(--ink); }
.admin-screen .rail nav button.active { background: var(--selected); color: var(--accent); }
.admin-screen .rail nav button.active span { color: var(--accent); font-weight: 600; }
.admin-screen .rail-bottom { font-size: 12px; color: var(--muted); padding: 0 12px; }
.admin-screen main { margin-left: 96px; padding: 40px; }
.admin-screen h1 { font-size: 34px; letter-spacing: -.035em; }
.admin-screen h1>span { display: none; }
.admin-screen a { color: var(--accent); }
.admin-screen .filters { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.admin-screen .filters label,.admin-screen .settings label { color: var(--muted); font-size: 12px; letter-spacing: 0; }
.admin-screen .filters span,#status { color: var(--muted); font-size: 12px; }
.admin-screen .card,.admin-screen .panel { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.admin-screen .card.primary { background: var(--selected); border-color: transparent; }
.admin-screen :is(.label,.hint,.empty,.sub,.caption,.basis,th,td small) { color: var(--muted); letter-spacing: 0; }
.admin-screen :is(th,td,footer,.settings) { border-color: var(--line); }
.admin-screen th { background: var(--paper); }
.admin-screen tr:hover td { background: var(--paper); }
.admin-screen .value { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.admin-screen .bar { background: var(--accent); }
.admin-screen :is(.tag,.pill) { background: var(--selected); color: var(--accent); border-radius: 999px; }
.docs-screen :is(p,li,dd,td:last-child) { color: var(--muted); }
.docs-screen strong { color: var(--ink); }
.docs-screen .layout>nav { background: var(--surface); border: 1px solid var(--line); padding: 20px; border-radius: 16px; }
.docs-screen h1 { font-size: 34px; }
.docs-screen h2 { font-size: 28px; }
.docs-screen code { background: var(--selected); }
/* Public entry: Notes to AI's generous spacing and blue pill actions. */
.marketing-screen .hero { padding-top: 64px; }
.marketing-screen .hero h1 { font-size: var(--lw-type-hero); font-weight: 600; }
.marketing-screen :is(.nav-secondary,.reassurance,#domain-start label,.sidebar-label,.sidebar-item,.stage-heading small,.stage-badge,.demo-top,.demo-controls button) { color: var(--muted); }
.marketing-screen .domain-entry { background: var(--surface); border-color: var(--line); border-radius: 999px; padding: 4px; }
.marketing-screen .domain-entry input { background: transparent; border: 0; }
.marketing-screen .button { font-weight: 500; font-size: 15px; }
.marketing-screen .demo { border-radius: 24px; border-color: var(--line); box-shadow: var(--shadow); }
.marketing-screen .demo-sidebar { background: var(--paper); }
.marketing-screen .preview-stage { background: var(--raised); padding: 0 24px 24px; }
.marketing-screen .sidebar-item.selected,.marketing-screen .demo-controls button[aria-pressed=true] { background: var(--selected); color: var(--accent); border-color: transparent; border-radius: 10px; }
.marketing-screen .request-note { background: var(--paper); border-color: var(--line); border-radius: 16px; }
.marketing-screen .demo-controls button { border-color: var(--line); border-radius: 999px; }
.marketing-screen .stage-badge { border-color: var(--line); }
/* Responsive layouts preserve every action and use generous touch targets. */
@media(max-width:1100px) { .canvas-toolbar { padding: 8px; flex-wrap: wrap; } }
@media(max-width:760px) {
  .nav { padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
  .nav nav { flex-wrap: wrap; gap: 12px; }
  button,.workspace button,.nav button,.secondary,.secondary-button { min-height: 44px; }
  input,textarea,select,.workspace input,.workspace textarea,.workspace select { font-size: 16px; }
  .app-screen .workspace { padding: 28px 20px 48px; }
  .workspace h1,.auth-panel h1,.onboarding h1 { font-size: 28px; }
  .auth-panel { padding: 28px 24px; }
  .library-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
  .library-search { width: 100%; }
  .site-welcome { padding: 24px; }
  .site-welcome h2 { font-size: 28px; }
  .canvas-toolbar { gap: 8px; }
  .segmented button,.tabs button { min-height: 40px; }
  .journey { padding: 16px 12px; }
  .admin-screen .rail { position: static; width: auto; padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-screen .rail nav { margin-top: 20px; }
  .admin-screen main { margin: 0; padding: 24px 16px; }
  .admin-screen .filters input { min-width: 0; }
  .admin-screen .filters label { max-width: 100%; }
  dialog { padding: 24px; }
}
@media(prefers-reduced-transparency:reduce) {
  .nav,.topbar,.canvas-toolbar,.rail,.docs-screen>header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog::backdrop { backdrop-filter: none; }
}
@media(prefers-contrast:more) {
  :root { --line: var(--border); --muted: var(--text); --sub: var(--text); }
  button,.workspace button { border-color: currentColor; }
}
@media(prefers-contrast:more) and (prefers-color-scheme:dark) { :root { --line: var(--border); --muted: var(--text); --sub: var(--text); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Brand art keeps its native transparent bounds in both appearances. */
.admin-screen .value { font-family: var(--font-ui); }
.admin-screen .legend { color: var(--muted); }
.admin-screen .chart text { fill: var(--muted); font: 11px var(--font-ui); }
.admin-screen .chart-model { fill: var(--accent); }
.admin-screen .chart-server { fill: var(--warning); }
.admin-screen .legend i { background: var(--accent); }
.admin-screen .legend .server { background: var(--warning); }
.admin-screen .line-item { border-color: var(--line); }
.admin-screen .bar { background: var(--control); border-radius: 999px; overflow: hidden; }
.admin-screen .bar>div { background: var(--accent); }
.admin-screen .link { background: transparent; color: var(--accent); border-radius: 6px; }
.marketing-screen :is(.editing,.closing) { background: var(--surface); }
.marketing-screen .platform { color: var(--ink); }
.marketing-screen .detail-note { color: var(--accent); }
@media(max-width:600px) {
  .marketing-screen .domain-entry { flex-direction: column; border-radius: 24px; padding: 8px; gap: 8px; }
  .marketing-screen .domain-entry input { min-height: 44px; }
  .marketing-screen .domain-entry .button { width: 100%; min-height: 48px; }
}
.admin-screen .nav-symbol { width: 18px; height: 18px; flex-shrink: 0; }
.admin-screen .rail nav button { align-items: center; }
.admin-screen table { font-size: 13px; }
.admin-screen th,.admin-screen .label,.admin-screen .sub,.admin-screen .notice,.admin-screen .legend { font-size: 12px; text-transform: none; }
@media(max-width:760px) {
  .admin-screen #close-detail { min-width: 44px; min-height: 44px; }
}

/* Shared primitives remain authoritative on newer lifecycle and import surfaces. */
.lw-brand .logo-name { font-size: 20px; font-weight: 600; }
.workspace button.lw-button--primary { background: var(--lw-accent); color: var(--lw-on-accent); }
.workspace button.lw-button--primary:hover { background: var(--lw-accent); color: var(--lw-on-accent); }
.workspace input,.workspace select,.workspace textarea,input,select,textarea { border-color: var(--lw-control-border); }
.site-card .actions { margin-top: auto; gap: 8px; flex-wrap: wrap; }
.workspace .site-card .lw-button { font-size: 13px; min-height: 32px; padding: 8px 12px; }
.lifecycle-filters button[aria-pressed=true] { background: var(--lw-accent-surface); color: var(--lw-accent); }
.lw-notice--danger { background: var(--lw-danger-surface); color: var(--lw-danger); border-color: var(--lw-danger); }