/* ============================================================================
   Link to NetEra: Tools & Labs directory layer (2026-09-27)

   Loaded on the two hubs and on every tool and lab page (extraStyles), after
   components.css. One visual system for all of them:

     .tcard / .lcard   the tool card and the lab card: the same card on the
                       hubs and in the "More tools / More labs" block
     .tbadge           what pressing the button does, in words, never colour
                       alone: Runs locally / Live lookup / Real probe /
                       Simulation, or a lab's mode
     .page-hero--dir   a hub header: search and filter chips
     .page-hero--tool  a tool or lab page header: icon, title, badge (shorter,)
                       so the tool itself sits higher on the page

   Colour comes from a small set of TONES (teal, violet, ink, green, amber),
   each defined once below from existing tokens, so both themes follow.
   ============================================================================ */

/* ---- Tones ------------------------------------------------------------------ */
/* Teal unless a tone class says otherwise. This default sits ABOVE the tone
   classes on purpose: declared later at the same specificity, it would
   repaint every violet, green and amber card teal. */
.tcard, .lcard, .page-mark {
  --tone: var(--teal-500); --tone-soft: var(--teal-100); --tone-ink: var(--teal-700);
}
.tone-teal, .tcard--teal, .lcard--teal, .page-mark--teal, .dir-sec__icon--teal, .tcard__icon--teal, .dir-chip--teal {
  --tone: var(--teal-500); --tone-soft: var(--teal-100); --tone-ink: var(--teal-700);
}
.tcard--violet, .lcard--violet, .page-mark--violet, .dir-sec__icon--violet, .tcard__icon--violet, .dir-chip--violet {
  --tone: var(--violet-500); --tone-soft: var(--violet-100); --tone-ink: var(--violet-600);
}
.tcard--ink, .lcard--ink, .page-mark--ink, .dir-sec__icon--ink, .tcard__icon--ink, .dir-chip--ink {
  --tone: var(--slate-600); --tone-soft: var(--paper-mist); --tone-ink: var(--ink-800);
}
.tcard--green, .lcard--green, .page-mark--green, .dir-sec__icon--green, .tcard__icon--green, .dir-chip--green {
  --tone: var(--success-600); --tone-soft: var(--success-100); --tone-ink: var(--success-600);
}
.tcard--amber, .lcard--amber, .page-mark--amber, .dir-sec__icon--amber, .tcard__icon--amber, .dir-chip--amber {
  --tone: var(--warning-600); --tone-soft: var(--warning-100); --tone-ink: var(--warning-600);
}

/* Anything the filter hides stays hidden, whatever display its class sets. */
[data-tool-card][hidden], [data-lab-card][hidden], [data-dir-section][hidden], .dir-empty[hidden], .dir-tools[hidden] { display: none !important; }

/* ---- Badges ------------------------------------------------------------------ */
.tbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.tbadge--local { background: var(--paper-soft); border-color: var(--border); color: var(--text-muted); }
.tbadge--live  { background: var(--accent-soft); color: var(--accent); }
.tbadge--probe { background: var(--success-100); color: var(--success-600); }
.tbadge--probe::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dir-pulse 2.2s ease-out infinite;
}
.tbadge--sim   { background: var(--violet-100); color: var(--violet-600); }
.tbadge--teal  { background: var(--teal-100); color: var(--teal-700); }
.tbadge--violet { background: var(--violet-100); color: var(--violet-600); }
.tbadge--amber { background: var(--warning-100); color: var(--warning-600); }
/* The Arcade's green and ink categories (its hub loads only this sheet). */
.tbadge--green { background: var(--success-100); color: var(--success-600); }
.tbadge--ink { background: var(--paper-mist); color: var(--ink-800); }
@keyframes dir-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70%, 100% { box-shadow: 0 0 0 5px transparent; }
}

/* ---- Hub header ------------------------------------------------------------ */
.page-hero--dir { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sp-6) var(--sp-6); background: var(--hero-bg); }   /* its own dots and glow live in .dir-hero__bg */
.dir-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dir-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--hero-dot) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 20%, transparent 70%);
}
.dir-hero__bg::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: min(60vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-glow), transparent 62%);
}

.dir-tools { margin-top: var(--sp-4); }
.dir-search { position: relative; max-width: 680px; }
.dir-search input {
  width: 100%;
  height: 58px;
  padding: 0 52px 0 50px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dir-search input::placeholder { color: var(--slate-400); }
.dir-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in srgb, var(--accent-decor) 22%, transparent); }
.dir-search input::-webkit-search-cancel-button { cursor: pointer; }
.dir-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.dir-search__kbd {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}
.dir-search input:focus ~ .dir-search__kbd,
.dir-search input:not(:placeholder-shown) ~ .dir-search__kbd { opacity: 0; }
@media (max-width: 559px) {
  .dir-search input { height: 52px; font-size: var(--fs-base); }
  .dir-search__kbd { display: none; }
}

.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
@media (max-width: 559px) {
  /* One scrollable row on a phone rather than five stacked ones: the chips
     are a filter, not the content, and should not push the tools off screen. */
  .dir-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .dir-chips::-webkit-scrollbar { display: none; }
  .dir-chip { flex: none; }
}
.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dir-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--slate-400)); }
.dir-chip:not([class*="dir-chip--"])::before { display: none; }
.dir-chip span {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.dir-chip:hover { border-color: var(--line-strong); background: var(--paper-soft); }
.dir-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dir-chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.dir-chip[aria-pressed="true"] span { background: color-mix(in srgb, var(--paper) 18%, transparent); color: var(--paper); }

/* ---- Sections --------------------------------------------------------------- */
.dir-sec { padding-block: var(--sp-6) 0; }
.dir-sec--first { padding-top: var(--sp-6); }
main > .dir-sec:last-of-type, .dir-sec + .container + .dir-problems, .dir-sec + .dir-next { margin-top: var(--sp-8); }
.dir-sec__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.dir-sec__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tone-soft);
  color: var(--tone-ink);
}
.dir-sec__head h2 { font-size: var(--fs-xl); line-height: 1.2; }
.dir-sec__head p { margin: 4px 0 0; max-width: 72ch; font-size: var(--fs-sm); color: var(--text-muted); }
.dir-sec__verb {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: middle;
}
.dir-sec__count {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 559px) {
  .dir-sec__head { grid-template-columns: auto minmax(0, 1fr); }
  .dir-sec__count { grid-column: 2; justify-self: start; margin-top: 6px; }
  .dir-sec__verb { display: block; margin: 2px 0 0; }
}

.dir-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 900px) { .dir-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dir-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dir-grid--single { grid-template-columns: minmax(0, 1fr); }

/* ---- Tool card ------------------------------------------------------------ */
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* A soft wash of the group's colour appears behind the icon on hover. */
.tcard::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tone-soft), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t);
}
.tcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); }
.tcard:hover::after { opacity: 1; }
.tcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tcard__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--tone-ink);
  transition: background-color var(--t), color var(--t), transform var(--t);
}
.tcard:hover .tcard__icon { background: var(--tone); color: var(--paper); transform: rotate(-4deg); }
.tcard__icon--lg { width: 52px; height: 52px; border-radius: 14px; }
.tcard__icon--sm { width: 28px; height: 28px; border-radius: 8px; }
.tcard__icon--sm .icon { width: 16px; height: 16px; }
.tcard__name { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.tcard__desc { flex: 1; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }
.tcard__peek {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  /* Wraps rather than truncating: a cut-off example ("Class A · priva...")
     hides exactly the part that answers the question. */
  overflow-wrap: anywhere;
}
.tcard__caret { margin-right: 8px; color: var(--code-teal); }
.tcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tone-ink);
}
.tcard__go .icon--sm { transition: transform var(--t-fast); }
.tcard:hover .tcard__go .icon--sm { transform: translateX(4px); }
/* In the "Most used" side column the three cards stack beside the live
   calculator; the arrow line is dropped so the three fit its height. */
.tcard--row { padding: 16px 18px; gap: 6px; }
.tcard--row .tcard__go { display: none; }
.tcard--row .tcard__desc { flex: none; }

/* ---- The board: groups of two sit side by side ---------------------------- */
.dir-board-sec { padding-block: var(--sp-8) 0; }
.dir-board { display: grid; gap: var(--sp-6) var(--sp-4); }
@media (min-width: 1024px) {
  .dir-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-group--full { grid-column: 1 / -1; }
}
.dir-grid--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 560px) { .dir-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1099px) { .dir-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Hub header mosaic ------------------------------------------------------ */
.page-hero--dir .container { position: relative; }
.dir-mosaic { display: none; }
@media (min-width: 1100px) {
  .dir-mosaic {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 14px;
    transform: translateY(-50%) perspective(900px) rotateY(-14deg) rotateX(6deg);
    transform-origin: 100% 50%;
  }
  .dir-mosaic--labs { grid-template-columns: repeat(4, 64px); }
  .dir-mosaic__tile {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border));
    color: var(--tone-ink);
    box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--tone) 75%, transparent);
    animation: dir-float 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.4s);
  }
  .dir-mosaic--labs .dir-mosaic__tile { width: 64px; height: 64px; border-radius: 18px; }
  .dir-mosaic__tile:nth-child(3n + 2) { background: var(--tone-soft); }
  /* The lead, search and chips keep clear of the mosaic. */
  .page-hero--dir .lead, .page-hero--dir .dir-search { max-width: min(640px, 100% - 420px); }
  .page-hero--dir .dir-chips { max-width: calc(100% - 400px); }
  .page-hero--dir .page-hero__meta { max-width: calc(100% - 420px); }
}
@keyframes dir-float { to { transform: translateY(-6px); } }

/* ---- "Most used": the live calculator beside three cards ------------------- */
.dir-feature { display: grid; gap: 16px; }
@media (min-width: 1024px) { .dir-feature { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; } }
.dir-feature__side { display: grid; gap: 16px; align-content: start; }
/* Grid items default to min-width:auto, i.e. their content's minimum; the
   calculator's result table then held the whole row past a 320px screen. */
.dir-feature > *, .dir-feature__side > *, .dir-grid > *, .dir-board > * { min-width: 0; }
.dir-live .kv td { overflow-wrap: anywhere; }
.dir-live {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--teal-500) 35%, var(--border));
  border-radius: 20px;
  background: linear-gradient(180deg, var(--teal-050), var(--surface) 42%);
  box-shadow: var(--shadow-md);
}
.dir-live__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.dir-live__head .tcard__icon { background: var(--teal-500); color: #fff; }
.dir-live__kicker { margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dir-live h3 { font-size: var(--fs-xl); }
.dir-live h3 a { color: var(--text); }
.dir-live__desc { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 60ch; }
.dir-live .link-more { margin-top: auto; }
@media (max-width: 479px) {
  .dir-live { padding: 18px; }
  .dir-live__head { grid-template-columns: auto minmax(0, 1fr); }
  .dir-live__head .tbadge { grid-column: 2; justify-self: start; }
}

/* ---- Empty search ----------------------------------------------------------- */
.dir-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: var(--sp-6);
  padding: var(--sp-6) var(--sp-3);
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  text-align: center;
  color: var(--text-muted);
}
.dir-empty > .icon { width: 32px; height: 32px; color: var(--slate-400); }
.dir-empty p { margin: 0; }
.dir-empty__title { font-size: var(--fs-md); color: var(--text); }
.dir-empty__try {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- Pick by problem --------------------------------------------------------- */
.problem-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.problem__n { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.problem__title { font-size: var(--fs-md); line-height: 1.3; }
.problem__hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.problem__steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.problem__steps a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--paper-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.problem__steps a:hover { text-decoration: none; border-color: var(--accent-decor); background: var(--surface); }
.problem__step {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* ---- "Next" cross-link between the two hubs ---------------------------------- */
.dir-next { padding-block: var(--sp-8); }
.dir-note { margin: 0 0 var(--sp-4); max-width: 80ch; font-size: var(--fs-sm); color: var(--text-muted); }
.dir-next__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--grad-soft);
  color: var(--text);
  transition: transform var(--t), box-shadow var(--t);
}
.dir-next__card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.dir-next__card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dir-next__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.dir-next__body { display: grid; gap: 2px; }
.dir-next__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.dir-next__title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; }
.dir-next__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.dir-next__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 719px) {
  .dir-next__card { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .dir-next__go { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Lab card ------------------------------------------------------------------ */
.lcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-xs);
  color: var(--text);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.lcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); }
.lcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The stage: a tinted bench with a faint grid and two rings around the lab's
   glyph: a workspace, not a stock photo, drawn entirely in CSS. */
.lcard__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 132px;
  overflow: hidden;
  background-color: var(--tone-soft);
  background-image:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%),
    linear-gradient(to right, color-mix(in srgb, var(--tone) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--tone) 14%, transparent) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 22%, var(--border));
}
.lcard__stage::before,
.lcard__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--tone) 45%, transparent);
  transform: translate(-50%, -50%);
  transition: transform 0.6s var(--ease);
}
.lcard__stage::before { width: 104px; height: 104px; }
.lcard__stage::after { width: 168px; height: 168px; border-style: solid; opacity: 0.4; }
.lcard:hover .lcard__stage::before { transform: translate(-50%, -50%) rotate(45deg) scale(1.06); }
.lcard:hover .lcard__stage::after { transform: translate(-50%, -50%) scale(1.08); }
.lcard__glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
  color: var(--tone-ink);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--tone) 70%, transparent);
  transition: transform var(--t);
}
.lcard__glyph .icon { width: 30px; height: 30px; }
.lcard:hover .lcard__glyph { transform: translateY(-3px); }
.lcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.lcard__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone-ink); }
.lcard__name { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; }
.lcard__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.lcard__desc code { font-size: 0.8125rem; }
.lcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.lcard__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--tone-ink); }
.lcard__go .icon--sm { transition: transform var(--t-fast); }
.lcard:hover .lcard__go .icon--sm { transform: translateX(4px); }
/* A mode holding one lab: the card lies on its side instead of standing alone
   in a four-column grid. */
@media (min-width: 768px) {
  .lcard--wide { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .lcard--wide .lcard__stage { height: auto; min-height: 200px; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--tone) 22%, var(--border)); }
  .lcard--wide .lcard__body { padding: 26px 28px; }
  .lcard--wide .lcard__desc { -webkit-line-clamp: unset; line-clamp: unset; max-width: 70ch; }
}
.lcard--compact .lcard__stage { height: 96px; }
.lcard--compact .lcard__stage::after { display: none; }
.lcard--compact .lcard__glyph { width: 52px; height: 52px; border-radius: 15px; }
.lcard--compact .lcard__glyph .icon { width: 24px; height: 24px; }
.lcard--compact .lcard__desc { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---- Tool & lab page header ------------------------------------------------ */
.page-hero--tool { position: relative; overflow: hidden; padding-block: var(--sp-5) var(--sp-5); }
.page-hero--tool .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}
.page-hero--tool .container > * { grid-column: 2; }
.page-hero--tool .container > .breadcrumbs { grid-column: 1 / -1; }
.page-mark {
  grid-column: 1 !important;
  grid-row: 2 / span 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-top: 4px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--tone-soft), color-mix(in srgb, var(--tone-soft) 60%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--border));
  color: var(--tone-ink);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--tone) 80%, transparent);
}
.page-mark .icon { width: 32px; height: 32px; }
.page-hero--tool h1 { max-width: 20em; }
/* Tool pages keep the tool in the narrow column; the header lines up with it. */
.page-hero--narrow .container { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.page-hero--tool .lead { margin-top: var(--sp-1); max-width: 64ch; }
.page-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.page-badges__sep { width: 1px; height: 14px; background: var(--line-strong); }
.page-hero--tool .page-hero__meta { margin-top: var(--sp-2); }
@media (max-width: 559px) {
  .page-hero--tool .container { column-gap: 14px; }
  .page-mark { width: 48px; height: 48px; border-radius: 14px; grid-row: 2; }
  .page-mark .icon { width: 24px; height: 24px; }
  .page-badges__sep, .page-badges__txt { display: none; }
}
/* The tool comes straight after the header: no second full section gap
   pushing it below the fold. */
.page-hero--tool + main > .section:first-of-type { padding-top: var(--sp-5); }
.page-hero--tool + main > .section:first-of-type .tryit:first-of-type {
  box-shadow: 0 1px 2px rgba(14, 22, 38, 0.05), 0 22px 44px -22px rgba(14, 22, 38, 0.32);
}

/* ---- More tools / More labs --------------------------------------------------- */
.related-sec { background: var(--section-band); border-top: 1px solid var(--border); padding-block: var(--sp-8); }
.related-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: var(--sp-3); }
.related-sec__head h2 { font-size: var(--fs-xl); }
.related-sec__head .eyebrow { margin-bottom: var(--sp-1); }

/* ---- Arcade: game-card foot, daily banner, modes legend (2026-09-29) --------- */
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tcard__played {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--success-100); color: var(--success-600);
  font: 600 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.tcard__played[hidden] { display: none; }
/* .meta-item sets display, which would otherwise beat the hidden attribute
   and show "You have played  of 29" to a first-time visitor. */
.meta-item[hidden] { display: none; }

.arc-today-sec { padding-block: var(--sp-6) 0; }
.arc-today {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--teal-500) 35%, var(--border));
  border-radius: 20px;
  background: linear-gradient(120deg, var(--teal-050), var(--surface) 55%);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: transform var(--t), box-shadow var(--t);
}
.arc-today:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.arc-today:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.arc-today__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--teal-100); color: var(--teal-700); }
.arc-today__body { display: grid; gap: 3px; }
.arc-today__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.arc-today__title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; }
.arc-today__desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 70ch; }
.arc-today__streak { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--teal-700); }
.arc-today__streak[hidden] { display: none; }
.arc-today__go {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.arc-today:hover .arc-today__go .icon--sm { transform: translateX(3px); }
.arc-today__go .icon--sm { transition: transform var(--t-fast); }
@media (max-width: 719px) {
  .arc-today { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 20px; }
  .arc-today__icon { width: 48px; height: 48px; border-radius: 14px; }
  .arc-today__go { grid-column: 1 / -1; justify-self: start; }
}

.arc-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1100px) { .arc-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arc-modes__item {
  display: grid; gap: 4px; align-content: start;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
}
.arc-modes__name { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; }
.arc-modes__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.arc-modes__count { font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--text-muted); letter-spacing: 0.04em; margin-top: 2px; }

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .arc-today:hover, .arc-today:hover .arc-today__go .icon--sm { transform: none; }
  .tbadge--probe::before, .dir-mosaic__tile { animation: none; }
  .tcard:hover, .lcard:hover, .dir-next__card:hover, .lcard:hover .lcard__glyph { transform: none; }
  .tcard:hover .tcard__icon { transform: none; }
  .lcard:hover .lcard__stage::before, .lcard:hover .lcard__stage::after { transform: translate(-50%, -50%); }
}