/* ============================================================================
   openmaterials design system: an editorial, typographically serious identity.
   The register is a modern physics journal, not a SaaS landing.

   Three faces, three jobs (all vendored woff2, latin subset, zero external
   fetch):
     - Source Serif 4 (600/700, 400 italic): DISPLAY ONLY. Headings, wordmark,
       card/section titles, tier headings.
     - Inter (400/500/600): UI AND BODY. Nav, paragraphs, buttons, labels.
     - JetBrains Mono (400/500): DATA VOICE. Hashes, uids, node ids, code,
       stat numerals, version stamps, file paths. Slashed/dotted zero.

   The semantic colors of the map are load-bearing and must not drift in hue:
   observable indigo #4f46e5, simulation green #0f9d6b, measurement amber
   #d98a14. The neutrals are warm paper (prose pages); the map keeps its cooler
   canvas.
   ============================================================================ */
@import url('./vendor/inter/inter.css');
@import url('./vendor/source-serif-4/source-serif-4.css');
@import url('./vendor/jetbrains-mono/jetbrains-mono.css');

:root{
  /* surfaces (warm paper) */
  --bg:#fbfaf8; --surface:#ffffff;
  --ink:#16181d; --ink-2:#3d4149; --muted:#6b7078; --faint:#9aa0a8;
  --line:#e8e6e1;                 /* warm hairline */
  /* accent (the map's observable indigo, used sparingly on prose pages) */
  --accent:#4f46e5; --accent-2:#4338ca; --accent-soft:#eef2ff;
  --link:#16181d;                 /* prose links are ink; accent on hover */
  /* semantic (established by the map; do not change hue) */
  --simulation:#0f9d6b;
  /* the one dark surface (the "terminal") */
  --code-bg:#1f2125; --code-ink:#e6e8ef;
  /* type */
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',SFMono,Menlo,Consolas,'Liberation Mono',monospace;
  /* shape */
  --r-2:10px; --r-3:12px;
  /* the only allowed shadow on prose pages: the sticky header hairline */
  --shadow-head:0 1px 0 rgba(22,24,29,.04);
  /* motion */
  --t:150ms ease;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
code,kbd,samp{font-family:var(--font-mono);font-feature-settings:"zero" 1;}
/* display headings are serif; body/UI never uses the serif above 20px rule */
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin:0 0 .4em;}

/* prose links: ink with a 1px underline, accent on hover */
a.prose-link{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:color var(--t);
}
a.prose-link:hover{color:var(--accent);}

/* focus-visible: a consistent, legible ring across the whole site */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
a:focus-visible{outline-offset:3px;}

/* selection: a soft indigo wash, one definition site-wide */
::selection{background:var(--accent-soft);color:var(--ink);}
/* scrollbars: thin and warm, tuned to the paper surface */
*{scrollbar-width:thin;scrollbar-color:#d8d4cc transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d8d4cc;border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#c7c2b8;background-clip:padding-box;}

/* ---- editorial primitives ------------------------------------------------- */
/* overline: a numbered, uppercase, letterspaced label above a section head */
.om-overline{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--font-sans);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;
}
.om-overline .n{
  font-family:var(--font-mono);font-weight:500;font-feature-settings:"zero" 1;
  color:var(--accent);letter-spacing:.05em;
}
/* a thin top rule to open an editorial column */
.om-rule{border:0;border-top:1px solid var(--ink);height:0;margin:0 0 18px;opacity:.85;}

/* ---- shared header -------------------------------------------------------- */
.om-header{
  position:sticky;top:0;z-index:40;
  height:60px;display:flex;align-items:center;gap:18px;
  padding:0 clamp(16px,4vw,32px);
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-head);
}
.om-brand{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-serif);font-weight:700;font-size:1.06rem;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
.om-brand:hover{text-decoration:none;}
/* the mark: the addressed-derivation tile before the wordmark */
.om-brand .om-mark{width:22px;height:22px;border-radius:5px;flex:none;display:block;}
.om-beta{font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:1px 7px;flex:none;line-height:1.5;cursor:default;}
.om-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2.5vw,24px);}
.om-nav a{
  font-family:var(--font-sans);color:var(--ink-2);font-size:.86rem;font-weight:500;
  white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.om-nav a:hover{color:var(--ink);text-decoration:none;}
/* active = ink + a 2px accent underline offset to the header's bottom edge */
.om-nav a.active{color:var(--ink);border-bottom-color:var(--accent);}

/* ---- shared footer -------------------------------------------------------- */
.om-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:44px clamp(16px,4vw,32px) 30px;
  color:var(--muted);font-size:.9rem;
}
.om-footer-cols{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:32px 40px;
}
.om-footer h4{
  font-family:var(--font-serif);font-size:.95rem;font-weight:600;
  letter-spacing:-.005em;color:var(--ink);margin:0 0 14px;
}
.om-footer .om-desc{color:var(--ink-2);max-width:36ch;line-height:1.6;}
.om-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.om-footer ul a{color:var(--ink-2);font-weight:500;}
.om-footer ul a:hover{color:var(--accent);}
.om-trust{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:.78rem;font-feature-settings:"zero" 1;color:var(--muted);}
.om-trust .om-trust-row{display:flex;gap:9px;align-items:baseline;}
.om-trust .om-trust-k{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;font-weight:500;min-width:56px;}
.om-trust .om-trust-v{color:var(--ink-2);word-break:break-all;cursor:pointer;transition:color var(--t);}
.om-trust .om-trust-v:hover{color:var(--accent);}
.om-trust .om-trust-v.copied{color:var(--simulation);}
.om-smallprint{
  max-width:1080px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem;
}
.om-smallprint .om-ver{font-family:var(--font-mono);font-feature-settings:"zero" 1;}

@media (max-width:720px){
  .om-footer-cols{grid-template-columns:1fr;gap:28px;}
  .om-nav{gap:16px;}
}
/* small screens: keep the header on one line and let the nav scroll rather than
   push the page wider (which used to bleed prose off the right edge). The brand
   never shrinks; the nav takes the remaining width and scrolls horizontally. */
@media (max-width:560px){
  .om-header{gap:10px;padding:0 14px;}
  .om-brand{flex:none;}
  .om-nav{
    margin-left:auto;gap:14px;min-width:0;flex:1;justify-content:flex-end;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .om-nav::-webkit-scrollbar{display:none;}
  .om-nav a{padding-top:9px;padding-bottom:9px;}
}
@media (max-width:410px){
  /* tighten so all four links clear the wordmark without tucking under it */
  .om-header{gap:8px;}
  .om-nav{gap:11px;}
  .om-nav a{font-size:.8rem;}
}

/* ---- buttons -------------------------------------------------------------- */
.om-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-2);padding:10px 18px;
  font:600 .95rem/1 var(--font-sans);color:var(--ink);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.om-btn:hover{background:#f4f2ee;border-color:#dcd8d1;text-decoration:none;}
/* primary: accent solid, white text, subtle background-only hover lift */
.om-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.om-btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}
/* compact variant for the app chrome (map/trace top bars): tighter padding */
.om-btn-sm{padding:9px 15px;font-size:.85rem;border-radius:var(--r-2);color:var(--ink-2);}

/* Segmented view switcher (the 2D | 3D toggle on the map pages). */
.om-seg{display:inline-flex;border:2px solid var(--accent);border-radius:999px;overflow:hidden;background:var(--surface);box-shadow:0 1px 4px rgba(79,70,229,.18);}
.om-seg a{padding:9px 18px;font-size:.9rem;font-weight:700;color:var(--accent);text-decoration:none;line-height:1;display:inline-flex;align-items:center;min-height:40px;letter-spacing:.01em;}
.om-seg a.on{background:var(--accent);color:#fff;cursor:default;}
.om-seg a:not(.on):hover,.om-seg a:not(.on):active{background:var(--accent-soft);}

/* ---- app components (promoted from the map's refined local chrome) --------- */
/* the single definitions consumed by the map, trace, and learn app surfaces.  */

/* search / text input: hairline, 10px radius, accent focus ring */
.om-input{
  width:100%;border:1px solid var(--line);border-radius:var(--r-2);
  padding:9px 12px;font:400 .9rem/1.2 var(--font-sans);color:var(--ink);
  background:var(--surface);outline:none;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.om-input::placeholder{color:var(--faint);}
.om-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,.13);}
/* a search field is an input with room for a leading icon */
.om-search{position:relative;display:flex;align-items:center;}
/* the icon is the leading <svg> itself; pin it to its intrinsic 15px so
   display:inline-flex cannot stretch it to fill the field (which pushed the
   glyph into the middle of the input on narrow widths). */
.om-search .om-search-ic{position:absolute;left:11px;color:var(--faint);pointer-events:none;display:inline-flex;width:15px;height:15px;flex:none;}
.om-search .om-input{padding-left:34px;}

/* chip: the code-rail pill. hairline pill; active = accent solid white text;
   the count in .n reads muted. */
.om-chip{
  font-size:.82rem;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;cursor:pointer;white-space:nowrap;flex:none;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.om-chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.om-chip.on,.om-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.om-chip .n{opacity:.55;font-weight:500;margin-left:5px;font-family:var(--font-mono);font-feature-settings:"zero" 1;}
.om-chip.on .n,.om-chip.active .n{opacity:.85;}

/* panel: a floating surface. white, hairline, radius 16, the one allowed
   floating shadow. */
.om-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 44px rgba(22,24,29,.14);padding:20px;
}
/* panel-label: the overline treatment for a panel's section labels */
.om-panel-label{
  font-family:var(--font-sans);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin:17px 0 7px;
}

/* kv rows: label / value provenance lines, values in mono */
.om-kv{display:flex;flex-direction:column;}
.om-kv .om-kv-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:6px 0;font-size:.82rem;border-top:1px solid var(--line);
}
.om-kv .om-kv-row:first-child{border-top:none;}
.om-kv .om-kv-k{color:var(--ink-2);font-weight:500;}
.om-kv .om-kv-v{font-family:var(--font-mono);font-feature-settings:"zero" 1;color:var(--ink);text-align:right;word-break:break-word;}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}