/* ═══════════════════════════════════════════════════════════════════════════
   OCTA CULTURES · UI ELEMENT LIBRARY · v1 · 1 October 2026
   One file, linked by every page. The catalogue with live examples is
   Octa Cultures Brand/Octa-Cultures-UI-Library.html.
   Rules come from the Brand Guidelines (Part 1 · Interface). No new colours:
   every value below is a brand colour, a Culture colour or an aspect colour.

   How a page uses it
     <html data-oc-aspect="ecological">      ← picks the aspect colours
     <link rel="stylesheet" href="…/Octa%20Cultures%20Brand/ui/octa-cultures-ui.css">
   Each element has one class (oc-…). Older page markup is mapped onto the
   same elements in section 12 ("adopt"), so old and new pages look the same.

   01 tokens · 02 aspects · 03 the ring · 04 top bar & path · 05 cover
   06 buttons · 07 chips & jump bar · 08 search · 09 tool bar · 10 footer
   11 phones · 12 adopt (older markup) · 13 day theme · 14 less motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --oc-cream:#F2F0E9; --oc-ink:#0A0A0E; --oc-day-paper:#ECE4D2; --oc-day-ink:#211C15; --oc-day-field:#FBF7EE;
  --oc-serif:'Playfair Display',Georgia,serif;
  --oc-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --oc-mono:'IBM Plex Mono',ui-monospace,monospace;
  --oc-line:color-mix(in srgb,var(--cream,#F2F0E9) 20%,transparent);
  --oc-line-strong:color-mix(in srgb,var(--cream,#F2F0E9) 35%,transparent);
  --oc-text:var(--cream,#F2F0E9);
  --oc-pill:999px;
  --oc-h:38px;            /* button / chip height */
  --oc-field-h:42px;      /* search field height  */
  --oc-ring-bar:30px; --oc-ring-cover:100px; --oc-ring-foot:26px; --oc-page-icon:52px;
  --oc-spin:20s;
  /* the eight Cultures of life (ring order) and their light shades */
  --oc-human:#505679; --oc-animal:#D6826C; --oc-plant:#96C27B; --oc-insect:#F3D99C;
  --oc-fungi:#BC896A; --oc-algae:#43B7AB; --oc-aquatic:#3C94B1; --oc-bacteria:#A495C1;
  --oc-human-l:#C7CBF5; --oc-animal-l:#F4B6A5; --oc-plant-l:#C9E6B5; --oc-insect-l:#FFE9B8;
  --oc-fungi-l:#E6CBB5; --oc-algae-l:#9FE3DA; --oc-aquatic-l:#9CCFE3; --oc-bacteria-l:#D6CCEB;
  /* default aspect = neutral cream (a page sets data-oc-aspect) */
  --oc-asp:#F2F0E9; --oc-asp-l:#F2F0E9; --oc-asp-d:#211C15; --oc-asp-t:#F2F0E9;
  --oc-all8:conic-gradient(#EA9244,#D8D8D8,#8C8958,#FACF5E,#6A8C99,#DA614B,#8C7058,#7B6580,#EA9244);
}

/* ── 02 · ASPECTS: main · title frame at night · deep day colour · text ─── */
html[data-oc-aspect="spiritual"]    {--oc-asp:#EA9244;--oc-asp-l:#EA9244;--oc-asp-d:#B0590C;--oc-asp-t:#EA9244}
html[data-oc-aspect="mental"]       {--oc-asp:#D8D8D8;--oc-asp-l:#D8D8D8;--oc-asp-d:#4A4842;--oc-asp-t:#D8D8D8}
html[data-oc-aspect="ecological"]   {--oc-asp:#8C8958;--oc-asp-l:#DCD89A;--oc-asp-d:#56532B;--oc-asp-t:#DCD89A}
html[data-oc-aspect="economic"]     {--oc-asp:#FACF5E;--oc-asp-l:#FFE9A8;--oc-asp-d:#9A6E08;--oc-asp-t:#FFE9A8}
html[data-oc-aspect="political"]    {--oc-asp:#6A8C99;--oc-asp-l:#6A8C99;--oc-asp-d:#34525E;--oc-asp-t:#6A8C99}
html[data-oc-aspect="social"]       {--oc-asp:#DA614B;--oc-asp-l:#DA614B;--oc-asp-d:#AE3320;--oc-asp-t:#DA614B}
html[data-oc-aspect="biological"]   {--oc-asp:#8C7058;--oc-asp-l:#E3C3A0;--oc-asp-d:#5A4226;--oc-asp-t:#E3C3A0}
html[data-oc-aspect="technological"]{--oc-asp:#7B6580;--oc-asp-l:#7B6580;--oc-asp-d:#4F3C57;--oc-asp-t:#F2F0E9}

/* ── 03 · THE RING (the only logo) ───────────────────────────────────────
   Inline SVG, 8 × 45° from 12 o'clock, R 46% / r 20%, turning clockwise.
   Sizes per place: top bar 30 · cover 100 · footer 26 · never below 24.   */
@keyframes ocSpin{to{transform:rotate(360deg)}}
.oc-ring{display:block;flex-shrink:0;animation:ocSpin var(--oc-spin) linear infinite;transform-origin:50% 50%}
.oc-ring--bar  {width:var(--oc-ring-bar)!important;height:var(--oc-ring-bar)!important}
.oc-ring--cover{width:var(--oc-ring-cover)!important;height:var(--oc-ring-cover)!important}
.oc-ring--foot {width:var(--oc-ring-foot)!important;height:var(--oc-ring-foot)!important}
.oc-home{display:flex;align-items:center;flex-shrink:0;border-radius:8px;text-decoration:none}
.oc-dot-all8{width:9px;height:9px;border-radius:50%;background:var(--oc-all8);display:inline-block;flex-shrink:0}

/* ── 04 · TOP BAR & PATH ─────────────────────────────────────────────────
   The ring (home) · Octa Cultures / {Aspect} Aspect / … · search on the right */
.topnav .oc-ring,.octa-topnav .oc-ring,.oc-home .oc-ring,.oc-bar .oc-ring{width:var(--oc-ring-bar)!important;height:var(--oc-ring-bar)!important}
nav.octa-topnav>.container:has(>.oc-ring,>.oc-home){flex-direction:row;align-items:center;gap:.8rem}
@media(min-width:641px){html:has(.atlas-search-root) .topnav>.container,html:has(.atlas-search-root) nav.octa-topnav>.container{padding-right:210px}}

/* ── 05 · COVER ──────────────────────────────────────────────────────────
   ring 100 · path · eyebrow · rule · title · page icon 52 · subtitle · badge · numbers · jump bar */
body .cover-logo,.oc-cover-logo{width:var(--oc-ring-cover)!important;height:var(--oc-ring-cover)!important;margin:0 auto 1.8rem!important;opacity:1!important;display:block}
.oc-cover-logo.oc-left{margin:0 0 1.4rem!important}
body .cover-logo svg,.oc-cover-logo svg{width:100%!important;height:100%!important;display:block}
.oc-page-icon{width:var(--oc-page-icon);height:var(--oc-page-icon);margin:.4rem auto 1.1rem;display:block;opacity:.95}
.oc-page-icon svg{width:100%;height:100%;display:block}
.cover{isolation:isolate}
.oc-eyebrow,body .cover-eyebrow{font-family:var(--oc-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.oc-eyebrow b,body .cover-eyebrow b{font-weight:500;color:var(--oc-asp-t);text-decoration:underline 2px var(--oc-asp);text-underline-offset:5px}
.oc-rule,body .cover-rule{height:2px;background:linear-gradient(to right,transparent,var(--oc-asp) 6%,#505679 17%,#D6826C 28%,#96C27B 39%,#F3D99C 50%,#BC896A 61%,#43B7AB 72%,#3C94B1 83%,#A495C1 92%,var(--oc-asp) 96%,transparent)}
.oc-title,body .cover-title{font-family:var(--oc-serif);font-weight:400;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(100deg,var(--oc-asp-l) 0%,#C7CBF5 14%,#F4B6A5 25%,#C9E6B5 36%,#FFE9B8 47%,#E6CBB5 58%,#9FE3DA 69%,#9CCFE3 80%,#D6CCEB 90%,var(--oc-asp-l) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--oc-asp) 40%,transparent))}
.oc-subtitle,body .cover-subtitle,body .cover-sub{font-size:1.05rem;line-height:1.75;max-width:800px;margin-left:auto;margin-right:auto}

/* ── 06 · BUTTONS ────────────────────────────────────────────────────────
   One system: pill · Plex Mono .66rem 500 · upper case · .09em · 38px.
   .oc-btn (ordinary) · .oc-btn--pri (the page's main action) · .oc-badge (status) */
.oc-btn,.oc-btn--pri,.oc-badge{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--oc-h);padding:.55rem 1.05rem;border-radius:var(--oc-pill);
  font-family:var(--oc-mono);font-size:.66rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;line-height:1.2;cursor:pointer;
  color:var(--oc-text);background:transparent;border:1px solid color-mix(in srgb,var(--cream,#F2F0E9) 22%,transparent);transition:border-color .25s,background .25s}
.oc-btn--pri{background:color-mix(in srgb,var(--oc-asp) 24%,transparent);border-color:var(--oc-asp)}
.oc-badge{cursor:default;background:color-mix(in srgb,var(--cream,#F2F0E9) 3%,transparent);border-color:var(--oc-line-strong)}
.oc-btn:hover,.oc-btn--pri:hover{border-color:var(--oc-asp-l);background:color-mix(in srgb,var(--oc-asp) 16%,transparent)}
.oc-btn:focus-visible,.oc-btn--pri:focus-visible{outline:2px solid var(--oc-asp-l);outline-offset:3px}

/* ── 07 · CHIPS & JUMP BAR ───────────────────────────────────────────────
   Under every cover: "On this page" (one chip per section) + "The 8 aspects" */
.oc-jump{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:1060px;margin:2.2rem auto 0;text-align:center}
.ocj-row{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.ocj-label{font-family:var(--oc-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.ocj-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.ocj-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--oc-h);padding:.55rem 1rem;border-radius:var(--oc-pill);font-family:var(--oc-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--oc-text);border:1px solid var(--oc-line);background:transparent;transition:border-color .25s,background .25s}
a.ocj-chip:hover{border-color:var(--oc-asp-l);background:color-mix(in srgb,var(--oc-asp) 14%,transparent)}
.ocj-chip:focus-visible{outline:2px solid var(--oc-asp-l);outline-offset:3px}
.ocj-chip.pri{border-color:var(--oc-asp);background:color-mix(in srgb,var(--oc-asp) 26%,transparent);font-weight:500}
.ocj-chip i{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:block}
.ocj-chip.is-current{border-color:var(--oc-asp);background:color-mix(in srgb,var(--oc-asp) 18%,transparent);font-weight:500}
.ocj-chip.is-current i{box-shadow:0 0 0 2px rgba(10,10,14,.9),0 0 0 3.5px var(--oc-asp)}
section[id]{scroll-margin-top:84px}

/* ── 08 · SEARCH ─────────────────────────────────────────────────────────
   Two search elements, both on every page:
   a) The atlas search: the floating "Search atlas" pill, top right (atlas-search.js), the same on every page.
   b) The page search: a field that searches or picks inside this page.
      Pill · 42px · magnifier on the left · Plus Jakarta 300 .92rem · focus ring in the aspect colour. */
.oc-search{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:var(--oc-field-h);min-width:0;padding:0 1rem 0 2.55rem;border-radius:var(--oc-pill);
  border:1px solid var(--oc-line);color:var(--oc-text);font-family:var(--oc-sans);font-size:.92rem;font-weight:300;letter-spacing:.01em;outline:0;
  background:rgba(10,10,14,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E9' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 1rem 50%/15px 15px;
  transition:border-color .25s,box-shadow .25s}
.oc-search::placeholder{color:color-mix(in srgb,var(--cream,#F2F0E9) 45%,transparent);font-weight:300;opacity:1}
.oc-search:focus{border-color:var(--oc-asp-l);box-shadow:0 0 0 3px color-mix(in srgb,var(--oc-asp) 28%,transparent)}
.oc-search::-webkit-search-cancel-button{filter:invert(.7)}
/* the atlas search pill takes the same tokens */
.atlas-search-root{--as-accent:var(--oc-asp);--as-font-mono:var(--oc-mono);--as-font-sans:var(--oc-sans)}
.atlas-search-trigger{min-height:var(--oc-h)}

/* ── 09 · TOOL BAR ───────────────────────────────────────────────────────
   A slim bar above the top bar for a page tool (e.g. the ecoregion picker):
   mono label · search field · buttons. */
.oc-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;padding:.6rem 1.2rem;background:rgba(10,10,14,.94);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--cream,#F2F0E9) 10%,transparent)}
.oc-toolbar-label{font-family:var(--oc-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;white-space:nowrap}

/* ── 10 · FOOTER LOCK-UP ─────────────────────────────────────────────── */
.oc-foot{display:flex;width:max-content;max-width:100%;align-items:center;gap:.6rem;margin:0 auto 1rem;text-decoration:none;color:var(--oc-text);font-family:var(--oc-serif);font-size:1.1rem}
.oc-foot svg{width:var(--oc-ring-foot);height:var(--oc-ring-foot);display:block;flex-shrink:0;animation:ocSpin var(--oc-spin) linear infinite;transform-origin:50% 50%}

/* 10b · pages that had no footer get a small one holding the lock-up; top bars of every page type keep the ring in line */
.oc-footer{padding:2.6rem 1rem 2.2rem;border-top:1px solid var(--oc-line);text-align:center;margin-top:3rem}
nav.topnav>.container:has(>.oc-home){display:flex;flex-direction:row;align-items:center;gap:.8rem}
nav.topnav>.container>.oc-home{flex:none;display:inline-flex}nav.topnav>.container:has(>.oc-home)>.crumbs{min-width:0}
@media(min-width:641px){html:has(.atlas-search-root) .topbar-inner{padding-right:210px}}

/* ── 11 · PHONES (≤640px): nothing scrolls sideways ───────────────────── */
@media(max-width:640px){
  .atlas-search-root:not(.is-open){left:auto!important}
  .atlas-search-root:not(.is-open) .ast-label,.atlas-search-root:not(.is-open) .ast-kbd{display:none}
  .atlas-search-root:not(.is-open) .atlas-search-trigger{padding:0;width:42px;height:42px;justify-content:center;border-radius:50%}
  .ocj-chip{font-size:.6rem;padding:.5rem .8rem;min-height:36px}
  .oc-search{font-size:16px}
  .topnav .nav-buttons{flex-wrap:wrap;max-width:100%;min-width:0}
  body .topnav a.nav-btn{white-space:normal;max-width:100%;text-align:left}
  .topnav .crumbs{min-width:0;max-width:100%}
  body .topnav .crumb{white-space:normal;max-width:100%}
  .prot-row>*{min-width:0;overflow-wrap:anywhere}
  .oc-toolbar,body .octa-er-bar{padding:.55rem .8rem}
  .topbar-inner{flex-wrap:wrap;row-gap:.5rem;padding-left:16px!important;padding-right:60px!important}
  .topbar-inner>.nav-meta{flex-wrap:wrap;margin-left:0;min-width:0}
  .culture-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .culture-chip{min-width:0}
  body .octa-er-input-wrap{min-width:0!important;flex:1 1 100%}
}

/* ── 12 · ADOPT: older page markup → the same elements ───────────────── */
/* the ring in older places */
#brandLogo svg,#footLogo svg,#finLogo svg{animation:ocSpin var(--oc-spin) linear infinite;transform-origin:50% 50%}
/* buttons */
body .cover-badge{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--oc-h);padding:.55rem 1.05rem;border-radius:var(--oc-pill);font-family:var(--oc-mono);font-size:.66rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;color:var(--oc-text);background:color-mix(in srgb,var(--cream,#F2F0E9) 3%,transparent);border:1px solid var(--oc-line-strong)}
body a.nav-btn,body .img-search-btn,body a.efd-global-link,body a.efd-data-link,body button.tg,body button.tg-reset,body button.gm-action,body button.ctrl-btn,body .photobtn,body a.currbtn,body button.db-btn,body button.refresh-btn,body a.eccal-btn,body .octa-er-bar button{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--oc-h);padding:.55rem 1.05rem;border-radius:var(--oc-pill);
  font-family:var(--oc-mono);font-size:.66rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;line-height:1.2;cursor:pointer;transition:border-color .25s,background .25s}
body a.nav-btn,body button.tg,body button.tg-reset,body button.gm-action,body button.ctrl-btn,body .photobtn,body a.currbtn,body button.db-btn,body button.refresh-btn,body a.eccal-btn,body .octa-er-bar button{
  color:var(--oc-text);background:transparent;border:1px solid color-mix(in srgb,var(--cream,#F2F0E9) 22%,transparent)}
body .img-search-btn,body .octa-er-bar button.oeb-go{color:var(--oc-text);background:color-mix(in srgb,var(--oc-asp) 24%,transparent);border:1px solid var(--oc-asp)}
body a.nav-btn:hover,body button.tg:hover,body button.tg-reset:hover,body button.gm-action:hover,body button.ctrl-btn:hover,body .photobtn:hover,body a.currbtn:hover,body button.db-btn:hover,body button.refresh-btn:hover,body a.eccal-btn:hover,body .img-search-btn:hover,body .octa-er-bar button:hover{border-color:var(--oc-asp-l);background:color-mix(in srgb,var(--oc-asp) 16%,transparent)}
/* page fields: every text field is the same field; search fields add the magnifier */
body input[type="text"]:not(.atlas-search-input),body input[type="search"]:not(.atlas-search-input),body input:not([type]):not(.atlas-search-input){-webkit-appearance:none;appearance:none;box-sizing:border-box!important;min-height:var(--oc-field-h)!important;min-width:0!important;padding:0 1rem!important;border-radius:var(--oc-pill)!important;border:1px solid var(--oc-line)!important;background-color:rgba(10,10,14,.6)!important;color:var(--oc-text)!important;font-family:var(--oc-sans)!important;font-size:.92rem!important;font-weight:300!important;letter-spacing:.01em!important;outline:0!important;transition:border-color .25s,box-shadow .25s}
body input[type="search"]:not(.atlas-search-input),body input[id*="search"]:not(.atlas-search-input),body input[class*="search"]:not(.atlas-search-input),body input.srm-sel,body #octa-er-input{padding-left:2.55rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E9' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:1rem 50%!important;background-size:15px 15px!important}
body input[type="text"]:not(.atlas-search-input)::placeholder,body input[type="search"]:not(.atlas-search-input)::placeholder,body input:not([type]):not(.atlas-search-input)::placeholder{color:color-mix(in srgb,var(--cream,#F2F0E9) 45%,transparent)!important;font-weight:300!important;opacity:1!important}
body input[type="text"]:not(.atlas-search-input):focus,body input[type="search"]:not(.atlas-search-input):focus,body input:not([type]):not(.atlas-search-input):focus{border-color:var(--oc-asp-l)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--oc-asp) 28%,transparent)!important}
/* drop-downs: the same pill, with a chevron */
body select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;box-sizing:border-box!important;min-height:var(--oc-h)!important;padding:0 2.2rem 0 1rem!important;border-radius:var(--oc-pill)!important;border:1px solid var(--oc-line)!important;background:rgba(10,10,14,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E9' stroke-opacity='.6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/14px 14px!important;color:var(--oc-text)!important;font-family:var(--oc-sans)!important;font-size:.85rem!important;font-weight:400!important;outline:0!important;cursor:pointer!important}
body select:not([multiple]):not([size]):focus{border-color:var(--oc-asp-l)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--oc-asp) 28%,transparent)!important}
body select:not([multiple]):not([size]) option{background:#0A0A0E!important;color:#F2F0E9!important}
/* ticks, radios and sliders take the aspect colour */
body input[type="checkbox"],body input[type="radio"],body input[type="range"]{accent-color:var(--oc-asp-l)}
/* the ecoregion picker bar = the tool bar */
body .octa-er-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;padding:.6rem 1.2rem;background:rgba(10,10,14,.94);border-bottom:1px solid color-mix(in srgb,var(--cream,#F2F0E9) 10%,transparent)}
@media(min-width:641px){html:has(.atlas-search-root) body .octa-er-bar,html:has(.atlas-search-root) body .wt-programbar{padding-right:220px!important}}
body .octa-er-input-wrap{max-width:560px}
body .octa-er-input-wrap>input,body #octa-er-input{width:100%}
body .octa-er-suggest{top:calc(100% + 6px)!important;border:1px solid var(--oc-line-strong)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.55)}
body .octa-er-bar .oeb-label{font-family:var(--oc-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;white-space:nowrap}

/* main pages (html[data-oc-page="main"]) */
html[data-oc-page="main"] .cover::before{content:"";position:absolute;inset:-2rem 0 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 42% at 50% 40%,color-mix(in srgb,var(--oc-asp) 22%,transparent),transparent 72%)}
@media(max-width:640px){
  html[data-oc-page="main"] .topnav .crumbs .crumb:not(.crumb-current),html[data-oc-page="main"] .topnav .crumbs .crumb-sep{display:none}
  html[data-oc-page="main"] .stats-banner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-oc-page="main"] .stats-banner .stat-item{padding:1rem .6rem}
  html[data-oc-page="main"] .stats-banner .stat-item:last-child:nth-child(odd){grid-column:1/-1}
  nav.octa-aspects{max-width:100%;box-sizing:border-box;gap:.7rem;padding:.6rem 1rem;flex-wrap:wrap;justify-content:center}
  .asw-bar{flex-wrap:wrap}
  .forces-title span{display:inline-block}
  .country-card-top{flex-wrap:wrap}
  .country-version{white-space:normal}
}

/* ── 13 · DAY THEME (html[data-octa-theme="day"]) ────────────────────── */
html[data-octa-theme="day"] body .cover-title,html[data-octa-theme="day"] .oc-title{filter:brightness(.82) saturate(1.15);
  background:linear-gradient(100deg,var(--oc-asp-d) 0%,#505679 14%,#D6826C 25%,#96C27B 36%,#BC896A 47%,#43B7AB 58%,#3C94B1 69%,#A495C1 80%,#505679 90%,var(--oc-asp-d) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-octa-theme="day"] body .cover-eyebrow b,html[data-octa-theme="day"] .oc-eyebrow b{color:var(--oc-asp-d);text-decoration-color:var(--oc-asp-d)}
html[data-octa-theme="day"] .ocj-chip{border-color:rgba(48,41,31,.25)}
html[data-octa-theme="day"] .ocj-chip.pri,html[data-octa-theme="day"] .ocj-chip.is-current{border-color:var(--oc-asp-d)}
html[data-octa-theme="day"] .ocj-chip i{box-shadow:inset 0 0 0 1px rgba(48,41,31,.3)}
html[data-octa-theme="day"] .ocj-chip.is-current i{box-shadow:0 0 0 2px #ECE4D2,0 0 0 3.5px var(--oc-asp-d)}
html[data-octa-theme="day"] body input[type="text"]:not(.atlas-search-input),html[data-octa-theme="day"] body input[type="search"]:not(.atlas-search-input),html[data-octa-theme="day"] body input:not([type]):not(.atlas-search-input),html[data-octa-theme="day"] .oc-search{color:#211C15!important;border-color:rgba(48,41,31,.25)!important;background-color:#FBF7EE!important}
html[data-octa-theme="day"] body input[type="search"]:not(.atlas-search-input),html[data-octa-theme="day"] body input[id*="search"]:not(.atlas-search-input),html[data-octa-theme="day"] body input[class*="search"]:not(.atlas-search-input),html[data-octa-theme="day"] body input.srm-sel,html[data-octa-theme="day"] body #octa-er-input,html[data-octa-theme="day"] .oc-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211C15' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")!important}
html[data-octa-theme="day"] body select:not([multiple]):not([size]){color:#211C15!important;border-color:rgba(48,41,31,.25)!important;background:#FBF7EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211C15' stroke-opacity='.6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/14px 14px!important}
html[data-octa-theme="day"] body select:not([multiple]):not([size]) option{background:#FBF7EE;color:#211C15}
html[data-octa-theme="day"] .oc-toolbar,html[data-octa-theme="day"] body .octa-er-bar{background:rgba(240,234,222,.94);border-bottom-color:rgba(48,41,31,.18)}
html[data-octa-theme="day"] body .img-search-btn,html[data-octa-theme="day"] body .octa-er-bar button.oeb-go,html[data-octa-theme="day"] .oc-btn--pri{border-color:var(--oc-asp-d)}
html[data-octa-theme="day"] body a.nav-btn:hover,html[data-octa-theme="day"] .oc-btn:hover{border-color:var(--oc-asp-d)}
html[data-octa-theme="day"] body .forces-section .forces-title,html[data-octa-theme="day"] body .forces-section .forces-eyebrow,html[data-octa-theme="day"] body .force-master-title{filter:brightness(.45) contrast(1.12) saturate(1.2)}

/* ── 14 · LESS MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.oc-ring,.oc-foot svg,#brandLogo svg,#footLogo svg,#finLogo svg{animation:none}}

/* ── 15 · DIAGRAMS (octa-cultures-diagrams.js) ───────────────────────────
   The school stage: dark rounded panel · mono label chips you can click ·
   a button row under it · motion only on screen, still for less motion. */
.oc-dia{margin:1.6rem 0 1rem}
.oc-dia>svg{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--oc-line);background:#05060c;touch-action:pan-y}
.oc-dia-btns{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 0}
.oc-btn.is-on,.oc-btn--pri.is-on{border-color:var(--oc-asp-l);background:color-mix(in srgb,var(--oc-asp) 22%,transparent)}
.oc-dia-hint{font-family:var(--oc-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:.55rem 0 0}
.oc-hot{cursor:pointer;outline:none}
.oc-hot .oc-chip{transition:stroke-opacity .2s,stroke-width .2s,fill .2s}
.oc-hot:hover .oc-chip,.oc-hot:focus-visible .oc-chip{stroke-opacity:1;stroke-width:1.6}
.oc-hot.is-on .oc-chip{stroke-opacity:1;stroke-width:2;fill:rgba(20,22,34,.95)}
.oc-hot:focus-visible{outline:none}
.oc-hot:focus-visible .oc-chip{stroke:#F2F0E9}
.oc-hot .oc-band{transition:opacity .25s}
.oc-hot:hover .oc-band,.oc-hot.is-on .oc-band{opacity:1}
/* phones: wide diagrams keep a readable size and scroll sideways inside their own frame */
@media(max-width:640px){
  .oc-dia--wide{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem}
  .oc-dia--wide>svg{min-width:660px}
  .oc-dia--wide::after{content:"← swipe the diagram →";display:block;font-family:var(--oc-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-top:.4rem;position:sticky;left:0}
  .oc-dia--wide .oc-dia-btns{position:sticky;left:0;width:calc(100vw - 48px)}
}