/* ==========================================================================
   Site chrome + homepage
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-4);
}

/* Placeholder wordmark. Final name + logo drop into this fixed slot without
   reflowing the header. Spec 9. */
.brand { display: flex; align-items: center; gap: var(--s-2); flex: none; min-width: 0; }
.brand__mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-500); color: #fff;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: -.02em;
}
.brand__mark--logo { background: none; object-fit: contain; }
.brand__name { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name b { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: -.02em; }
.brand__name span { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }

/* Header-only: bigger mark + name for clearer branding, tagline untouched.
   The footer reuses these same .brand classes at their original size. */
.site-header .brand { gap: var(--s-3); }
.site-header .brand__mark { width: 42px; height: 42px; font-size: var(--fs-md); }
.site-header .brand__name { line-height: 1.15; }
.site-header .brand__name b { font-size: var(--fs-xl); }
@media (max-width: 480px) { .brand__name { display: none; } }

.main-nav { display: none; margin-inline-start: var(--s-2); }
@media (min-width: 940px) { .main-nav { display: flex; align-items: center; gap: var(--s-1); } }

/* --- Mobile menu ---------------------------------------------------------
   The inverse of .main-nav's own breakpoint: below 940px, .main-nav
   disappears with nothing standing in for it, so this is that
   replacement — every section it would have listed, reachable from every
   page without scrolling all the way to the footer. */
.mobile-nav-anchor { position: relative; display: block; }
@media (min-width: 940px) { .mobile-nav-anchor { display: none; } }
.mobile-nav-panel {
  position: fixed; inset-inline: var(--s-3); inset-block-start: calc(var(--header-h) + 8px);
  z-index: 60; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
  padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.mobile-nav-panel[hidden] { display: none; }
.mobile-nav-panel__search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--text); font: inherit;
}
.mobile-nav-panel__search {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); margin-bottom: var(--s-2);
  border-radius: var(--r-md); background: var(--surface-alt); color: var(--text-faint);
  font-size: var(--fs-sm);
}
.mobile-nav-panel nav { display: flex; flex-direction: column; }
.mobile-nav-panel nav a {
  padding: var(--s-3); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text);
  border-inline-start: 3px solid transparent;
}
.mobile-nav-panel nav a:hover, .mobile-nav-panel nav a:focus-visible { background: var(--surface-alt); }
.mobile-nav-panel nav a[data-section] { border-inline-start-color: var(--accent); }
.main-nav a {
  position: relative;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.main-nav a:hover { color: var(--text); background: var(--surface-alt); }
.main-nav a[data-section]::before {
  content: ""; position: absolute; inset-block-end: 3px; inset-inline: var(--s-3);
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.main-nav a[data-section]:hover::before { transform: scaleX(1); }

.header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-1); }

.search-trigger {
  display: none; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); min-width: 220px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-faint);
  font-size: var(--fs-sm); cursor: pointer;
}
@media (min-width: 720px) { .search-trigger { display: flex; } }
.search-trigger:hover { border-color: var(--border-strong); }
.search-trigger:focus-within { border-color: var(--brand-500); }
.search-trigger input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--text); font: inherit;
}
/* The keyboard hint is a hint, not a label: once someone is typing it is
   just clutter beside their own text. */
.search-trigger:focus-within kbd { display: none; }
.search-trigger kbd {
  margin-inline-start: auto; font-family: var(--font-en); font-size: 10px;
  padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}

/* --- News ticker — thin, muted, professional. Spec 6.8 ------------------ */
.ticker {
  display: flex; align-items: center; gap: var(--s-3);
  height: 34px; overflow: hidden;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.ticker__label {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--sec-news); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .06em;
}
.ticker__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sec-news);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ticker__viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
.ticker__track {
  display: flex; align-items: center; gap: var(--s-8);
  white-space: nowrap; width: max-content;
  animation: ticker-scroll 48s linear infinite;
}
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .ticker__track { animation-direction: reverse; }
.ticker__item { color: var(--text-muted); }
.ticker__item:hover { color: var(--text); }
.ticker__item time { color: var(--text-faint); margin-inline-end: var(--s-2); }
/* A strip that never stops moving is a genuine problem for some readers, so it
   holds still when the system asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; }
  .ticker__dot { animation: none; }
}

/* --- Hero ---------------------------------------------------------------
   A photograph carries the opening rather than a paragraph. The scrim is
   built from the brand green so the image sits inside the palette instead
   of fighting it.                                                          */
/* The hero is legible with or without a photograph. Without one it keeps the
   normal text colours; the white treatment belongs to the scrim, and applying
   it unconditionally left white type on a white ground. */
.hero {
  --hero-fg: var(--text);
  --hero-fg-muted: var(--text-muted);
  --hero-rule: var(--border);

  position: relative; overflow: hidden;
  min-height: 380px;
  display: flex; align-items: flex-end;
  padding-block: var(--s-12) var(--s-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(90% 120% at 8% 0%, color-mix(in srgb, var(--brand-500) 10%, transparent), transparent 55%),
    radial-gradient(70% 100% at 95% 10%, color-mix(in srgb, var(--sec-overseas) 9%, transparent), transparent 60%),
    var(--bg-subtle);
}
.hero--photo {
  --hero-fg: #fff;
  --hero-fg-muted: rgba(255,255,255,.86);
  --hero-rule: rgba(255,255,255,.22);
  min-height: 460px;
  padding-block: var(--s-16) var(--s-8);
  background: var(--bg-sunken);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* The hero can grow tall on narrow screens, so the wash needs a floor:
     white type must stay readable over the brightest part of any photo. */
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--brand-700) 93%, transparent) 0%,
      color-mix(in srgb, var(--brand-700) 80%, transparent) 45%,
      color-mix(in srgb, var(--brand-700) 66%, transparent) 100%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--brand-700) 45%, transparent),
      transparent 70%);
}
.hero__inner { position: relative; display: grid; gap: var(--s-8); width: 100%; }
@media (min-width: 940px) { .hero__inner { grid-template-columns: 1.1fr .9fr; align-items: end; } }

.hero__copy { color: var(--hero-fg); }
.hero h1 { font-size: var(--fs-2xl); text-wrap: balance; color: var(--hero-fg); }
@media (min-width: 768px) { .hero h1 { font-size: var(--fs-4xl); } }
.hero__lede {
  margin-top: var(--s-3); max-width: 46ch;
  font-size: var(--fs-md); color: var(--hero-fg-muted);
}
.hero--photo .pill--muted {
  background: rgba(255,255,255,.16); color: #fff;
  backdrop-filter: blur(6px);
}

/* Hero search */
.hero-search { display: flex; gap: var(--s-2); max-width: 520px; margin-top: var(--s-6); }
.hero-search__field {
  flex: 1; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.hero-search__field:focus-within { border-color: var(--brand-500); }
.hero-search__field svg { color: var(--text-faint); flex: none; }
.hero-search input { flex: 1; border: 0; background: transparent; outline: none; min-width: 0; }

/* On a phone the field is about 190px, and the placeholder
   "Try “welder Qatar” or “وظیفہ”" needs more than that, so it truncated
   mid-word and cut off the Urdu half. The Urdu half is the entire reason
   the placeholder exists: it is how a reader learns they can search in
   their own language before they have typed anything.

   So the button gives up its label below 480px and becomes its own icon.
   That returns roughly 60px to the field, which is enough for the whole
   placeholder, and a magnifier beside a search box needs no caption. */
@media (max-width: 479px) {
  .hero-search .btn--primary {
    font-size: 0;            /* Hides the label without removing it from the DOM. */
    padding-inline: var(--s-4);
  }
  .hero-search .btn--primary::after {
    content: "";
    display: block;
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: var(--pip-search-icon) center / contain no-repeat;
    mask: var(--pip-search-icon) center / contain no-repeat;
  }
}
:root {
  --pip-search-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.hero__hint { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--hero-fg-muted); }

.hero__stats {
  margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--hero-rule);
}
.hero__stat b {
  display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: -.02em; color: var(--hero-fg); font-variant-numeric: tabular-nums;
}
.hero__stat span { font-size: var(--fs-xs); color: var(--hero-fg-muted); }

/* --- Section shortcuts ---------------------------------------------------
   Five doors, in five colours. Carries the colour of the whole site in one
   glance and replaces a paragraph of explanation.                          */
.shortcuts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
  margin-top: calc(var(--s-8) * -1); position: relative; z-index: 5;
}
@media (min-width: 720px) { .shortcuts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .shortcuts { grid-template-columns: repeat(6, 1fr); } }
.shortcut {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shortcut:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.shortcut__icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
}
.shortcut__icon svg { width: 20px; height: 20px; }
.shortcut b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.shortcut span {
  font-size: var(--fs-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Onboarding — first visit interest picker. Spec 6.4 ----------------- */
.onboarding {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow-lg);
}
.onboarding[hidden] { display: none; }
.onboarding__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.onboarding__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); }
.onboarding__opts { display: grid; gap: var(--s-2); margin: var(--s-5) 0; }
.opt {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.opt__box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: all var(--dur-fast) var(--ease); }
.opt input:checked + .opt__box { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .opt__box svg { opacity: 1; transform: scale(1); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.opt__icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.opt__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.opt__label span { display: block; font-weight: var(--fw-normal); font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Returning-visitor strip. Spec 6.4 ---------------------------------- */
.welcome-back {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); margin-block: var(--s-6) 0;
  background: var(--brand-100); border: 1px solid color-mix(in srgb, var(--brand-500) 22%, transparent);
  border-radius: var(--r-md); font-size: var(--fs-sm);
}
.welcome-back svg { color: var(--brand-500); flex: none; }
.welcome-back a { color: var(--brand-500); font-weight: var(--fw-medium); text-decoration: underline; }
.welcome-back button { margin-inline-start: auto; }

/* --- Homepage main/aside layout ----------------------------------------- */
.home-layout { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .home-layout { grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-10); align-items: start; } }
.home-aside { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .home-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }

/* --- Section tabs (New this week) --------------------------------------- */
.tabs { display: flex; gap: var(--s-1); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text); border-color: var(--border-strong); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: var(--text-on-accent); }

/* --- Deadline mini-calendar teaser. Spec 6.1 ---------------------------- */
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: var(--s-3); }
.mini-cal__dow { font-size: 10px; color: var(--text-faint); text-align: center; padding-bottom: var(--s-1); }
.mini-cal__day {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  font-size: var(--fs-xs); border-radius: var(--r-sm); color: var(--text-muted);
}
.mini-cal__day--muted { color: var(--text-faint); opacity: .45; }
.mini-cal__day--today { background: var(--brand-500); color: #fff; font-weight: var(--fw-semi); }
.mini-cal__day--has::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--dot, var(--text-faint));
}
.mini-cal__legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-4); font-size: 10px; color: var(--text-muted); }
.mini-cal__legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-inline-end: 4px; }

/* --- Alerts / digest sign-up. Spec 6.4, 6.6 ----------------------------- */
.subscribe { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
.subscribe input[type="email"] {
  width: 100%; padding: var(--s-3); margin-block: var(--s-3) var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); outline: none;
}
.subscribe input[type="email"]:focus { border-color: var(--brand-500); }
.subscribe small { display: block; margin-top: var(--s-2); font-size: 11px; color: var(--text-faint); }

/* --- Ad slot — clearly separated from content and from action buttons.
       Spec 8.                                                             */
.ad-slot {
  display: grid; place-items: center; gap: var(--s-1);
  min-height: 250px; padding: var(--s-4);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg-subtle); color: var(--text-faint);
  font-size: var(--fs-xs); text-align: center;
}
.ad-slot b { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s-16); padding-block: var(--s-10) var(--s-6);
  background: var(--bg-subtle); border-top: 1px solid var(--border);
}
.footer-grid { display: grid; gap: var(--s-8); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer-col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: var(--s-3); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer-col a { font-size: var(--fs-sm); color: var(--text-muted); }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-note {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  font-size: var(--fs-xs); color: var(--text-faint);
}
.footer-note p { max-width: 70ch; line-height: var(--lh-base); }

/* --- PWA install prompt. Spec 6.7 --------------------------------------- */
.install-prompt {
  position: fixed; inset-inline: var(--s-4); inset-block-end: var(--s-4); z-index: 80;
  max-width: 420px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: slide-up var(--dur-slow) var(--ease);
}
.install-prompt[hidden] { display: none; }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.install-prompt__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--brand-500); color: #fff;
}
.install-prompt__text { flex: 1; min-width: 0; }
.install-prompt__text b { display: block; font-size: var(--fs-sm); }
.install-prompt__text span { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Accessibility / display controls. Spec 6.7 ------------------------- */
.a11y-anchor { position: relative; }
.a11y-toggle__glyph { font-weight: 700; font-size: 12px; letter-spacing: -0.02em; }
.a11y-panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px);
  width: 250px; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 60;
}
.a11y-panel[hidden] { display: none; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); }
.a11y-row + .a11y-row { border-top: 1px solid var(--border); }
.a11y-row > span { font-size: var(--fs-sm); }
.seg { display: inline-flex; padding: 2px; background: var(--bg-sunken); border-radius: var(--r-md); }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* --- First-visit feature tour -------------------------------------------
   A single fixed-position "highlight" box supplies the dimming: its own
   box-shadow spreads to cover the whole viewport, leaving a cutout only
   where the box itself sits, over the real header control. No separate
   full-page scrim element needed, and it never blocks clicks on the page. */
.pip-tour-highlight {
  position: fixed; z-index: 205; pointer-events: none;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(10, 10, 15, .6);
  transition: top var(--dur) var(--ease), left var(--dur) var(--ease),
    width var(--dur) var(--ease), height var(--dur) var(--ease);
}
.pip-tour-tip {
  position: fixed; z-index: 210; width: min(300px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-4);
  transition: top var(--dur) var(--ease), left var(--dur) var(--ease);
}
.pip-tour-tip h3 { margin: 0 0 var(--s-2); font-size: var(--fs-md); }
.pip-tour-tip p { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-base); }
.pip-tour-tip__dots { display: flex; gap: 5px; margin-bottom: var(--s-3); }
.pip-tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.pip-tour-dot.is-active { background: var(--accent); }
.pip-tour-tip__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* --- Toast -------------------------------------------------------------- */
.toast {
  position: fixed; inset-block-end: var(--s-6); inset-inline-start: 50%;
  transform: translate(-50%, 12px); z-index: 100;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full);
  background: var(--text); color: var(--bg);
  font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --- News strip ---------------------------------------------------------
   Horizontal media rows, deliberately lighter than the opportunity cards:
   News is a real section but a secondary one. Spec 3.                      */
.news-strip { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .news-strip { grid-template-columns: repeat(3, 1fr); } }
.news-item {
  position: relative;
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.news-item:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.news-item__thumb {
  flex: none; width: 84px; aspect-ratio: 1;
  border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunken);
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__text { min-width: 0; }
.news-item__title {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item__title a::after { content: ""; position: absolute; inset: 0; }
.news-item__meta {
  margin-top: var(--s-2); font-size: 11px; color: var(--text-faint);
  display: flex; align-items: center; gap: var(--s-2);
}
.news-item__meta i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block;
}

/* ---------------------------------------------------------------------------
   Compact hero (September 2026). Search removed from the hero, panel options
   two to a row, so the whole block is roughly two thirds of its old height.
   Delete this block to return to the previous proportions.
   --------------------------------------------------------------------------- */
.hero { min-height: 0; padding-block: var(--s-8) var(--s-6); }
.hero--photo { min-height: 0; padding-block: var(--s-10) var(--s-6); }
@media (min-width: 768px) { .hero h1 { font-size: var(--fs-3xl); } }
.hero__stats { margin-top: var(--s-5); padding-top: var(--s-4); }
.onboarding { padding: var(--s-5); }
.onboarding__opts { grid-template-columns: 1fr 1fr; margin: var(--s-4) 0; }
.onboarding .opt { padding: var(--s-2) var(--s-3); gap: var(--s-2); min-width: 0; }
.onboarding .opt__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Six sections in the header since Internships was added. Labels stay on one
   line; the header search narrows a little on mid-size screens to make room. */
.main-nav a { white-space: nowrap; }
@media (min-width: 940px) and (max-width: 1199px) {
  .main-nav a { padding-inline: var(--s-2); font-size: var(--fs-sm); }
}