/* site.css: the shared chrome on every page (header nav, flow stepper, footer).
   Loaded after the page's theme stylesheet; every color is a theme token with a fallback,
   so it works on both the platform pages (platform.css) and the plan designer (app.css). */

.zi-site{border-bottom:1px solid var(--line,#cfe6da);background:var(--surface,#fff);position:relative;z-index:20;}
[data-theme="zen-cosmic"] .zi-site{background:#0d0f1a;}
.zi-bar{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.zi-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg,#0c2f28);margin-right:auto;}
.zi-brand:hover{text-decoration:none;}
.zi-logo{font-size:22px;color:var(--teal,#0d5b6e);line-height:1;}
.zi-brand b{display:block;font-size:15px;letter-spacing:.01em;}
.zi-brand small{display:block;font-size:10.5px;color:var(--muted,#33504a);letter-spacing:.04em;}
.zi-tools{display:flex;gap:6px;align-items:center;}
.zi-theme,.zi-reset{font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--line,#cfe6da);background:var(--elevated,#f3faf6);
  color:var(--muted,#33504a);border-radius:999px;padding:5px 12px;}
.zi-theme:hover,.zi-reset:hover{border-color:var(--cyan,#0d6b80);color:var(--fg,#0c2f28);}
.zi-menu{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;}
.zi-menu a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--nav-pill-fg,#0d5b6e);background:var(--nav-pill-bg,#e3f3f1);
  border:1px solid var(--nav-pill-border,#7cb3b9);border-radius:999px;padding:5px 12px;white-space:nowrap;}
.zi-menu a:hover{background:var(--nav-pill-bg-hover,#d3ecea);text-decoration:none;}
.zi-menu a[aria-current="page"]{background:var(--nav-pill-current-bg,#6d28d9);color:var(--nav-pill-current-fg,#fff);border-color:transparent;
  box-shadow:0 4px 12px -4px var(--nav-pill-current-shadow,rgba(109,40,217,.35));}
/* Two rows at every width: brand + tools, then the menu. One row would need ~1126px; the column is 1072px. */
.zi-tools{order:1;} .zi-menu{order:2;}
@media (max-width:420px){ .zi-menu a{font-size:12px;padding:5px 10px;} .zi-reset{display:none;} }

/* flow stepper (built by js/nav.js) */
.flownav{margin:0 0 16px;padding:11px 13px;border:1px solid var(--line,#cfe6da);border-radius:12px;background:var(--card-bg,#fff);
  box-shadow:var(--card-shadow,none);}
.flownav.bottom{margin:22px 0 0;}
.flownav .pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px;}
.flownav .pill{font-size:12px;font-weight:bold;color:var(--muted,#33504a);text-decoration:none;padding:5px 12px;border:1px solid var(--line,#cfe6da);
  border-radius:20px;background:transparent;white-space:nowrap;}
.flownav .pill:hover{text-decoration:none;border-color:var(--accent2,#0ea5a4);color:var(--teal,#0d5b6e);}
.flownav .pill.done{color:var(--ok,#15803d);border-color:rgba(21,128,61,.35);}
.flownav .pill.active{color:#fff;background:var(--chrome,linear-gradient(120deg,#0f766e,#15803d));border-color:transparent;}
.flownav .flowtag{font-size:11px;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;color:var(--teal,#0d5b6e);align-self:center;margin-right:4px;}
.flownav .pill.switch{color:var(--muted,#33504a);border-style:dashed;}
.flownav .flowctl{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.flownav .step{font-size:12px;color:var(--muted,#33504a);letter-spacing:.04em;text-align:center;flex:1;}
.flownav .navbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;font-size:13px;font-weight:bold;white-space:nowrap;border-radius:9px;text-decoration:none;}
.flownav .btn.primary{background:var(--chrome,linear-gradient(120deg,#0f766e,#15803d));color:#fff;border:0;}
.flownav .btn.ghost{background:var(--card-bg,#fff);color:var(--teal,#0d5b6e);border:1px solid var(--line,#cfe6da);}
.flownav .navspace{display:inline-block;min-width:96px;}
.flownav.bottom .pills{display:none;}
@media (max-width:480px){
  .flownav .flowctl{flex-wrap:wrap;}
  .flownav .step{flex-basis:100%;order:-1;margin-bottom:6px;}
  .flownav .navspace{min-width:0;}
  .flownav .navbtn{white-space:normal;padding:8px 12px;}
}

/* footer */
.site-footer{color:var(--footer-ink,var(--faint,#5b7a6f));font-size:11px;text-align:center;margin-top:28px;line-height:1.7;
  border-top:1px solid var(--line,#cfe6da);padding:16px 16px 8px;}
.site-footer .flowfoot{font-weight:bold;color:var(--teal,#0d5b6e);font-size:11px;letter-spacing:.06em;margin-bottom:6px;}
.site-footer .flowfoot:empty{display:none;}
.site-footer a{color:var(--teal,#0d5b6e);}
.site-footer p{margin:2px 0;}

/* skip link (all pages) */
.skip{position:absolute;left:-999px;top:8px;background:var(--surface,#fff);color:var(--fg,#0c2f28);padding:8px 12px;border-radius:8px;z-index:50;}
.skip:focus{left:16px;}

/* ===================== LAYOUT CONTRACT (every page) =====================
   One page width and one gutter, shared by the header bar and every page container,
   so the logo, the flow stepper and the content all start on the same left edge.
   Page CSS may NOT set its own max-width on the page container; use .shell.narrow
   (a centered reading/form column) only where a single form is the whole page. */
:root{ --page-max:1120px; --gutter:24px; }
@media (max-width:640px){ :root{ --gutter:16px; } }
body{ font-size:14px; }
.zi-bar{ max-width:var(--page-max); padding:10px var(--gutter); }
.shell, .shell.arch-wrap{ max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); }
.shell.narrow{ max-width:560px; }
.page-flow{ max-width:var(--page-max); margin:0 auto; padding:18px var(--gutter) 0; }
.page-flow:empty{ display:none; }

/* Readability + touch (shared): footer text >= 12px; nav, theme and stepper pills >= 32px tall on phones. */
.site-footer, .site-footer .flowfoot{ font-size:12px; }
@media (max-width:640px){
  .zi-menu a, .zi-theme, .zi-reset, .flownav .pill{ min-height:32px; display:inline-flex; align-items:center; }
}

/* Page tint covers the whole page. platform.css sets the `background` shorthand, which resets
   background-attachment to scroll, so the gradient ended after one viewport. Fixed attachment
   keeps it behind every scroll position; the html color is the fallback where fixed is ignored (iOS Safari). */
html[data-theme] body{ background-attachment:fixed; }
html[data-theme="zen-light"]{ background-color:#e2f1ea; }
html[data-theme="zen-cosmic"]{ background-color:#0a0c16; }
.site-footer p{ font-size:12px; }