/* =========================================================
   M.A.P — MODERN THEME  //  theme-modern.css

   Direction: a typeset document, not a portfolio template.
   One column, real reading measure, serif for prose and heads,
   grotesk for interface. No glass, no gradient wash, no glow,
   no decorative ornament — the content is the composition.

   Active only when <html data-theme="modern">, in either
   data-mode="dark" (default) or data-mode="light".
   Loaded after styles.css / tools.css on every page.
   ========================================================= */

/* ---------------------------------------------------------
   0 · SKIN GATES
   Blocks written for one skin only. Base state is the HUD, so
   modern-only markup starts hidden and is revealed below.
   --------------------------------------------------------- */
.m-only { display: none; }
[data-theme="modern"] .hud-only { display: none !important; }
[data-theme="modern"] .m-only { display: block; }
[data-theme="modern"] ul.toolgrid { display: grid; }

/* ---------------------------------------------------------
   1 · TOKENS
   Component CSS reads these, so the two mode blocks are the
   whole of light/dark. Nothing below them hardcodes a colour.
   --------------------------------------------------------- */
:root[data-theme="modern"] {
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --measure: 66ch;    /* reading width for prose */
  --wide:    980px;   /* page container */
  --gutter:  clamp(20px, 5vw, 56px);
  --nav-h:   60px;
  --r:       8px;
  --r-sm:    6px;

  --glow:   0 0 0 rgba(0, 0, 0, 0);
  --tele-h: 0px;
}

/* ---- DARK ---- */
:root[data-theme="modern"],
:root[data-theme="modern"][data-mode="dark"] {
  --bg:        #121211;
  --bg-2:      #121211;
  --surface:   #121211;
  --surface-2: #1b1b19;
  --elev:      #1b1b19;
  --code-bg:   #1a1a18;

  --line:      rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  --text:      #c6c3bc;
  --text-dim:  #8c8981;
  --white:     #f3f1ed;   /* ink */

  --cyan:      #90b2ff;   /* accent — links and focus only */
  --cyan-dim:  #8c8981;
  --teal:      #78c79a;
  --magenta:   #e78aa6;
  --amber:     #d9ad63;
  --on-accent: #10131c;
  --on-ink:    #121211;

  --panel: transparent; --panel-2: #1b1b19; --card: transparent;
  --focus: #90b2ff;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ---- LIGHT ---- */
:root[data-theme="modern"][data-mode="light"] {
  --bg:        #f7f6f3;
  --bg-2:      #f7f6f3;
  --surface:   #f7f6f3;
  --surface-2: #ffffff;
  --elev:      #ffffff;
  --code-bg:   #efedE8;

  --line:      rgba(23, 22, 20, 0.15);
  --line-soft: rgba(23, 22, 20, 0.08);

  --text:      #3d3b37;
  --text-dim:  #736f68;
  --white:     #171614;   /* ink */

  --cyan:      #2446a8;
  --cyan-dim:  #736f68;
  --teal:      #2c6b48;
  --magenta:   #a33a60;
  --amber:     #86610f;
  --on-accent: #ffffff;
  --on-ink:    #f7f6f3;

  --panel: transparent; --panel-2: #ffffff; --card: transparent;
  --focus: #2446a8;
  --shadow: 0 16px 40px rgba(28, 24, 20, 0.10);
  --shadow-sm: 0 4px 14px rgba(28, 24, 20, 0.07);
}

/* ---------------------------------------------------------
   2 · CANVAS — flat paper, no ornament
   --------------------------------------------------------- */
[data-theme="modern"] body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
[data-theme="modern"] ::selection { background: var(--cyan); color: var(--on-accent); }
[data-theme="modern"] * { scrollbar-color: var(--line) transparent; }
[data-theme="modern"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="modern"] ::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}

[data-theme="modern"] #starfield,
[data-theme="modern"] .scanlines,
[data-theme="modern"] .fx-scan,
[data-theme="modern"] .vignette,
[data-theme="modern"] .fx-aurora,
[data-theme="modern"] .grid-overlay,
[data-theme="modern"] .hud-frame,
[data-theme="modern"] .hud-tele,
[data-theme="modern"] .boot,
[data-theme="modern"] .bracket,
[data-theme="modern"] .entry__node,
[data-theme="modern"] .edu__icon,
[data-theme="modern"] .section__idx { display: none !important; }
[data-theme="modern"] .nav::after,
[data-theme="modern"] .sys::after,
[data-theme="modern"] .cert::after,
[data-theme="modern"] .tcard::after,
[data-theme="modern"] .btn--primary::after { content: none; }

[data-theme="modern"] .skip-link {
  background: var(--white); color: var(--on-ink);
  border-radius: var(--r-sm); box-shadow: none;
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0;
}

/* ---------------------------------------------------------
   3 · TYPE RESET — undo the all-caps mono HUD voice once
   --------------------------------------------------------- */
[data-theme="modern"] .nav__call,
[data-theme="modern"] .nav__links a,
[data-theme="modern"] .hero__name,
[data-theme="modern"] .section__title,
[data-theme="modern"] .about__lead,
[data-theme="modern"] .entry__role,
[data-theme="modern"] .entry__org,
[data-theme="modern"] .entry__date,
[data-theme="modern"] .entry__loc,
[data-theme="modern"] .entry__proj,
[data-theme="modern"] .tags span,
[data-theme="modern"] .edu__body h3,
[data-theme="modern"] .edu__deg,
[data-theme="modern"] .edu__meta,
[data-theme="modern"] .cert__title,
[data-theme="modern"] .cert__issuer,
[data-theme="modern"] .cert__meta,
[data-theme="modern"] .cert__verify,
[data-theme="modern"] .comms__title,
[data-theme="modern"] .btn,
[data-theme="modern"] .footer,
[data-theme="modern"] .tools-hero__eyebrow,
[data-theme="modern"] .tools-hero h1,
[data-theme="modern"] .tools-hero p,
[data-theme="modern"] .tools-search input,
[data-theme="modern"] .cat-chip,
[data-theme="modern"] .tcard__name,
[data-theme="modern"] .tcard__desc,
[data-theme="modern"] .tcard__open,
[data-theme="modern"] .tcard__id,
[data-theme="modern"] .tool-back,
[data-theme="modern"] .tool-head__name,
[data-theme="modern"] .tool-head__desc,
[data-theme="modern"] .tool-head__status,
[data-theme="modern"] .field > label,
[data-theme="modern"] .lbl,
[data-theme="modern"] .muted,
[data-theme="modern"] .note,
[data-theme="modern"] .mini,
[data-theme="modern"] .check,
[data-theme="modern"] .statbox b,
[data-theme="modern"] .statbox span,
[data-theme="modern"] .ctrl-sec,
[data-theme="modern"] .drop,
[data-theme="modern"] .toast,
[data-theme="modern"] .modal__title,
[data-theme="modern"] .modal__tag {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
}

/* ---------------------------------------------------------
   4 · NAV — a rule and some words, no glass
   --------------------------------------------------------- */
[data-theme="modern"] .nav {
  top: 0; left: 0; right: 0; transform: none; width: auto;
  height: var(--nav-h); gap: 24px;
  /* rule spans the window, but the items line up with the content column */
  padding: 0 max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
  border-radius: 0; border-bottom: 1px solid var(--line);
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
[data-theme="modern"] .nav__brand { align-items: center; gap: 8px; }
[data-theme="modern"] .nav__sigil { animation: none; font-size: 8px; color: var(--text-dim); }
[data-theme="modern"] .nav__call { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--white); }
[data-theme="modern"] .nav__sub { display: none; }

[data-theme="modern"] .nav__links { gap: 0; }
[data-theme="modern"] .nav__links a {
  font-size: 14px; font-weight: 400; color: var(--text-dim);
  padding: 8px 13px; border: none; border-radius: 0;
}
[data-theme="modern"] .nav__links a::before { content: ""; }
[data-theme="modern"] .nav__links a:hover { color: var(--white); background: none; }
[data-theme="modern"] .nav__links a.active { color: var(--white); background: none; }
[data-theme="modern"] .nav__links a.active::after { display: none; }
[data-theme="modern"] .nav__links a.nav__cta {
  margin-left: 12px; font-weight: 400; color: var(--text-dim);
  background: none; border: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
[data-theme="modern"] .nav__links a.nav__cta:hover {
  color: var(--white); box-shadow: none; text-decoration-color: currentColor;
}
[data-theme="modern"] .nav__toggle {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--white); font-size: 18px; padding: 5px 10px;
}
[data-theme="modern"] .dot {
  width: 6px; height: 6px; box-shadow: none; animation: none; background: var(--teal);
}

@media (max-width: 880px) {
  [data-theme="modern"] .nav__links {
    top: var(--nav-h); left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 18px; box-shadow: var(--shadow);
  }
  [data-theme="modern"] .nav__links a { padding: 12px 0; font-size: 16px; }
  [data-theme="modern"] .nav__links a.nav__cta { margin: 6px 0 0; padding: 12px 0; }
}

/* ---------------------------------------------------------
   5 · PAGE SHELL
   --------------------------------------------------------- */
[data-theme="modern"] .hero,
[data-theme="modern"] .section {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gutter);
  display: block; min-height: 0;
}
[data-theme="modern"] .hero { padding-top: clamp(112px, 16vh, 168px); padding-bottom: 0; overflow: visible; }
[data-theme="modern"] .section { padding-top: clamp(56px, 8vh, 84px); padding-bottom: 0; }
[data-theme="modern"] .hero__hud {
  position: static; border: none; background: none; box-shadow: none;
  backdrop-filter: none; padding: 0; border-radius: 0;
}
[data-theme="modern"] .hero__grid { display: block; }

/* section head: a serif line with a rule running to the margin */
[data-theme="modern"] .section__head {
  display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px;
}
[data-theme="modern"] .section__title {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 21px; font-weight: 500; letter-spacing: 0;
  color: var(--white); white-space: nowrap;
}
[data-theme="modern"] .section__rule {
  height: 1px; background: var(--line); flex: 1; align-self: center;
}
[data-theme="modern"] .section__rule::after { display: none; }

[data-theme="modern"] .panel,
[data-theme="modern"] .about,
[data-theme="modern"] .edu,
[data-theme="modern"] .entry__body,
[data-theme="modern"] .comms {
  border: none; background: none; box-shadow: none;
  backdrop-filter: none; padding: 0; border-radius: 0;
}

/* ---------------------------------------------------------
   6 · HERO — name, one sentence, the facts
   --------------------------------------------------------- */
[data-theme="modern"] .hero__name {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.005em; color: var(--white); margin-bottom: 22px;
}
[data-theme="modern"] .hero__name span { display: inline; }
[data-theme="modern"] .hero__name span + span::before { content: " "; }
[data-theme="modern"] .hero__name .accent {
  color: var(--white); -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor; text-shadow: none;
}

[data-theme="modern"] .lead {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: clamp(25px, 3.3vw, 38px); font-weight: 400;
  line-height: 1.32; letter-spacing: -0.008em;
  color: var(--white); max-width: 21em; margin-bottom: 30px;
  text-wrap: pretty;
}
[data-theme="modern"] .lead strong { font-weight: 600; color: var(--white); }
[data-theme="modern"] .lead a { color: inherit; }

[data-theme="modern"] .herolinks {
  display: flex; flex-wrap: wrap; gap: 22px;
  font-size: 15px; margin-bottom: 44px;
}
[data-theme="modern"] .herolinks a::after { content: " \2197"; font-size: 0.85em; }
/* the arrow means "goes somewhere" — a mail client isn't somewhere */
[data-theme="modern"] .herolinks a[href^="mailto:"]::after { content: none; }

/* the facts table replaces chips + tiles + invented counters */
[data-theme="modern"] .facts,
[data-theme="modern"] .skillset { max-width: 780px; }
[data-theme="modern"] .facts > div,
[data-theme="modern"] .skillset > div {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
[data-theme="modern"] .facts > div:first-child,
[data-theme="modern"] .skillset > div:first-child { border-top: 1px solid var(--line); }
[data-theme="modern"] .facts > div:last-child,
[data-theme="modern"] .skillset > div:last-child { border-bottom: 1px solid var(--line); }
[data-theme="modern"] .facts dt,
[data-theme="modern"] .skillset dt {
  font-size: 13.5px; color: var(--text-dim); font-weight: 400;
}
[data-theme="modern"] .facts dd,
[data-theme="modern"] .skillset dd {
  font-size: 15px; color: var(--text); margin: 0; font-variant-numeric: tabular-nums;
}
[data-theme="modern"] .live { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); }

@media (max-width: 560px) {
  [data-theme="modern"] .facts > div,
  [data-theme="modern"] .skillset > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ---------------------------------------------------------
   7 · PROSE
   --------------------------------------------------------- */
[data-theme="modern"] .about p:not(.about__lead),
[data-theme="modern"] .prose {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 18px; line-height: 1.68; color: var(--text);
  max-width: var(--measure); margin-bottom: 18px;
}
[data-theme="modern"] .about strong,
[data-theme="modern"] .prose strong { font-weight: 600; color: var(--white); }
[data-theme="modern"] .about__lead {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-style: italic; font-weight: 400;
  font-size: 21px; line-height: 1.5; letter-spacing: 0;
  color: var(--white); max-width: var(--measure); margin-bottom: 22px;
}

/* links read as links: underline, offset, accent on hover */
[data-theme="modern"] .lead a,
[data-theme="modern"] .prose a,
[data-theme="modern"] .about a,
[data-theme="modern"] .herolinks a,
[data-theme="modern"] .morelink a,
[data-theme="modern"] .toolgrid a,
[data-theme="modern"] .footer__ai a {
  color: var(--white); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color .15s ease, text-decoration-color .15s ease;
}
[data-theme="modern"] .lead a:hover,
[data-theme="modern"] .prose a:hover,
[data-theme="modern"] .about a:hover,
[data-theme="modern"] .herolinks a:hover,
[data-theme="modern"] .morelink a:hover,
[data-theme="modern"] .toolgrid a:hover,
[data-theme="modern"] .footer__ai a:hover {
  color: var(--cyan); text-decoration-color: var(--cyan);
}

/* ---------------------------------------------------------
   8 · EXPERIENCE
   --------------------------------------------------------- */
[data-theme="modern"] .timeline { padding-left: 0; }
[data-theme="modern"] .timeline::before { content: none; }
[data-theme="modern"] .entry {
  margin: 0; padding: 28px 0; border-top: 1px solid var(--line-soft);
}
[data-theme="modern"] .entry:first-child { border-top: 1px solid var(--line); }
[data-theme="modern"] .entry:last-child { border-bottom: 1px solid var(--line); }
[data-theme="modern"] .entry__top { margin-bottom: 14px; align-items: baseline; gap: 20px; }
[data-theme="modern"] .entry__role {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--white);
}
[data-theme="modern"] .entry__org { font-size: 14.5px; color: var(--text-dim); margin-top: 4px; }
[data-theme="modern"] .entry__date {
  font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums;
}
[data-theme="modern"] .entry__loc { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; }
[data-theme="modern"] .entry__proj {
  font-size: 13.5px; color: var(--text-dim); margin-bottom: 14px;
}
[data-theme="modern"] .entry__proj::before { content: "Project \2014\00a0"; }
[data-theme="modern"] .entry__list li {
  font-family: var(--font-text); font-optical-sizing: auto;
  padding-left: 27px; font-size: 17px; line-height: 1.6;
  margin-bottom: 7px; max-width: var(--measure); color: var(--text);
}
[data-theme="modern"] .entry__list li::before {
  content: "\2014"; color: var(--text-dim); top: 0; font-family: var(--font-body);
}
[data-theme="modern"] .tags { gap: 7px; margin-top: 16px; }
[data-theme="modern"] .tags span,
[data-theme="modern"] .stack-strip__items span {
  font-size: 12.5px; font-weight: 400; color: var(--text-dim);
  border: 1px solid var(--line); background: none;
  border-radius: var(--r-sm); padding: 3px 9px;
}

/* ---------------------------------------------------------
   9 · TOOLS BAND (home page, modern only)
   --------------------------------------------------------- */
[data-theme="modern"] .toolgrid {
  list-style: none; margin: 26px 0 22px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 28px;
}
[data-theme="modern"] .toolgrid li { border-top: 1px solid var(--line-soft); }
[data-theme="modern"] .toolgrid a {
  display: block; padding: 10px 0; font-size: 15px;
  text-decoration: none; color: var(--text);
}
[data-theme="modern"] .toolgrid a:hover { color: var(--cyan); }
[data-theme="modern"] .morelink { font-size: 15px; margin-top: 4px; }
[data-theme="modern"] .morelink a::after { content: " \2192"; }

/* ---------------------------------------------------------
   10 · EDUCATION · CERTIFICATIONS
   --------------------------------------------------------- */
[data-theme="modern"] .edu { display: block; }
[data-theme="modern"] .edu__body h3 {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--white);
}
[data-theme="modern"] .edu__deg { font-size: 15px; color: var(--text); margin: 5px 0 9px; }
[data-theme="modern"] .edu__meta {
  font-size: 13.5px; gap: 18px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
[data-theme="modern"] .edu__gpa { color: var(--text-dim); }

[data-theme="modern"] .certs { grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-theme="modern"] .cert {
  border: none; border-top: 1px solid var(--line-soft); border-radius: 0;
  background: none; padding: 18px 0; gap: 20px; align-items: baseline;
}
[data-theme="modern"] .cert:first-child { border-top: 1px solid var(--line); }
[data-theme="modern"] .cert:last-child { border-bottom: 1px solid var(--line); }
[data-theme="modern"] .cert:hover {
  transform: none; background: none; box-shadow: none; border-color: var(--line-soft);
}
[data-theme="modern"] .cert:first-child:hover { border-top-color: var(--line); }
[data-theme="modern"] .cert__seal { display: none; }
[data-theme="modern"] .cert__title {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 17.5px; font-weight: 500; line-height: 1.35; color: var(--white);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: transparent;
  transition: text-decoration-color .15s ease, color .15s ease;
}
[data-theme="modern"] .cert:hover .cert__title { color: var(--cyan); text-decoration-color: var(--cyan); }
[data-theme="modern"] .cert__issuer { font-size: 13.5px; color: var(--text-dim); margin: 5px 0 0; }
[data-theme="modern"] .cert__meta {
  font-size: 13px; color: var(--text-dim); gap: 4px 14px; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
[data-theme="modern"] .cert__verify {
  position: static; opacity: 1; transform: none; margin-left: auto;
  font-size: 13.5px; color: var(--text-dim); white-space: nowrap;
}
[data-theme="modern"] .cert:hover .cert__verify { color: var(--cyan); }

/* ---------------------------------------------------------
   11 · CONTACT · FOOTER
   --------------------------------------------------------- */
[data-theme="modern"] .comms { text-align: left; }
[data-theme="modern"] .comms__title {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: clamp(24px, 3.1vw, 34px); font-weight: 400; line-height: 1.32;
  letter-spacing: -0.005em; color: var(--white);
  max-width: 21em; margin-bottom: 26px;
}
[data-theme="modern"] .comms__links { justify-content: flex-start; gap: 10px; }

[data-theme="modern"] .footer {
  max-width: var(--wide); margin: clamp(72px, 10vh, 112px) auto 0;
  padding: 22px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-dim); align-items: baseline;
}
[data-theme="modern"] .footer__mid { color: var(--text-dim); }
[data-theme="modern"] .footer__mid:hover { color: var(--white); }
[data-theme="modern"] .footer__ai {
  border-top-color: var(--line-soft); font-size: 13px; color: var(--text-dim);
}

/* ---------------------------------------------------------
   12 · BUTTONS — ink, not accent
   --------------------------------------------------------- */
[data-theme="modern"] .btn {
  font-size: 14.5px; font-weight: 450; border-radius: var(--r-sm);
  padding: 10px 17px; color: var(--text);
  background: none; border: 1px solid var(--line);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
/* Scoped away from filled variants on purpose: an unscoped `.btn:hover`
   ties on specificity with `.btn--primary:hover`, so its `background: none`
   survived and left dark-on-dark text. */
[data-theme="modern"] .btn:not(.btn--primary):not(.active):hover {
  color: var(--white); background: none;
  border-color: var(--white); box-shadow: none; transform: none;
}
[data-theme="modern"] .btn:active { transform: none; }
[data-theme="modern"] .btn--primary {
  color: var(--on-ink); background: var(--white); border-color: var(--white); font-weight: 500;
}
[data-theme="modern"] .btn--primary:hover {
  color: var(--on-ink); background: var(--white);
  border-color: var(--white); box-shadow: none; opacity: 0.86;
}
[data-theme="modern"] .btn--sm { padding: 8px 13px; font-size: 13.5px; }
[data-theme="modern"] .btn.active,
[data-theme="modern"] .btn.active:hover {
  color: var(--on-ink); background: var(--white); border-color: var(--white); box-shadow: none;
}
[data-theme="modern"] .btn.active:hover { opacity: 0.86; }

/* ---------------------------------------------------------
   13 · TOOL DECK
   --------------------------------------------------------- */
[data-theme="modern"] .tools-hero {
  max-width: var(--wide); padding: clamp(108px, 14vh, 150px) var(--gutter) 30px;
}
[data-theme="modern"] .tools-hero__eyebrow {
  font-size: 13.5px; color: var(--text-dim); margin-bottom: 14px;
}
[data-theme="modern"] .tools-hero h1 {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  font-size: clamp(34px, 5vw, 52px); color: var(--white);
}
[data-theme="modern"] .tools-hero h1 .accent {
  color: var(--white); -webkit-text-stroke: 0; font-style: italic;
}
[data-theme="modern"] .tools-hero p {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: 18px; line-height: 1.66; color: var(--text);
  margin-top: 14px; max-width: var(--measure);
}
[data-theme="modern"] .tools-search {
  border-radius: var(--r-sm); background: var(--surface-2);
  border-color: var(--line); backdrop-filter: none; max-width: 380px; padding: 10px 14px;
}
[data-theme="modern"] .tools-search span { color: var(--text-dim); }
[data-theme="modern"] .tools-search input { font-size: 15px; color: var(--white); }

[data-theme="modern"] .cat-nav {
  top: var(--nav-h); background: var(--bg);
  border-bottom: 1px solid var(--line); backdrop-filter: none;
}
[data-theme="modern"] .cat-nav__inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); gap: 0;
}
[data-theme="modern"] .cat-chip {
  font-size: 13.5px; font-weight: 400; color: var(--text-dim);
  background: none; border: none; border-radius: 0;
  padding: 13px 12px; position: relative;
}
[data-theme="modern"] .cat-chip:hover { color: var(--white); background: none; box-shadow: none; }
[data-theme="modern"] .cat-chip.active { color: var(--white); background: none; }
[data-theme="modern"] .cat-chip.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 1px; background: var(--white);
}
[data-theme="modern"] .cat-chip__idx { display: none; }
[data-theme="modern"] .cat-chip__count {
  font-size: 11px; border: none; padding: 0; color: var(--text-dim); opacity: 0.75;
}

[data-theme="modern"] .tcat {
  max-width: var(--wide); padding: 44px var(--gutter);
  scroll-margin-top: calc(var(--nav-h) + 50px);
}
[data-theme="modern"] .tcat .section__head { margin-bottom: 18px; }
[data-theme="modern"] .tcat .section__title { font-size: 21px; }

[data-theme="modern"] .tgrid {
  gap: 0 28px; background: none; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
[data-theme="modern"] .tcard {
  border: none; border-top: 1px solid var(--line-soft); border-radius: 0;
  background: none; box-shadow: none; padding: 14px 0 16px;
  transition: none;
}
[data-theme="modern"] .tcard::before { content: none; }
[data-theme="modern"] .tcard:hover { transform: none; background: none; box-shadow: none; }
[data-theme="modern"] .tcard:hover .tcard__name { color: var(--cyan); }
/* the deck's pictographic glyphs fall back to tofu in a system mono stack,
   and a typeset index doesn't need them — the name is the content */
[data-theme="modern"] .tcard__top { display: none; }
[data-theme="modern"] .tcard__name { font-size: 15.5px; font-weight: 500; color: var(--white); transition: color .15s ease; }
[data-theme="modern"] .tcard__desc { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; }
[data-theme="modern"] .tcard__open { display: none; }

/* ---------------------------------------------------------
   14 · TOOL PAGES
   --------------------------------------------------------- */
/* share the nav/footer column so every left edge on the page lines up;
   the tool itself stays at a comfortable working width */
[data-theme="modern"] .tool-page {
  max-width: var(--wide); padding: calc(var(--nav-h) + 48px) var(--gutter) 64px;
}
[data-theme="modern"] .tool-head,
[data-theme="modern"] .tool-mount { max-width: 800px; }
[data-theme="modern"] .tool-back { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; }
[data-theme="modern"] .tool-back:hover { color: var(--white); text-shadow: none; }
[data-theme="modern"] .tool-head { gap: 0; margin-bottom: 24px; display: block; }
[data-theme="modern"] .tool-head__glyph { display: none; }
[data-theme="modern"] .tool-head__name {
  font-family: var(--font-text); font-optical-sizing: auto;
  font-size: clamp(26px, 3.6vw, 36px); font-weight: 500;
  letter-spacing: -0.005em; color: var(--white);
}
[data-theme="modern"] .tool-head__desc { font-size: 15.5px; color: var(--text-dim); margin-top: 6px; }
[data-theme="modern"] .tool-head__status { font-size: 13px; color: var(--text-dim); margin-top: 9px; }
[data-theme="modern"] .tool-mount {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); box-shadow: none;
  backdrop-filter: none; padding: clamp(20px, 3vw, 30px);
}

/* form controls */
[data-theme="modern"] .field > label,
[data-theme="modern"] .lbl { font-size: 13px; font-weight: 500; color: var(--text-dim); margin-bottom: 7px; }
[data-theme="modern"] .input,
[data-theme="modern"] .textarea,
[data-theme="modern"] select.input {
  border-radius: var(--r-sm); background: var(--bg);
  border-color: var(--line); color: var(--white);
  font-family: var(--font-mono); font-size: 13.5px; padding: 10px 12px;
}
[data-theme="modern"] .input:focus,
[data-theme="modern"] .textarea:focus,
[data-theme="modern"] select.input:focus {
  border-color: var(--white); box-shadow: none;
}
[data-theme="modern"] .out {
  border-radius: var(--r-sm); background: var(--code-bg);
  border-color: var(--line); color: var(--text); font-size: 13px;
}
[data-theme="modern"] .out--err { color: var(--magenta); }
[data-theme="modern"] .drop {
  border-radius: var(--r); background: none; border-color: var(--line);
  font-size: 14px; color: var(--text-dim);
}
[data-theme="modern"] .drop:hover,
[data-theme="modern"] .drop.drag { border-color: var(--white); color: var(--white); background: none; box-shadow: none; }
[data-theme="modern"] .drop b { color: var(--white); }
[data-theme="modern"] .statbox { border-radius: var(--r-sm); background: var(--bg); border-color: var(--line); }
[data-theme="modern"] .statbox b { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
[data-theme="modern"] .statbox span,
[data-theme="modern"] .muted,
[data-theme="modern"] .note,
[data-theme="modern"] .mini,
[data-theme="modern"] .check { font-size: 13px; color: var(--text-dim); }
[data-theme="modern"] .muted a { color: var(--cyan); }
[data-theme="modern"] .note { color: var(--amber); }
[data-theme="modern"] .mini.ok { color: var(--teal); }
[data-theme="modern"] .mini.bad { color: var(--magenta); }
[data-theme="modern"] .ctrl-sec {
  font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  border-bottom-color: var(--line); padding-bottom: 7px; margin: 24px 0 13px;
}
[data-theme="modern"] input[type="range"] { background: var(--line); }
[data-theme="modern"] input[type="range"]::-webkit-slider-thumb { background: var(--white); box-shadow: none; }
[data-theme="modern"] input[type="range"]::-moz-range-thumb { background: var(--white); box-shadow: none; }
[data-theme="modern"] .check input { accent-color: var(--white); }
[data-theme="modern"] input[type="color"].cinput { border-color: var(--line); border-radius: var(--r-sm); }
[data-theme="modern"] .icon-picker { background: var(--bg); border-color: var(--line); border-radius: var(--r-sm); }
[data-theme="modern"] .icon-picker button { background: none; border-color: var(--line); border-radius: var(--r-sm); color: var(--text); }
[data-theme="modern"] .icon-picker button.active { border-color: var(--white); background: none; box-shadow: none; }
[data-theme="modern"] .checker {
  background-image:
    linear-gradient(45deg, var(--line-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line-soft) 75%);
}
[data-theme="modern"] .qr-out { background: #ffffff; border-radius: var(--r-sm); }
[data-theme="modern"] mark { background: var(--cyan); color: var(--on-accent); }
[data-theme="modern"] .modal { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
[data-theme="modern"] .modal__win {
  border-color: var(--line); border-radius: var(--r);
  background: var(--elev); box-shadow: var(--shadow);
}
[data-theme="modern"] .modal__close { border-radius: var(--r-sm); }
[data-theme="modern"] .modal__close:hover { border-color: var(--white); box-shadow: none; }
[data-theme="modern"] .toast {
  font-size: 14px; border-radius: var(--r-sm);
  color: var(--on-ink); background: var(--white); box-shadow: var(--shadow);
}
[data-theme="modern"] .md-prev { font-family: var(--font-text); font-size: 17px; }
[data-theme="modern"] .md-prev h1,
[data-theme="modern"] .md-prev h2,
[data-theme="modern"] .md-prev h3 {
  font-family: var(--font-text); font-weight: 500; letter-spacing: 0; color: var(--white);
}
[data-theme="modern"] .md-prev code { background: var(--code-bg); color: var(--text); }
[data-theme="modern"] .md-prev pre { background: var(--code-bg); border-color: var(--line); border-radius: var(--r-sm); }
[data-theme="modern"] .md-prev a { color: var(--cyan); }
[data-theme="modern"] .md-prev blockquote { border-left-color: var(--line); }
[data-theme="modern"] .svg-preview,
[data-theme="modern"] .preview-img,
[data-theme="modern"] .canvas-fit { border-color: var(--line); border-radius: var(--r-sm); }

/* ---------------------------------------------------------
   15 · APPEARANCE CONTROL
   Sits in the nav. Styled for both skins, since this file is
   the one stylesheet every page loads.
   --------------------------------------------------------- */
.appearance {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 2px; flex: 0 0 auto;
}
.appearance__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  padding: 6px 9px; border-radius: 4px; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.appearance__btn:hover { color: var(--white); background: var(--line-soft); }
.appearance__btn svg { width: 14px; height: 14px; display: block; }
.appearance__glyph { font-size: 12px; line-height: 1; }
.appearance__btn--mode { padding: 6px; }
.appearance[data-skin="hud"] .appearance__btn--mode { display: none; }

[data-theme="modern"] .appearance { border-radius: var(--r-sm); }
[data-theme="modern"] .appearance__btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0;
  border-radius: 4px; padding: 6px 10px;
}
[data-theme="modern"] .appearance__glyph { display: none; }
[data-theme="modern"] .appearance__btn--mode { padding: 6px; }

.appearance--floating {
  position: fixed; right: 16px; bottom: calc(16px + var(--tele-h, 0px)); z-index: 9400;
  background: var(--bg);
}

@media (max-width: 560px) {
  .appearance__btn--skin .appearance__label { display: none; }
  .appearance__btn--skin { padding: 6px 7px; }
  [data-theme="modern"] .appearance__glyph { display: block; }
}

/* ---------------------------------------------------------
   16 · MOTION — a short fade, nothing choreographed
   --------------------------------------------------------- */
[data-theme="modern"] .reveal { transform: none; transition: opacity .4s ease; }
[data-theme="modern"] .reveal.in { transform: none; }