/* ==================================================================
   AISO MATTER ∞ - "The Interface of Discovery" (loaded last)
   Design tokens
     radius   --pt-r-s 8px · --pt-r-m 12px · --pt-r-l 16px · --pt-r-xl 22px
     spacing  --pt-sp-1 4px · -2 8px · -3 12px · -4 16px · -5 24px · -6 32px
     motion   --pt-dur-btn 130ms · --pt-dur-hover 170ms · --pt-dur-panel 320ms · --pt-dur-persp 480ms · --pt-ease
     colour   --pt-bg / --pt-surface / --pt-surface2 / --pt-line / --pt-text / --pt-muted / --pt-accent + family --cat-*
   Components: .pt-topbar (MatterTopBar), .pt-crumbs, .pt-searchbtn (MatterSearchInput), .pt-seg (MatterSegmentedControl),
   .pt-iconbtn (MatterIconButton), .pt-btn (MatterButton), .pt-worlds (MatterDock), .pt-pal (MatterCommandPalette),
   #ptPanel (MatterInspector / MatterBottomSheet), .pt-vf (MatterVisualizationFrame), .pt-toast (MatterNotification),
   .pt-empty (MatterEmptyState), .pt-settings, .pt-legend (MatterLegend), .pt-el (MatterElementTile), .pt-wcard (MatterElementCard)
   ================================================================== */
html[page="periodic"] {
  --pt-r-s: 8px; --pt-r-m: 12px; --pt-r-l: 16px; --pt-r-xl: 22px;
  --pt-sp-1: 4px; --pt-sp-2: 8px; --pt-sp-3: 12px; --pt-sp-4: 16px; --pt-sp-5: 24px; --pt-sp-6: 32px;
  --pt-dur-btn: 130ms; --pt-dur-hover: 170ms; --pt-dur-panel: 320ms; --pt-dur-persp: 480ms;
  --pt-ease: cubic-bezier(.2, .7, .2, 1);
}
.pt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; }

/* the AISO site navigation, compacted on this page only so the scientific canvas gets the screen */
@media (min-width: 1181px) {
  html[page="periodic"] .rd-navbar-brand img { width: 150px !important; height: auto !important; }
  html[page="periodic"] .rd-navbar-main { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
  html[page="periodic"] .rd-navbar-main-outer { padding: 0 !important; }
  html[page="periodic"] .rd-navbar-nav > li > a { padding-top: 10px !important; padding-bottom: 10px !important; }
  html[page="periodic"] .language-dropdown { display: flex !important; gap: 14px; align-items: center; }
  html[page="periodic"] .language-option { padding: 0 !important; margin: 0 !important; }
  html[page="periodic"] .page-header, html[page="periodic"] .rd-navbar-wrap { min-height: 0 !important; height: auto !important; }
}

.pt-app { padding-top: 14px; padding-bottom: 110px; }
.pt-app .pt-btn { transition: border-color var(--pt-dur-btn), color var(--pt-dur-btn), background var(--pt-dur-btn), transform var(--pt-dur-btn); }
.pt-app .pt-btn:active { transform: translateY(1px); }

/* REGION A - top bar */
.pt-topbar { position: sticky; top: var(--pt-top, 0px); z-index: 60; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 10px; margin: 0 0 12px; border-radius: var(--pt-r-l); background: rgba(13, 18, 27, 0.88); border: 1px solid var(--pt-line); backdrop-filter: blur(10px); }
.pt-logo { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 8px; text-decoration: none !important; }
.pt-logo b { font: 600 17px/1 "IBM Plex Sans", sans-serif; letter-spacing: 3px; color: #fff; }
.pt-logo i { font-style: normal; font: 300 20px/1 "IBM Plex Sans", sans-serif; background: linear-gradient(90deg, #c9dbff, #8fb8ff 60%, #a98bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--pt-muted); flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
.pt-crumbs a { color: #c9d1dd !important; text-decoration: none !important; padding: 3px 6px; border-radius: 6px; }
.pt-crumbs a:hover { background: rgba(255, 255, 255, .05); color: #fff !important; }
.pt-crumbs span { color: var(--pt-faint); }
.pt-crumbs b { color: #fff; font-weight: 500; padding: 3px 6px; border-radius: 6px; background: color-mix(in oklab, var(--c) 16%, transparent); }
.pt-searchbtn { flex: 1 1 260px; max-width: 460px; margin-left: auto; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--pt-line2); background: var(--pt-surface); color: var(--pt-faint); cursor: pointer; font: 400 13.5px "IBM Plex Sans", sans-serif; text-align: left; transition: border-color var(--pt-dur-hover); }
.pt-searchbtn:hover, .pt-searchbtn:focus-visible { border-color: rgba(143, 184, 255, .6); color: #c9d1dd; outline: none; }
.pt-searchbtn svg, .pt-iconbtn svg, .pt-worlds svg, .pt-persp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.pt-searchbtn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-searchbtn kbd, .pt-pal kbd { font: 500 10.5px "IBM Plex Mono", monospace; padding: 2px 6px; border: 1px solid var(--pt-line2); border-radius: 5px; color: var(--pt-muted); }
.pt-depth .pt-btn { padding: 6px 9px; }
.pt-iconbtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--pt-line2); background: var(--pt-surface); color: #c9d1dd; cursor: pointer; transition: border-color var(--pt-dur-btn), color var(--pt-dur-btn); }
.pt-iconbtn:hover, .pt-iconbtn[aria-expanded="true"] { color: #fff; border-color: rgba(143, 184, 255, .55); }
.pt-iconbtn:focus-visible, .pt-searchbtn:focus-visible, .pt-worlds button:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
.pt-settings { position: absolute; right: 8px; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: var(--pt-r-l); background: #0f141e; border: 1px solid var(--pt-line2); box-shadow: 0 24px 60px -20px #000; z-index: 70; }
.pt-settings h5 { margin: 0 0 12px !important; font: 500 14px "IBM Plex Sans", sans-serif !important; color: #fff !important; text-transform: none !important; }
.pt-set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #c9d1dd; }

/* perspective switcher (sub-navigation inside a world) */
.pt-persp { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 12px; width: max-content; max-width: 100%; border-radius: var(--pt-r-m); }
.pt-persp[hidden] { display: none; }
.pt-persp button { flex: 0 0 auto; min-width: 0; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; }
.pt-persp .pt-back { color: var(--pt-muted); }
.pt-persp .pt-surprise { color: #ffd166; }
#ptDimTitle b { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pt-accent); }
.pt-filterchip { display: none; border: 1px solid rgba(143, 184, 255, .5); background: rgba(143, 184, 255, .1); color: #dfe6f0; border-radius: 99px; padding: 5px 12px; font: 500 12px "IBM Plex Mono", monospace; cursor: pointer; }
.pt-filterchip:not(:empty) { display: inline-flex; }
.pt-filterchip:not(:empty)::after { content: " ✕"; margin-left: 6px; color: var(--pt-muted); }
.pt-app[data-dim="temp"] .pt-modesrow { display: none; }

/* REGION D - the discovery dock */
.pt-worlds { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; display: flex; gap: 2px; padding: 5px; border-radius: 18px; background: rgba(14, 19, 29, 0.9); border: 1px solid var(--pt-line2); box-shadow: 0 18px 50px -18px #000; backdrop-filter: blur(12px); }
.pt-worlds button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 8px 10px 7px; border: 0; border-radius: 13px; background: transparent; color: var(--pt-muted); cursor: pointer; font: 500 11.5px "IBM Plex Sans", sans-serif; transition: background var(--pt-dur-hover), color var(--pt-dur-hover); }
.pt-worlds button svg { width: 22px; height: 22px; }
.pt-worlds button:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.pt-worlds button.is-on { color: #fff; background: linear-gradient(180deg, #1f2940, #172033); box-shadow: inset 0 0 0 1px rgba(143, 184, 255, .35); }
.pt-worlds button.is-on svg { stroke: #8fb8ff; }

/* learning depth: complexity reveals itself on request */
.pt-app[data-depth="discover"] [data-depth-min="understand"], .pt-app[data-depth="discover"] [data-depth-min="expert"], .pt-app[data-depth="understand"] [data-depth-min="expert"] { display: none !important; }
.pt-app:not([data-depth="discover"]) [data-depth-only="discover"] { display: none !important; }
.pt-discover-line { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--pt-r-m); background: color-mix(in oklab, var(--c) 9%, #0f141d); border: 1px solid color-mix(in oklab, var(--c) 30%, transparent); font-size: 15px; line-height: 1.6; color: #e3e8ef; }
.pt-explore-cta { margin-top: 14px; padding: 12px; border-radius: var(--pt-r-m); background: linear-gradient(135deg, color-mix(in oklab, var(--c) 14%, #121a28), #0f141d); border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); }
.pt-explore-cta > span { display: block; margin-bottom: 8px; font: 500 10.5px "IBM Plex Mono", monospace; letter-spacing: 1.6px; text-transform: uppercase; color: #dfe6f0; }
.pt-explore-cta > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pt-explore-cta .pt-btn { justify-content: center; padding: 8px 4px; font-size: 12px; }

/* adjustable text size, applied to reading surfaces */
.pt-panel-inner, .pt-dimside, .pt-stu-inner, .pt-card, .pt-wall, .pt-journal { zoom: var(--pt-ts, 1); }
.pt-reduce *, .pt-reduce *::before, .pt-reduce *::after { transition-duration: 0s !important; animation: none !important; }

/* inspector: collapse to a rail (desktop) */
.pt-collapse { margin-left: 6px; padding: 7px 9px; }
.pt-rail { display: none; }
@media (min-width: 1181px) {
  .pt-app.is-open.panel-min .pt-stage { grid-template-columns: minmax(0, 1fr) 54px; }
  .pt-app.panel-min .pt-panel .pt-panel-inner { display: none; }
  .pt-app.panel-min .pt-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 16px 0; border: 0; background: transparent; color: #fff; cursor: pointer; font: 600 18px "IBM Plex Sans", sans-serif; }
  .pt-app.panel-min .pt-rail span { font-size: 14px; color: var(--pt-muted); }
}
@media (max-width: 1180px) { .pt-collapse { display: none; } }

/* mobile bottom sheet handle */
.pt-sheet-handle { display: none; }
@media (max-width: 1180px) {
  .pt-sheet-handle { display: block; height: 26px; margin: -4px 0 -10px; cursor: grab; touch-action: none; position: relative; z-index: 2; }
  .pt-sheet-handle::after { content: ""; position: absolute; left: 50%; top: 10px; width: 46px; height: 5px; margin-left: -23px; border-radius: 5px; background: #3a4558; }
  .pt-panel-inner::before { display: none !important; }
  .pt-app.sheet-full .pt-panel { max-height: 94vh; }
}

/* first visit: the empty inspector is an invitation */
.pt-overlay .pt-insp.is-empty { pointer-events: auto; }
.pt-welcome { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1cqi, 16px); height: 100%; padding: 0 clamp(4px, 1cqi, 18px); }
.pt-welcome h3 { margin: 0 !important; font: 300 clamp(20px, 2.3cqi, 36px)/1.1 "IBM Plex Sans", sans-serif !important; color: #fff !important; text-transform: none !important; letter-spacing: -.5px; }
.pt-welcome p { margin: 6px 0 0; color: var(--pt-muted); font-size: clamp(12px, 1cqi, 15px); }
.pt-welcome-act { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-welcome-act .pt-btn { padding: 9px 12px; font-size: clamp(11.5px, .95cqi, 13.5px); }
.pt-welcome-act .pt-btn small { margin-left: 6px; color: #ffd166; font-weight: 500; }
.pt-welcome-k { font: 400 11px "IBM Plex Mono", monospace !important; color: var(--pt-faint) !important; }
.pt-welcome.is-first h3 { animation: pt-rise .8s var(--pt-ease) both; }
@keyframes pt-rise { from { opacity: 0; transform: translateY(10px); } }

/* empty states */
.pt-empty { padding: 34px 24px; border-radius: var(--pt-r-l); border: 1px dashed var(--pt-line2); text-align: center; background: radial-gradient(ellipse at 50% 0, rgba(143, 184, 255, .07), transparent 70%); }
.pt-empty h4 { margin: 0 0 6px !important; font: 400 20px "IBM Plex Sans", sans-serif !important; color: #fff !important; text-transform: none !important; }
.pt-empty p { color: var(--pt-muted); font-size: 14px; margin: 0 0 14px; }
.pt-empty-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pt-journal { padding: 4px 0 30px; }
.pt-journal-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.pt-journal-top p { margin: 0; color: var(--pt-muted); font-size: 13.5px; }
.pt-jcard { min-height: 170px; }

/* command palette */
.pt-pal { position: fixed; inset: 0; z-index: 100001; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(4, 6, 10, 0); transition: background var(--pt-dur-panel); font-family: "IBM Plex Sans", "Noto Sans Georgian", sans-serif; }
.pt-pal.is-on { background: rgba(4, 6, 10, .62); }
.pt-pal[hidden] { display: none; }
.pt-pal-box { width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 18px; background: #0f141e; border: 1px solid rgba(160, 180, 210, .25); box-shadow: 0 40px 90px -30px #000; overflow: hidden; transform: translateY(-8px) scale(.985); opacity: 0; transition: transform var(--pt-dur-panel) var(--pt-ease), opacity var(--pt-dur-panel); }
.pt-pal.is-on .pt-pal-box { transform: none; opacity: 1; }
.pt-pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(160, 180, 210, .14); color: #8c97a8; }
.pt-pal-in svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pt-pal-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: 400 17px "IBM Plex Sans", sans-serif; }
.pt-pal-x { border: 1px solid rgba(160, 180, 210, .25); background: transparent; color: #8c97a8; border-radius: 6px; padding: 3px 7px; font: 500 11px "IBM Plex Mono", monospace; cursor: pointer; }
.pt-pal-list { overflow: auto; padding: 6px; }
.pt-pal-g > span { display: block; padding: 10px 10px 4px; font: 500 10.5px "IBM Plex Mono", monospace; letter-spacing: 1.4px; text-transform: uppercase; color: #5d6778; }
.pt-pal-it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: #dfe6f0; }
.pt-pal-it b { font-weight: 500; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-pal-it em { font: normal 400 12px "IBM Plex Mono", monospace; color: #8c97a8; white-space: nowrap; }
.pt-pal-it i { --c: #888; font-style: normal; width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font: 600 13px "IBM Plex Sans", sans-serif; color: color-mix(in oklab, var(--c) 45%, #fff); background: color-mix(in oklab, var(--c) 16%, #0f141d); border: 1px solid color-mix(in oklab, var(--c) 40%, transparent); }
.pt-pal-it[aria-selected="true"], .pt-pal-it:hover { background: #1a2333; }
.pt-pal-it[aria-selected="true"] { box-shadow: inset 2px 0 0 #8fb8ff; }
.pt-pal-none { padding: 26px 16px; color: #8c97a8; font-size: 14px; text-align: center; }
.pt-pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid rgba(160, 180, 210, .14); font: 400 11px "IBM Plex Mono", monospace; color: #5d6778; }

/* notifications */
.pt-toast { position: fixed; left: 50%; bottom: 104px; z-index: 100002; max-width: min(560px, calc(100vw - 32px)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 12px; background: #141b29; border: 1px solid rgba(143, 184, 255, .35); color: #e3e8ef; font: 400 13.5px/1.5 "IBM Plex Sans", sans-serif; box-shadow: 0 18px 40px -16px #000; transition: opacity var(--pt-dur-panel, 320ms), transform var(--pt-dur-panel, 320ms) cubic-bezier(.2, .7, .2, 1); }
.pt-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* MatterVisualizationFrame */
.pt-vf-host { position: relative; }
.pt-vf { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(10, 14, 21, .72); border: 1px solid var(--pt-line); }
.pt-vf button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #c9d1dd; cursor: pointer; font: 500 14px "IBM Plex Mono", monospace; display: inline-flex; align-items: center; justify-content: center; }
.pt-vf button:hover, .pt-vf button[aria-expanded="true"] { background: rgba(143, 184, 255, .16); color: #fff; }
.pt-vf-t { padding: 0 8px; font: 500 11px "IBM Plex Mono", monospace; color: #dfe6f0; }
.pt-vf-info { position: absolute; right: 10px; top: 50px; z-index: 5; max-width: min(360px, 80%); padding: 12px 14px; border-radius: 12px; background: rgba(13, 18, 28, .95); border: 1px solid var(--pt-line2); font-size: 12.5px; line-height: 1.55; color: #c9d1dd; }
.pt-vf-host.is-full { background: #07090e !important; display: flex; flex-direction: column; justify-content: center; }
.pt-vf-host.is-full canvas { width: 100% !important; height: 100% !important; }
.pt-stage.is-presenting, .pt-app.is-presenting .pt-stage:fullscreen { background: #0a0e15; padding: 3vh 3vw; overflow: auto; }
.pt-stage:fullscreen { background: #0a0e15; padding: 3vh 3vw; overflow: auto; }

/* old top dock styling no longer applies to the perspective bar */
.pt-persp.pt-dock { overflow-x: auto; }
.pt-persp.pt-dock button { min-width: 0; }

/* phones: bottom navigation bar, compact top bar */
@media (max-width: 720px) {
  .pt-app { padding-bottom: 96px; }
  .pt-topbar { gap: 8px; padding: 8px; }
  .pt-crumbs { order: 5; flex: 1 1 100%; }
  .pt-searchbtn { order: 2; flex: 1 1 auto; margin-left: 0; }
  .pt-searchbtn kbd { display: none; }
  .pt-depth { order: 6; width: 100%; }
  .pt-depth .pt-btn { flex: 1; }
  .pt-worlds { left: 0; right: 0; bottom: 0; transform: none; border-radius: 16px 16px 0 0; justify-content: space-around; padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); }
  .pt-worlds button { min-width: 0; flex: 1; padding: 7px 2px 5px; font-size: 10.5px; }
  .pt-toast { bottom: 84px; }
  .pt-explore-cta > div { grid-template-columns: repeat(3, 1fr); }
  .pt-app.is-open .pt-worlds { display: none; }
}

/* the site wrapper clips overflow; `clip` keeps that visual behaviour without breaking position: sticky */
html[page="periodic"] .page { overflow: clip !important; }