/* ==========================================================================
   Shared chrome for secondary pages - tokens, base, nav, footer, plate cards.
   Mirrors the design system inlined in index.html.
   ========================================================================== */

/* ===== DESIGN TOKENS ===== */
:root, [data-theme="light"] {
  --color-bg:             #f5f4f0;
  --color-surface:        #faf9f6;
  --color-surface-2:      #ffffff;
  --color-surface-offset: #eeecea;
  --color-surface-dynamic:#e5e3de;
  --color-divider:        #dbd9d4;
  --color-border:         #d2cfc9;
  --color-text:           #1e1c16;
  --color-text-muted:     #6b6960;
  --color-text-faint:     #b0aea8;
  --color-text-inverse:   #f9f8f4;
  --color-primary:        #006b6f;
  --color-primary-hover:  #00585c;
  --color-primary-active: #003f42;
  --color-primary-highlight: #cddedd;
  --color-accent:         #b88a00;
  --color-accent-light:   #f7edcc;
  --color-glow:           oklch(0.66 0.17 300);
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px oklch(0.2 0.01 80 / 0.07);
  --shadow-md: 0 4px 16px oklch(0.2 0.01 80 / 0.09);
  --shadow-lg: 0 12px 40px oklch(0.2 0.01 80 / 0.12);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 640px; --content-default: 1140px; --content-wide: 1280px;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
}
[data-theme="dark"] {
  --color-bg:#141312;--color-surface:#1a1917;--color-surface-2:#1e1d1b;
  --color-surface-offset:#1c1b19;--color-surface-dynamic:#282725;
  --color-divider:#232220;--color-border:#353330;
  --color-text:#cccac7;--color-text-muted:#787673;--color-text-faint:#585653;
  --color-text-inverse:#1e1d1b;--color-primary:#3d9098;
  --color-primary-hover:#1a7880;--color-primary-active:#0f5f66;
  --color-primary-highlight:#213636;--color-accent:#d4a520;--color-accent-light:#2e2610;
  --color-glow:oklch(0.62 0.16 300);
  --shadow-sm:0 1px 3px oklch(0 0 0/0.25);--shadow-md:0 4px 16px oklch(0 0 0/0.35);
  --shadow-lg:0 12px 40px oklch(0 0 0/0.45);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#141312;--color-surface:#1a1917;--color-surface-2:#1e1d1b;
  --color-surface-offset:#1c1b19;--color-surface-dynamic:#282725;
  --color-divider:#232220;--color-border:#353330;
  --color-text:#cccac7;--color-text-muted:#787673;--color-text-faint:#585653;
  --color-text-inverse:#1e1d1b;--color-primary:#3d9098;
  --color-primary-hover:#1a7880;--color-primary-active:#0f5f66;
  --color-primary-highlight:#213636;--color-accent:#d4a520;--color-accent-light:#2e2610;
  --color-glow:oklch(0.62 0.16 300);
  --shadow-sm:0 1px 3px oklch(0 0 0/0.25);--shadow-md:0 4px 16px oklch(0 0 0/0.35);
  --shadow-lg:0 12px 40px oklch(0 0 0/0.45);
}}

/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-16);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.65;overflow-x:clip;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15;}
p{text-wrap:pretty;}
a,button,[role="button"]{transition:color var(--transition),background var(--transition),box-shadow var(--transition),opacity var(--transition),border-color var(--transition);}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
::selection{background:oklch(from var(--color-primary) l c h/0.2);color:var(--color-text);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.container{max-width:var(--content-default);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-8));}
.container--wide{max-width:var(--content-wide);}
.section{padding-block:clamp(var(--space-12),8vw,var(--space-24));}
.section--alt{background:var(--color-surface);}
.divider{height:1px;background:var(--color-divider);}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:100;background:oklch(from var(--color-bg) l c h/0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid oklch(from var(--color-text) l c h/0.08);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4);gap:var(--space-6);flex-wrap:nowrap;}
.nav__logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text);}
.nav__logo-svg{width:32px;height:32px;flex-shrink:0;}
.nav__logo-text{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;white-space:nowrap;}
.nav__links{display:flex;align-items:center;gap:clamp(var(--space-3),1.6vw,var(--space-5));flex-wrap:nowrap;min-width:0;}
.nav__link{font-size:var(--text-xs);font-weight:500;text-decoration:none;color:var(--color-text-muted);white-space:nowrap;}
.nav__link:hover{color:var(--color-primary);}
.nav__link--highlight{color:var(--color-primary);font-weight:700;}
.nav__cta{font-size:var(--text-xs);font-weight:600;text-decoration:none;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);white-space:nowrap;box-shadow:0 2px 10px oklch(from var(--color-primary) l c h/0.28);}
.nav__cta:hover{background:var(--color-primary-hover);color:var(--color-text-inverse);}
.nav__right{display:flex;align-items:center;gap:var(--space-4);flex-shrink:0;}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);color:var(--color-text-muted);background:var(--color-surface-offset);}
.theme-toggle:hover{color:var(--color-primary);background:var(--color-primary-highlight);}
.nav__hamburger{display:none;}
/* Measured: the full link set needs ~1222px of content, so the nav uses
   .container--wide (1280) and sheds links in priority order below that. */
@media(max-width:1320px){.nav__link--secondary{display:none;}}
@media(max-width:1240px){.nav__link--tertiary{display:none;}}
@media(max-width:980px){
  .nav__links{display:none;}
  .nav__hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--color-text-muted);}
  .nav__links.nav--open{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;/* .nav sets backdrop-filter, which makes IT the containing block for fixed children - so bottom:0 resolved against the 64px nav, not the viewport. Height it explicitly. */bottom:auto;height:calc(100dvh - 64px);max-height:calc(100dvh - 64px);background:var(--color-bg);z-index:99;padding:var(--space-8) var(--space-6);gap:var(--space-6);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .nav__links.nav--open .nav__link{font-size:var(--text-lg);}
  .nav__links.nav--open .nav__link--secondary,
  .nav__links.nav--open .nav__link--tertiary{display:block;}
  .nav__links.nav--open .nav__cta{font-size:var(--text-base);padding:var(--space-4) var(--space-8);text-align:center;}
}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;text-decoration:none;padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);border:1px solid transparent;white-space:nowrap;}
.btn svg{flex-shrink:0;}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:0 2px 12px oklch(from var(--color-primary) l c h/0.3);}
.btn--primary:hover{background:var(--color-primary-hover);color:var(--color-text-inverse);}
.btn--ghost{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* ===== SECTION HEADERS ===== */
.section__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3);}
.section__eyebrow::before{content:"";width:28px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--color-primary),oklch(from var(--color-primary) l c h/0));}
.section__heading{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);margin-bottom:var(--space-4);}
.section__subheading{font-size:var(--text-base);color:var(--color-text-muted);max-width:58ch;line-height:1.65;margin-bottom:var(--space-12);}

/* ===== FOOTER ===== */
.footer{padding-block:var(--space-8);border-top:1px solid var(--color-divider);background:var(--color-surface);}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);}
.footer__copy{font-size:var(--text-xs);color:var(--color-text-faint);}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);}
.footer__link{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none;}
.footer__link:hover{color:var(--color-primary);}

/* ===== STACKED-PLATE CARD ===== */
.plates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:var(--space-6);}
.plate-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-5);background:var(--color-surface-2);border:1px solid oklch(from var(--color-text) l c h/0.07);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:0 1px 2px oklch(from var(--color-text) l c h/0.04),0 12px 32px oklch(from var(--color-text) l c h/0.06);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.plate-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px oklch(from var(--color-text) l c h/0.05),0 20px 44px oklch(from var(--color-text) l c h/0.10);}
.plate-icon{width:96px;height:106px;flex-shrink:0;display:block;overflow:visible;}
.plate-icon .pl-edge{fill:none;stroke:var(--color-text);stroke-width:1.35;stroke-linejoin:round;opacity:0.78;}
[data-theme="dark"] .plate-icon .pl-edge{opacity:0.55;}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .plate-icon .pl-edge{opacity:0.55;}}
.plate-icon .pl-lit{transition:transform 380ms cubic-bezier(0.34,1.4,0.44,1);}
.plate-card:hover .pl-lit{transform:translateY(-3px);}
.plate-icon .pl-bloom{transition:opacity 380ms ease;}
.plate-card:hover .pl-bloom{opacity:0.78;}
.plate-card__title{font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2);}
.plate-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}
@media(max-width:520px){
  .plate-card{grid-template-columns:1fr;justify-items:start;gap:var(--space-3);}
  .plate-icon{width:88px;height:98px;}
}
@media(prefers-reduced-motion:reduce){
  .plate-card,.plate-icon .pl-lit,.plate-icon .pl-bloom{transition:none;}
  .plate-card:hover{transform:none;}
}

/* ===== SCRIPTED AGENT DEMO (shared by /ai-solutions and /portfolio) ===== */
/* ---- scripted agent demo ---- */
.bot{--bot-accent:var(--color-primary);background:var(--color-surface-2);
  border:1px solid oklch(from var(--color-text) l c h/0.10);border-radius:var(--radius-2xl);
  box-shadow:0 1px 2px oklch(from var(--color-text) l c h/0.04),0 18px 44px oklch(from var(--color-text) l c h/0.08);
  overflow:hidden;}
.bot__head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);
  background:oklch(from var(--color-surface) l c h/0.8);}
.bot__dots{display:flex;gap:5px;}
.bot__dots i{width:9px;height:9px;border-radius:50%;background:var(--color-border);}
.bot__dots i:first-child{background:#e0705e;}
.bot__dots i:nth-child(2){background:#d9ab3c;}
.bot__dots i:nth-child(3){background:#5aa06b;}
.bot__title{font-size:var(--text-xs);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--color-text-muted);}
/* the badge is load-bearing: nothing here calls a model */
.bot__badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--color-accent);background:var(--color-accent-light);
  border:1px solid oklch(from var(--color-accent) l c h/0.3);
  padding:3px 10px;border-radius:var(--radius-full);}

.bot__tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-divider);}
.bot__tab{--tab-accent:var(--color-primary);font-size:var(--text-xs);font-weight:600;
  color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-divider);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full);}
.bot__tab:hover{color:var(--tab-accent);border-color:var(--tab-accent);}
.bot__tab[aria-selected="true"]{color:var(--tab-accent);border-color:var(--tab-accent);
  background:oklch(from var(--tab-accent) l c h/0.12);}

.bot__win{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);
  min-height:340px;}
.bot__msg{display:flex;flex-direction:column;gap:var(--space-2);}
.bot__who{font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--color-text-faint);}
.bot__msg--user .bot__text{align-self:flex-start;font-size:var(--text-sm);color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-divider);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);max-width:52ch;}

.bot__steps{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;}
.bot__step{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);
  color:var(--color-text-muted);animation:bot-in 380ms cubic-bezier(0.22,1,0.36,1) both;}
@keyframes bot-in{from{opacity:0;transform:translateY(6px);}}
.bot__spin{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:3px;
  border:2px solid var(--color-surface-dynamic);position:relative;}
.bot__step.is-running .bot__spin{border-top-color:var(--bot-accent);
  animation:bot-spin 720ms linear infinite;}
@keyframes bot-spin{to{transform:rotate(360deg);}}
.bot__step.is-done .bot__spin{border-color:var(--bot-accent);background:var(--bot-accent);}
.bot__step.is-done .bot__spin::after{content:"";position:absolute;left:4px;top:1px;
  width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.bot__step.is-done .bot__step-text{color:var(--color-text);}

.bot__result{margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px dashed var(--color-divider);
  animation:bot-in 420ms cubic-bezier(0.22,1,0.36,1) both;}
.bot__headline{font-size:var(--text-base);font-weight:600;color:var(--color-text);
  margin-bottom:var(--space-4);}
.bot__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);
  margin-bottom:var(--space-4);}
.bot__metric{background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);}
.bot__metric-v{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1;
  color:var(--bot-accent);}
.bot__metric-l{display:block;font-size:11px;font-weight:600;color:var(--color-text-muted);
  margin-top:5px;line-height:1.35;}
.bot__notes{display:flex;flex-direction:column;gap:var(--space-2);list-style:none;
  margin-bottom:var(--space-4);}
.bot__notes li{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;
  padding-left:var(--space-4);position:relative;}
.bot__notes li::before{content:"";position:absolute;left:0;top:0.6em;width:5px;height:5px;
  border-radius:50%;background:var(--bot-accent);opacity:0.6;}
.bot__gate{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);
  color:var(--color-text);background:var(--color-accent-light);
  border:1px solid oklch(from var(--color-accent) l c h/0.3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);line-height:1.5;}
.bot__gate-icon{width:16px;height:16px;flex-shrink:0;margin-top:2px;border-radius:50%;
  border:2px solid var(--color-accent);position:relative;}
.bot__gate-icon::after{content:"";position:absolute;left:5px;top:2px;width:2px;height:6px;
  background:var(--color-accent);border-radius:1px;}

.bot__foot{display:flex;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--color-divider);background:oklch(from var(--color-surface) l c h/0.7);
  min-height:64px;align-items:center;}
.bot__suggest,.bot__replay{font-size:var(--text-xs);font-weight:600;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);
  border:1px solid var(--color-divider);background:var(--color-surface-2);
  color:var(--color-text);text-align:left;}
.bot__suggest:hover{border-color:var(--bot-accent);color:var(--bot-accent);}
.bot__replay{margin-left:auto;color:var(--color-text-muted);}
.bot__replay:hover{border-color:var(--color-primary);color:var(--color-primary);}
.bot__nojs{padding:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);}

@media(max-width:600px){
  .bot__metrics{grid-template-columns:1fr;}
  .bot__replay{margin-left:0;}
  .bot__win{min-height:0;}
}
@media(prefers-reduced-motion:reduce){
  .bot__step,.bot__result{animation:none;}
  .bot__step.is-running .bot__spin{animation:none;}
}