/* ==========================================================================
   TechRS — lists.css · secondary-section base (design spec v4 §8)
   --------------------------------------------------------------------------
   Shared chrome for the secondary sections. Linked by every page that uses
   it: vulns list/detail, content lists, search, glossary, newsletter, the
   account profile, 404 and 500, and the article page (related-article
   cards).
   Tokens and components come from core.css; field hosts from field.css.

   CONTRACT
     .sx-hero               field band head: <header data-field="band">. Same
                            construction as site.css .page-hero: the cut-outs
                            sit on the band's bottom hairline and open into
                            the page below (one page-opening system site-wide)
       .sx-hero-inner       grid inside .container (--split: end column for
                            .sx-hero-aside from 1024px)
       .sx-hero-cut         the paper cut-out (add core .cutout); its text
                            aligns with the container edge, its paper bleeds
                            to the band's edge below 1368px (--cut-bleed;
                            --form: a set 660px measure for a form)
       .sx-meta             row above the title: .idx + .eyebrow (joined by
                            a hairline dash, as in .page-hero-meta), .sx-back,
                            .sx-live
       .sx-title            display H1 (--step-5, hero tracking/leading like
                            .page-hero-title)
       .sx-lead             lead paragraph
       .sx-hero-aside       second, smaller cut-out on the end side
       .sx-note             mono status line inside a cut-out
     .sx-live(--warn)       teal live dot (amber, static: --warn)
     .sx-back               uppercase back link with a mirrored arrow
     .sx-tabs               section tabs (content hub; aria-current = ink;
                            a 2 × 2 grid on phones)
     .sx-rss                small mono RSS chip
     .sx-body               content section under a hero
     .sx-grid               article-card grid (1 / 2 / 3 columns)
     .article-card          refinements on core .card (partials/article_card):
       .card-date           wrapper that pushes the LTR date to the end
       .card-ph             tick-field stand-in when there is no cover image
     .sx-empty(-cut)        empty state on a small field band
     .sx-actions            button row
     .sx-cta                pentest card closing a reference page (glossary
                            index, CVE detail): .sx-cta-copy (.sx-cta-title
                            h2 + .sx-cta-text) at the start, .sx-actions at
                            the end; the actions wrap under the copy when
                            the row runs out of room
     .sx-status             mono status line (result counts)
     .search-form/-row/-field   search box (icon, input, button)
     .glossary-index        hairline grid of glossary terms (.glossary-head:
                            .idx + arrow; .glossary-name: term + English)
     .sx-center / .sx-card  centered narrow card on a field band; the card
                            is a core .window (.window-bar, then
                            .sx-card-body), like the account pages' card
       .sx-card-title/-text .sx-fine (check-marked small print)
     .sx-he                 Hebrew island under an English root (re-declares
                            the :root:lang(he) type tokens)
     .profile-*             account profile (Hebrew island in English chrome)
     .err-*                 404 and 500 pages ("404." display + field band,
                            .err-num: the LTR figure run; .err-alt: 500's
                            second-language block; .err-more: 404's pentest
                            link under the buttons)
   Motion: hover transitions and the live-dot ping only; core.css neutralises
   both under prefers-reduced-motion and html.a11y-reduce-motion.
   ========================================================================== */

/* ─────────────────────────────────────────────
   1. Band head (hero) on a tick field
   ───────────────────────────────────────────── */
/* The cut-outs stand on the bottom hairline (no bottom padding) and cover
   it, so the paper of the title block runs straight into the page — the
   same "tab" as the inner pages' .page-hero */
.sx-hero {
  --cut-pad: clamp(14px, 1.8vw, 26px);
  --cut-foot: clamp(30px, 4vw, 56px);
  container-type: inline-size; /* 100cqi = the band's width (cut-out bleed) */
  padding-block: clamp(44px, 6.5vw, 96px) 0;
  border-block-end: 1px solid var(--border-subtle);
}
.sx-hero--compact {
  --cut-foot: clamp(26px, 3.4vw, 48px);
  padding-block-start: clamp(32px, 4.5vw, 64px);
}
/* A fixed 1fr track (not an implicit auto one), so a wide child can never
   stretch the grid past the container on phones */
.sx-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
  align-items: end;
}
@media (min-width: 1024px) {
  .sx-hero-inner--split {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  }
}
/* Outer side (start for the cut, end for the aside): the paper bleeds to
   the band's edge (--cut-bleed = edge → container content) with its text
   on the container edge, as in site.css .page-hero; inner side: --cut-pad.
   From 1368px the gutter beside the centred container is two tick cells
   wide, so the boxes stop at the container and the field shows beside
   them (a narrower strip read as one stray column of ticks). */
.sx-hero-cut,
.sx-hero-aside {
  --cut-bleed: max(var(--container-pad), (100cqi - var(--container-max)) / 2);
  padding: var(--cut-pad);
  padding-block-end: var(--cut-foot);
  margin-block-end: -1px; /* covers the hairline: the cut-out opens into the page */
}
@container (min-width: 1368px) {
  .sx-hero-cut,
  .sx-hero-aside {
    --cut-bleed: var(--container-pad);
  }
}
.sx-hero-cut {
  justify-self: start;
  max-inline-size: calc(880px + var(--cut-pad) + var(--cut-bleed));
  margin-inline-start: calc(-1 * var(--cut-bleed));
  padding-inline-start: var(--cut-bleed);
}
/* A cut-out that holds a form (search): a set measure instead of
   shrink-to-fit, capped to the track (+ its outdent) on narrow screens */
.sx-hero-cut--form {
  inline-size: calc(660px + var(--cut-pad) + var(--cut-bleed));
  max-inline-size: calc(100% + var(--cut-bleed));
}
.sx-hero-aside {
  margin-inline-end: calc(-1 * var(--cut-bleed));
  padding-inline-end: var(--cut-bleed);
}
@media (max-width: 1023.98px) {
  .sx-hero-aside {
    justify-self: start;
    margin-inline: calc(-1 * var(--cut-bleed)) 0;
    padding-inline: var(--cut-bleed) var(--cut-pad);
  }
}

.sx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-block-end: clamp(16px, 2vw, 26px);
}
/* "03/ —— Research": the section index and its label, joined like the
   inner pages' hero meta */
.sx-meta > .idx + .eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: var(--border-strong);
}
.sx-title {
  max-inline-size: 18ch;
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
}
.sx-lead {
  margin-block-start: clamp(16px, 1.8vw, 24px);
  max-inline-size: 60ch;
  color: var(--text-secondary);
  font-size: var(--step-1);
  line-height: 1.55;
}
.sx-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-block-start: clamp(18px, 2vw, 26px);
  color: var(--text-muted);
  font-family: var(--font-micro);
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
:root:lang(he) .sx-note {
  font-size: 0.86rem;
}
.sx-note time {
  color: var(--text-secondary);
}

/* Live dot (teal ping) — the ping is neutralised by core's reduced-motion */
.sx-live {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.sx-live::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: sx-ping 2.4s var(--ease-out) infinite;
}
.sx-live--warn {
  background: var(--warn-text);
}
.sx-live--warn::after {
  content: none;
}
@keyframes sx-ping {
  0% { opacity: 0.7; scale: 0.4; }
  70%, 100% { opacity: 0; scale: 1.25; }
}

/* Back link: uppercase micro + an arrow that points back in both scripts */
.sx-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: var(--eyebrow-case);
  transition: color var(--transition-fast);
}
.sx-back:hover {
  color: var(--text-primary);
}
.sx-back .icon {
  inline-size: 14px;
  block-size: 14px;
  transition: translate var(--dur-fast) var(--ease-out);
}
.sx-back:hover .icon {
  translate: -3px 0;
}
[dir="rtl"] .sx-back:hover .icon {
  translate: 3px 0;
}

/* Section tabs (content hub) — the current section is solid ink */
.sx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: clamp(22px, 2.6vw, 32px);
}
.sx-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 36px;
  padding-inline: 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--ui-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}
.sx-tabs a:hover {
  border-color: var(--ink);
  color: var(--text-primary);
}
.sx-tabs a[aria-current="page"] {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.sx-tabs .icon {
  inline-size: 14px;
  block-size: 14px;
}
/* Phones: an even 2 × 2 grid of 44px tabs (they wrapped 3 + 1), like the
   dashboard's segmented filters. Sections without articles drop out of the
   tabs (content/_section_nav.html); an odd last tab spans the row. */
@media (max-width: 599.98px) {
  .sx-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sx-tabs a {
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 8px;
    text-align: center;
  }
  .sx-tabs a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (pointer: coarse) {
  .sx-tabs a {
    min-block-size: 44px;
  }
}

/* Small mono RSS chip */
.sx-rss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 30px;
  padding-inline: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sx-rss:hover {
  border-color: var(--ink);
  color: var(--text-primary);
}
.sx-rss .icon {
  inline-size: 12px;
  block-size: 12px;
  color: var(--accent-text);
}

/* ─────────────────────────────────────────────
   2. Body section, actions, CTA card, status
   ───────────────────────────────────────────── */
.sx-body {
  padding-block: clamp(36px, 4.5vw, 64px) clamp(72px, 9vw, 128px);
}
.sx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* A quiet card (the CVE metrics card's surface), not an ink panel: a KEV
   page already opens on one */
.sx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-block-start: clamp(40px, 5vw, 72px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
html[data-theme="dark"] .sx-cta {
  border-color: var(--border-strong);
}
.sx-cta-copy {
  flex: 1 1 30ch;
  max-inline-size: 62ch;
}
.sx-cta-title {
  font-size: var(--step-2);
}
.sx-cta-text {
  margin-block-start: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.sx-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block-end: clamp(18px, 2vw, 26px);
  color: var(--text-muted);
  font-family: var(--font-micro);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}
:root:lang(he) .sx-status {
  font-size: 0.9rem;
}
.sx-status strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   3. Article cards (partials/article_card.html on core .card)
   ───────────────────────────────────────────── */
.sx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
}
@media (min-width: 680px) {
  .sx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .sx-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.article-card .card-body {
  gap: 14px;
}
.article-card .card-meta {
  gap: 8px;
}
/* the wrapper (not the LTR <time>) takes the auto margin, so it resolves
   in the page direction */
.article-card .card-date {
  margin-inline-start: auto;
}
/* No cover image: a static tick field with a teal stream, drawn with two
   masked layers (an inline-SVG tick tile x a soft diagonal band) so the
   grid stays even. Colours come from the field tokens of the scope. */
.card-ph {
  --ph-a: 34%;
  --ph-b: 58%;
  --ph-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 5.5v11' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --ph-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M7.1 14.9 14.9 7.1' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-card);
  border-block-end: 1px solid var(--border-subtle);
}
.card-ph::before,
.card-ph::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-ph::before {
  background: var(--field-tick);
  -webkit-mask: var(--ph-tick) 0 0 / 22px 22px,
    linear-gradient(125deg, #000 calc(var(--ph-a) - 6%), transparent var(--ph-a) var(--ph-b), #000 calc(var(--ph-b) + 6%));
  -webkit-mask-composite: source-in;
  mask: var(--ph-tick) 0 0 / 22px 22px,
    linear-gradient(125deg, #000 calc(var(--ph-a) - 6%), transparent var(--ph-a) var(--ph-b), #000 calc(var(--ph-b) + 6%));
  mask-composite: intersect;
}
.card-ph::after {
  background: var(--field-accent);
  -webkit-mask: var(--ph-tip) 0 0 / 22px 22px,
    linear-gradient(125deg, transparent calc(var(--ph-a) - 6%), #000 var(--ph-a) var(--ph-b), transparent calc(var(--ph-b) + 6%));
  -webkit-mask-composite: source-in;
  mask: var(--ph-tip) 0 0 / 22px 22px,
    linear-gradient(125deg, transparent calc(var(--ph-a) - 6%), #000 var(--ph-a) var(--ph-b), transparent calc(var(--ph-b) + 6%));
  mask-composite: intersect;
}
.sx-grid > :nth-child(3n + 2) .card-ph {
  --ph-a: 54%;
  --ph-b: 76%;
}
.sx-grid > :nth-child(3n + 3) .card-ph {
  --ph-a: 14%;
  --ph-b: 36%;
}
.article-card .card-title {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.article-card .card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-subtle);
}
.article-card .card-footer-meta .icon {
  inline-size: 16px;
  block-size: 16px;
  color: var(--accent-text);
  transition: translate var(--dur-fast) var(--ease-out);
}
.article-card:hover .card-footer-meta .icon-fwd {
  translate: 3px 0;
}
[dir="rtl"] .article-card:hover .card-footer-meta .icon-fwd {
  translate: -3px 0;
}

/* ─────────────────────────────────────────────
   4. Empty state — a small field band with a cut-out
   ───────────────────────────────────────────── */
.sx-empty {
  display: grid;
  place-items: center;
  min-block-size: clamp(300px, 34vw, 420px);
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sx-empty-cut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-inline-size: 600px;
  padding: clamp(20px, 2.6vw, 34px);
  text-align: center;
}
.sx-empty-cut .sx-meta {
  justify-content: center;
  margin-block-end: 0;
}
.sx-empty-title {
  color: var(--text-primary);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.sx-empty-text {
  max-inline-size: 46ch;
  color: var(--text-secondary);
}
.sx-empty-cut .sx-actions {
  justify-content: center;
  margin-block-start: 8px;
}

/* ─────────────────────────────────────────────
   5. Search
   ───────────────────────────────────────────── */
/* No fixed width here: a definite width becomes the cut-out's min-content
   and pushed the box (button included) off phone screens */
.search-form {
  margin-block-start: clamp(20px, 2.4vw, 30px);
}
.search-form > label {
  display: block;
  margin-block-end: 8px;
  color: var(--text-primary);
  font-size: 0.88rem;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-field {
  position: relative;
  min-inline-size: 0;
}
.search-row > .search-field {
  flex: 1 1 10rem;
}
.search-field .icon {
  position: absolute;
  inset-inline-start: 15px;
  inset-block-start: 50%;
  inline-size: 18px;
  block-size: 18px;
  translate: 0 -50%;
  color: var(--text-muted);
  pointer-events: none;
}
.search-field input {
  min-block-size: 50px;
  padding-inline-start: 44px;
}
.search-row .btn {
  min-block-size: 50px;
}

/* ─────────────────────────────────────────────
   6. Glossary index — hairline grid of terms
   ───────────────────────────────────────────── */
.glossary-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
  border-block-start: 1px solid var(--border-subtle);
  border-inline-start: 1px solid var(--border-subtle);
}
.glossary-index > li {
  display: flex;
  border-block-end: 1px solid var(--border-subtle);
  border-inline-end: 1px solid var(--border-subtle);
}
/* Each cell: "01/" index + arrow on top, the term (and its English name)
   anchored to the bottom, so every row lines up whether or not a term has
   an English counterpart */
.glossary-index a {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-block-size: 144px;
  padding: 16px 20px 20px;
  background: var(--bg-card);
  transition: background-color var(--transition-fast);
}
.glossary-index a:hover {
  background: var(--bg-card-hover);
}
.glossary-index a:focus-visible {
  outline-offset: -3px;
}
.glossary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.glossary-head .icon {
  inline-size: 15px;
  block-size: 15px;
  color: var(--text-muted);
  transition: translate var(--dur-fast) var(--ease-out), color var(--transition-fast);
}
.glossary-index a:hover .glossary-head .icon {
  color: var(--accent-text);
  translate: 3px 0;
}
[dir="rtl"] .glossary-index a:hover .glossary-head .icon {
  translate: -3px 0;
}
/* Room for the English line is always reserved, so the terms of one row
   share a baseline whether or not they have one */
.glossary-name {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-block-size: 2.95rem;
}
.glossary-term {
  color: var(--text-primary);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--transition-fast);
}
.glossary-index a:hover .glossary-term {
  color: var(--accent-text);
}
.glossary-en {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Phones: two compact columns instead of one very long list */
@media (max-width: 599.98px) {
  .glossary-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glossary-index a {
    gap: 18px;
    min-block-size: 108px;
    padding: 13px 14px 14px;
  }
  .glossary-name {
    gap: 5px;
    min-block-size: 2.55rem;
  }
  .glossary-term {
    font-size: 1rem;
  }
  .glossary-en {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
  }
}

/* ─────────────────────────────────────────────
   7. Centered narrow card on a field band (newsletter states)
   ───────────────────────────────────────────── */
.sx-center {
  display: grid;
  place-items: center;
  min-block-size: clamp(520px, 72svh, 760px);
  padding: clamp(40px, 7vw, 104px) var(--container-pad);
  border-block-end: 1px solid var(--border-subtle);
}
/* The card is a core .window (title bar + float shadow), the same floating
   form window as the account pages (auth.css .auth-card) */
.sx-card {
  inline-size: min(100%, 580px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
html[data-theme="dark"] .sx-card {
  border-color: var(--border-strong);
}
.sx-card .window-title {
  color: var(--text-muted);
}
.sx-card-body {
  padding: clamp(24px, 3.4vw, 44px);
}
.sx-card .sx-meta {
  margin-block-end: 18px;
}
.sx-card-title {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.sx-card-text {
  margin-block-start: 14px;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
}
.sx-card-text a,
.sx-fine a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sx-card-text a:hover,
.sx-fine a:hover {
  color: var(--accent-text-strong);
}
.sx-card .stacked-form {
  max-inline-size: none;
  margin-block-start: clamp(22px, 2.4vw, 30px);
}
/* addresses are LTR islands even in the Hebrew form (aligned with it) */
[dir="rtl"] .sx-card input[type="email"] {
  direction: ltr;
  text-align: right;
}
.sx-card .form-status {
  margin-block: 22px 0;
}
.sx-card .sx-actions {
  margin-block-start: clamp(22px, 2.4vw, 30px);
}
.sx-fine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}
.sx-fine li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sx-fine .icon {
  inline-size: 14px;
  block-size: 14px;
  color: var(--accent-text);
}

/* ─────────────────────────────────────────────
   8. Account profile (Hebrew island inside the English chrome)
   ───────────────────────────────────────────── */
/* .sx-he: Hebrew content under an English root (/accounts/ is language-
   neutral). Mirrors core's :root:lang(he) type tokens, and re-resolves the
   font stack here because font-family is inherited as a computed value.
   A Hebrew card grid on an English page (the research hub's lang="he"
   .sx-grid) gets the same treatment, so its cards set in Heebo too. */
.sx-he,
:root:not(:lang(he)) .sx-grid:lang(he) {
  --font-body: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-micro: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --weight-display: 600;
  --tracking-hero: -0.01em;
  --tracking-display: -0.01em;
  --tracking-tight: 0em;
  --tracking-eyebrow: 0.02em;
  --leading-hero: 1.08;
  --leading-tight: 1.12;
  --eyebrow-size: 0.85rem;
  --eyebrow-case: none;
  --ui-size: 0.92rem;
  --ui-size-lg: 1rem;
  --ui-tracking: 0em;
  --ui-case: none;
  --step-5: clamp(2.3rem, 1.25rem + 3.5vw, 4.4rem);
  font-family: var(--font-body);
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: start;
}
@media (min-width: 860px) {
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.profile-card {
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.profile-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 22px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--border-subtle);
}
.profile-card-title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}
.profile-card .stacked-form {
  max-inline-size: none;
}
.profile-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-email dt {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
}
.profile-email dd {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.settings-list {
  display: flex;
  flex-direction: column;
}
.settings-list > li + li {
  border-block-start: 1px solid var(--border-subtle);
}
.settings-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  transition: color var(--transition-fast);
}
.settings-list a:hover .settings-item-title {
  color: var(--accent-text);
}
.settings-list a:focus-visible {
  outline-offset: 2px;
}
.settings-item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.settings-item-title {
  color: var(--text-primary);
  font-weight: 600;
  transition: color var(--transition-fast);
}
.settings-item-desc {
  color: var(--text-muted);
  font-size: var(--step--1);
}
.settings-list .icon {
  inline-size: 16px;
  block-size: 16px;
  color: var(--text-muted);
  transition: translate var(--dur-fast) var(--ease-out);
}
.settings-list a:hover .icon-fwd {
  translate: 3px 0;
}
[dir="rtl"] .settings-list a:hover .icon-fwd {
  translate: -3px 0;
}
.profile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: clamp(28px, 3vw, 40px);
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* ─────────────────────────────────────────────
   9. 404 — a big display "404." on a field band
   ───────────────────────────────────────────── */
.err {
  --cut-pad: clamp(14px, 1.8vw, 26px);
  container-type: inline-size; /* 100cqi = the band's width (cut-out bleed) */
  padding-block: clamp(48px, 8vw, 120px);
  border-block-end: 1px solid var(--border-subtle);
}
/* Outer sides bleed to the band's edge like the .sx-hero cut-outs (§1):
   no stray tick column beside them below 1368px */
.err-copy,
.err-code {
  --cut-bleed: max(var(--container-pad), (100cqi - var(--container-max)) / 2);
}
@container (min-width: 1368px) {
  .err-copy,
  .err-code {
    --cut-bleed: var(--container-pad);
  }
}
.err-inner {
  display: grid;
  gap: clamp(8px, 2vw, 28px);
  align-items: end;
}
@media (min-width: 1024px) {
  .err-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}
.err-copy {
  justify-self: start;
  max-inline-size: calc(620px + var(--cut-pad) + var(--cut-bleed));
  margin-inline-start: calc(-1 * var(--cut-bleed));
  padding: var(--cut-pad);
  padding-inline-start: var(--cut-bleed);
}
.err-title {
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.err-copy .sx-actions {
  margin-block-start: clamp(24px, 2.6vw, 34px);
}
.err-more {
  margin-block-start: 18px;
}
/* 500.html: the same message in the other language, set as a quieter
   second block under a hairline */
.err-alt {
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--step-0);
}
/* The giant figure is decoration (the h1 carries the message) */
.err-code {
  justify-self: end;
  margin-inline-end: calc(-1 * var(--cut-bleed));
  padding: 0 var(--cut-pad);
  padding-inline-end: var(--cut-bleed);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(7rem, 3rem + 17vw, 17.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The figure reads LTR ("404." never ".404"); set on the inner run so the
   box keeps the page direction and its outdent lands on the outer side */
.err-num {
  direction: ltr;
  unicode-bidi: isolate;
}
.err-num > span {
  color: var(--accent);
}
@media (max-width: 1023.98px) {
  .err-code {
    order: -1;
    justify-self: start;
    margin-inline: calc(-1 * var(--cut-bleed)) 0;
    padding-inline: var(--cut-bleed) var(--cut-pad);
  }
}

/* ─────────────────────────────────────────────
   10. Accessibility toolbar states + print
   ───────────────────────────────────────────── */
:root.a11y-readable-font .sx-note,
:root.a11y-readable-font .sx-rss,
:root.a11y-readable-font .sx-status,
:root.a11y-readable-font .glossary-en,
:root.a11y-readable-font .profile-email dd,
:root.a11y-readable-font .err-code {
  font-family: Arial, Tahoma, "Segoe UI", sans-serif !important;
  letter-spacing: 0.02em !important;
}
@media print {
  .sx-hero,
  .err {
    padding-block: 12pt;
  }
  .sx-hero-cut,
  .sx-hero-aside,
  .err-copy {
    margin: 0;
    padding: 0;
  }
  .search-form,
  .sx-tabs,
  .sx-rss,
  .sx-actions,
  .sx-cta,
  .err-more {
    display: none !important;
  }
}