/* Side Studies universal header · frozen Review 02 geometry · 2026-10-18
   Isolated namespace avoids legacy home/Side/workspace CSS collisions. */
:root{--ssh-black:#121a17;--ssh-paper:#f7f6f1;--ssh-muted:#f0eee8;--ssh-normal:#f7f6f1;--ssh-green:#b5d2b2;--ssh-coral:#ed704a}
.ssh-header,.ssh-header *,.ssh-dialog,.ssh-dialog *,.ssh-local-nav,.ssh-local-nav *{box-sizing:border-box}
.ssh-header{position:relative;z-index:40;width:100%;max-width:none;margin:0;background:#567261;color:var(--ssh-paper);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ssh-shell{width:calc(100% - 96px);max-width:1320px;margin-inline:auto}
.ssh-topline{height:29px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid rgba(255,255,255,.18);font:700 10px/1.1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ssh-muted)}
.ssh-mainrow{min-height:72px;display:flex;align-items:center;gap:26px}
.ssh-brand{flex:0 0 200px;display:flex;align-items:center;height:44px;text-decoration:none!important;line-height:0;background:transparent!important}
.ssh-brand img{display:block;width:200px;max-width:100%;height:auto;max-height:43px;object-fit:contain;filter:none;opacity:1}
.ssh-trigger{font-family:inherit;display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:44px;min-width:150px;border-radius:6px;border:1px solid #d3e0d4;padding:0 12px;color:var(--ssh-paper);background:transparent;text-decoration:none;font-size:12px;font-weight:400;cursor:pointer;transition:background .15s}
.ssh-trigger svg{width:18px;height:18px;flex:none}
.ssh-trigger:is(:hover,[aria-expanded="true"]){background:#263b2e;border-color:var(--ssh-green)}
.ssh-nav{margin-left:auto;display:flex;align-items:center;gap:22px;min-width:0}
.ssh-nav a{font-family:inherit;display:inline-flex;align-items:center;min-height:44px;color:var(--ssh-normal);text-decoration:none;white-space:nowrap;font-size:12px;font-weight:700}
.ssh-nav :is(.ssh-library,.ssh-map,.ssh-teams){text-transform:capitalize}
.ssh-nav a:not(.ssh-teams):is(:hover,[aria-current="page"]){color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ssh-coral);text-underline-offset:8px}
.ssh-nav a.ssh-pro:is(:hover,:focus-visible,[aria-current="page"]){color:var(--ssh-green);text-decoration-color:var(--ssh-green)}
.ssh-nav a.ssh-teams{color:var(--ssh-paper);border:1px solid #8b9e8f;border-radius:6px;min-height:44px;padding:0 16px;gap:7px}
.ssh-nav a.ssh-teams:is(:hover,:focus-visible,[aria-current="page"]){background:var(--ssh-green);color:var(--ssh-black);border-color:var(--ssh-green)}
.ssh-nav .ssh-teams .ssh-arrow{color:var(--ssh-coral)}
.ssh-nav .ssh-teams:is(:hover,:focus-visible,[aria-current="page"]) .ssh-arrow{color:#355d42}
.ssh-header :is(a,button):focus-visible{outline:3px solid var(--ssh-green)!important;outline-offset:4px}
.ssh-short{display:none}
.ssh-local-nav{display:flex;align-items:center;gap:18px;min-height:42px;padding:7px max(48px,calc((100% - 1320px)/2));border-bottom:1px solid #cbd6cb;background:#e9eee7;color:#294633;font:600 12px/1.4 Inter,system-ui,sans-serif;flex-wrap:wrap}
.ssh-local-nav a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.ssh-local-nav a:focus-visible{outline:3px solid #40694b;outline-offset:3px}
.ssh-dialog{position:fixed;inset:0;max-width:min(680px,calc(100vw - 32px));width:100%;max-height:min(82dvh,650px);margin:clamp(24px,10vh,96px) auto auto;border:1px solid #d1dfd2;border-radius:12px;padding:0;background:#f7f8f4;color:#1b251f;box-shadow:0 22px 90px rgba(0,0,0,.22);overflow:auto;font:400 16px/1.45 Inter,system-ui,sans-serif;z-index:100000}
.ssh-dialog::backdrop{background:rgba(6,18,11,.56)}
.ssh-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #d0dbd0}
.ssh-dialog-head h2{font:400 27px/1.2 Georgia,"Times New Roman",serif;margin:0;color:#1b251f}
.ssh-close{width:44px;height:44px;border:0;border-radius:5px;background:transparent;font:400 25px/1 system-ui;color:#2c4636;cursor:pointer}
.ssh-close:hover{background:#e4ece3}
.ssh-dialog-body{padding:20px 22px 28px}
.ssh-query-wrap{display:flex;align-items:center;gap:10px;padding:10px 13px;border:2px solid #31543c;background:#fff;border-radius:6px}
.ssh-query-wrap svg{width:20px;height:20px;flex:none}
.ssh-query{border:0!important;outline:0!important;flex:1;min-width:0;height:34px;background:transparent!important;color:#1b251f!important;font:400 16px/1.3 Inter,system-ui,sans-serif!important}
.ssh-status{margin:12px 0 16px;color:#486451;font-size:12px}
.ssh-results{list-style:none;margin:0;padding:0}
.ssh-results li{list-style:none;margin:0;padding:0}
.ssh-results li a{display:grid;grid-template-columns:100px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #d8e3d6;text-decoration:none;color:#1b251f;min-height:57px}
.ssh-results li a:is(:hover,:focus-visible){background:#e1efdf;outline:2px solid #54715c;outline-offset:-2px}
.ssh-result-type{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#516d59;font-weight:700}
.ssh-result-title{font-weight:600;font-size:14px;min-width:0;overflow-wrap:anywhere}
.ssh-result-meta{display:block;font-size:11px;color:#677569;font-weight:400}
.ssh-all-results{margin-top:17px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid #8fac94;border-radius:6px;color:#1d3f2a;text-decoration:none;font-size:13px;font-weight:700}
.ssh-all-results:hover{background:#e1efdf}
.ssh-empty{font-size:14px;color:#536b59;padding:18px 0}
.ssh-dialog :is(button,input,a):focus-visible{outline:3px solid #31543c;outline-offset:2px}
.ssh-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1100px){.ssh-shell{width:calc(100% - 56px)}.ssh-mainrow{min-height:70px;gap:16px}.ssh-brand{flex-basis:185px}.ssh-brand img{width:185px}.ssh-trigger{min-width:122px}.ssh-nav{gap:15px}.ssh-nav .ssh-teams{padding:0 10px}.ssh-topline .ssh-count{display:none}.ssh-local-nav{padding-inline:28px}}
@media(max-width:820px){.ssh-shell{width:calc(100% - 38px)}.ssh-topline{display:none}.ssh-mainrow{min-height:0;flex-wrap:wrap;gap:0}.ssh-brand{flex:0 0 170px;height:56px;margin-right:auto}.ssh-brand img{width:170px}.ssh-trigger{min-width:44px;width:44px;height:44px;padding:0}.ssh-trigger .ssh-trigger-text{display:none}.ssh-nav{flex:0 0 100%;width:100%;margin:0;justify-content:space-between;gap:10px;border-top:1px solid #a6bdac;min-height:48px}.ssh-nav a{font-size:12px}.ssh-nav a.ssh-teams{min-height:40px;padding:0 8px}.ssh-local-nav{padding-inline:19px}.ssh-dialog{max-width:calc(100vw - 16px);margin:8px auto auto;max-height:calc(100dvh - 16px)}.ssh-dialog-head{padding:12px 15px}.ssh-dialog-body{padding:14px 15px}.ssh-results li a{grid-template-columns:75px minmax(0,1fr) 12px;gap:6px}.ssh-result-type{font-size:10px}}
@media(max-width:480px){.ssh-nav{display:flex;gap:6px;justify-content:space-between;min-height:48px}.ssh-nav a{font-size:12px;min-width:44px}.ssh-nav .ssh-pro{white-space:normal;max-width:96px;line-height:1.15}.ssh-nav a.ssh-teams{min-height:44px;padding:0 4px;gap:3px}.ssh-nav .ssh-teams .ssh-arrow{display:none}.ssh-short{display:inline}.ssh-long{display:none}}
@media(max-width:330px){.ssh-brand{flex-basis:150px}.ssh-brand img{width:150px}}
@media(prefers-reduced-motion:reduce){.ssh-header *, .ssh-dialog *{scroll-behavior:auto!important;transition:none!important}}

/* Legacy-only compatibility layer for the current v03 header.
   New headers opt out with data-ss-header-redesign (or use a new class name).
   This isolates historic !important overrides without changing today's layout. */
header.ssh-header:not([data-ss-header-redesign]){display:block!important;float:none!important;position:relative!important;width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;background:#567261!important;color:#f7f6f1!important;overflow:visible!important;transform:none!important;box-shadow:none!important;clip-path:none!important}
header.ssh-header:not([data-ss-header-redesign]) .ssh-shell{width:calc(100% - 96px)!important;max-width:1320px!important;margin:0 auto!important;padding:0!important;display:block!important}
header.ssh-header:not([data-ss-header-redesign]) .ssh-topline{box-sizing:border-box!important;height:29px!important;min-height:29px!important;padding:0!important;margin:0!important}
header.ssh-header:not([data-ss-header-redesign]) .ssh-mainrow{box-sizing:border-box!important;min-height:72px!important;padding:0!important;margin:0!important}
header.ssh-header:not([data-ss-header-redesign]) .ssh-trigger{appearance:none;box-shadow:none!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:14px!important;font-weight:400!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important}
header.ssh-header:not([data-ss-header-redesign]) .ssh-brand,header.ssh-header:not([data-ss-header-redesign]) .ssh-nav{box-sizing:border-box!important;padding:0!important}
.ssh-dialog .ssh-query{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:16px!important;font-weight:400!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important}
.ssh-dialog .ssh-query::placeholder{font:inherit!important;color:#87948a!important;opacity:1}
.ssh-dialog .ssh-result-title{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:14px!important;line-height:1.4!important}
#ss-page-query{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:16px!important;line-height:1.3!important;letter-spacing:normal!important}
@media(max-width:1100px){header.ssh-header:not([data-ss-header-redesign]) .ssh-shell{width:calc(100% - 56px)!important}header.ssh-header:not([data-ss-header-redesign]) .ssh-mainrow{min-height:70px!important}}
@media(max-width:820px){header.ssh-header:not([data-ss-header-redesign]) .ssh-shell{width:calc(100% - 38px)!important}header.ssh-header:not([data-ss-header-redesign]) .ssh-topline{display:none!important}header.ssh-header:not([data-ss-header-redesign]) .ssh-mainrow{min-height:0!important}}

/* Portfolio motion standard: shared page changes with stable study identity. */
@view-transition {
  navigation: auto;
}
.ssh-header .ssh-brand {
  view-transition-name: side-studies-logo;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(side-studies-logo),
  ::view-transition-new(side-studies-logo) {
    animation-duration: 0.01ms !important;
  }
}


/* V4 shared header — three experiences, depth on demand.
   The historic .ssh- rules above remain for the independently owned search dialog. */
.ssv4-header,.ssv4-header *{box-sizing:border-box}
.ssv4-header{display:block;position:sticky!important;top:0!important;z-index:1000!important;isolation:isolate;width:100%;max-width:none;height:auto;min-height:0;margin:0;padding:0;border:0;background:#567261;color:#f7f6f1;font:500 13px/1.3 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Side Studies reading progress follows the OBOR accent-bar pattern. */
.ssv4-progress{position:fixed;top:0;left:0;z-index:1200;width:100%;height:3px;background:#ed704a;transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;transition:opacity .2s ease}
.ssv4-progress.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.ssv4-progress{transition:none}}
.ssv4-header .ssv4-shell{display:block;width:calc(100% - 96px);max-width:1320px;margin:0 auto;padding:0}
.ssv4-header .ssv4-main{display:flex;align-items:center;gap:26px;min-height:78px}
.ssv4-header .ssv4-brand{display:flex;align-items:center;flex:none;width:200px;min-height:48px;background:none;line-height:0;text-decoration:none}
.ssv4-header .ssv4-brand img{display:block;width:200px;max-width:100%;max-height:43px;object-fit:contain}
.ssv4-header .ssv4-nav{display:flex;align-items:center;gap:clamp(17px,2.3vw,36px);margin-left:auto;min-height:56px}
.ssv4-header .ssv4-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;color:#f7f6f1;font:750 13px/1.4 Inter,system-ui,sans-serif;white-space:nowrap;border:0;background:none;position:relative}
.ssv4-header .ssv4-nav a:hover,.ssv4-header .ssv4-nav a[data-ss-active-family="true"]{color:#fff}
.ssv4-header .ssv4-nav a[data-ss-active-family="true"]::after{content:"";position:absolute;bottom:7px;left:0;right:0;height:2px;background:#f2c3a6}
.ssv4-header .ssv4-utils{display:flex;align-items:center;gap:10px;flex:none}
.ssv4-header .ssv4-search,.ssv4-header .ssv4-menu>summary,.ssv4-header .ssv4-search-fallback{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:44px;border:1px solid #d3e0d4;border-radius:5px;background:transparent;color:#f7f6f1;font:700 12px/1.2 Inter,system-ui,sans-serif;text-decoration:none;padding:0 12px;cursor:pointer}
.ssv4-header .ssv4-search:hover,.ssv4-header .ssv4-menu>summary:hover,.ssv4-header .ssv4-search[aria-expanded="true"],.ssv4-header .ssv4-menu[open]>summary{border-color:#f7f6f1;background:#405f4e;color:#fff}
.ssv4-header .ssv4-search svg,.ssv4-header .ssv4-menu>summary svg{width:19px;height:19px;flex:none}
.ssv4-header .ssv4-menu{position:relative;flex:none}
.ssv4-header .ssv4-menu>summary{list-style:none;user-select:none}
.ssv4-header .ssv4-menu>summary::-webkit-details-marker{display:none}
.ssv4-header .ssv4-menu-panel{position:absolute;z-index:44;right:0;top:calc(100% + 10px);width:min(310px,calc(100vw - 38px));background:#f4f6f0;color:#213b2b;border:1px solid #c5d0c0;border-radius:7px;box-shadow:0 15px 45px rgba(0,0,0,.18);padding:11px 10px 9px;display:flex;flex-direction:column;gap:2px}
.ssv4-header .ssv4-menu:not([open])>.ssv4-menu-panel{display:none}
.ssv4-header .ssv4-menu-label{font:800 10px/1.4 Inter,system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#6a796a;padding:9px 11px}
.ssv4-header .ssv4-menu-panel a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 11px;min-height:47px;border-radius:4px;text-decoration:none;color:#243a2d;font:750 14px/1.4 Inter,system-ui,sans-serif}
.ssv4-header .ssv4-menu-panel a:hover,.ssv4-header .ssv4-menu-panel a:focus-visible,.ssv4-header .ssv4-menu-panel a[aria-current="page"]{background:#e1e9dd}
.ssv4-header .ssv4-menu-panel a span{color:#698369;font-weight:400}
.ssv4-header :is(a,button,summary):focus-visible{outline:3px solid #f4d4bd!important;outline-offset:3px}
.ssv4-header .ssv4-context{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:38px;padding:8px max(48px,calc((100vw - 1320px)/2));background:#dfe9dc;color:#274730;border-bottom:1px solid #b9c7b8;font:750 11px/1.4 Inter,system-ui,sans-serif}
.ssv4-header .ssv4-context-label{letter-spacing:.04em}
.ssv4-header .ssv4-context-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 23px}
.ssv4-header .ssv4-context a{color:#3b6244;text-decoration:underline;text-underline-offset:3px;min-height:30px;display:inline-flex;align-items:center}
.ssv4-header .ssv4-context a:hover{color:#a35c3f}
@media(max-width:1100px){
 .ssv4-header .ssv4-shell{width:calc(100% - 56px)}
 .ssv4-header .ssv4-main{gap:18px;min-height:72px}
 .ssv4-header .ssv4-brand,.ssv4-header .ssv4-brand img{width:175px}
 .ssv4-header .ssv4-nav{gap:20px}
 .ssv4-header .ssv4-context{padding-inline:28px}
}
@media(max-width:760px){
 .ssv4-header .ssv4-shell{width:calc(100% - 38px)}
 .ssv4-header .ssv4-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;min-height:0}
 .ssv4-header .ssv4-brand{grid-column:1;grid-row:1;height:62px}
 .ssv4-header .ssv4-brand,.ssv4-header .ssv4-brand img{width:172px}
 .ssv4-header .ssv4-utils{grid-column:2;grid-row:1;gap:7px}
 .ssv4-header .ssv4-search{width:44px;padding:0}
 .ssv4-header .ssv4-search-fallback{width:44px;min-width:44px;padding:0;font-size:0}
 .ssv4-header .ssv4-search-fallback::after{content:'⌕';font:400 25px/1 Arial, sans-serif}
 .ssv4-header .ssv4-search>span{display:none}
 .ssv4-header .ssv4-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;min-height:50px;margin-left:0;border-top:1px solid #a6bdac}
 .ssv4-header .ssv4-nav a{min-width:0;min-height:50px;justify-content:center;font-size:13px}
 .ssv4-header .ssv4-nav a[data-ss-active-family="true"]::after{bottom:0;left:20%;right:20%}
 .ssv4-header .ssv4-context{padding:8px 19px;align-items:flex-start;gap:8px;flex-wrap:wrap}
 .ssv4-header .ssv4-menu-panel{top:calc(100% + 7px)}
}
@media(max-width:365px){
 .ssv4-header .ssv4-brand,.ssv4-header .ssv4-brand img{width:148px}
 .ssv4-header .ssv4-utils{gap:6px}
 .ssv4-header .ssv4-menu>summary{gap:6px;padding:0 9px}
 .ssv4-header .ssv4-nav a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ssv4-header *{transition:none!important;scroll-behavior:auto!important}}