:root{--i-sky:#D7E8F6;--i-sky2:#A9CBEA;--i-sun:#F2B632;--i-sand:#EBD3A2;--i-sand2:#D9B77C;--i-gold:#E3A72F;--i-orange:#E07B2E;--i-clay:#C96A4A;--i-clay2:#A44F36;--i-leaf:#2E9A6C;--i-leaf2:#1F7350;--i-sea:#2B7FC2;--i-sea2:#58B5C9;--i-wall:#F6F1E6;--i-white:#FFFFFF;--i-grey:#C4CED8;--i-ink:#12233A;--i-blue:#2F62C9;--i-blue2:#8AA3D2;--i-red:#C1272D;--i-green:#0B6947;--i-night:#102646}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--i-sky:#173355;--i-sky2:#0F2744;--i-sun:#F4C453;--i-sand:#B89055;--i-sand2:#96703C;--i-gold:#D9A441;--i-orange:#E58A45;--i-clay:#B5573B;--i-clay2:#8E4029;--i-leaf:#3AAA7C;--i-leaf2:#256E52;--i-sea:#2A6FA8;--i-sea2:#2F8C9E;--i-wall:#C9C2B2;--i-white:#E9EDF2;--i-grey:#7C8A99;--i-ink:#081320;--i-blue:#4D7FE0;--i-blue2:#2B4573;--i-red:#D8484E;--i-green:#2E9A6C;--i-night:#071223}}
:root[data-theme="dark"]{--i-sky:#173355;--i-sky2:#0F2744;--i-sun:#F4C453;--i-sand:#B89055;--i-sand2:#96703C;--i-gold:#D9A441;--i-orange:#E58A45;--i-clay:#B5573B;--i-clay2:#8E4029;--i-leaf:#3AAA7C;--i-leaf2:#256E52;--i-sea:#2A6FA8;--i-sea2:#2F8C9E;--i-wall:#C9C2B2;--i-white:#E9EDF2;--i-grey:#7C8A99;--i-ink:#081320;--i-blue:#4D7FE0;--i-blue2:#2B4573;--i-red:#D8484E;--i-green:#2E9A6C;--i-night:#071223}
.f-sky{fill:var(--i-sky)}.s-sky{stroke:var(--i-sky)}
.f-sky2{fill:var(--i-sky2)}.s-sky2{stroke:var(--i-sky2)}
.f-sun{fill:var(--i-sun)}.s-sun{stroke:var(--i-sun)}
.f-sand{fill:var(--i-sand)}.s-sand{stroke:var(--i-sand)}
.f-sand2{fill:var(--i-sand2)}.s-sand2{stroke:var(--i-sand2)}
.f-gold{fill:var(--i-gold)}.s-gold{stroke:var(--i-gold)}
.f-orange{fill:var(--i-orange)}.s-orange{stroke:var(--i-orange)}
.f-clay{fill:var(--i-clay)}.s-clay{stroke:var(--i-clay)}
.f-clay2{fill:var(--i-clay2)}.s-clay2{stroke:var(--i-clay2)}
.f-leaf{fill:var(--i-leaf)}.s-leaf{stroke:var(--i-leaf)}
.f-leaf2{fill:var(--i-leaf2)}.s-leaf2{stroke:var(--i-leaf2)}
.f-sea{fill:var(--i-sea)}.s-sea{stroke:var(--i-sea)}
.f-sea2{fill:var(--i-sea2)}.s-sea2{stroke:var(--i-sea2)}
.f-wall{fill:var(--i-wall)}.s-wall{stroke:var(--i-wall)}
.f-white{fill:var(--i-white)}.s-white{stroke:var(--i-white)}
.f-grey{fill:var(--i-grey)}.s-grey{stroke:var(--i-grey)}
.f-ink{fill:var(--i-ink)}.s-ink{stroke:var(--i-ink)}
.f-blue{fill:var(--i-blue)}.s-blue{stroke:var(--i-blue)}
.f-blue2{fill:var(--i-blue2)}.s-blue2{stroke:var(--i-blue2)}
.f-red{fill:var(--i-red)}.s-red{stroke:var(--i-red)}
.f-green{fill:var(--i-green)}.s-green{stroke:var(--i-green)}
.f-night{fill:var(--i-night)}.s-night{stroke:var(--i-night)}
/* Bab Lblad. An indigo band patterned like zellige carries the brand, the search and Morocco's clock
   inside a gate-shaped frame. Below it, calm cards on a chalk ground, each section with its own drawing.
   The colours of the drawings (--i-*) are added above this line when the site is built. */
:root {
  --bg: #F2F5F7;
  --surface: #FFFFFF;
  --surface2: #E8EEF3;
  --ink: #12233A;
  --muted: #536578;
  --line: #D2DCE5;
  --blue: #1B4B9B;
  --red: #B3222A;
  --green: #0B6947;
  --saffron: #8A5F00;
  --saffron-bg: #FAF0D4;
  --ok-bg: #DFF1E8;
  --band: #102646;
  --band-2: #17335C;
  --band-ink: #F4F7FB;
  --band-muted: #AFC0D6;
  --band-line: #46669A;
  --font-display: "El Messiri", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --radius: 14px;
  --wrap: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1420; --surface: #121F30; --surface2: #1A2C43; --ink: #E7EEF5; --muted: #9DB1C6;
    --line: #283D56; --blue: #8FB6FF; --red: #F4868B; --green: #5FCD9D; --saffron: #EDC05A;
    --saffron-bg: #2A2410; --ok-bg: #112A20; --band: #0A1A30; --band-2: #10284A;
    --band-ink: #F4F7FB; --band-muted: #A3B6CE; --band-line: #3A5886; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1420; --surface: #121F30; --surface2: #1A2C43; --ink: #E7EEF5; --muted: #9DB1C6;
  --line: #283D56; --blue: #8FB6FF; --red: #F4868B; --green: #5FCD9D; --saffron: #EDC05A;
  --saffron-bg: #2A2410; --ok-bg: #112A20; --band: #0A1A30; --band-2: #10284A;
  --band-ink: #F4F7FB; --band-muted: #A3B6CE; --band-line: #3A5886; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Band: brand, preferences, search ---------- */
.band {
  background-color: var(--band); color: var(--band-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h11M45 28h11M28 0v11M28 45v11'/%3E%3C/g%3E%3C/svg%3E");
}
.band-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 14px 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; min-width: 0; }
.brand svg { flex: none; }
.brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
.brand-ar { font-family: var(--font-display); font-size: 1.15rem; color: var(--band-muted); }
.prefs { display: flex; flex-wrap: wrap; gap: 8px; }
.pref { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pref span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--band-muted); }
.pref select {
  background: var(--band-2); color: var(--band-ink); border: 1px solid var(--band-line);
  border-radius: 9px; padding: 7px 10px; max-width: 100%;
}
.search { padding-block: 4px 16px; }
.searchbox { position: relative; }
.searchbox > .ic { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--band-muted); width: 20px; height: 20px; pointer-events: none; }
.search input {
  width: 100%; background: var(--band-2); color: var(--band-ink); border: 1px solid var(--band-line);
  border-radius: 12px; padding: 12px 14px; padding-inline-start: 44px; font-size: 1rem;
}
.search input::placeholder { color: var(--band-muted); }
.qres {
  position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(8, 19, 32, .28); padding: 6px; max-height: min(70vh, 520px); overflow: auto;
}
.hit { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.hit small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--saffron); font-weight: 600; }
.hit b { font-weight: 600; }
.hit span { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
a.hit:hover, a.hit:focus-visible { background: var(--surface2); }
.hit.more b { color: var(--blue); }
.hit.none { color: var(--muted); }
#searchOut .hit { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; align-content: start; }

.langmenu { position: relative; align-self: flex-end; }
.langmenu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: var(--band-2); color: var(--band-ink);
  border: 1px solid var(--band-line); border-radius: 9px; padding: 7px 12px;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.langmenu ul {
  position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; min-width: 170px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(8, 19, 32, .28);
}
.langmenu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.langmenu a:hover { background: var(--surface2); }
.langmenu a[aria-current] { font-weight: 600; color: var(--blue); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 50; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ill { display: block; width: 100%; height: 100%; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* ---------- Section tabs ---------- */
.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.tabs-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted);
  font-weight: 500; font-size: .95rem; border: 1px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); background: var(--surface2); }
.tab[aria-current="page"] { background: var(--ink); color: var(--surface); }

/* ---------- Hero with the gate ---------- */
.hero { padding-block: 6px 30px; }
.hero-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
.hero-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-block-end: 6px; }
.hero-text .hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: #F2C14E; max-width: none; }
.hello .azul { font-family: "Noto Sans Tifinagh", var(--font-body); color: var(--band-muted); font-size: 1.15rem; font-weight: 400; }
.hero-text h1 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); font-weight: 700; }
.hero-text p { color: var(--band-muted); font-size: 1.02rem; max-width: 56ch; }
.bab {
  flex: 0 1 264px; min-width: 0; max-width: 100%; text-align: center;
  border: 2px solid var(--band-line); border-radius: 132px 132px 14px 14px / 132px 132px 14px 14px;
  padding: 58px 20px 22px; background: var(--band);
  box-shadow: inset 0 0 0 6px var(--band), inset 0 0 0 7px var(--band-line);
  display: flex; flex-direction: column; gap: 4px;
}
.bab small { color: var(--band-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.bab .clock { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; direction: ltr; }
.bab .day { font-size: .98rem; }
.bab .hijri { color: var(--band-muted); font-size: .9rem; }

/* ---------- Page body ---------- */
.page { padding-block: 22px 40px; display: flex; flex-direction: column; gap: 28px; }
.page > * { min-width: 0; }
.lead { display: flex; flex-direction: column; gap: 6px; }
.lead h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.lead p { color: var(--muted); max-width: 65ch; }
.block { display: flex; flex-direction: column; gap: 12px; }
.block > h2 { font-size: 1.35rem; }
.block > .sub { color: var(--muted); max-width: 65ch; margin-block-start: -6px; }
.note { color: var(--muted); font-size: .86rem; max-width: 70ch; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card {
  grid-column: span 4; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.card.w7 { grid-column: span 7; } .card.w5 { grid-column: span 5; } .card.w6 { grid-column: span 6; } .card.w12 { grid-column: span 12; }
.card h2, .card h3 { font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.card.flat { grid-column: auto; }
.card.pic { padding-top: 0; overflow: hidden; }
.card-ill { margin-inline: -18px; aspect-ratio: 16 / 6; background: var(--surface2); }
.block > h3 { font-size: 1.1rem; margin-top: 6px; }
@media (max-width: 900px) { .card, .card.w7, .card.w5 { grid-column: span 6; } .card.w12 { grid-column: span 12; } }
@media (max-width: 640px) { .card, .card.w7, .card.w5, .card.w6 { grid-column: span 12; } }

.badge { font-family: var(--font-body); font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.badge.live { background: var(--ok-bg); color: var(--green); }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 120px; }
.card > .field { flex: none; }
.block > .row > .field { max-width: 340px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ltr { text-align: right; }
.field > span { font-size: .78rem; color: var(--muted); }
.field input, .field select {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* Rate */
.result { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--surface2); }
.result .big { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result .small { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
#rateCard .result { padding: 10px 12px; }
#rateCard .result .big { font-size: clamp(1.35rem, 4vw, 1.7rem); }
#rateCard .result .small { font-size: .82rem; }
#rateCard .note { font-size: .85rem; }

/* Prayer */
.prayers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prayers li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.prayers li.dim { color: var(--muted); }
.prayers li.next { background: var(--ink); color: var(--surface); font-weight: 600; }
.nextline { font-weight: 600; color: var(--red); }

/* Weather */
.wx-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wx-main .temp { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 14px; }
.wx-list li { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--line); padding-block: 3px; }

/* Dates */
.dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dates li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dates .what { min-width: 0; }
.dates .what b { font-weight: 600; }
.dates .what span { display: block; color: var(--muted); font-size: .84rem; }
.dates .when { flex: none; font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dates li:first-child .when { color: var(--red); font-weight: 600; }

/* Darija */
.card.darija { background: var(--saffron-bg); border-color: transparent; }
.card.darija h2 { color: var(--saffron); }
.darija .ar { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.5; }
.darija .lat { font-weight: 600; }
.darija .mean { color: var(--ink); }

/* Tasks */
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.task {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  text-decoration: none; color: var(--ink); font-weight: 500;
}
.task:hover { border-color: var(--blue); color: var(--blue); }
.task::after { content: "›"; color: var(--muted); font-size: 1.2rem; line-height: 1; }
[dir="rtl"] .task::after { content: "‹"; }

/* Voices */
.voices { display: flex; flex-direction: column; gap: 8px; }
.voice { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.voice summary, .guide summary { cursor: pointer; list-style: none; }
.voice summary::-webkit-details-marker, .guide summary::-webkit-details-marker { display: none; }
.voice summary { padding: 13px 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
.voice summary::after, .guide summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; flex: none; }
.voice[open] summary::after, .guide[open] summary::after { content: "–"; }
.voice .ans { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }

/* News and link chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .92rem; max-width: 100%; overflow-wrap: anywhere;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip small { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; }

/* Guides */
.guides { display: flex; flex-direction: column; gap: 10px; }
.guide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 70px; }
.guide summary { padding: 16px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.guide summary > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guide summary h3 { font-size: 1.18rem; }
.guide summary p { color: var(--muted); font-size: .95rem; }
.guide[open] { border-color: var(--ink); }
.gbody { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.gbody h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.gbody ul, .gbody ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 72ch; }
.gbody .watch { background: var(--saffron-bg); border-radius: 12px; padding: 12px 14px; }
.gbody .watch h4 { color: var(--saffron); }
.gbody .facts li::marker { color: var(--blue); }
.gfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.gfoot .note { font-size: .78rem; }

/* Tables */
.tablebox { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Buttons */
.btn { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn.on { background: var(--red); border-color: var(--red); color: #fff; }
.btn.on .ic { fill: currentColor; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.small { padding: 5px 10px; font-size: .82rem; }

/* Car counter */
.meter { display: flex; flex-wrap: wrap; gap: 10px; }
.meter div { flex: 1 1 130px; min-width: 0; background: var(--surface2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.meter b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.meter span { color: var(--muted); font-size: .82rem; }
.meter .bad b { color: var(--red); }
.bar { height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.bar.warn i { background: var(--saffron); } .bar.bad i { background: var(--red); }

/* Checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.checks input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--green); }
.checks input:checked + span { color: var(--muted); text-decoration: line-through; }

/* Lists of facts */
.plain { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 72ch; }
.kv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 22px; }
.kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--line); padding-block: 5px; }
.kv b { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; direction: ltr; }

/* Directory */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.post h3 { font-size: 1.2rem; }
.post .kind { color: var(--muted); font-size: .8rem; }
.post dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.post dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.post dd { margin: 0; overflow-wrap: anywhere; }
.post dd.ltr { direction: ltr; text-align: start; unicode-bidi: plaintext; }
.post .covers { color: var(--muted); font-size: .86rem; }
.post .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.portals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 20px; }
.portals a { display: flex; flex-direction: column; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.portals a span { color: var(--blue); font-size: .88rem; direction: ltr; text-align: start; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.callout { background: var(--ok-bg); border-radius: 12px; padding: 12px 14px; max-width: 78ch; }

/* Footer */
.foot { margin-top: 20px; background: var(--band); color: var(--band-muted); font-size: .9rem; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 26px 30px; padding-block: 34px 44px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.foot-col h2 { font-family: var(--font-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--band-muted); font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.foot a { color: var(--band-ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--band-ink); }
.foot-brand span { font-size: 1.05rem; font-weight: 500; color: var(--band-muted); }
@media (max-width: 820px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-col:first-child { grid-column: 1 / -1; } }

@media (max-width: 520px) {
  .bab { flex-basis: 100%; }
  .bab .clock { font-size: 2.8rem; }
  .brand-name { font-size: 1.3rem; }
}

/* ---------- Kitchen, Where to go, quiz and culture ---------- */
.meta { color: var(--muted); font-size: .86rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bigname { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
a.btn { text-decoration: none; }
button.chip { cursor: pointer; font: inherit; font-size: .92rem; }
button.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stepper span { color: var(--muted); font-size: .9rem; }
.stepper b { min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.stepper .btn { min-width: 38px; font-size: 1.05rem; line-height: 1; padding: 7px 0; justify-content: center; }
.ing { width: auto; min-width: min(100%, 420px); }
.ing td.q { white-space: nowrap; font-weight: 600; width: 1%; padding-inline-end: 18px; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.defs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 26px; }
.defs > div { min-width: 0; }
.defs dt { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.defs dd { margin: 0; color: var(--muted); }

.tripgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
.tripmap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 800px) {
  .tripgrid { grid-template-columns: minmax(0, 1fr); }
  .tripmap { position: static; max-width: 340px; width: 100%; margin-inline: auto; }
}
.mapbox { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.map { width: 100%; height: auto; display: block; }
.map .land { fill: var(--surface2); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.map .hit { fill: transparent; }
.map .pin { fill: var(--red); stroke: var(--surface); stroke-width: 1.5; }
.map .dot.off .pin { fill: var(--line); stroke: var(--muted); stroke-width: .6; }
.map a:hover .pin, .map a:focus .pin { fill: var(--blue); }
.map a:focus { outline: none; }
.map a:focus-visible .hit { stroke: var(--saffron); stroke-width: 2; }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 380px; }
.months span { text-align: center; font-size: .72rem; padding: 5px 0; border-radius: 6px; background: var(--surface2); color: var(--muted); }
.months .on { background: var(--green); color: var(--surface); font-weight: 600; }
.months .cur { outline: 2px solid var(--saffron); outline-offset: 1px; }
.tick { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--green); }
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card.route { grid-column: auto; }

.quizbox, .factbox { display: flex; flex-direction: column; gap: 10px; }
.qtext { font-weight: 600; font-size: 1.06rem; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .opts { grid-template-columns: minmax(0, 1fr); } }
.opt { text-align: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.opt:hover:not(:disabled) { border-color: var(--blue); }
.opt:disabled { cursor: default; }
.opt.right { background: var(--ok-bg); border-color: var(--green); color: var(--green); font-weight: 600; }
.opt.wrong { border-color: var(--red); color: var(--red); }
.qverdict { margin: 0; }
.qverdict b { color: var(--red); }
.qverdict.ok b { color: var(--green); }
.fact { font-size: 1.08rem; }
.nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.nums li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.nums b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nums span { color: var(--muted); font-size: .84rem; }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 78ch; }
.tl li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tl b { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--blue); }
.yl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 26px; }
.yl li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.yl b { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Pages: breadcrumb, page head, tiles, article boxes ---------- */
.crumbs { padding-block: 14px 0; font-size: .86rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--muted); }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.pagehead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px 34px; align-items: center; }
.ph-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ph-text h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); font-weight: 700; }
.kicker { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--saffron); }
.kicker a { color: inherit; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.ph-ill { aspect-ratio: 16 / 10; border-radius: 22px 22px 22px 22px; overflow: hidden; border: 1px solid var(--line); background: var(--surface2); border-start-start-radius: 120px 120px; border-start-end-radius: 120px 120px; }
@media (max-width: 760px) { .pagehead { grid-template-columns: minmax(0, 1fr); } .ph-ill { order: -1; max-width: 420px; width: 100%; aspect-ratio: 16 / 9; border-start-start-radius: 22px; border-start-end-radius: 22px; } }
.stats { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stats li { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.stats .ic { grid-row: span 2; color: var(--saffron); width: 20px; height: 20px; }
.stats span { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stats b { font-variant-numeric: tabular-nums; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tiles.two { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tiles.three .tile-body { padding: 10px 12px 12px; } .tiles.three .tile-s { font-size: .86rem; } }
.tile { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tile:hover, .tile:focus-within { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 35, 58, .10); }
.tile > a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.tile-ill { display: block; aspect-ratio: 16 / 9; background: var(--surface2); }
.tile-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.tile-t { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.tile-s { color: var(--muted); font-size: .93rem; }
.tile .meta { margin-top: auto; padding-top: 4px; }
.tile.been .tile-t::after { content: " ✓"; color: var(--green); }

.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.gcard { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-decoration: none; color: var(--ink); min-width: 0; transition: border-color .15s ease, transform .15s ease; }
.gcard:hover { border-color: var(--blue); transform: translateY(-1px); }
.gc-ill { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.gc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-text b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.gc-text small { color: var(--muted); font-size: .88rem; }
@media (max-width: 420px) { .gcard { grid-template-columns: 84px minmax(0, 1fr); } }

.article { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.article.recipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.acol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) { .article, .article.recipe { grid-template-columns: minmax(0, 1fr); } }
.abox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 70px; }
.abox h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 9px; }
.abox h2 .ic { color: var(--saffron); width: 20px; height: 20px; }
.abox ul, .abox ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.abox.facts li::marker { color: var(--blue); }
.abox.watch { background: var(--saffron-bg); border-color: transparent; }
.abox.watch h2 { color: var(--saffron); }
.abox.docs { background: var(--ok-bg); border-color: transparent; }
.abox.docs h2 .ic { color: var(--green); }
ol.steps { list-style: none; padding: 0; counter-reset: st; gap: 12px; }
ol.steps li { counter-increment: st; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
ol.steps li::before { content: counter(st); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: 600; font-size: .9rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
ul.ticks { list-style: none; padding: 0; }
ul.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
ul.ticks li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; border: 2px solid var(--green); border-radius: 4px; }
ul.cols { columns: 2 150px; display: block; }
ul.cols li { break-inside: avoid; margin-bottom: 6px; }
.linklist { list-style: none; padding: 0 !important; }
.linklist li { display: flex; flex-direction: column; }
.linklist span { color: var(--muted); font-size: .9rem; }
.chip.strong { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.prose { max-width: 72ch; }
.post dt { display: flex; align-items: center; gap: 6px; }
.post dt .ic { width: 14px; height: 14px; }
.post h3 a { color: inherit; }
.areas td:first-child { width: 60%; }
.callout a { font-weight: 600; white-space: nowrap; }
.meta .ic { width: 16px; height: 16px; }
.golist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.golist a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.golist a > span, .golist a > b { grid-column: 2; }
.golist .thumb { grid-column: 1; grid-row: 1; width: 84px; height: 58px; border-radius: 10px; }
.golist a > span { display: flex; flex-direction: column; }
.golist span span, .golist a > b + span { color: var(--muted); font-size: .88rem; }
.golist a:hover b { color: var(--blue); }
.factlist { margin: 0; padding-inline-start: 26px; columns: 2 320px; column-gap: 34px; }
.factlist li { break-inside: avoid; margin-bottom: 9px; }
.factlist li::marker { color: var(--saffron); font-weight: 600; font-variant-numeric: tabular-nums; }
.sayings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sayings li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sayings .ar { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.5; }
.sayings .lat { font-weight: 600; }
.sayings .mean { color: var(--muted); font-size: .92rem; }
.wx-list { margin-top: 12px; }
.meter, .bar, #carOut .tablebox { margin-top: 10px; }
.meter b.sm { font-size: 1.25rem; }
.map .dot.cur .pin { fill: var(--red); stroke: var(--surface); stroke-width: 2; }
.card.route h3 { font-family: var(--font-display); }

/* ---------- Language chooser at the root ---------- */
.chooser { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding-block: 34px; }
.k-root .chooser { min-height: 100vh; }
.chooser-in { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; width: 100%; }
.chooser-ill { width: min(100%, 420px); aspect-ratio: 16 / 10; border-radius: 210px 210px 22px 22px; overflow: hidden; border: 2px solid var(--band-line); }
.chooser h1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 14px; }
.chooser h1 .brand-name { font-size: clamp(2.2rem, 7vw, 3.2rem); }
.chooser h1 .brand-ar { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.chooser-sub { color: var(--band-muted); font-size: .92rem; max-width: 70ch; }
.langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; width: 100%; max-width: 1000px; }
.lang { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--band-line); background: var(--band-2); color: var(--band-ink); text-decoration: none; text-align: start; }
.lang:hover, .lang:focus-visible { border-color: #F2C14E; }
.lang b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.lang span { color: var(--band-muted); font-size: .9rem; }

/* ---------- Paper ---------- */
@media print {
  .band .prefs, .search, .tabs, .foot, .noprint, .skip, .crumbs, .hero .bab { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { background: none; color: #000; }
  .brand { color: #000; }
  .page { padding-block: 0; gap: 14px; }
  .pagehead { grid-template-columns: minmax(0, 1fr) 150px; }
  .abox, .card, .post { border: 1px solid #999; background: none !important; break-inside: avoid; }
  .article, .article.recipe { grid-template-columns: minmax(0, 1fr); }
  a { color: #000; text-decoration: none; }
  ol.steps li::before { background: none; color: #000; border: 1px solid #000; }
}

/* ---------- Services pages: named providers, prices, sources ---------- */
.svcpage > .block { scroll-margin-top: 70px; }
.svcpage .block > h2 a.chip { font-family: var(--font-body); font-size: .8rem; font-weight: 500; vertical-align: middle; }
.svcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.svcgrid.wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: 70px; overflow-wrap: anywhere; }
.svc > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.svc > header h3 { font-size: 1.18rem; line-height: 1.25; margin-inline-end: auto; }
.svc > header h3 a { color: inherit; }
.svc .kind { color: var(--muted); font-size: .8rem; }
.svc h4, .corr h4 { font-family: var(--font-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.svc > p { max-width: 68ch; }
.svc .acts { margin-top: auto; padding-top: 2px; }
.svc .acts:empty { display: none; }
.offername { color: var(--muted); font-size: .92rem; }
.offername b { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: .88rem; }
.kv2 { margin: 0; display: flex; flex-direction: column; }
.kv2 > div { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 4px 12px; padding-block: 6px; border-top: 1px dashed var(--line); }
.kv2 dt { color: var(--muted); font-size: .82rem; }
.kv2 dd { margin: 0; font-size: .93rem; }
.kv2:empty { display: none; }
.facts2 { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; }
.facts2 > div { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 4px 22px; padding-block: 12px; border-top: 1px solid var(--line); }
.facts2 > div:first-child { border-top: 0; }
.facts2 dt { font-weight: 600; }
.facts2 dt a { color: inherit; }
.facts2 dd { margin: 0; max-width: 74ch; }
.facts2:empty { display: none; }
.srcl { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.srcl a { color: inherit; }
.srcl em { white-space: normal; }
.srcline { font-size: .76rem; color: var(--muted); }
.srcline:empty { display: none; }
.presence { display: flex; flex-direction: column; gap: 6px; }
.presence ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.presence li { padding: 3px 8px; border-radius: 8px; margin-inline: -8px; }
.svcpage .mine { background: var(--ok-bg); }
.svcpage span.mine { border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.svcpage tr.mine td { background: var(--ok-bg); font-weight: 600; }
.callout.warn { background: var(--saffron-bg); color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.callout.warn .ic { color: var(--saffron); flex: none; margin-top: 3px; }
.svc .yes, .kv2 .yes { color: var(--green); font-weight: 600; }
.svc .no, .kv2 .no { color: var(--red); font-weight: 600; }
.bignum { font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; }
.tipsbox { background: var(--surface); }
.tipsbox li { max-width: 80ch; }
.opblock > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 2px solid var(--line); }
.opblock > h3 { font-size: 1.05rem; margin-top: 8px; }
.svct { min-width: 520px; background: var(--surface); }
.svct td { vertical-align: top; }
.svct td small { color: var(--muted); }
.svct .srcl { white-space: normal; }
.svcpage .tablebox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.svcpage .tablebox tr:last-child td { border-bottom: 0; }
.corr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.corr.mine { background: var(--surface); border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
[dir="rtl"] .corr.mine { box-shadow: inset -4px 0 0 var(--green); }
.corr > summary { cursor: pointer; padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.corr > summary > b { font-family: var(--font-display); font-size: 1.15rem; }
.corr > summary > span { color: var(--muted); font-size: .9rem; }
.corr > summary > span b { color: var(--ink); font-variant-numeric: tabular-nums; }
.corr[open] > summary { border-bottom: 1px solid var(--line); }
.corr > h4, .corr > .srcline, .corr > .more { margin: 12px 18px; }
.corr > .tablebox, .corr .more > .tablebox { border: 0; border-radius: 0; }
.more > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: .9rem; padding-block: 4px; }
.more[open] > summary { margin-bottom: 8px; }
.gcards.cc { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gcard.ccard { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
.gcard.ccard.mine { border-color: var(--green); background: var(--ok-bg); }
.gcard.ccard small { color: var(--muted); display: block; margin-top: 4px; }
.ccblock { display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius); }
.ccblock.mine { background: transparent; }
.ccblock.mine > h3::after { content: " ✓"; color: var(--green); }
.linklist2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 14px; }
.linklist2 li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.linklist2 li > a { font-weight: 600; }
.linklist2 li > span:last-child { display: block; color: var(--muted); font-size: .9rem; margin-top: 4px; }
.ap { display: inline-block; white-space: nowrap; margin-inline-end: 10px; }
.ap b { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.flt td:nth-child(2) { min-width: 180px; }
.region .kv2 > div { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
ul.ticks li { overflow-wrap: anywhere; }
bdi { unicode-bidi: isolate; }
@media (max-width: 640px) {
  .facts2 > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts2 { padding-inline: 14px; }
  .svcgrid, .svcgrid.wide { grid-template-columns: minmax(0, 1fr); }
  .kv2 > div { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .svct { font-size: .88rem; }
}
@media print { .corr { break-inside: avoid; } .svc { break-inside: avoid; } }
.svc ul.ticks { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: .93rem; }
.svcpage ul.plain { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 80ch; }

.kv2 dd > .ln { display: block; padding: 1px 6px; margin-inline: -6px; border-radius: 6px; }
.kv2 dd > .ln.mine { font-weight: 600; }
.svcpage a[href^="tel:"], .svcpage .ltr { white-space: nowrap; }
.svcpage dd.ltr, .svcpage td .ltr { white-space: normal; }

/* ---------- Moroccan home section ---------- */
.dar .lead2 { max-width: 72ch; }
.dar .lead2.intro { font-size: 1.08rem; }
.dar > .abox, .dar .block > .abox { max-width: none; }
.dar .abox li { max-width: 80ch; }
.dar .abox.steps { padding-block: 16px; }
.dar .block > h2 { padding-top: 6px; }
.dar .facts2 dt { font-family: var(--font-display); font-size: 1.02rem; }
.checks.one { grid-template-columns: minmax(0, 1fr); padding: 0; }
.abox .checks.one { padding-inline-start: 0; gap: 0; }
.checks.one li { border-top: 1px dashed var(--line); }
.checks.one li:first-child { border-top: 0; }
.tool { gap: 12px; display: flex; flex-direction: column; }
.tool h3 { font-size: 1.15rem; }
.tool .row { align-items: flex-end; }
.tool .field { min-width: 120px; flex: 1 1 130px; max-width: 220px; }
.tool .field[hidden] { display: none; }
.toolout .kv { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.qout { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qout .big { font-family: var(--font-display); font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 600; line-height: 1.2; }
.compass { width: 132px; height: 132px; flex: none; }
.compass .ring { fill: var(--surface2); stroke: var(--line); stroke-width: 2; }
.compass .tk { stroke: var(--muted); stroke-width: 1.5; }
.compass .nl { font: 700 12px var(--font-body); fill: var(--red); }
.compass .ar { fill: var(--green); }
.compass .hub { fill: var(--ink); }
#qArrow { transition: transform .5s ease; }
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.pal .strip { display: block; width: 100%; height: 64px; }
.pal-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pal h3 { font-size: 1.15rem; }
.pal p { color: var(--muted); font-size: .93rem; }
.sw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .93rem; }
.swc { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); display: block; }
.sw .btn { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; }
.allow > div.mine { background: var(--ok-bg); margin-inline: -18px; padding-inline: 18px; }
#ideaCard .bigname { max-width: 46ch; }
@media (max-width: 640px) { .compass { width: 104px; height: 104px; } .tool .field { max-width: none; } }
@media print { .tool, .pals .btn { display: none; } }
/* Twelve sections: tighter tabs on wide screens, and a fade where the row scrolls. */
@media (min-width: 900px) { .tab { padding: 8px 11px; } .tabs-row { gap: 2px; } }
.tabs-row { padding-inline-end: 26px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); }
[dir="rtl"] .tabs-row { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent); }
.toolout .kv b { white-space: nowrap; font-size: 1.15rem; }
/* Today page: the visitor's country */
.mine { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; gap: 10px; }
.mine[hidden] { display: none; }
.mine > h2 { font-size: 1.15rem; }
/* Menu: a small picture above each section name */
.tabs-row { gap: 2px; padding-block: 8px 6px; align-items: flex-start; }
.tab, .tab:hover { background: transparent; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 7px 4px; border-radius: 14px; font-size: .78rem; font-weight: 500; min-width: 62px; line-height: 1.2; }
.tab .ti { width: 44px; height: 44px; border-radius: 14px; background: var(--surface2); display: grid; place-items: center; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.navic { width: 30px; height: 30px; display: block; }
.tab:hover { color: var(--ink); }
.tab:hover .ti { transform: translateY(-2px); background: var(--saffron-bg); }
.tab[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 600; }
.tab[aria-current="page"] .ti { background: var(--saffron-bg); box-shadow: 0 0 0 2px var(--ink); }
.tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (min-width: 900px) { .tab { padding: 2px 9px 4px; min-width: 70px; font-size: .8rem; } .tabs-row { gap: 2px; justify-content: space-between; } }
@media (max-width: 640px) { .tab { min-width: 56px; font-size: .72rem; gap: 4px; padding-inline: 5px; } .tab .ti { width: 38px; height: 38px; border-radius: 12px; } .navic { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .tab .ti { transition: none; } .tab:hover .ti { transform: none; } }

/* ---------- Ground: a lime-washed wall with a ghost of zellige ----------
   Eight-point stars and crosses, the commonest zellige tiling, drawn pale on a warm lime ground.
   Cards stay white so the text never sits on a busy surface. */
:root {
  --bg: #F3EEE2; --surface2: #EFE8DA; --line: #DDD3BF; --muted: #56606E;
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32.0 0.0L41.4 9.4L54.6 9.4L54.6 22.6L64.0 32.0L54.6 41.4L54.6 54.6L41.4 54.6L32.0 64.0L22.6 54.6L9.4 54.6L9.4 41.4L0.0 32.0L9.4 22.6L9.4 9.4L22.6 9.4Z' fill='%23ffffff' fill-opacity='.5' stroke='%239A7B3F' stroke-opacity='.17' stroke-width='1'/%3E%3Cpath d='M0 -5L5 0L0 5L-5 0ZM64 -5L69 0L64 5L59 0ZM0 59L5 64L0 69L-5 64ZM64 59L69 64L64 69L59 64Z' fill='%231B4B9B' fill-opacity='.10'/%3E%3Cpath d='M32 28L36 32L32 36L28 32Z' fill='%230B6947' fill-opacity='.10'/%3E%3C/svg%3E");
  --shade: linear-gradient(180deg, rgba(16, 38, 70, .10), rgba(16, 38, 70, 0) 340px);
  --lift: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 26px -20px rgba(74, 52, 16, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0B1420; --surface2: #1A2C43; --line: #283D56; --muted: #9DB1C6; --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32.0 0.0L41.4 9.4L54.6 9.4L54.6 22.6L64.0 32.0L54.6 41.4L54.6 54.6L41.4 54.6L32.0 64.0L22.6 54.6L9.4 54.6L9.4 41.4L0.0 32.0L9.4 22.6L9.4 9.4L22.6 9.4Z' fill='%23ffffff' fill-opacity='.022' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'/%3E%3Cpath d='M0 -5L5 0L0 5L-5 0ZM64 -5L69 0L64 5L59 0ZM0 59L5 64L0 69L-5 64ZM64 59L69 64L64 69L59 64Z' fill='%238FB6FF' fill-opacity='.10'/%3E%3Cpath d='M32 28L36 32L32 36L28 32Z' fill='%235FCD9D' fill-opacity='.08'/%3E%3C/svg%3E");
    --shade: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 340px); --lift: 0 12px 28px -22px rgba(0, 0, 0, .9); }
}
:root[data-theme="dark"] { --bg: #0B1420; --surface2: #1A2C43; --line: #283D56; --muted: #9DB1C6; --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32.0 0.0L41.4 9.4L54.6 9.4L54.6 22.6L64.0 32.0L54.6 41.4L54.6 54.6L41.4 54.6L32.0 64.0L22.6 54.6L9.4 54.6L9.4 41.4L0.0 32.0L9.4 22.6L9.4 9.4L22.6 9.4Z' fill='%23ffffff' fill-opacity='.022' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'/%3E%3Cpath d='M0 -5L5 0L0 5L-5 0ZM64 -5L69 0L64 5L59 0ZM0 59L5 64L0 69L-5 64ZM64 59L69 64L64 69L59 64Z' fill='%238FB6FF' fill-opacity='.10'/%3E%3Cpath d='M32 28L36 32L32 36L28 32Z' fill='%235FCD9D' fill-opacity='.08'/%3E%3C/svg%3E");
  --shade: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 340px); --lift: 0 12px 28px -22px rgba(0, 0, 0, .9); }
body { background-color: var(--bg); background-image: var(--ground); background-size: 64px 64px; background-position: center top; }
.card, .abox, .post, .svc, .tile, .gcard, .facts2, .pal, .corr, .mine, .voice, .linklist2 li, .nums li, .svcpage .tablebox { box-shadow: var(--lift); }
.card.darija, .abox.watch, .abox.docs { box-shadow: none; }
.tile:hover, .tile:focus-within { box-shadow: 0 16px 30px -18px rgba(74, 52, 16, .5); }
.tabs { box-shadow: 0 6px 18px -14px rgba(74, 52, 16, .55); }
.tab .ti { background: var(--surface2); }
@media (max-width: 640px) { body { background-size: 52px 52px; } }
@media print { body, main { background-image: none; } .card, .abox, .post, .svc, .tile, .gcard, .facts2 { box-shadow: none; } }
.wx-usual { font-weight: 500; }
#wxbox { display: flex; flex-direction: column; gap: 8px; }
#wxbox .wx-list { margin-top: 4px; }

/* ---------- flight routes ---------- */
.rtfind { margin: 4px 0 14px; max-width: 460px; }
.rtfind .field { display: flex; flex-direction: column; gap: 6px; }
.rtfind input { width: 100%; }
.rtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 4px 16px 18px; }
.rt { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); min-width: 0; }
.rt h3 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 8px; }
.rt h3 b { font-family: var(--font-body); font-size: .78rem; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: var(--surface); margin-inline-end: 6px; vertical-align: 2px; }
.rt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rt li { display: grid; grid-template-columns: 136px 1fr; gap: 4px 10px; align-items: baseline; padding-top: 7px; border-top: 1px solid var(--line); }
.rt li .ap { margin: 0; white-space: normal; font-weight: 600; }
.rt .al { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink); font-size: .93rem; }
.rt .al > span { white-space: normal; }
.tg { font-style: normal; font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.tg.new { background: var(--ok-bg); color: var(--green); }
.rth { margin: 22px 0 10px; font-size: 1.1rem; }
#rtAll { display: grid; gap: 10px; }
.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.fold > summary { cursor: pointer; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fold > summary .ap { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.fold > summary .ap b { font-family: var(--font-body); }
.foldin { padding: 0 16px 12px; display: grid; gap: 8px; }
.foldin p { line-height: 1.9; }
.foldin p > b { display: inline-block; min-width: 9ch; margin-inline-end: 8px; }
.callout.warn > span { min-width: 0; }
@media (max-width: 520px) { .rtgrid { grid-template-columns: 1fr; padding: 4px 10px 14px; } .rt li { grid-template-columns: 124px 1fr; } }
@media print { .rtfind { display: none; } .rt { break-inside: avoid; } }

/* ---------- family-law guides ---------- */
.defs.wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.defs.wide > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.defs.wide dt { font-size: 1.02rem; margin-bottom: 4px; }
.defs.wide dd { color: var(--ink); font-size: .95rem; }
.callout.law { display: flex; gap: 10px; align-items: flex-start; background: var(--surface2); font-size: .92rem; }
.callout.law .ic { flex: none; margin-top: 3px; color: var(--saffron); }
.ggroup + .ggroup { margin-top: 6px; }
@media (max-width: 520px) { .defs.wide { grid-template-columns: 1fr; } }

/* ---------- Learn Darija ---------- */
.dthemes { margin: 6px 0 14px; }
.dtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 0 8px; }
.dtools .note { margin: 0; }
.dread { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dread > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; gap: 12px; align-items: baseline; }
.dread dt { flex: none; display: flex; gap: 6px; align-items: baseline; min-width: 64px; }
.dread dt b { font-size: 1.2rem; }
.dread dt span { font-family: 'IBM Plex Sans Arabic', var(--font-body); font-size: 1.2rem; color: var(--muted); }
.dread dd { margin: 0; font-size: .93rem; }
.dwords { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dwords li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; min-width: 0; }
.dwords .lat { font-weight: 700; font-size: 1.06rem; }
.dwords .ar { font-family: 'IBM Plex Sans Arabic', var(--font-body); font-size: 1.15rem; color: var(--ink); margin-left: auto; }
[dir="rtl"] .dwords .ar { margin-left: 0; margin-right: auto; }
.dwords .mean { flex: 1 1 100%; color: var(--muted); font-size: .92rem; }
.dwords li:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
#dlists.practise .dwords li { cursor: pointer; }
#dlists.practise .dwords li:not(.shown) .mean { display: none; }
#dlists.practise .dwords li:not(.shown)::after { content: '?'; flex: 1 1 100%; color: var(--muted); font-weight: 700; }
#dlists.practise .dwords li.shown { border-color: var(--green); }
@media (max-width: 640px) { .dthemes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .dthemes .chip { flex: none; } }
.langs.nf { display: block; }
.nf ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nf .lang { height: 100%; }
.nf .lang span { color: var(--band-muted); }
@media print { #dlists.practise .dwords li .mean { display: block; } #dlists.practise .dwords li::after { content: none; } }
/* Baby names */
.nbar { display: flex; flex-direction: column; gap: 14px; }
.seg { display: flex; width: fit-content; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface2); max-width: 100%; }
.seg a { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.seg a[aria-current="page"] { background: var(--ink); color: var(--surface); }
.seg a[aria-current="page"] .badge { background: var(--surface); color: var(--ink); }
.seg a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ntools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.ntools .field { flex: 1 1 260px; max-width: 420px; }
.ntools .chips { flex: 0 1 auto; }
.ntools .note { flex: 1 1 100%; margin: 0; }
#nlist { display: flex; flex-direction: column; gap: 26px; }
.nletters .chip { min-width: 2.4em; justify-content: center; font-weight: 600; }
.nms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.nm { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nm[data-o="amz"] { border-top: 3px solid var(--saffron); }
.nm:target { outline: 3px solid var(--blue); outline-offset: 2px; }
.nm-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.nm-lat { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.nm-ar { font-family: 'IBM Plex Sans Arabic', var(--font-body); font-size: 1.2rem; margin-left: auto; }
[dir="rtl"] .nm-ar { margin-left: 0; margin-right: auto; }
.nm-tf { font-family: 'Noto Sans Tifinagh', var(--font-body); font-size: 1.05rem; color: var(--saffron); letter-spacing: .04em; }
.nm-mean { margin: 0; font-size: .95rem; }
.nm-alt { margin: 0; font-size: .82rem; color: var(--muted); }
.nm-tags { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nm-tags .tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.nm-tags .tag.o-amz { background: var(--saffron-bg); color: var(--saffron); }
.nletter[hidden], .nm[hidden] { display: none; }
@media (max-width: 640px) { .nletters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .nletters .chip { flex: none; } .seg { width: auto; } .seg a { flex: 1; justify-content: center; } }
@media print { .nms { grid-template-columns: repeat(3, 1fr); } .nm { break-inside: avoid; } }