/* Personal site interaction layer, 2026-10-16.
   Apple HIG-inspired hierarchy; original navy/ultramarine brand, not native Liquid Glass.
   Glass belongs to navigation, never to photographs, diagrams or reading surfaces. */
:root{
  --control-size:44px;--radius-control:999px;--radius-panel:24px;
  --motion-press:120ms;--motion-state:220ms;--ease-ui:cubic-bezier(.2,.7,.2,1);
  --control-hover:var(--accent-soft);--control-selected:var(--accent);
  --glass-bg:color-mix(in srgb,var(--surface) 90%,transparent);
  --glass-edge:color-mix(in srgb,var(--line) 82%,transparent);
  --glass-highlight:color-mix(in srgb,var(--surface) 65%,transparent);
  --shadow-control:0 8px 28px -16px color-mix(in srgb,var(--ink) 35%,transparent);
  --shadow-nav:0 12px 36px -20px color-mix(in srgb,var(--ink) 40%,transparent);
}
html{scroll-padding-top:108px}
.page-top-target{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;scroll-margin:0;outline:none!important}
body>.nav{
  top:max(12px,env(safe-area-inset-top,0px));width:min(1120px,calc(100% - 32px));
  margin:12px auto 0;border:1px solid var(--glass-edge);border-radius:var(--radius-panel);
  background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:var(--shadow-nav),inset 0 1px 0 var(--glass-highlight);
  transition:box-shadow var(--motion-state) var(--ease-ui),border-color var(--motion-state) var(--ease-ui);
}
body>.nav.scrolled{border-color:var(--line)}
body>.nav>.wrap{max-width:none;min-height:64px;padding:8px 12px 8px 20px;gap:12px}
.nav .brand{display:inline-flex;align-items:center;min-height:var(--control-size);flex-shrink:0}
.nav .nav-return{gap:6px}
.nav .nav-top{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-control);color:var(--ink);background:var(--surface);font-size:.8125rem;text-decoration:none;white-space:nowrap}
.nav [hidden]{display:none!important}
.nav .nav-links{display:flex;align-items:center;gap:2px;min-width:0;margin-left:auto}
.nav .nav-links>a{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-size);
  padding:8px 12px;border-radius:var(--radius-control);color:var(--muted);white-space:nowrap;
  transition:background var(--motion-state) var(--ease-ui),color var(--motion-state) var(--ease-ui),transform var(--motion-press) var(--ease-ui);
}
.nav .nav-links>a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .nav-utilities{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-left:8px;border-left:1px solid var(--line)}
.nav .lang-btn,.nav .theme-btn,.nav .nav-menu{
  min-height:var(--control-size);min-width:var(--control-size);border:1px solid var(--line);
  padding:0 14px;background:var(--surface);color:var(--ink);border-radius:var(--radius-control);
  font:500 .8125rem var(--font-body);cursor:pointer;
  transition:background var(--motion-state) var(--ease-ui),transform var(--motion-press) var(--ease-ui);
}
.nav .theme-btn{display:inline-grid;place-items:center;width:var(--control-size);padding:0;flex-shrink:0}
.nav .theme-btn svg{display:block;width:20px;height:20px}
.nav .nav-menu{display:none;align-items:center;justify-content:center;gap:7px}
.nav-menu-icon{width:14px;height:12px;display:inline-flex;flex-direction:column;justify-content:center;gap:4px}
.nav-menu-icon::before,.nav-menu-icon::after{content:"";height:1.5px;width:14px;background:currentColor;transition:transform var(--motion-state) var(--ease-ui)}
.nav-menu[aria-expanded="true"] .nav-menu-icon::before{transform:translateY(2.75px) rotate(45deg)}
.nav-menu[aria-expanded="true"] .nav-menu-icon::after{transform:translateY(-2.75px) rotate(-45deg)}
.nav-menu[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* Primary actions carry the brand; secondary actions remain neutral. */
body .btn{border-radius:var(--radius-control);padding-inline:20px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-control)}
body .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
body .btn,body .mode,body .replay,body .chapters button,body .workout-demo .wd-controls button,body #photo-dialog button{
  min-height:var(--control-size);border-radius:var(--radius-control);
  transition:background var(--motion-state) var(--ease-ui),color var(--motion-state) var(--ease-ui),border-color var(--motion-state) var(--ease-ui),transform var(--motion-press) var(--ease-ui),box-shadow var(--motion-state) var(--ease-ui);
}
body .modes{gap:4px;padding:4px;width:fit-content;max-width:100%;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface)}
body .modes .mode{border-color:transparent;color:var(--muted);background:transparent;flex:1 1 auto}
body .modes .mode[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-control)}
body :is(.twin-text,.ai-card) summary{min-height:var(--control-size);padding-block:8px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}
body #photo-dialog{border-radius:var(--radius-panel)}
body #photo-dialog button{background:var(--surface);color:var(--ink);padding-inline:16px}
:is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
body button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .nav .nav-top:hover,.nav .nav-links>a:hover,.nav .lang-btn:hover,.nav .theme-btn:hover,.nav .nav-menu:hover,body .btn.ghost:hover,body .replay:hover,body .chapters button:hover,body #photo-dialog button:hover{background:var(--control-hover);color:var(--accent);border-color:var(--accent)}
  body .btn:not(.ghost):hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));border-color:var(--accent);color:var(--accent-ink)}
  body .modes .mode:not([aria-pressed="true"]):hover{background:var(--accent-soft);color:var(--accent)}
}
body :is(.btn,.mode,.replay,.chapters button,.lang-btn,.theme-btn,.nav-menu,#photo-dialog button):not(:disabled):active,.nav .nav-links>a:active{transform:scale(.97)}

/* Opaque baseline is retained when backdrop filtering is unavailable. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body>.nav,.nav[data-enhanced="true"] .nav-links.nav-popover{
    background:var(--glass-bg);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  }
}
@media(max-width:1000px){.nav .brand-latin{display:none}.nav .nav-links>a{padding-inline:10px}}
@media(max-width:900px){
  body>.nav{width:calc(100% - 24px);border-radius:22px;top:max(8px,env(safe-area-inset-top,0px));margin-top:8px}
  body>.nav>.wrap{min-height:60px;padding:7px 10px 7px 16px;gap:8px}
  .nav .nav-utilities{margin-left:auto;padding-left:0;border-left:0}
  .nav .nav-top-label{display:none}
  .nav[data-enhanced="true"] .nav-menu{display:inline-flex}
  .nav[data-enhanced="true"] .nav-links.nav-popover{
    position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;
    padding:8px;margin:0;border:1px solid var(--glass-edge);border-radius:var(--radius-panel);
    background-color:var(--surface);box-shadow:var(--shadow-nav);max-height:calc(100dvh - 100px);overflow-y:auto;
  }
  .nav[data-enhanced="true"] .nav-links>a{display:flex;justify-content:flex-start;padding:10px 16px;min-height:48px}
  .nav:not([data-enhanced="true"])>.wrap{flex-wrap:wrap}
  .nav:not([data-enhanced="true"]) .nav-links{flex-wrap:wrap;justify-content:flex-start;margin-left:0}
  .nav:not([data-enhanced="true"]) .nav-links>a{display:inline-flex}
  html{scroll-padding-top:96px}
}
@media(max-width:480px){
  body>.nav>.wrap{padding-inline:10px;gap:4px}
  .nav .nav-utilities{gap:4px}
  .nav .nav-menu{padding:0;width:44px}
  .nav .nav-menu-label{display:none}
  .nav .brand{font-size:.8rem}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body>.nav,.nav[data-enhanced="true"] .nav-links.nav-popover{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--ink);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  :root{--motion-press:0ms;--motion-state:0ms}
  html{scroll-behavior:auto}
  body :is(.btn,.mode,.replay,.chapters button,.lang-btn,.theme-btn,.nav-menu,#photo-dialog button):active,.nav .nav-links>a:active{transform:none}
  .nav-menu-icon::before,.nav-menu-icon::after{transition:none}
}
@media(forced-colors:active){
  body>.nav,.nav[data-enhanced="true"] .nav-links.nav-popover{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav .nav-links>a[aria-current],body .modes .mode[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-3px}
}