/* ============================================================================
   KRDWEATHER.HELP — Design System v3
   Palette sampled from the brand marks (navy / roj gold / sage / slate).
   Bidirectional by construction: physical left/right properties are not used
   anywhere in the layout, so RTL is a direction flip, not a second stylesheet.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS
   Primitives are the raw brand colours. Everything else references a
   *semantic* token, so re-theming means editing one block, never a component.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand primitives — sampled from the logo lockup ── */
  --krd-navy:        #1E4D66;
  --krd-navy-700:    #17415a;
  --krd-navy-900:    #0E2430;
  --krd-slate:       #5C6B8C;   /* mountain body in the square mark */
  --krd-gold:        #F5B02C;   /* sun arc, K stroke */
  --krd-gold-600:    #E09A18;
  --krd-sage:        #8FC79C;   /* foothill in the lockup */
  --krd-green:       #159447;   /* foothill in the square mark */
  --krd-grey:        #808285;   /* ".HELP" */
  --krd-paper:       #F4F5F7;

  /* ── Kurdish flag — cultural accents. Red is reserved for alerts only. ── */
  --krd-flag-red:    #ED2024;
  --krd-flag-green:  #278E43;
  --krd-roj:         #FEBD11;

  /* ── Typography ── */
  --font-display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-num:     'JetBrains Mono', ui-monospace, monospace;
  /* Swapped in by [lang] rules further down */
  --font-arabic-display: 'Noto Kufi Arabic', 'Montserrat', sans-serif;
  --font-arabic-ui:      'Noto Naskh Arabic', 'Noto Sans Arabic', 'Inter', sans-serif;

  /* ── Fluid type scale (clamp: min, preferred, max) ── */
  --fs-micro: clamp(.625rem, .58rem + .18vw, .7rem);
  --fs-xs:    clamp(.72rem, .68rem + .2vw,  .8rem);
  --fs-sm:    clamp(.82rem, .78rem + .2vw,  .9rem);
  --fs-base:  clamp(.94rem, .9rem + .22vw,  1.02rem);
  --fs-lg:    clamp(1.1rem, 1rem + .5vw,    1.35rem);
  --fs-xl:    clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --fs-hero:  clamp(3.6rem, 2.4rem + 7vw,   7.5rem);

  /* ── Spacing — one modular scale, used via logical properties ── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* ── Shape ── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms var(--ease-out);
  --t-base: 320ms var(--ease-out);
  --t-slow: 640ms var(--ease-out);

  --header-h: 68px;
  --shell-max: 1640px;
}

/* ── Semantic tokens: DARK (default — matches the night-sky feel) ── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--krd-navy-900);
  --bg-elevated:   #12303F;
  --surface:       rgb(255 255 255 / .035);
  --surface-hover: rgb(255 255 255 / .06);
  --border:        rgb(255 255 255 / .08);
  --border-strong: rgb(255 255 255 / .16);

  --text:          #EAF2F6;
  --text-muted:    rgb(234 242 246 / .62);
  --text-faint:    rgb(234 242 246 / .34);

  --accent:        var(--krd-gold);
  --accent-ink:    var(--krd-navy-900);   /* text ON the accent */
  --accent-soft:   rgb(245 176 44 / .14);
  --secondary:     var(--krd-sage);
  --tertiary:      var(--krd-slate);

  --ring: 0 0 0 1px rgb(255 255 255 / .07);
  --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .55);
  --glass-blur: blur(22px) saturate(165%);

  --sky-1: #0E2430; --sky-2: #143a4d; --sky-3: #0b1c26;
}

/* ── Semantic tokens: LIGHT (paper tone straight off the logo sheet) ── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--krd-paper);
  --bg-elevated:   #ffffff;
  --surface:       rgb(255 255 255 / .8);
  --surface-hover: #ffffff;
  --border:        rgb(30 77 102 / .12);
  --border-strong: rgb(30 77 102 / .24);

  --text:          var(--krd-navy);
  --text-muted:    rgb(30 77 102 / .68);
  --text-faint:    rgb(30 77 102 / .42);

  --accent:        var(--krd-gold-600);
  --accent-ink:    #ffffff;
  --accent-soft:   rgb(245 176 44 / .16);
  --secondary:     var(--krd-green);
  --tertiary:      var(--krd-slate);

  --ring: 0 0 0 1px rgb(30 77 102 / .06);
  --shadow-card: 0 1px 2px rgb(30 77 102 / .06), 0 14px 34px -16px rgb(30 77 102 / .28);
  --glass-blur: blur(18px) saturate(150%);

  --sky-1: #E8EEF2; --sky-2: #F7F9FA; --sky-3: #DCE6EC;
}

/* Honour the OS preference when the user has not chosen explicitly */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: var(--krd-paper); --bg-elevated: #fff;
    --surface: rgb(255 255 255 / .8); --surface-hover: #fff;
    --border: rgb(30 77 102 / .12); --border-strong: rgb(30 77 102 / .24);
    --text: var(--krd-navy); --text-muted: rgb(30 77 102 / .68); --text-faint: rgb(30 77 102 / .42);
    --accent: var(--krd-gold-600); --accent-ink: #fff; --secondary: var(--krd-green);
    --shadow-card: 0 1px 2px rgb(30 77 102 / .06), 0 14px 34px -16px rgb(30 77 102 / .28);
    --sky-1: #E8EEF2; --sky-2: #F7F9FA; --sky-3: #DCE6EC;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body { min-height: 100svh; background: var(--bg); font-size: var(--fs-base); line-height: 1.5; }

/* Script-aware font switching — one rule per language, no JS font juggling */
html[lang="ckb"], html[lang="ar"] { --font-ui: var(--font-arabic-ui); --font-display: var(--font-arabic-display); }
html[lang="ckb"] body, html[lang="ar"] body { line-height: 1.85; letter-spacing: 0; }

img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration-color: rgb(from currentColor r g b / .35); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--sp-4);
  z-index: 999; padding: var(--sp-3) var(--sp-5);
  background: var(--accent); color: var(--accent-ink);
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700;
  transition: inset-block-start var(--t-fast);
}
.skip-link:focus { inset-block-start: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   3. AMBIENT SKY — depth layer behind everything
   ───────────────────────────────────────────────────────────────────────── */
.sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--sky-2), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, var(--sky-3), transparent 65%),
    var(--sky-1);
}

.sky__orb { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .55; }
.sky__orb--roj {
  inline-size: min(52vw, 620px); aspect-ratio: 1;
  inset-block-start: -18%; inset-inline-end: -10%;
  background: radial-gradient(circle, rgb(245 176 44 / .3), transparent 62%);
  animation: drift 34s ease-in-out infinite;
}
.sky__orb--sage {
  inline-size: min(44vw, 520px); aspect-ratio: 1;
  inset-block-end: -12%; inset-inline-start: -12%;
  background: radial-gradient(circle, rgb(143 199 156 / .22), transparent 62%);
  animation: drift 42s ease-in-out infinite reverse;
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, 4%, 0) scale(1.07); }
}

/* Zagros ridge — the mountain silhouette from the mark, echoed along the base */
.sky__ridge {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: clamp(120px, 22vh, 260px);
  opacity: .5;
  background: var(--tertiary);
  -webkit-mask: var(--ridge-mask) repeat-x bottom / auto 100%;
          mask: var(--ridge-mask) repeat-x bottom / auto 100%;
  --ridge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V74l46-40 34 30 40-46 44 52 36-26 48 44 40-34 38 30 34-22v58z' fill='%23000'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────────────────
   4. KURDISH MOTIFS
   Kilim banding and the 21-ray Roj, used as structural ornament rather
   than decoration bolted on top.
   ───────────────────────────────────────────────────────────────────────── */

/* Woven kilim band — stepped diamonds, the common Kurdish flat-weave motif */
.kilim {
  block-size: 10px; inline-size: 100%; border: 0; flex-shrink: 0;
  background: var(--kilim-img) repeat-x center / auto 100%;
  opacity: .5;
  --kilim-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cg fill='none' stroke='%23F5B02C' stroke-width='1.4'%3E%3Cpath d='M0 6l6-5 6 5-6 5z'/%3E%3Cpath d='M12 6l6-5 6 5-6 5z' stroke='%238FC79C'/%3E%3Cpath d='M24 6l6-5 6 5-6 5z'/%3E%3Cpath d='M36 6l6-5 6 5-6 5z' stroke='%235C6B8C'/%3E%3C/g%3E%3C/svg%3E");
}
.kilim--tight { block-size: 7px; opacity: .38; }

/* The Roj — 21 rays, drawn by conic-gradient so it costs one element */
.roj {
  inline-size: 3rem; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--krd-roj) 27%, transparent 28%),
    repeating-conic-gradient(var(--krd-roj) 0 3.2deg, transparent 3.2deg 17.142857deg);
  -webkit-mask: radial-gradient(circle, #000 0 48%, transparent 49%), radial-gradient(circle, #000 0 100%);
  -webkit-mask-composite: source-over;
  animation: roj-spin 24s linear infinite;
}
@keyframes roj-spin { to { transform: rotate(360deg); } }

/* Loading state uses the Roj instead of a generic spinner */
.roj--loading { inline-size: 4rem; animation-duration: 3.2s; }

/* ─────────────────────────────────────────────────────────────────────────
   5. HEADER
   Grid with named areas — column order follows writing direction, so the
   whole bar mirrors in RTL with no overrides.
   ───────────────────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; inset-block-start: 0; z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: var(--header-h);
  padding-inline: var(--sp-5);
  padding-block: var(--sp-2);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.brand__mark { inline-size: 34px; block-size: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
}
.brand__tld { color: var(--text-faint); font-weight: 700; }
.brand__region {
  font-size: var(--fs-micro); color: var(--text-faint);
  letter-spacing: .14em; text-transform: uppercase; margin-block-start: 3px;
}

.masthead__tools { display: flex; align-items: center; gap: var(--sp-3); justify-self: end; }

/* Live badge */
.live { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgb(21 148 71 / .14); border: 1px solid rgb(21 148 71 / .3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; }
.live__dot { inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--krd-green);
  box-shadow: 0 0 0 0 rgb(21 148 71 / .6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgb(21 148 71 / 0); } 100% { box-shadow: 0 0 0 0 rgb(21 148 71 / 0); } }

/* Language switcher */
.langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); }
.lang-btn { padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-micro);
  font-weight: 700; letter-spacing: .06em; color: var(--text-muted); transition: all var(--t-fast); }
.lang-btn:hover { color: var(--text); background: var(--surface-hover); }
.lang-btn.active { background: var(--accent); color: var(--accent-ink); }

/* Theme toggle */
.theme-toggle { inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); transition: all var(--t-fast); }
.theme-toggle:hover { color: var(--accent); border-color: var(--border-strong); }
.theme-toggle svg { inline-size: 16px; }
:root[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } }

/* Location pill + clock */
.location-pill { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-block: 5px; padding-inline: var(--sp-3); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted); max-inline-size: 15rem; }
.loc-icon { inline-size: 12px; flex-shrink: 0; color: var(--accent); }
#location-name { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.loc-flag { display: inline-flex; align-items: center; flex-shrink: 0; }
.loc-city { color: var(--text); font-weight: 600; }
.loc-sep { color: var(--text-faint); }
.loc-country { overflow: hidden; text-overflow: ellipsis; }
.flag-krd { inline-size: 19px; block-size: 12.6px; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.loc-flag .flag-krd { inline-size: 15px; block-size: 10px; }

.clock { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ── Masthead, narrow screens ──
   Below 900px the search drops to its own row so it keeps a usable target
   size; below 560px the ambient chrome (live badge, clock, brand sub-label)
   is dropped rather than shrunk, keeping the bar legible on a phone. */
@media (max-width: 900px) {
  /* Flex rather than grid here: grid's `auto` track takes the brand's
     max-content width and the tools' min-content width, which together can
     exceed a phone viewport. Flex lets both shrink and pushes search to
     its own full-width row. */
  .masthead {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    row-gap: var(--sp-3); column-gap: var(--sp-3);
    padding-inline: var(--sp-4);
  }
  .brand { flex: 0 1 auto; min-inline-size: 0; }
  .masthead__tools { flex: 0 1 auto; min-inline-size: 0; flex-wrap: wrap; justify-content: flex-end; }
  .search-wrapper { flex: 1 0 100%; order: 3; inline-size: 100%; }
  .location-pill { min-inline-size: 0; }
}

@media (max-width: 560px) {
  /* The pill repeats what the hero card already shows as an <h1>, and it was
     forcing the tools onto a second row. The country stays visible there. */
  .live, .clock, .brand__region, .location-pill { display: none; }
  .masthead__tools { gap: var(--sp-2); }
  .location-pill { max-inline-size: 9.5rem; }
  .brand__mark { inline-size: 28px; block-size: 28px; }
  .lang-btn { padding-inline: 8px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. SEARCH
   ───────────────────────────────────────────────────────────────────────── */
.search-wrapper { position: relative; inline-size: min(100%, 30rem); margin-inline: auto; }

.search-input {
  inline-size: 100%; padding-block: var(--sp-3);
  padding-inline-start: 2.75rem; padding-inline-end: 2.75rem;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
  transition: all var(--t-fast);
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { outline: none; border-color: var(--accent); background: var(--bg-elevated);
  box-shadow: 0 0 0 4px var(--accent-soft); }

.search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--sp-4);
  translate: 0 -50%; inline-size: 17px; color: var(--text-faint); pointer-events: none; }

.geo-btn { position: absolute; inset-block-start: 50%; inset-inline-end: 6px; translate: 0 -50%;
  inline-size: 32px; block-size: 32px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-faint); transition: all var(--t-fast); }
.geo-btn:hover { color: var(--accent); background: var(--accent-soft); }
.geo-btn svg { inline-size: 17px; }
.geo-btn.locating svg { animation: roj-spin 1s linear infinite; color: var(--accent); }
.geo-btn.located { color: var(--krd-green); }

.search-results {
  position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline: 0;
  z-index: 60; max-block-size: 60vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity var(--t-fast), translate var(--t-fast), visibility var(--t-fast);
  padding-block: var(--sp-2);
}
.search-results.open { opacity: 1; visibility: visible; translate: 0 0; }

.sr-section-header {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-block: var(--sp-2); padding-inline: var(--sp-4);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.sr-section-header svg { inline-size: 12px; color: var(--accent); }

.sr-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-3); padding-inline: var(--sp-4);
  cursor: pointer; transition: background var(--t-fast);
  border-inline-start: 2px solid transparent;
}
.sr-item:hover, .sr-item:focus-visible {
  background: var(--surface-hover); border-inline-start-color: var(--accent); outline: none;
}
.sr-item-krd:hover { border-inline-start-color: var(--krd-green); }
.sr-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.sr-flag { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 1rem; line-height: 1; }
.sr-meta { margin-inline-start: auto; font-size: var(--fs-micro); color: var(--text-faint);
  text-align: end; white-space: nowrap; }
.sr-body { display: flex; flex-direction: column; }

/* Search skeleton */
.sr-skeleton-row { pointer-events: none; }
.sr-sk-bar, .sr-sk-flag { display: block; border-radius: 4px; background: var(--surface-hover);
  animation: shimmer 1.5s ease-in-out infinite; }
.sr-sk-flag { inline-size: 18px; block-size: 12px; }
.sr-sk-pulse { margin-inline-start: auto; font-size: var(--fs-micro); color: var(--text-faint);
  animation: shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }

/* ─────────────────────────────────────────────────────────────────────────
   7. DASHBOARD GRID
   12 columns; grid tracks follow writing direction so RTL mirrors for free.
   ───────────────────────────────────────────────────────────────────────── */
.dashboard {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-4);
  inline-size: min(100% - var(--sp-6), var(--shell-max));
  margin-inline: auto;
  padding-block: var(--sp-6) var(--sp-8);
}

.card-hero      { grid-column: span 5; grid-row: span 2; }
.card-aqi       { grid-column: span 4; grid-row: span 2; }
.card-sun       { grid-column: span 3; grid-row: span 2; }
.card-metric    { grid-column: span 3; }
.card-pollutant { grid-column: span 3; }
.card-chart     { grid-column: span 12; }
.cache-strip    { grid-column: 1 / -1; }
.section-head   { grid-column: 1 / -1; }

@media (max-width: 1280px) {
  .card-hero { grid-column: span 6; } .card-aqi { grid-column: span 6; }
  .card-sun  { grid-column: span 6; } .card-metric, .card-pollutant { grid-column: span 3; }
}
@media (max-width: 900px) {
  .card-hero, .card-aqi, .card-sun { grid-column: span 12; grid-row: auto; }
  .card-metric, .card-pollutant { grid-column: span 6; }
}
@media (max-width: 560px) {
  .dashboard { gap: var(--sp-3); inline-size: min(100% - var(--sp-4), var(--shell-max)); }
  .card-metric, .card-pollutant { grid-column: span 6; }
}

/* Section heading between card groups */
.section-head { display: flex; align-items: center; gap: var(--sp-4);
  margin-block-start: var(--sp-5); }
.section-head h2 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800;
  letter-spacing: .02em; white-space: nowrap; }
.section-head .kilim { flex: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   8. CARDS
   ───────────────────────────────────────────────────────────────────────── */
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

/* Cursor spotlight — the element app.js writes a radial-gradient into */
.card-spotlight { position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--t-base); }
.card:hover .card-spotlight { opacity: 1; }

/* Gold hairline along the block-start edge, echoing the logo's sun stroke */
.card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity var(--t-base);
}
.card:hover::before { opacity: .55; }

.card-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ── Hero ── */
.card-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.hero-city { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800;
  line-height: 1.1; transition: opacity var(--t-base); }
.weather-icon-img { inline-size: 72px; block-size: 72px; filter: drop-shadow(0 6px 16px rgb(0 0 0 / .35)); }

.hero-temp { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: .88; }
.temp-value { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  background: linear-gradient(150deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.temp-unit { font-size: var(--fs-lg); font-weight: 700; color: var(--text-faint); margin-block-start: .6em; }

.weather-desc { font-size: var(--fs-lg); color: var(--text-muted); }

.hero-divider { block-size: 1px; background: var(--border); border: 0; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.micro-label { display: block; font-size: var(--fs-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-block-end: 2px; }
.feels-val { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 600; }

.temp-range { display: flex; gap: var(--sp-4); }
.range-item { display: flex; align-items: center; gap: 5px; font-family: var(--font-num);
  font-size: var(--fs-sm); font-weight: 600; }
.range-item svg { inline-size: 10px; }
.range-low  { color: var(--tertiary); }
.range-high { color: var(--accent); }

/* ── AQI ── */
.aqi-body { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.aqi-ring { position: relative; inline-size: 132px; flex-shrink: 0; }
.aqi-svg { inline-size: 100%; }
.aqi-ring__inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.aqi-number { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; }
.aqi-unit { font-size: var(--fs-micro); color: var(--text-faint); }
.aqi-info { flex: 1; min-inline-size: 11rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.aqi-status { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; }
.aqi-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

.aqi-scale { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-1); }
.aqi-scale__item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.aqi-dot { inline-size: 9px; aspect-ratio: 1; border-radius: 50%; opacity: .3; transition: all var(--t-base); }
.aqi-dot.active { opacity: 1; scale: 1.5; box-shadow: 0 0 12px currentColor; }
.aqi-dot-lbl { font-size: 9px; color: var(--text-faint); letter-spacing: .04em; }

/* ── Solar ── */
.sun-arc { inline-size: 100%; }
.sun-countdown { text-align: center; font-family: var(--font-num); font-size: var(--fs-sm);
  font-weight: 600; color: var(--accent); }
.sun-times { display: flex; align-items: center; justify-content: space-around; gap: var(--sp-3); }
.sun-time-block { display: flex; align-items: center; gap: var(--sp-2); }
.sun-icon { inline-size: 18px; flex-shrink: 0; }
.sun-label { display: block; font-size: var(--fs-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); }
.sun-time { font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 600; }
.sun-divider { inline-size: 1px; align-self: stretch; background: var(--border); }

/* ── Metric cards ── */
.metric-icon { inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.metric-icon svg { inline-size: 17px; }
.metric-icon--sage  { background: rgb(143 199 156 / .16); color: var(--krd-sage); }
.metric-icon--slate { background: rgb(92 107 140 / .2);  color: var(--krd-slate); }
.metric-icon--green { background: rgb(21 148 71 / .14);  color: var(--krd-green); }

.metric-val { display: flex; align-items: baseline; gap: 5px; }
.metric-big { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; }
.metric-unit { font-size: var(--fs-xs); color: var(--text-faint); }
.metric-caption { font-size: var(--fs-micro); color: var(--text-muted); }

/* Gradient *line directions* have no logical form in any shipping engine:
   `to inline-end` / `to block-start` are CSS Images 4 and unimplemented, so
   the declaration is dropped and the element ends up with no background at
   all. Physical directions here, mirrored for RTL in section 12. Logical
   *box* properties elsewhere in this file are fine — it is only gradients. */
.track { block-size: 4px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.track__fill { block-size: 100%; border-radius: var(--r-pill); inline-size: 0;
  background: linear-gradient(to right, var(--accent), var(--krd-roj));
  transition: inline-size 1s var(--ease-out); }
.track__fill--sage  { background: linear-gradient(to right, var(--krd-slate), var(--krd-sage)); }
.track__fill--green { background: linear-gradient(to right, var(--krd-green), var(--krd-sage)); }

/* Compass */
.compass-row { display: flex; align-items: center; gap: var(--sp-3); }
.compass { position: relative; inline-size: 44px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--border); flex-shrink: 0; }
.compass span { position: absolute; font-size: 7px; color: var(--text-faint); }
.cp-n { inset-block-start: 2px; inset-inline-start: 50%; translate: -50% 0; }
.cp-s { inset-block-end: 2px; inset-inline-start: 50%; translate: -50% 0; }
.cp-e { inset-inline-end: 3px; inset-block-start: 50%; translate: 0 -50%; }
.cp-w { inset-inline-start: 3px; inset-block-start: 50%; translate: 0 -50%; }
.compass-needle { position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 2px; block-size: 40%; border-radius: var(--r-pill);
  background: linear-gradient(to top, transparent, var(--accent));
  transform-origin: bottom center; transition: transform 1s var(--ease-spring); }
.wind-dir-text { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 600; color: var(--accent); }

/* ── Pollutants ── */
.pollutant-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pollutant-name { font-size: var(--fs-micro); color: var(--text-faint); }
.pollutant-val { display: flex; align-items: baseline; gap: 5px; }
.pollutant-big { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800;
  font-variant-numeric: tabular-nums; }
.pollutant-unit { font-size: var(--fs-micro); color: var(--text-faint); }
.pollutant-status { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; }

/* ── Chart ── */
.chart-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; }
.chart-legend { display: flex; gap: var(--sp-4); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-muted); }
.legend-pip { inline-size: 9px; block-size: 3px; border-radius: var(--r-pill); }
.pip-gold { background: var(--krd-gold); }
.pip-sage { background: var(--krd-sage); }
.chart-canvas { position: relative; block-size: clamp(220px, 30vh, 320px); margin-block-start: var(--sp-3); }

/* ── Cache strip ── */
.cache-strip { display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding-block: var(--sp-3); font-size: var(--fs-micro); color: var(--text-faint); }
.cache-indicator { inline-size: 6px; aspect-ratio: 1; border-radius: 50%;
  background: var(--krd-green); box-shadow: 0 0 8px var(--krd-green); }
.cache-indicator.stale { background: var(--krd-gold); box-shadow: 0 0 8px var(--krd-gold); }

/* ─────────────────────────────────────────────────────────────────────────
   9. LOADING / ERROR / TOAST
   ───────────────────────────────────────────────────────────────────────── */
.loading-overlay { grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); min-block-size: 46vh; }
.loading-overlay.fade-out { opacity: 0; transition: opacity .38s var(--ease-out); }
.loading-text { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

.error-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: rgb(237 32 36 / .1); border: 1px solid rgb(237 32 36 / .3); color: var(--text); }
.error-banner svg { inline-size: 20px; color: var(--krd-flag-red); flex-shrink: 0; }
.retry-btn { margin-inline-start: auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--krd-flag-red); color: #fff; font-size: var(--fs-xs); font-weight: 700; }

.geo-toast { position: fixed; inset-block-end: var(--sp-6); inset-inline-start: 50%;
  translate: -50% 20px; z-index: 200; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); font-size: var(--fs-xs);
  opacity: 0; visibility: hidden; transition: all var(--t-base); }
.geo-toast.show { opacity: 1; visibility: visible; translate: -50% 0; }
.geo-toast svg { inline-size: 15px; color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────
   10. FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; margin-block-start: var(--sp-7);
  border-block-start: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.footer__inner { inline-size: min(100% - var(--sp-6), var(--shell-max)); margin-inline: auto;
  padding-block: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-6);
  justify-content: space-between; }
.footer__wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); }
.footer__wordmark span { color: var(--text-faint); }
.footer__tagline { font-size: var(--fs-xs); color: var(--text-muted); max-inline-size: 34ch;
  margin-block-start: var(--sp-2); }
.footer__col { font-size: var(--fs-xs); color: var(--text-muted); text-align: end; }
.footer__col p + p { margin-block-start: var(--sp-2); }
.footer__author { color: var(--accent); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   11. MOTION — scroll-driven reveal
   Native scroll-timeline where supported; the JS fallback adds .in-view.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.985); }
                    to { opacity: 1; transform: none; } }

.reveal { animation: rise .7s var(--ease-out) both; animation-play-state: paused; }
.reveal.in-view { animation-play-state: running; }

@supports (animation-timeline: view()) {
  .reveal { animation-timeline: view(); animation-range: entry 0% entry 62%;
            animation-play-state: running; }
}

/* Weather ambience — body[data-weather] drives the particle field */
.weatherfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0;
  transition: opacity 1.2s var(--ease-out); }
body[data-weather="rain"] .weatherfx,
body[data-weather="snow"] .weatherfx { opacity: 1; }

.drop { position: absolute; inset-block-start: -12%; inline-size: 1px; block-size: 78px;
  background: linear-gradient(transparent, rgb(143 199 156 / .5));
  animation: fall linear infinite; }
body[data-weather="snow"] .drop { inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: rgb(255 255 255 / .75); animation-name: flutter; }

@keyframes fall    { to { transform: translateY(115vh); } }
@keyframes flutter { to { transform: translate(14px, 115vh); } }

/* ─────────────────────────────────────────────────────────────────────────
   12. RTL — logical properties handle layout; only glyph-level fixes remain
   ───────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .clock,
[dir="rtl"] .sun-time,
[dir="rtl"] .feels-val,
[dir="rtl"] .metric-big,
[dir="rtl"] .pollutant-big,
[dir="rtl"] .temp-value { direction: ltr; unicode-bidi: isolate; }

/* The compass is a physical instrument — north stays north regardless of script */
[dir="rtl"] .compass { direction: ltr; }

/* Progress fills grow from the inline-start edge; flip the ramp to match.
   (The card hairline is symmetrical and the needle is vertical, so neither
   needs an override.) */
[dir="rtl"] .track__fill        { background: linear-gradient(to left, var(--accent), var(--krd-roj)); }
[dir="rtl"] .track__fill--sage  { background: linear-gradient(to left, var(--krd-slate), var(--krd-sage)); }
[dir="rtl"] .track__fill--green { background: linear-gradient(to left, var(--krd-green), var(--krd-sage)); }

/* ─────────────────────────────────────────────────────────────────────────
   13. ACCESSIBILITY & PRINT
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { animation: none; opacity: 1; transform: none; }
  .weatherfx { display: none; }
}

@media (prefers-contrast: more) {
  :root { --border: rgb(255 255 255 / .3); --text-muted: rgb(234 242 246 / .85); }
  .card { background: var(--bg-elevated); }
}

@media print {
  .sky, .weatherfx, .masthead__tools, .search-wrapper, .footer, .geo-toast { display: none !important; }
  .card { break-inside: avoid; border: 1px solid #999; box-shadow: none; }
  html { background: #fff; color: #000; }
}

/* ─────────────────────────────────────────────────────────────────────────
   14. PHONES
   Measured on a 390x844 viewport. Three things drove this block: touch
   targets were 27-34px against a 44px guideline, secondary labels bottomed
   out at 9px, and the masthead was eating 17% of the screen before any
   weather appeared.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {

  /* Raise the floor on small type — the fluid scale's minimum is fine on a
     desktop at arm's length, not on a phone. */
  :root {
    --fs-micro: .6875rem;   /* 11px */
    --fs-xs:    .78rem;
    --sp-5:     1.15rem;    /* reclaims ~11px of card width per side */
  }

  /* Notch and home-indicator clearance (viewport-fit=cover is set) */
  .masthead { padding-inline: max(var(--sp-4), env(safe-area-inset-left)); }
  .dashboard { padding-block-end: calc(var(--sp-7) + env(safe-area-inset-bottom)); }
  .footer__inner { padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom)); }

  /* ── Touch targets ──
     44px is the Apple/Google guideline. Where the visual size should stay
     small, the hit area is expanded with padding instead of scaling the art. */
  .lang-btn {
    min-block-size: 40px; display: inline-flex; align-items: center;
    padding-inline: 12px;
  }
  .geo-btn, .theme-toggle { inline-size: 40px; block-size: 40px; }
  .geo-btn { inset-inline-end: 4px; }

  .sr-item { padding-block: var(--sp-3); min-block-size: 48px; }

  /* ── Masthead density ──
     Two rows are worth it (a full-width search bar is far easier to hit than
     a squeezed one), but the block was costing ~17% of an 844px screen. */
  .masthead { row-gap: var(--sp-2); padding-block: 10px; column-gap: var(--sp-2); }
  .search-input { min-block-size: 44px; padding-block: 10px; }
  /* Brand (189px) + tools (182px) overflowed the 358px of usable width by
     21px, pushing the tools onto their own row and making even the collapsed
     header two rows tall. Trimming the wordmark to "KRD WEATHER" lands both
     on one line, so the compact bar is a single ~52px strip. */
  .brand { gap: var(--sp-2); }
  .brand__mark { inline-size: 26px; block-size: 26px; }
  .brand__name { font-size: var(--fs-xs); letter-spacing: .04em; }
  .brand__tld { display: none; }          /* domain still reads in the tab title */
  .lang-btn { padding-inline: 13px; }

  /* ── Compact-on-scroll ──
     The bar is sticky, so its full two-row height was costing 18% of the
     viewport on every screen of content. Scrolling down collapses the search
     row to ~60px; scrolling up brings it straight back, so search is never
     more than one flick away. */
  .masthead {
    transition: padding-block var(--t-fast);
  }
  .masthead .search-wrapper {
    transition: max-block-size var(--t-base), opacity var(--t-fast), margin-block var(--t-base);
    max-block-size: 60px;
    /* Deliberately NOT overflow:hidden here — the results panel is absolutely
       positioned below the field, so clipping the wrapper in its open state
       hid the whole dropdown. Clipping applies only while collapsing. */
  }
  .masthead.is-compact .search-wrapper {
    max-block-size: 0; opacity: 0; margin-block: 0; pointer-events: none;
    overflow: hidden;
  }
  .masthead.is-compact { padding-block: 6px; }

  /* Footer credits were a 14px-tall hit area */
  .footer a { min-block-size: 44px; display: inline-flex; align-items: center; }

  /* ── Cards ── */
  .card { padding: var(--sp-4); border-radius: var(--r-md); }
  .card-hero { padding: var(--sp-5); }

  /* The AQI ring and its copy sit side by side down to ~374px, but the copy
     is squeezed. Centring and letting it wrap reads better than cramming. */
  .aqi-body { gap: var(--sp-4); justify-content: center; }
  .aqi-ring { inline-size: 118px; }
  .aqi-info { min-inline-size: 100%; text-align: center; }
  .aqi-scale { justify-content: space-between; gap: var(--sp-1); }
  .aqi-dot-lbl { font-size: 10px; }

  /* Six bands need every pixel; drop the label to two lines rather than
     letting it clip. */
  .aqi-scale__item { flex: 1; min-inline-size: 0; }

  .chart-canvas { block-size: clamp(200px, 32vh, 260px); }
  .sun-times { gap: var(--sp-2); }

  /* Metric cards keep two per row; tighten the internals so the value stays
     the loudest thing in the tile. */
  .metric-icon { inline-size: 30px; block-size: 30px; }
  .metric-icon svg { inline-size: 15px; }
  .compass { inline-size: 38px; }

  .footer__inner { flex-direction: column; gap: var(--sp-4); }
  .footer__col { text-align: start; }
}

/* Very narrow phones (SE-class, 320-390px)
   Two metric tiles per row still read well at 360px (~160px each); forcing
   one per row just made each tile mostly empty and doubled the scroll. What
   actually needs attention here is the masthead, which overflowed its single
   row by about 2px once the viewport dropped below ~380px. */
@media (max-width: 390px) {
  .masthead { padding-inline: max(12px, env(safe-area-inset-left)); column-gap: 6px; }
  .lang-btn { padding-inline: 11px; }
}

@media (max-width: 340px) {
  /* Below this the wordmark cannot share the row; the mark alone still
     identifies the site, and the full name remains in the tab title. */
  .brand__name { display: none; }
  .aqi-dot-lbl { font-size: 9px; }
}