/* ==========================================================================
   3. HEADER SHELL
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--background);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}

.breaking__inner,
.masthead__inner,
.navbar__inner,
.explorer__inner,
.chiprail__list,
.page__inner,
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   4. BREAKING NEWS
   ========================================================================== */
.breaking {
  position: relative;
  z-index: 1;
  height: var(--h-breaking);
  background: var(--surface-invert);
  color: var(--text-invert);
  overflow: hidden;
}
.breaking__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.breaking__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-xs);
  background: var(--accent-breaking);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .breaking__badge { color: #180209; }

.breaking__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.breaking__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
/* Two identical groups → translateX(-50%) lands exactly on the seam */
.breaking__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.breaking__group {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
}
.breaking:hover .breaking__track,
.breaking:focus-within .breaking__track,
.breaking.is-paused .breaking__track,
.header[data-stuck="true"] .breaking__track { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.breaking__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* State travels with the headline it belongs to */
.breaking__state {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-xs);
  line-height: 1.5;
}
.breaking__state[data-state="urgent"]  { background: var(--accent-breaking); color: #fff; }
.breaking__state[data-state="live"]    { background: var(--accent-breaking); color: #fff; }
.breaking__state[data-state="updated"] { background: var(--accent-trust); color: #fff; }
.breaking__state[data-state="breaking"] { display: none; }
[data-theme="dark"] .breaking__state { color: #10020a; }

.breaking__time {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.66);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .breaking__time { color: rgb(11 12 14 / 0.66); }

.breaking__controls { flex: none; display: flex; align-items: center; gap: var(--sp-1); }

/* Always available — WCAG 2.2.2 Pause, Stop, Hide */
.breaking__ctrl {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: inherit;
  opacity: 0.75;
}
.breaking__ctrl:hover { opacity: 1; background: rgb(255 255 255 / 0.14); }
[data-theme="dark"] .breaking__ctrl:hover { background: rgb(0 0 0 / 0.14); }

.breaking__ctrl-glyph {
  width: 10px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
#breaking-toggle[aria-pressed="true"] .breaking__ctrl-glyph {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

.breaking__more {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0.85;
}
.breaking__more:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   5. MASTHEAD
   ========================================================================== */
.masthead {
  position: relative;
  z-index: 3;                 /* above .navbar — keeps the dropdown on top */
  height: var(--h-masthead);
}
.masthead__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.masthead__mobile { display: flex; align-items: center; gap: var(--sp-1); }

.utility {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.utility__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.utility__btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface); }
.utility__kbd { margin-left: var(--sp-1); }

.iconbtn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: background-color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn--bordered { width: 38px; height: 38px; border: 1px solid var(--border); }
.iconbtn--bordered:hover { border-color: var(--border-strong); }

/* ---------- Language menus (header drops down, footer pops up) ---------- */
.lang { position: relative; }
.lang__caret { transition: transform var(--t-fast) var(--ease); }
#lang-btn[aria-expanded="true"] .lang__caret,
#footer-lang-btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
#lang-btn[aria-expanded="true"] { color: var(--text-primary); border-color: var(--border-strong); }

.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--sp-2);
  background: var(--background);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  animation: pop var(--t-fast) var(--ease);
}
.lang__menu[hidden] { display: none; }
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* In the black cap bar the menu opens upward and reverts to page colours */
.cap .lang__menu {
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 0;
  animation-name: pop-up;
}
@keyframes pop-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 42px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: var(--lh-mm);
  text-align: left;
}
.lang__item:hover { background: var(--surface-2); }
.lang__name { font-weight: 600; white-space: nowrap; }
.lang__sub  { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.lang__tag {
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-premium) 18%, transparent);
  color: var(--accent-premium);
  white-space: nowrap;
}
.lang__check { margin-left: auto; color: var(--accent-trust); opacity: 0; }
.lang__item[aria-checked="true"] .lang__check { opacity: 1; }

/* Flags sit in one fixed 20x14 box. The three files are 3:2, 3:2 and 9:5,
   and a menu of differently-shaped flags reads as a mistake, so `cover`
   crops the odd one rather than squashing it. The inset ring is not
   decoration: the Union Jack is white at its edge and dissolves into the
   menu without it. --border-strong already flips with the theme, so no new
   colour enters the token set.

   The selector is deliberately two classes deep. Elementor's frontend.min.css
   ships `.elementor img { height: auto; border-radius: 0; box-shadow: none }`,
   which at (0,1,1) outranks a plain `.lang__flag` -- the flags rendered at
   their natural 20x13 with square corners and no ring until this was raised
   to (0,2,0). Any new image styled by class inside the Elementor tree needs
   the same treatment. */
.lang .lang__flag,
.langpill .lang__flag {
  flex: none;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px var(--border-strong);
}
.lang .lang__flag--btn { margin-right: 2px; }

/* ---------- Social ---------- */
.social { display: flex; align-items: center; gap: 2px; }
.social a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.social a:hover { color: var(--text-primary); background: var(--surface-2); }

/* Each mark in its own brand colour rather than one flat grey. Selectors
   carry the [data-brand] attribute so they outrank the plain `.social a`
   and `.social a:hover` rules above regardless of file order -- the hover
   keeps the brand colour and only lifts the plate behind it.

   TikTok is the exception: its wordmark is black on light and white on
   dark, so it follows the page's own text colour instead of a fixed hex,
   which also keeps it visible in dark mode. */
.social a[data-brand='fb'] { color: #1877F2; }
.social a[data-brand='tg'] { color: #26A5E4; }
.social a[data-brand='yt'] { color: #FF0000; }
.social a[data-brand='tt'] { color: var(--text-primary); }
.social a[data-brand]:hover { background: var(--surface-2); }
.social a[data-brand='fb']:hover { color: #1877F2; }
.social a[data-brand='tg']:hover { color: #26A5E4; }
.social a[data-brand='yt']:hover { color: #FF0000; }
.social a[data-brand='tt']:hover { color: var(--text-primary); }


/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.navbar {
  display: none;
  position: relative;
  z-index: 2;
  height: var(--h-nav);
  border-top: 1px solid var(--border);
}
.navbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.navbar__list {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;          /* safety valve, never normally triggered */
  scrollbar-width: none;
}
.navbar__list::-webkit-scrollbar { display: none; }
/* Set by the fit routine when a desk cannot be shown at this width.
   It is never lost — it stays in the explorer, the chip rail and the drawer. */
.navbar__list li[hidden] { display: none; }

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
/* Section rail encodes the desk, it is not decoration */
.navbar__link::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 4px;
  height: 3px;
  background: var(--rail, var(--text-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal) var(--ease);
}
.navbar__link:hover::after,
.navbar__link[aria-current="page"]::after { transform: scaleX(1); }
.navbar__link[aria-current="page"] { color: var(--rail, var(--text-primary)); }

.navbar__explore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 34px;
  margin-left: var(--sp-3);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.navbar__explore:hover { background: var(--surface-2); border-color: var(--border-strong); }
.navbar__explore[aria-expanded="true"] {
  background: var(--surface-invert);
  color: var(--text-invert);
  border-color: var(--surface-invert);
}
.navbar__caret { transition: transform var(--t-normal) var(--ease); }
.navbar__explore[aria-expanded="true"] .navbar__caret { transform: rotate(180deg); }

.navbar__logo,
.navbar__compact { display: none; }
.navbar__logo {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  flex: none;
}
.navbar__compact { gap: var(--sp-1); }

/* ==========================================================================
   7. STICKY COMPACT
   visibility:hidden also removes the collapsed rows from the tab order.
   ========================================================================== */
.breaking, .masthead {
  transition: height var(--t-normal) var(--ease), opacity var(--t-fast) var(--ease);
}
.header[data-stuck="true"] .breaking {
  height: 0; opacity: 0; visibility: hidden; overflow: hidden;
}

@media (min-width: 1024px) {
  .header[data-stuck="true"] .masthead {
    height: 0; opacity: 0; visibility: hidden; overflow: hidden;
  }
  .header[data-stuck="true"] .navbar { border-top-color: transparent; }
  .header[data-stuck="true"] .navbar__inner { justify-content: space-between; }
  .header[data-stuck="true"] .navbar__logo,
  .header[data-stuck="true"] .navbar__compact { display: flex; align-items: center; }
  .header[data-stuck="true"] .navbar__explore { margin-left: auto; }
}

/* ==========================================================================
   8. CATEGORY EXPLORER
   ========================================================================== */
.explorer {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--background);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  animation: drop var(--t-normal) var(--ease);
}
.explorer[hidden] { display: none; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explorer__inner { padding-block: var(--sp-6) var(--sp-5); }

.explorer__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
.explorer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }

.explorer__col { border-top: 3px solid var(--rail); padding-top: var(--sp-3); }
.explorer__col-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail);
  margin-bottom: var(--sp-3);
}

.explorer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  font-size: var(--fs-md);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.explorer__link::before {
  content: "";
  width: 0; height: 1px;
  background: var(--rail);
  transition: width var(--t-fast) var(--ease);
}
.explorer__link:hover { color: var(--rail); padding-left: var(--sp-2); background: var(--surface); }
.explorer__link:hover::before { width: 10px; }

.explorer__hint {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.explorer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgb(8 9 11 / 0.4);
  animation: fade var(--t-fast) var(--ease);
}
.explorer-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   9. CHIP RAIL
   ========================================================================== */
.chiprail {
  height: var(--h-chiprail);
  border-top: 1px solid var(--border);
  background: var(--background);
}
.chiprail__list {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chiprail__list::-webkit-scrollbar { display: none; }

.chiprail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
}
.chiprail__link::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rail, var(--text-secondary));
}
.chiprail__link[aria-current="page"] {
  background: var(--surface-invert);
  color: var(--text-invert);
  border-color: var(--surface-invert);
}

/* ==========================================================================
   10. SEARCH
   ========================================================================== */
.search { position: fixed; inset: 0; z-index: var(--z-search); }
.search[hidden] { display: none; }

.search__backdrop {
  position: absolute; inset: 0;
  background: rgb(8 9 11 / 0.55);
  animation: fade var(--t-fast) var(--ease);
}

.search__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background);
  animation: slideup var(--t-normal) var(--ease);
}
@keyframes slideup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.search__icon { color: var(--text-secondary); }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  font-size: var(--fs-xl);
  font-weight: 500;
  outline: none;
}
.search__input::placeholder { color: var(--text-secondary); font-weight: 400; }
.search__input::-webkit-search-cancel-button { display: none; }

/* The script toggles [hidden] on this button as the field fills and empties,
   but `display: inline-flex` below outranks the attribute's own
   `display: none`, so the clear cross sat beside the close cross at all
   times -- two identical crosses, neither obviously the one that shuts
   the panel. */
.search__clear[hidden] { display: none; }
.search__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
}
.search__close {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 36px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.search__close:hover { background: var(--surface-2); color: var(--text-primary); }
.search__close kbd { display: none; }

.search__filters { flex: none; border-bottom: 1px solid var(--border); overflow: hidden; }
.search__filters-track {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.search__filters-track::-webkit-scrollbar { display: none; }

.filter {
  height: 30px;
  flex: none;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.filter:hover { border-color: var(--border-strong); color: var(--text-primary); }
.filter[aria-pressed="true"] {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--text-invert);
}

.search__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5) var(--gutter) var(--sp-10);
  -webkit-overflow-scrolling: touch;
}

.search__block { margin-bottom: var(--sp-6); }
.search__block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.search__block-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.search__textbtn { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-trust); }
.search__textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chip__rank {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent-premium);
  font-variant-numeric: tabular-nums;
}

.results { display: grid; gap: 2px; }
.result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.result:hover { background: var(--surface); }
.result__meta {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rail, var(--text-secondary));
}
.result__title { display: block; font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-mm); }
.result__title mark {
  background: color-mix(in srgb, var(--accent-premium) 26%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.result__time { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; padding-top: 2px; }
.search__count { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-3); }

.skel { padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.skel__line {
  display: block;
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--skeleton);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skel__line--sm { width: 22%; }
.skel__line--lg { width: 82%; height: 14px; }
.skel__line--md { width: 46%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.search__message {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}
.search__message[hidden] { display: none; }
.search__message-icon {
  width: 40px; height: 40px;
  fill: none; stroke: var(--text-secondary);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.search__message--error .search__message-icon { stroke: var(--accent-breaking); }
.search__message-title { font-size: var(--fs-xl); }
.search__message-text { font-size: var(--fs-md); color: var(--text-secondary); max-width: 42ch; }

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.btn--solid { background: var(--surface-invert); color: var(--text-invert); }
.btn--solid:hover { opacity: 0.88; }
.btn--ghost { border-color: var(--border); color: var(--text-primary); }
.btn--ghost:hover { background: var(--surface-2); }

/* ==========================================================================
   11. DRAWER
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer[hidden] { display: none; }

.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgb(8 9 11 / 0.55);
  animation: fade var(--t-fast) var(--ease);
}
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-10);
  background: var(--background);
  animation: slidein var(--t-slow) var(--ease);
}
@keyframes slidein {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.logo--drawer { font-size: 1.375rem; }

.drawer__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  text-align: left;
}

.drawer__accordion { border-top: 1px solid var(--border); }
.drawer__group { border-bottom: 1px solid var(--border); }
.drawer__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: left;
}
.drawer__trigger .icon:first-child { color: var(--rail); }
.drawer__caret {
  margin-left: auto;
  color: var(--text-secondary);
  transition: transform var(--t-normal) var(--ease);
}
.drawer__trigger[aria-expanded="true"] .drawer__caret { transform: rotate(180deg); }

.drawer__sub { padding: 0 0 var(--sp-3) calc(20px + var(--sp-3)); display: grid; gap: 2px; }
.drawer__sub[hidden] { display: none; }
.drawer__sublink {
  display: block;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--border);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.drawer__sublink:hover { border-left-color: var(--rail); color: var(--text-primary); }

.drawer__section { margin-top: var(--sp-6); }
.drawer__section--first { margin-top: 0; margin-bottom: var(--sp-2); }
.drawer__title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.drawer__langs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.langpill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.langpill[aria-checked="true"] {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--text-invert);
}
.drawer__account { display: grid; gap: var(--sp-2); }
.social--drawer a { width: 42px; height: 42px; border: 1px solid var(--border); }

/* ==========================================================================
   10b. TOUCH TARGETS
   Every control in the chrome sat under the 44px Apple and Material both
   specify: the chips at 28, the icon buttons at 38-40, the marquee's pause
   at 32 and its headline link at 20. None of that is felt with a mouse and
   all of it is felt on a phone, where the chip rail IS the navigation.
   Every row has the height to absorb it: breaking 44, masthead 56/80,
   navbar 48.
   ========================================================================== */
.header .iconbtn,
.header .iconbtn--bordered { width: 44px; height: 44px; }
.breaking__ctrl     { width: 44px; height: 44px; }
.breaking__more     { min-height: 44px; }
.breaking__item     { min-height: 44px; }
.logo--markonly     { min-height: 44px; }
.navbar__link       { height: 44px; }
.navbar__explore    { min-height: 44px; }
.utility__btn       { min-height: 44px; }

/* The chip keeps its 28px pill -- growing it would change the rail's whole
   proportion -- and gains the hit area underneath instead. The rail goes to
   48px so the 44px overlay stays inside it: an overlay that spilled past the
   rail's edge lost the hit test to the page content beneath, which is how a
   first attempt measured 41px rather than 44. Scoped below 1024px, where the
   rail is display:none and --h-header counts --h-nav instead. */
/* Below 360px the design narrows the icon buttons to 36px to keep the
   masthead from crowding. The height was the part that mattered and is
   already 44; the width is restored too because it was measured to fit --
   three 44px buttons beside the logo end exactly on the 320px edge with no
   overflow. */
@media (max-width: 359px) {
  .header .iconbtn,
  .header .iconbtn--bordered { width: 44px; }
}

@media (max-width: 1023px) {
  :root { --h-chiprail: 48px; }
  .chiprail__link { position: relative; }
  .chiprail__link::after { content: ""; position: absolute; inset: -9px 0; }
}