/* ============================================================
   NickAcademy Team Hub 3.0 — bright brand system
   SOURCE OF TRUTH: the official NickAcademy Figma Design System
   (figma.com/design/EhkUSvpZLM9wQh3PWy3s9l, Colors node 1501:10157).
   Every hue below is a DS token — do not invent colors:
     Text #0D244E · Greys 50-950 · Blue(Primary) 50-950, 500=#0085FA
     Teal 500=#00C7EB · Orange 500=#FF8E0A · Purple-Cold 600=#7935F2
     Purple-Warm 700=#9A0EBD · Yellow(Alert) · Green(Success) 600=#039E86
   Fonts follow the production brand: Rubik (he), Fredoka (EN display),
   Nunito (EN body). Class names are contract with app.js.
   ============================================================ */

:root {
  /* DS base */
  --navy: #0d244e;            /* System/Base/Text */
  --text-1: #0d244e;
  --text-2: #414c67;          /* Greys/900 */
  --text-3: #5a688a;          /* Greys/700 darkened: 4.93:1 on --bg-page (was 4.39:1) */
  --bg-page: #edf2f8;         /* Greys/50 */
  --surface: #ffffff;
  --line: #e1ebf8;            /* Greys/100 */
  --line-hi: #c3d3e4;         /* Greys/200 */
  /* DS primaries */
  --blue: #0085fa;            /* Blue/500 */
  --blue-strong: #0062f9;     /* Blue/600 */
  --blue-deep: #0050e3;       /* Blue/700 */
  --blue-soft: #edf8ff;       /* Blue/50 */
  --blue-line: #abdcfd;       /* Blue/200 */
  --teal: #00c7eb;            /* Teal/500 */
  --teal-soft: #eafcfb;       /* Teal/50 */
  --orange-soft: #fff9ec;     /* Orange/50 */
  --grad: linear-gradient(100deg, #0085fa 0%, #00c7eb 100%);
  /* type */
  --font-he: 'Rubik', system-ui, sans-serif;
  --font-display-en: 'Fredoka', 'Rubik', sans-serif;
  --font-en: 'Nunito', 'Rubik', sans-serif;
  /* shape */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --shadow-1: 0 1px 2px rgba(13, 36, 78, 0.05), 0 4px 14px rgba(13, 36, 78, 0.05);
  --shadow-2: 0 4px 10px rgba(13, 36, 78, 0.07), 0 14px 30px rgba(13, 36, 78, 0.1);
  --ease: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out: moves at once, settles softly */
  --t-fast: 0.16s;
  --t-med: 0.2s; /* hover lift is seen tens of times a day: keep it under 300ms */
  --max-w: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-he);
  background: var(--bg-page);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-x: clip;
  font-size: 16px;
  line-height: 1.5;
}
html[lang="en"] body { font-family: var(--font-en); }

/* ---------- Stage: bright layered ground + brand color fields ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 600px at 72% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    var(--bg-page);
}
/* texture comes from the DS blobs + color fields, not a generic grid */
.stage::before, .stage::after { content: none; }
.glow {
  position: fixed;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.glow-a {
  width: 620px; height: 460px;
  top: -200px; inset-inline-end: -100px;
  background: radial-gradient(closest-side, rgba(171, 220, 253, 0.55), transparent 100%); /* Blue/200 */
}
.glow-b {
  width: 540px; height: 440px;
  bottom: -240px; inset-inline-start: -160px;
  background: radial-gradient(closest-side, rgba(255, 226, 165, 0.4), transparent 100%); /* Orange/200 */
}
.glow-c {
  width: 460px; height: 400px;
  top: 34%; inset-inline-start: 44%;
  background: radial-gradient(closest-side, rgba(158, 242, 255, 0.3), transparent 100%); /* Teal/200 */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; background: none; border: none; }
input, select, textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* 1.4/1.5: announced to screen readers, invisible on screen */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: 8px;
  translate: -50% -200%;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  transition: translate var(--t-fast) var(--ease);
}
.skip-link:focus { translate: -50% 0; }
::selection { background: rgba(0, 133, 250, 0.2); }

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: 28px;
}

/* ============ Top bar ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(13, 36, 78, 0.05); }
.topbar-inner { display: flex; align-items: center; gap: 14px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 26px; width: auto; display: block; }
.brand-divider { width: 1px; height: 20px; background: var(--line-hi); }
.brand-app {
  font-family: var(--font-display-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.topbar-spacer { flex: 1; }
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kbd-hint:hover { border-color: var(--blue-line); color: var(--text-1); box-shadow: var(--shadow-1); }
.kbd-hint kbd {
  font-family: inherit;
  font-size: 12px;
  border: 1px solid var(--line-hi);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text-3);
  background: var(--bg-page);
}
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 133, 250, 0.3);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), scale var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-add:hover { background: var(--blue-strong); box-shadow: 0 6px 20px rgba(0, 133, 250, 0.4); }
.btn-add:active { scale: 0.96; }
.btn-add svg { width: 13px; height: 13px; }
.lang-toggle {
  display: flex;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.lang-toggle button {
  font-size: 11.5px;
  font-weight: 600;
  padding: 11px 13px;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ============ Launcher (v4: search is the page) ============ */
.hero { padding: 7vh 0 34px; position: relative; }
.launch-wrap { display: flex; flex-direction: column; align-items: center; }
.greeting {
  margin-bottom: 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.greeting img { height: 22px; margin-inline-end: 4px; }
.greeting .name-btn {
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px dashed var(--line-hi);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease);
}
.greeting .name-btn:hover { color: var(--blue-strong); }
.launcher {
  width: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 36, 78, 0.05), 0 24px 60px -12px rgba(13, 36, 78, 0.2);
  transition: border-color var(--t-med) var(--ease);
}
.launcher:focus-within { border-color: var(--blue-line); }
.search-frame { position: relative; border-bottom: 1px solid var(--line); }
.search-inner { display: flex; align-items: center; gap: 14px; padding-inline: 22px; }
.search-inner > svg { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }
.launch-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: min(440px, 56vh); }
.launch-list {
  position: relative; /* offsetTop anchor for keeping the selection in view */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-inline-end: 1px solid var(--line);
}
.launch-group { font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 12px 12px 6px; }
/* selection follows keys and pointer instantly: it is the highest-frequency
   change in the hub, so it gets no transition at all */
.launch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
}
.launch-item .card-icon { width: 30px; height: 30px; border-radius: 8px; border: 0; }
.launch-item .card-icon svg { width: 17px; height: 17px; }
.launch-name { font-weight: 500; font-size: 14.5px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launch-host {
  margin-inline-start: auto;
  max-width: 45%;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}
.launch-item[aria-selected="true"] { background: var(--blue-soft); }
.launch-item[aria-selected="true"] .launch-host { color: var(--blue-strong); }
.launch-none { padding: 48px 20px; text-align: center; color: var(--text-3); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.launch-none button {
  font-weight: 600; font-size: 13px; color: var(--blue-deep);
  border: 1px solid var(--blue-line); border-radius: 999px; padding: 7px 14px;
  transition: background var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.launch-none button:active { scale: 0.97; }
.launch-preview { padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; }
.lp-top { display: flex; align-items: flex-start; justify-content: space-between; }
.lp-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft, var(--blue-soft));
  color: var(--accent, var(--blue));
  font-size: 26px;
}
.lp-icon svg { width: 28px; height: 28px; }
.lp-name { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--navy); text-wrap: balance; }
html[lang="en"] .lp-name { font-family: var(--font-display-en); font-weight: 600; }
.lp-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.lp-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 12.5px; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-meta dt { color: var(--text-3); }
.lp-meta dd { color: var(--text-1); overflow-wrap: anywhere; line-height: 1.45; }
.lp-meta dd.ltr { direction: ltr; text-align: end; }
.launch-host.txt { direction: inherit; }
.lp-more { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-more a {
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-radius: 999px;
  padding: 4px 10px;
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lp-more a:hover { background: var(--blue-line); } }
a.lp-copy { text-decoration: none; }
html[dir="ltr"] .lp-meta dd.ltr { text-align: start; }
.launch-preview .card-creds { margin-top: 0; }
.lp-actions { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; }
.lp-open, .lp-copy {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.lp-open { background: var(--blue); color: #fff; }
.lp-open kbd { font-family: inherit; font-size: 11px; opacity: 0.8; }
.lp-copy { background: var(--bg-page); color: var(--navy); }
.lp-open:active, .lp-copy:active { scale: 0.97; }
.launch-foot {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: #fafcfe;
  font-size: 12px;
  color: var(--text-3);
}
.launch-foot kbd {
  font-family: inherit;
  font-size: 11.5px;
  border: 1px solid var(--line-hi);
  border-radius: 5px;
  padding: 0 5px;
  margin-inline-end: 2px;
  color: var(--text-2);
  background: var(--surface);
}
.launch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 880px; }
.launch-chips:empty { display: none; }
.launch-chip {
  height: 34px;
  padding-inline: 12px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line-hi);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  transition: border-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.launch-chip svg { width: 15px; height: 15px; color: var(--accent, var(--blue)); }
.launch-chip:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .launch-chip:hover { border-color: var(--accent-line, var(--blue-line)); }
  .lp-open:hover { background: var(--blue-strong); }
  .lp-copy:hover { background: var(--line); }
  .launch-none button:hover { background: var(--blue-soft); }
}
#search {
  flex: 1;
  border: none;
  background: none;
  font-size: 20px;
  font-weight: 500;
  padding: 21px 0;
  color: var(--text-1);
  min-width: 0;
}
#search::placeholder { color: var(--text-3); }
#search:focus { outline: none; }
#search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-end {
  position: relative;
  width: 34px;
  height: 26px;
  flex-shrink: 0;
}
.search-end > .search-clear,
.search-end > .search-kbd {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--t-fast) cubic-bezier(0.2, 0, 0, 1),
              scale var(--t-fast) cubic-bezier(0.2, 0, 0, 1),
              filter var(--t-fast) cubic-bezier(0.2, 0, 0, 1),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-3);
  background: var(--bg-page);
  flex-shrink: 0;
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
  pointer-events: none;
}
/* 5. hit area: the visible dot is 26px, the target is 40px */
.search-clear::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
.search-clear:hover { color: var(--text-1); background: var(--line); }
.search-clear svg { width: 11px; height: 11px; }
.search-frame.has-query .search-clear { opacity: 1; scale: 1; filter: blur(0); pointer-events: auto; }
.search-kbd {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 20px;
  font-size: 12px;
  border: 1px solid var(--line-hi);
  border-radius: 5px;
  padding: 2px 7px;
  color: var(--text-3);
  flex-shrink: 0;
}
.search-frame.has-query .search-kbd,
.search-frame.focused .search-kbd { opacity: 0; scale: 0.25; filter: blur(4px); }

/* ============ Shell: sidebar + content (v5) ============ */
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 36px; align-items: start; }
.shell-main { min-width: 0; }
body:not([data-route="home"]) #home-hero { display: none; }
.sidenav {
  position: sticky;
  top: 58px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 58px);
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.nav-item.is-open { color: var(--navy); font-weight: 600; }
.nav-item[aria-current="page"] { background: var(--surface); color: var(--navy); font-weight: 600; box-shadow: var(--shadow-1); }
.nav-item[aria-current="page"] svg, .nav-item.is-open svg { color: var(--blue); }
.nav-count { margin-inline-start: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
.nav-sub { min-height: 32px; padding-inline-start: 39px; font-size: 13.5px; }
.nav-sep { height: 1px; background: var(--line-hi); margin: 10px 12px; }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, 0.65); color: var(--navy); }
}

/* the launcher on any screen but home: a plain overlay, no entrance motion
   (opened by keyboard dozens of times a day) */
.launcher-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(13, 36, 78, 0.35);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 20px 20px;
}
.launcher-overlay[hidden] { display: none; }

/* ============ Home: four doors ============ */
.doors-section { margin-top: 30px; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.door {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-1);
}
.door-head { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.door-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft, var(--blue-soft));
  color: var(--accent, var(--blue));
  flex-shrink: 0;
}
.door-icon svg { width: 20px; height: 20px; }
.door-title { font-size: 19px; font-weight: 700; transition: color var(--t-fast) var(--ease); }
html[lang="en"] .door-title { font-family: var(--font-display-en); font-weight: 600; }
.door-count { margin-inline-start: auto; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.door-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.door-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.door-subs a {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-page);
  border-radius: 999px;
  padding: 4px 10px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.door-picks { list-style: none; margin-top: auto; }
.door-picks li { border-top: 1px solid var(--line); }
.door-picks a { display: block; padding: 9px 0; font-size: 13.5px; font-weight: 500; color: var(--navy); transition: color var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .door-head:hover .door-title, .door-picks a:hover { color: var(--blue-strong); }
  .door-subs a:hover { background: var(--blue-soft); color: var(--blue-deep); }
}

/* ============ Space screens ============ */
.space-head { padding: 30px 0 2px; }
.space-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); line-height: 1.15; }
html[lang="en"] .space-title { font-family: var(--font-display-en); font-weight: 600; letter-spacing: 0; }
.space-desc { font-size: 15px; color: var(--text-2); margin-top: 6px; max-width: 640px; text-wrap: pretty; }
.sub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sub-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sub-chips a span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sub-chips a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sub-chips a[aria-current="page"] span { color: rgba(255, 255, 255, 0.7); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.fchip {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.fchip:active { scale: 0.97; }
.fchip[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.filter-sep { width: 1px; height: 18px; background: var(--line-hi); margin: 0 6px; }
.filter-empty { padding: 30px 0; color: var(--text-3); font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) {
  .sub-chips a:not([aria-current="page"]):hover { border-color: var(--blue-line); }
  .fchip:not([aria-pressed="true"]):hover { background: var(--surface); }
}

/* people */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-1); }
.person-top { display: flex; align-items: center; gap: 12px; }
.person .avatar { flex-shrink: 0; }
.person-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.person-role { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.person-owns { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 12px; }
.person-reach { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 8px; }
.person-reach b { font-weight: 600; color: var(--text-2); }
.person-mail { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--blue-deep); direction: ltr; }

/* if it breaks */
.fix-group { margin-top: 18px; }
.fix-area { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.fix { border-bottom: 1px solid var(--line); }
.fix summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
}
.fix summary::-webkit-details-marker { display: none; }
.fix summary::after {
  content: "";
  margin-inline-start: auto;
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--text-3); /* physical on purpose: a chevron points down in both directions */
  border-bottom: 1.8px solid var(--text-3);
  rotate: 45deg;
  translate: 0 -2px;
  flex-shrink: 0;
}
.fix[open] summary::after { rotate: -135deg; translate: 0 2px; }
.fix .lp-meta { margin: 0 4px 14px; border-top: 0; padding-top: 0; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .fix summary:hover { color: var(--blue-strong); } }
.crew-band {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px dashed var(--line-hi);
  border-radius: 16px;
  background: var(--surface);
}
.crew-title { font-size: 15px; font-weight: 700; color: var(--blue-deep); }
.crew-note { font-size: 13px; color: var(--text-2); }

/* ============ Sections ============ */
main { flex: 1; width: 100%; padding-bottom: 80px; counter-reset: sec; }
.section { margin-top: 38px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-hi);
  counter-increment: sec;
}
.section-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
html[lang="en"] .section-title { font-family: var(--font-display-en); font-weight: 600; }
.section-title::before {
  content: counter(sec, decimal-leading-zero);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-strong);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: 6px;
  padding: 2px 6px;
  transform: translateY(-2px);
}
.section-count { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.section-note { font-size: 12px; color: var(--text-3); margin-inline-start: auto; }

/* ============ Info band ============ */
.info-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 15px 17px;
  box-shadow: var(--shadow-1);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.panel-title .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
}
.ann-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 13px; }
.ann-item + .ann-item { border-top: 1px solid var(--line); }
.ann-date { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; direction: ltr; }
.ann-text { color: var(--text-2); text-wrap: pretty; }
.ann-text a { color: var(--blue-deep); font-weight: 550; border-bottom: 1px solid var(--blue-line); transition: border-color var(--t-fast) var(--ease); }
.ann-text a:hover { border-color: var(--blue-strong); }
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.recent-item:hover { color: var(--blue-strong); }
.recent-item + .recent-item { border-top: 1px solid var(--line); }
.recent-item .recent-name { font-weight: 600; color: var(--text-1); }
.recent-item:hover .recent-name { color: var(--blue-strong); }
.recent-item .recent-cat { font-size: 12px; color: var(--text-3); margin-inline-start: auto; flex-shrink: 0; }

/* ============ Quick access — tinted brand tiles ============ */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.qa-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--accent-soft, var(--blue-soft));
  border: 1px solid var(--accent-line, var(--blue-line));
  border-radius: 27px; /* concentric: 12px icon + 15px padding */
  padding: 15px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              translate var(--t-med) var(--ease), scale var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .qa-card:hover { border-color: var(--accent, var(--blue)); box-shadow: var(--shadow-2); translate: 0 -3px; }
}
.qa-card:active { scale: 0.98; } /* large surface: a smaller squeeze reads as the same press */
.qa-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--accent, var(--blue));
  background: var(--surface);
  border: 1px solid var(--accent-line, var(--blue-line));
  box-shadow: 0 2px 6px rgba(13, 36, 78, 0.06);
}
.qa-icon svg { width: 21px; height: 21px; }
.qa-body { flex: 1; min-width: 0; }
.qa-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[lang="en"] .qa-name { font-family: var(--font-display-en); font-weight: 600; }
.qa-desc {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-arrow { width: 16px; height: 16px; color: var(--accent, var(--blue)); flex-shrink: 0; }
html[dir="rtl"] .qa-arrow { transform: scaleX(-1); }
.qa-arrow, .card-open .arrow { transition: translate var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .qa-card:hover .qa-arrow, .card:hover .card-open .arrow { translate: 3px 0; }
  html[dir="rtl"] .qa-card:hover .qa-arrow,
  html[dir="rtl"] .card:hover .card-open .arrow { translate: -3px 0; }
}

/* ============ Grid & resource cards ============ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px; /* concentric: 10px icon + 14px padding */
  padding: 14px 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              translate var(--t-med) var(--ease), scale var(--t-fast) var(--ease);
}
.card::after {
  /* accent top bar, revealed on hover */
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent, var(--blue));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.card.kb-active { border-color: var(--accent-line, var(--blue-line)); box-shadow: var(--shadow-2); translate: 0 -3px; }
.card.kb-active::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--accent-line, var(--blue-line)); box-shadow: var(--shadow-2); translate: 0 -3px; }
  .card:hover::after { opacity: 1; }
}
.card:active { scale: 0.98; }
/* 4: arrow-key navigation is repeated fast; it must land instantly, never animate */
.kb-nav .card, .kb-nav .card::after { transition: none; }
.card.kb-active { border-color: var(--accent, var(--blue)); }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  color: var(--accent, var(--blue));
  background: var(--accent-soft, var(--blue-soft));
  border: 1px solid var(--accent-line, var(--blue-line));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.card-icon svg { width: 17px; height: 17px; }
.card-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  text-wrap: balance;
  flex: 1;
  min-width: 0;
}
.star-btn {
  position: relative;
  padding: 6px;
  margin: -6px;
  color: #7d8ba5; /* 3.44:1 on white; --line-hi measured 1.53:1 and read as invisible */
  border-radius: 8px;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.star-btn svg { width: 16px; height: 16px; display: block; }
.star-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .star-btn:hover { color: #e29400; transform: scale(1.12); } /* Yellow/600 */
}
.star-btn:active { transform: scale(0.92); }
.star-btn[aria-pressed="true"] { color: #ffc30f; } /* Yellow/500 */
.star-btn[aria-pressed="true"] svg path { fill: currentColor; stroke: #e29400; }
.card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.chip {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  color: var(--text-2);
  white-space: nowrap;
}
.chip-live { color: #027e6b; border-color: #92fde1; background: #effefa; }       /* Green 700, 4.82:1 */
.chip-demo { color: #9a5602; border-color: #ffee87; background: #ffffea; }       /* Yellow 800, 5.60:1 */
.chip-internal { color: var(--text-2); background: var(--bg-page); }
.chip-sales { color: var(--blue-deep); border-color: var(--blue-line); background: var(--blue-soft); }
.chip-mine { color: #800e9a; border-color: #f3ccff; background: #fdf3ff; }       /* Purple-warm 800/200/50 */
.card-owner { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-actions { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 27px; height: 27px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--text-1); background: var(--bg-page); }
.icon-btn:active { scale: 0.96; }
/* hit area: 27px visible, 32x40 target (stops short of the 6px sibling gap) */
.icon-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 40px;
  transform: translate(-50%, -50%);
}
.icon-btn svg {
  grid-area: 1 / 1;
  width: 14px; height: 14px;
  transition: opacity var(--t-med) cubic-bezier(0.2, 0, 0, 1), scale var(--t-med) cubic-bezier(0.2, 0, 0, 1), filter var(--t-med) cubic-bezier(0.2, 0, 0, 1);
}
/* copy -> check cross-fade, both glyphs stay in the DOM */
.icon-btn .ic-check { opacity: 0; scale: 0.25; filter: blur(4px); }
.icon-btn.copied .ic-copy { opacity: 0; scale: 0.25; filter: blur(4px); }
.icon-btn.copied .ic-check { opacity: 1; scale: 1; filter: blur(0); }
.icon-btn.copied { color: #039e86; }
.card-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, var(--blue-strong));
  padding: 5px 10px;
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease);
}
.card-open:hover { background: var(--accent-soft, var(--blue-soft)); }
/* 4.2: the anchor stretches over the whole card, so mouse users keep the large
   target while keyboard users get one real link instead of an unreachable div.
   The overlay must resolve against .card, so nothing in between may be
   positioned; the two real buttons are lifted above it instead. */
.card-open::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card-top, .card-desc, .card-foot, .card-actions, .card-open { position: static; }
.card .star-btn, .card .icon-btn { position: relative; z-index: 2; }
.card-open svg { width: 12px; height: 12px; }
html[dir="rtl"] .card-open .arrow { transform: scaleX(-1); }

/* ============ Shortcuts ============ */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px; /* concentric: 8px icon + 10px padding */
  padding: 10px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              translate var(--t-med) var(--ease), scale var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .shortcut:hover { border-color: var(--accent-line, var(--blue-line)); box-shadow: var(--shadow-2); translate: 0 -3px; }
}
.shortcut:active { scale: 0.98; }
.shortcut .card-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.shortcut .card-icon svg { width: 14px; height: 14px; }
.shortcut-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.shortcuts-empty {
  font-size: 12.5px;
  color: var(--text-3);
  border: 1.5px dashed var(--line-hi);
  border-radius: var(--r-m);
  padding: 15px 17px;
  background: rgba(255, 255, 255, 0.5);
}

/* ============ Demo accounts ============ */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 23px; /* concentric: 10px avatar + 13px padding */
  padding: 13px 15px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.account-card:hover, .account-card.open { border-color: var(--blue-line); }
.account-card.open { box-shadow: var(--shadow-2); }
.account-top { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  border: 1px solid var(--blue-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.account-title { flex: 1; min-width: 0; }
.account-name { font-size: 13.5px; font-weight: 700; color: var(--navy); direction: ltr; text-align: start; }
html[dir="rtl"] .account-name { text-align: right; }
.account-note { font-size: 12px; color: var(--text-3); }
.account-toggle {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-strong);
  padding: 6px 12px;
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.account-toggle:hover { background: var(--blue-soft); border-color: var(--blue); }
.account-details {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.account-details[hidden] { display: none; }
.account-details > * { min-width: 0; }
.cred-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: var(--bg-page);
  border-radius: 8px;
  padding: 6px 10px;
}
.cred-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  width: 74px;
  flex-shrink: 0;
}
html[lang="he"] .cred-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cred-value {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: var(--navy);
  direction: ltr;
  text-align: left;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  -webkit-user-select: all;
}
.account-foot { margin-top: 2px; }
.pair-copy {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-deep);
  border-bottom: 1px dashed var(--blue-line);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pair-copy:hover { color: var(--blue-strong); border-color: var(--blue-strong); }

/* ============ Empty state ============ */
.empty { display: none; padding: 26px 0 40px; }
.empty.show { display: block; }
.empty-panel {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 34px 28px 28px;
  box-shadow: var(--shadow-1);
}
.empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-strong);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
}
.empty-icon svg { width: 22px; height: 22px; }
.empty-title { font-size: 16.5px; font-weight: 700; color: var(--navy); text-wrap: balance; }
html[lang="en"] .empty-title { font-family: var(--font-display-en); font-weight: 600; }
.empty-text { margin-top: 6px; font-size: 13px; color: var(--text-2); text-wrap: pretty; }
.empty button {
  margin-top: 18px;
  border: 1px solid var(--blue-line);
  color: var(--blue-strong);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.empty button:hover { border-color: var(--blue); background: var(--blue-soft); }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(13, 36, 78, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 40px;
  overflow-y: auto;
  /* closed = invisible and out of the tab order; exit is quicker than entry */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms var(--ease), visibility 0s linear 150ms;
}
.modal-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease), visibility 0s;
}
.modal {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(13, 36, 78, 0.25);
  transform: translateY(8px) scale(0.98);
  transition: transform 150ms var(--ease);
}
.modal-backdrop.show .modal { transform: none; transition-duration: 260ms; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--blue-soft);
}
.modal-title { font-size: 15.5px; font-weight: 700; color: var(--navy); text-wrap: balance; }
.modal-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; text-wrap: pretty; }
.modal-close {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.modal-close:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.8); }
.modal-close svg { width: 13px; height: 13px; }
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.modal-body { padding: 18px 20px; display: grid; gap: 14px; }

/* record-type switch */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-page);
  justify-self: start;
}
.mode-toggle button {
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mode-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.modal-body [data-only].is-hidden { display: none; }

/* access details */
.cred-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px 14px 14px;
  background: var(--bg-page);
  display: grid;
  gap: 10px;
}
.cred-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  padding-inline: 6px;
}
.cred-note { font-size: 12px; color: var(--text-3); text-wrap: pretty; }
.cred-fieldset .field input { background: var(--surface); }

/* credentials shown on a resource card */
.card-creds { margin-top: 2px; position: relative; z-index: 2; }
.creds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  border: 1px solid var(--line-hi);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.creds-toggle:hover { border-color: var(--blue-line); color: var(--text-1); }
.creds-toggle:active { scale: 0.96; }
.creds-toggle svg { width: 11px; height: 11px; transition: rotate var(--t-fast) var(--ease); }
.creds-toggle[aria-expanded="true"] svg { rotate: 180deg; }
.card-creds .cred-list { display: grid; gap: 7px; margin-top: 9px; }
.card-creds .cred-list[hidden] { display: none; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.field input, .field select, .field textarea {
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-s);
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--text-1);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 133, 250, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
/* 1.3: the error lives next to the field it belongs to, not only in a toast */
.field-error {
  font-size: 12px;
  font-weight: 600;
  color: #c2140c; /* Red 700, 5.9:1 on white */
  display: none;
}
.field-error.show { display: block; }
.field input[aria-invalid="true"] { border-color: #c2140c; }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 20, 12, 0.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 133, 250, 0.3);
  transition: background var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.btn-primary:hover { background: var(--blue-strong); }
.btn-primary:active { scale: 0.96; }
.btn-ghost {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--text-3); }
.modal-foot .spacer { flex: 1; }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 26px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 34px rgba(13, 36, 78, 0.3);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
.toast.show { transition-duration: 250ms; }
html[dir="rtl"] .toast { transform: translateX(50%) translateY(12px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
html[dir="rtl"] .toast.show { transform: translateX(50%) translateY(0); }

/* ============ Footer ============ */
footer { border-top: 1px solid var(--line-hi); padding: 16px 0; margin-top: 20px; background: var(--surface); }
.footer-inner { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.footer-inner img { height: 18px; opacity: 0.8; }
.footer-inner .spacer { flex: 1; }

/* ============ Motion fallbacks ============ */
@media (prefers-reduced-motion: reduce) {
  /* fewer and gentler, not zero: fades and color changes stay because they
     explain what changed; anything that moves or scales is removed */
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .card, .card:hover, .card:active, .card.kb-active,
  .qa-card, .qa-card:hover, .qa-card:active,
  .shortcut, .shortcut:hover, .shortcut:active,
  .qa-arrow, .card-open .arrow,
  .btn-add:active, .btn-primary:active, .icon-btn:active, .creds-toggle:active { translate: none !important; scale: none !important; }
  .star-btn, .modal { transform: none !important; }
  .toast, .toast.show { transform: translateX(-50%) !important; }
  html[dir="rtl"] .toast, html[dir="rtl"] .toast.show { transform: translateX(50%) !important; }
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  .sidenav {
    top: 54px;
    z-index: 30;
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    padding: 10px 0;
    gap: 6px;
    background: var(--bg-page);
    scrollbar-width: none;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .nav-subs, .nav-sep { display: none; }
  .nav-item { white-space: nowrap; min-height: 36px; flex-shrink: 0; }
  .nav-item.is-open { background: var(--surface); box-shadow: var(--shadow-1); }
  .doors { grid-template-columns: 1fr; }
  .info-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .topbar-inner { height: 54px; gap: 8px; }
  .brand img { height: 22px; }
  .kbd-hint { display: none; }
  .btn-add span { display: none; }
  .btn-add { padding: 15px 16px; }
  .hero { padding-top: 22px; }
  .launch-split { grid-template-columns: 1fr; height: auto; max-height: 52vh; }
  .launch-list { border-inline-end: 0; }
  .launch-preview, .launch-foot { display: none; }
  .launch-host { display: none; } /* the name needs the width on a phone */
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .qa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qa-desc { display: none; }
  .qa-card { padding: 12px 13px; gap: 10px; }
  .qa-icon { width: 34px; height: 34px; }
  .shortcut-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  #search { font-size: 16px; /* prevents iOS zoom */ }
}
@media (max-width: 400px) {
  .qa-grid { grid-template-columns: 1fr; }
}