/* =====================================================================
   Dhidhdhoo Community Website: design system
   Light and dark themes via custom properties. Mobile first.
   ===================================================================== */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('../fonts/ahn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('../fonts/ahn-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal; font-display: swap; font-weight: 500;
  src: url('../fonts/ahm-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal; font-display: swap; font-weight: 700;
  src: url('../fonts/ahm-latin-700.woff2') format('woff2');
}
/* Dhivehi (Thaana script). Faruma covers the Thaana letters and the three
   punctuation marks Dhivehi borrows from Arabic. unicode-range means the
   browser only fetches this file when there is Dhivehi on the page, and keeps
   using the site's own fonts for English, so English pages cost nothing.
   Faruma(R), The President's Office 2002. */
@font-face {
  font-family: 'Faruma';
  font-style: normal; font-display: swap; font-weight: 400;
  src: url('../fonts/faruma.woff2') format('woff2');
  /* Thaana letters sit small inside their em box, so at the same font-size
     Dhivehi looks shrunken next to English. This scales only this font. */
  size-adjust: 130%;
  unicode-range: U+060C, U+061B, U+061F, U+0780-07BF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --paper: #F3F6F5;
  --surface: #FFFFFF;
  --surface-2: #E9F0EE;
  --ink: #0F2A2E;
  --muted: #4A6366;
  --line: #D3DFDD;
  --line-strong: #A9BDBA;
  --lagoon: #0A6B68;
  --lagoon-hover: #085957;
  --lagoon-ink: #FFFFFF;
  --lagoon-tint: #DCEEEB;
  --deep: #083B3C;
  --deep-ink: #EAF5F3;
  --deep-muted: #A8CCC7;
  --contour: rgba(168, 220, 212, 0.16);
  --signal: #B1132B;
  --signal-tint: #FBE9EC;
  --signal-ink: #FFFFFF;
  --verified: #1D6B3A;
  --verified-tint: #E1F2E6;
  --caution: #7A4E00;
  --caution-tint: #FFF1D1;
  --focus: #1B5FD1;
  --overlay: rgba(6, 26, 28, 0.55);
  --shadow-pop: 0 10px 30px -12px rgba(8, 40, 42, 0.35);

  --font: 'Faruma', 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.95rem;
  --step-4: 2.44rem;
  --step-5: 3.05rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;

  --gutter: 16px;
  --max: 74rem;
  --header-h: 60px;
  --tabbar-h: 64px;
}

@media (min-width: 720px) { :root { --gutter: 28px; --header-h: 68px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1E2E31;
    --surface: #26393C;
    --surface-2: #2F4447;
    --ink: #F2F7F6;
    --muted: #C3D3D1;
    --line: #3D5558;
    --line-strong: #5A7477;
    --lagoon: #74D6CB;
    --lagoon-hover: #93E2D9;
    --lagoon-ink: #0B2826;
    --lagoon-tint: #2A4D4E;
    --deep: #16484A;
    --deep-ink: #F4FBF9;
    --deep-muted: #C2E0DB;
    --contour: rgba(170, 230, 220, 0.14);
    --signal: #FF9AA4;
    --signal-tint: #4D2A2F;
    --signal-ink: #2A0A0F;
    --verified: #93E3B5;
    --verified-tint: #24493A;
    --caution: #F8D488;
    --caution-tint: #4A3E20;
    --focus: #A5C6FF;
    --overlay: rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1E2E31;
  --surface: #26393C;
  --surface-2: #2F4447;
  --ink: #F2F7F6;
  --muted: #C3D3D1;
  --line: #3D5558;
  --line-strong: #5A7477;
  --lagoon: #74D6CB;
  --lagoon-hover: #93E2D9;
  --lagoon-ink: #0B2826;
  --lagoon-tint: #2A4D4E;
  --deep: #16484A;
  --deep-ink: #F4FBF9;
  --deep-muted: #C2E0DB;
  --contour: rgba(170, 230, 220, 0.14);
  --signal: #FF9AA4;
  --signal-tint: #4D2A2F;
  --signal-ink: #2A0A0F;
  --verified: #93E3B5;
  --verified-tint: #24493A;
  --caution: #F8D488;
  --caution-tint: #4A3E20;
  --focus: #A5C6FF;
  --overlay: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 750; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -0.022em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--lagoon); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--lagoon-hover); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.icon { flex: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-sm);
}
.skip-link:focus { top: 12px; color: var(--paper); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 46rem; }
.section { padding-block: 2.5rem; }
@media (min-width: 720px) { .section { padding-block: 3.5rem; } }
.section:not([hidden]) + .section { padding-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.section-head a:hover { text-decoration: underline; }
.stack > * + * { margin-top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--ink); }
.wordmark-mark { width: 30px; height: 30px; color: var(--lagoon); }
.primary-nav { display: none; }
@media (min-width: 960px) {
  .primary-nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
  .primary-nav a {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.97rem;
    padding: 8px 11px; border-radius: var(--r-sm);
  }
  .primary-nav a:hover { background: var(--surface-2); }
  .primary-nav a[aria-current="page"] { color: var(--lagoon); box-shadow: inset 0 -2px 0 var(--lagoon); border-radius: 0; }
  .primary-nav a.nav-emergency { color: var(--signal); }
}
.header-actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--line); }

/* ---------- Mobile tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); padding: 6px 2px;
  font-size: 0.75rem; font-weight: 650; color: var(--muted); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.tabbar a[aria-current="page"] { color: var(--lagoon); }
.tabbar a[aria-current="page"] .icon { stroke-width: 2.4; }
.tabbar .tab-emergency { color: var(--signal); }
@media (min-width: 960px) { .tabbar { display: none; } }

/* ---------- Sheet (mobile More menu) and dialogs ---------- */
dialog {
  border: 0; padding: 0; color: var(--ink); background: var(--surface);
  max-width: min(36rem, calc(100vw - 24px)); width: 100%;
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: var(--overlay); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 20px; }
.dialog-head h2 { margin: 0; font-size: var(--step-1); }
.dialog-body { padding: 8px 20px 20px; max-height: min(70vh, 640px); overflow: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 20px; flex-wrap: wrap; }
dialog.sheet {
  margin: auto 0 0 0; max-width: 100vw; width: 100vw;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-nav { display: grid; gap: 2px; padding: 4px 12px 16px; }
.sheet-nav a {
  display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-weight: 650; font-size: 1.05rem;
}
.sheet-nav a:hover, .sheet-nav a[aria-current="page"] { background: var(--surface-2); }
.sheet-nav hr { margin: 6px 12px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheet-up 220ms cubic-bezier(.2,.8,.2,1); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--lagoon); border-color: var(--lagoon); color: var(--lagoon-ink); }
.btn-primary:hover { background: var(--lagoon-hover); border-color: var(--lagoon-hover); color: var(--lagoon-ink); }
.btn-danger { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn-danger:hover { filter: brightness(0.94); background: var(--signal); color: var(--signal-ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 0.92rem; }
.btn-block { width: 100%; }
.btn .spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 1rem; align-content: start; }
.field label, .field .label { font-weight: 650; font-size: 0.95rem; }
.field .hint { font-size: var(--step--1); color: var(--muted); margin: 0; }
.field .error { font-size: var(--step--1); color: var(--signal); margin: 0; display: flex; gap: 6px; align-items: center; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--signal); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lagoon); flex: none; }
.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 720px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.required-mark { color: var(--signal); }

/* ---------- Search ---------- */
.searchbar { display: flex; gap: 8px; }
.searchbar .input-wrap { position: relative; flex: 1; }
.searchbar .input-wrap .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbar .input { padding-left: 44px; min-height: 52px; font-size: 1.05rem; }
.searchbar .btn { min-height: 52px; }

/* ---------- Badges and status (always icon + text, never colour alone) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 650; line-height: 1.3;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
}
.badge .icon { width: 15px; height: 15px; }
.badge-verified { background: var(--verified-tint); color: var(--verified); border-color: transparent; }
.badge-caution { background: var(--caution-tint); color: var(--caution); border-color: transparent; }
.badge-signal { background: var(--signal-tint); color: var(--signal); border-color: transparent; }
.badge-lagoon { background: var(--lagoon-tint); color: var(--lagoon); border-color: transparent; }

/* ---------- Notices ---------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.notice p:last-child { margin-bottom: 0; }
.notice-caution { background: var(--caution-tint); border-color: transparent; color: var(--ink); }
.notice-caution > .icon { color: var(--caution); }
.notice-signal { background: var(--signal-tint); border-color: transparent; }
.notice-signal > .icon { color: var(--signal); }

/* ---------- Empty, loading and error states ---------- */
.state {
  display: grid; justify-items: start; gap: 8px;
  padding: 28px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.state .icon { color: var(--muted); }
.state h3 { margin: 4px 0 0; font-size: var(--step-1); }
.state p { margin: 0; color: var(--muted); max-width: 52ch; }
.state .btn-row { margin-top: 8px; }
.state-error { border-style: solid; border-color: transparent; background: var(--signal-tint); }
.state-error .icon { color: var(--signal); }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 50%, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; border-radius: var(--r-sm);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-card { height: 220px; border-radius: var(--r-md); }
.skeleton-line { height: 14px; margin: 8px 0; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; width: min(28rem, calc(100vw - 24px)); pointer-events: none;
}
@media (min-width: 960px) { .toasts { bottom: 24px; } }
.toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: var(--shadow-pop);
}
.toast-error { background: var(--signal); color: var(--signal-ink); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 180ms ease-out; }
  @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 1.5rem; flex-wrap: wrap; }
.pager .muted { font-size: var(--step--1); }

/* ---------- Page heading ---------- */
.page-head { padding: 2rem 0 1.25rem; }
@media (min-width: 720px) { .page-head { padding: 3rem 0 1.5rem; } }
.page-head h1 { margin-bottom: 0.35em; }
.page-head .lede { font-size: var(--step-1); color: var(--muted); max-width: 46ch; margin: 0; line-height: 1.45; }
.crumb { display: flex; width: fit-content; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; margin-bottom: 0.75rem; font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem 0 2.5rem; color: var(--muted); font-size: 0.95rem; }
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .site-footer .wrap { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; color: var(--ink); margin-bottom: 0.6em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .fineprint { grid-column: 1 / -1; font-size: var(--step--1); border-top: 1px solid var(--line); padding-top: 1rem; margin: 0; }

/* =====================================================================
   HOME
   ===================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--deep); color: var(--deep-ink);
  padding: 3rem 0 2.5rem;
}
/* Abstract reef-depth contour lines. Decorative only, not a map. */
.hero::before {
  content: ''; position: absolute; inset: -40% -30% -40% 20%; z-index: -1;
  background:
    repeating-radial-gradient(ellipse 60% 48% at 62% 46%,
      transparent 0 26px, var(--contour) 26px 27.5px);
  transform: rotate(-9deg);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--deep) 18%, transparent 80%);
}
@media (min-width: 720px) { .hero { padding: 5rem 0 4rem; } }
.hero-name {
  font-size: clamp(3.1rem, 13vw, 7.25rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.92;
  margin: 0 0 0.3em;
}
.hero-tagline { font-size: var(--step-1); color: var(--deep-muted); max-width: 34ch; margin-bottom: 1.75rem; line-height: 1.4; }
.hero .searchbar { max-width: 40rem; }
.hero .searchbar .input { border-color: transparent; background: #F4FAF9; color: #0F2A2E; }
.hero .searchbar .input::placeholder { color: #557074; }
.hero .searchbar .input-wrap .icon { color: #557074; }
.hero .btn-primary { background: var(--deep-ink); border-color: var(--deep-ink); color: var(--deep); }
.hero .btn-primary:hover { background: #fff; color: var(--deep); }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
.hero-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  color: var(--deep-ink); text-decoration: none; font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--deep-ink) 30%, transparent);
}
.hero-links a:hover { background: color-mix(in srgb, var(--deep-ink) 12%, transparent); color: var(--deep-ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero-name, .hero-tagline, .hero .searchbar, .hero-links { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; }
  .hero-tagline { animation-delay: 70ms; }
  .hero .searchbar { animation-delay: 130ms; }
  .hero-links { animation-delay: 190ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

.emergency-strip {
  display: grid; gap: 14px; align-items: center;
  margin-top: -1.25rem; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--signal);
  border-radius: var(--r-md); padding: 18px 18px 18px 18px; box-shadow: var(--shadow-pop);
}
@media (min-width: 720px) { .emergency-strip { grid-template-columns: auto 1fr auto; padding: 20px 24px; margin-top: -2rem; } }
.emergency-strip .icon-tile {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--signal-tint); color: var(--signal);
}
.emergency-strip h2 { margin: 0 0 2px; font-size: var(--step-1); }
.emergency-strip p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.emergency-strip .btn { border-color: var(--signal); color: var(--signal); }

/* ---------- Place cards ---------- */
.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.place-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; min-height: 100%;
}
.place-card:hover { border-color: var(--line-strong); color: var(--ink); }
.place-card:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; }
.place-card .media { aspect-ratio: 16 / 10; background: var(--surface-2); display: grid; place-items: center; color: var(--lagoon); overflow: hidden; }
.place-card .media img { width: 100%; height: 100%; object-fit: cover; }
.place-card .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.place-card h3 { margin: 0; font-size: 1.12rem; }
.place-card .cat { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.place-card .addr { color: var(--muted); font-size: 0.92rem; margin: 0; }
.place-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.92rem; }
.stars .icon { color: var(--caution); fill: currentColor; }

/* ---------- Category chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 40px; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
  font-weight: 650; font-size: 0.95rem; cursor: pointer; text-decoration: none;
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- News list ---------- */
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-item {
  display: grid; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; align-items: start;
}
@media (min-width: 640px) { .news-item.has-img { grid-template-columns: 1fr 180px; gap: 24px; } }
.news-item:hover { color: var(--ink); }
.news-item:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; }
.news-item h3 { margin: 0 0 6px; font-size: 1.22rem; }
.news-item p { margin: 0; color: var(--muted); }
.news-item time { font-size: 0.9rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: 6px; }
.news-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.official-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--lagoon); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-tile {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }
.gallery-tile .credit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  font-size: 0.8rem; font-weight: 650; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.lightbox { max-width: min(1100px, calc(100vw - 16px)); background: #0A1415; color: #EEF5F4; }
.lightbox .dialog-head { color: #EEF5F4; }
.lightbox .icon-btn { color: #EEF5F4; }
.lightbox .icon-btn:hover { background: rgba(255,255,255,0.1); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 72vh; width: auto; margin: 0 auto; }
.lightbox figcaption { padding: 14px 20px 20px; display: grid; gap: 4px; }
.lightbox figcaption .muted { color: #A9C1BE; }
.lightbox .nav { display: flex; gap: 8px; }

/* ---------- Place detail ---------- */
.place-layout { display: grid; gap: 24px; }
@media (min-width: 960px) { .place-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; } }
.place-hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; flex: none; }
.thumbs button[aria-current="true"] { border-color: var(--lagoon); }
.thumbs img { width: 84px; height: 60px; object-fit: cover; border-radius: 4px; }
.info-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 18px; }
@media (min-width: 960px) { .info-panel { position: sticky; top: calc(var(--header-h) + 16px); } }
.info-row { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row .icon { color: var(--muted); margin-top: 2px; }
.info-row dt { font-size: 0.85rem; color: var(--muted); font-weight: 650; }
.info-row dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.info-row dd .unavailable { color: var(--muted); font-style: italic; }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.68; }
.prose h2 { font-size: var(--step-2); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--lagoon); color: var(--muted); }

/* ---------- Reviews and comments ---------- */
.thread { display: grid; gap: 0; border-top: 1px solid var(--line); }
.thread-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.thread-item header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.thread-item header strong { font-weight: 700; }
.thread-item time { color: var(--muted); font-size: 0.88rem; }
.thread-item p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.thread-item .actions { margin-top: 8px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--muted); font-size: 0.88rem; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 0.2em; }
.link-btn:hover { color: var(--ink); }
.rating-input { display: flex; gap: 4px; border: 0; padding: 0; margin: 0; }
.rating-input legend { font-weight: 650; font-size: 0.95rem; margin-bottom: 6px; padding: 0; }
.rating-input label { cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--line-strong); }
.rating-input label:hover, .rating-input label.on { color: var(--caution); }
.rating-input label.on .icon { fill: currentColor; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input input:focus-visible + label { outline: 3px solid var(--focus); }

/* ---------- Emergency page ---------- */
.em-list { display: grid; gap: 12px; }
.em-card {
  display: grid; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px;
}
/* One layout everywhere: the number with its Copy button beside it. */
@media (min-width: 640px) { .em-card { padding: 18px 22px; } }
.em-report { font-size: 0.95rem; }
.em-numrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 0 10px;
}
.em-numrow .em-number { margin: 0; flex: 1 1 auto; }
.em-card.flagged { border-color: var(--caution); border-width: 2px; }
.em-card h2 { font-size: 1.15rem; margin: 0 0 2px; }
.em-card .org { color: var(--muted); font-size: 0.95rem; margin: 0; }
.em-number {
  font-family: var(--mono); font-weight: 700; font-size: clamp(1.7rem, 7vw, 2.1rem);
  letter-spacing: 0.04em; margin: 6px 0 4px; line-height: 1.1;
  font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
}
.em-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.9rem; color: var(--muted); }
.em-meta time { font-weight: 650; color: var(--ink); }
.em-note { margin: 6px 0 0; font-size: 0.95rem; }
.copy-btn { flex: 0 0 auto; min-height: 48px; font-size: 0.98rem; }
.em-numrow .copy-btn { border-radius: 999px; padding: 10px 20px; }
.copy-btn.copied { background: var(--verified); border-color: var(--verified); color: #fff; }

/* ---------- Events ---------- */
.event-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.event-date { display: grid; justify-items: center; align-content: center; background: var(--lagoon-tint); color: var(--lagoon); border-radius: var(--r-md); padding: 8px 4px; height: 76px; }
.event-date .d { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.event-date .m { font-size: 0.85rem; font-weight: 700; }
.event-item h3 { margin: 0 0 4px; font-size: 1.15rem; }
.event-item p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Map (Google Maps embed) ---------- */
.map-page { display: grid; grid-template-areas: "head" "stage" "list"; }
@media (min-width: 960px) {
  .map-page { grid-template-columns: 360px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head stage" "list stage"; height: calc(100dvh - var(--header-h)); }
}
.map-head { grid-area: head; padding: 12px var(--gutter); display: grid; gap: 10px; align-content: start; }
.map-head h1 { font-size: var(--step-2); margin: 0; }
.map-head .select { width: auto; flex: 1 1 200px; }
.map-stage { grid-area: stage; position: relative; height: 58vh; min-height: 320px; background: var(--surface-2); border-block: 1px solid var(--line); }
@media (min-width: 960px) { .map-stage { height: auto; border-block: 0; border-left: 1px solid var(--line); } }
.map-list-wrap { grid-area: list; padding: 8px var(--gutter) 24px; overflow: auto; }
@media (min-width: 960px) { .map-head, .map-list-wrap { padding-inline: 20px; } .map-head { padding-top: 20px; } }
.map-list { display: grid; gap: 2px; }
.map-list button { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; display: grid; gap: 2px; min-height: 44px; }
.map-list button:hover, .map-list button[aria-current="true"] { background: var(--surface-2); }
.map-list button[aria-current="true"] { box-shadow: inset 3px 0 0 var(--lagoon); }
.map-list strong { font-weight: 700; }
.map-list span { color: var(--muted); font-size: 0.88rem; }
.map-selected { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 6px; }
.map-selected strong { font-size: 1.05rem; }
.google-frame { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; background: var(--surface-2); }
.map-stage .state { position: absolute; inset: 16px; height: fit-content; background: var(--surface); }
.mini-map { height: 260px; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); }
.mini-map .google-frame { min-height: 0; }

/* ---------- Auth pages ---------- */
.auth-wrap { max-width: 28rem; margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
@media (min-width: 480px) { .auth-card { padding: 32px; } }
.auth-card h1 { font-size: var(--step-3); }
.auth-alt { text-align: center; margin-top: 1.25rem; color: var(--muted); }

/* ---------- Account ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 12px 14px; font-weight: 650; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lagoon); }
.sub-list { display: grid; gap: 12px; }
.sub-row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.sub-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }

/* ---------- Upload ---------- */
.dropzone {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 28px 16px; border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; color: var(--muted);
}
.dropzone:hover, .dropzone.over { border-color: var(--lagoon); color: var(--ink); }
.dropzone strong { color: var(--ink); }
.preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--r-md); background: var(--surface-2); }
.progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--lagoon); width: 0; transition: width 200ms; }

/* ---------- Coming soon ---------- */
.soon { padding: 2.5rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .tabbar, .site-footer, .copy-btn, .btn { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}

/* small additions */
.info-row dl { margin: 0; }
.section-top { margin-block: 1.25rem 1rem; }
.section-top h1 { margin-bottom: 0.35em; }
.setup-notice { margin-top: 16px; }
.pw-wrap { display: flex; gap: 6px; align-items: center; }
.pw-wrap .input { flex: 1; }
.m0 { margin: 0; }
.notice-lagoon { background: var(--lagoon-tint); border-color: transparent; }
.notice-lagoon > .icon { color: var(--lagoon); }
.news-item h3 > .icon, #about-contact p > .icon, .em-note > .icon { display: inline; vertical-align: -3px; margin-right: 2px; }
.em-meta > span:first-child { display: inline-flex; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.loc-links { margin-top: 8px; white-space: normal; }
main:focus { outline: none; }
@media (min-width: 960px) {
  .place-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + 16px); }
  .place-side .info-panel { position: static; }
  .place-reviews { grid-column: 1; grid-row: 2; padding-top: 1rem; }
}


/* Place photos */
.hero-wrap { position: relative; }
.hero-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); }
.photo-count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; font-size: 0.85rem; font-weight: 650; pointer-events: none; }
.lightbox .lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 18px; }
.lightbox figcaption { padding: 0; }
.star-row { display: inline-flex; gap: 2px; color: var(--line-strong); vertical-align: middle; }
.star-row .icon.on { color: var(--caution); fill: currentColor; }
.rating-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
.rating-summary .big { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.rating-summary > div { display: grid; gap: 2px; }

/* Show the whole photo inside a fixed box; a blurred copy fills the edges. */
.fit { position: relative; overflow: hidden; background: var(--surface-2); }
.fit img.fill { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(18px) saturate(1.1); opacity: 0.75; }
.fit img.main { position: relative; width: 100%; height: 100%; object-fit: contain; }
.place-card .media.fit img.main { height: 100%; }
.hero-open.fit { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
@media (min-width: 960px) { .hero-open.fit { aspect-ratio: 16 / 9; } }
.danger-link { color: var(--signal); }

/* Editable page banner (Admin > Pages). Same shape on every screen so the
   admin preview matches what visitors see. */
.page-banner { position: relative; margin: 0 0 28px; aspect-ratio: 12 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.page-banner[hidden] { display: none; }
.page-banner img.main { display: block; width: 100%; height: 100%; }
.page-banner figcaption { z-index: 1; }
.page-banner figcaption { position: absolute; right: 10px; bottom: 8px; max-width: calc(100% - 20px); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; color: #fff; background: rgba(0, 0, 0, 0.55); }
.page-note { margin: 0 0 24px; }
.page-note[hidden], [data-page-text][hidden] { display: none; }
.map-head .lede { margin: 4px 0 0; font-size: 1rem; }
.map-head .page-note { margin: 6px 0 0; }
.page-banner img.main { position: absolute; inset: 0; }

/* Dhivehi is written right to left. "plaintext" lets every paragraph, heading
   and input box take its direction from its own first letter, so Dhivehi text
   lines up on the right and English on the left with nothing to switch on,
   and a page that mixes both gets each one right. */
main h1, main h2, main h3, main h4, main p, main li, main dd, main dt,
main td, main th, main figcaption, main blockquote,
.prose, .lede, .place-card h3, .news-item h3, .event-item h3,
.card h3, .state p, textarea, .input, input[type="text"], input[type="search"] {
  unicode-bidi: plaintext;
}

/* The national weather service matters more than a model estimate, so it is
   not written as small print. */
.aw-official { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md, 14px);
  background: var(--caution-tint, #fdf6e3); border: 1px solid var(--line); font-size: 0.95rem; }

/* Loading bar across the top while the next page is on its way (core/progress.js). */
.page-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 2000;
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, var(--lagoon), var(--lagoon-hover, var(--lagoon)));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--lagoon) 55%, transparent);
  transition: opacity .22s ease;
  pointer-events: none; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .page-progress { transition: none; } }

/* ---- Announcements (pages/events.js) ------------------------------------
   The first thing a card has to answer is "is this still open?", so the
   status pill carries real colour while everything else stays calm.
   Built from theme tokens, so dark mode needs no separate rules. */
.ann-list { display: grid; gap: 14px; }
.ann-card {
  padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--lagoon);
  border-radius: var(--r-lg, 20px); background: var(--surface);
}
.ann-card.is-closing { border-left-color: #b4792a; }
.ann-card.is-expired { border-left-color: #a33; opacity: 0.72; }
.ann-card.is-upcoming { border-left-color: var(--line-strong, #a6b09c); }
.ann-card h3 { margin: 6px 0 4px; font-size: 1.15rem; }
.ann-card h3 a { color: var(--ink); text-decoration: none; }
.ann-card h3 a:hover { text-decoration: underline; }
.ann-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ann-kind {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.ann-ref { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ann-excerpt { margin: 0 0 10px; color: var(--muted); }

.ann-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  background: color-mix(in srgb, var(--lagoon) 16%, transparent); color: var(--lagoon);
}
.ann-badge em { font-style: normal; font-weight: 400; opacity: 0.85; }
.ann-badge.is-closing { background: color-mix(in srgb, #b4792a 20%, transparent); color: #8a5a16; }
.ann-badge.is-expired { background: color-mix(in srgb, #a33 18%, transparent); color: #a33; }
.ann-badge.is-upcoming { background: var(--surface-2); color: var(--muted); }
/* Dark mode needs lighter ink on those two, or they sink into the card. */
:root[data-theme="dark"] .ann-badge.is-closing { color: #e9b460; }
:root[data-theme="dark"] .ann-badge.is-expired { color: #f08c8c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ann-badge.is-closing { color: #e9b460; }
  :root:not([data-theme="light"]) .ann-badge.is-expired { color: #f08c8c; }
}

.ann-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 13px; }
.ann-meta div { display: flex; gap: 6px; }
.ann-meta dt { color: var(--muted); }
.ann-meta dd { margin: 0; font-weight: 600; color: var(--ink); }

/* The table of dates copied from the notice itself. */
.ann-deadlines { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem; }
.ann-deadlines th, .ann-deadlines td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); }
.ann-deadlines th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ann-deadlines tr.is-passed { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ann-passed {
  margin-inline-start: 8px; padding: 1px 8px; border-radius: 99px; font-size: 11px;
  text-decoration: none; display: inline-block;
  background: color-mix(in srgb, #a33 15%, transparent); color: #a33;
}
/* The notice itself. A scanned A4 page in a 46rem column is unreadable, so
   the figure is allowed to grow wider than the text around it. The width is
   capped against the viewport as well, so it can never cause sideways
   scrolling on a phone. */
.ann-doc {
  --doc-w: max(100%, min(62rem, 94vw));
  width: var(--doc-w);
  margin: 22px 0;
  margin-inline: calc((100% - var(--doc-w)) / 2);
}
.ann-doc-link { display: block; }
.ann-doc-img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  /* Scans are usually white paper; keep that in dark mode so the Dhivehi
     text on the notice stays black-on-white and legible. */
  background: #fff;
}
.ann-doc figcaption { display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: center; }
.ann-doc-pdf { margin: 18px 0; }
.ann-past summary { cursor: pointer; }
.ann-state-cell { display: flex; flex-direction: column; gap: 4px; }

/* ---- Today's posters (core/posters.js) ----------------------------------
   Only ever on screen when something is genuinely live. */
.poster-today { margin: 26px auto; }
.poster-today-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 1rem; letter-spacing: 0.02em; color: var(--ink);
}
.poster-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.poster-chip {
  flex: none; width: 92px; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit;
}
.poster-chip-img {
  width: 76px; height: 76px; border-radius: 50%; padding: 3px; display: block;
  background: linear-gradient(135deg, var(--lagoon), #b4792a);
}
.poster-chip-img img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); display: block;
}
.poster-chip-name {
  font-size: 12px; line-height: 1.3; text-align: center; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.poster-chip:focus-visible .poster-chip-img { outline: 2px solid var(--lagoon); outline-offset: 3px; }
/* Roomier on a computer, where there is space for it. Phones keep the
   compact size so the strip does not crowd out the page. */
@media (min-width: 900px) {
  .poster-today-title { font-size: 1.15rem; }
  .poster-chip { width: 132px; gap: 10px; }
  .poster-chip-img { width: 112px; height: 112px; padding: 4px; }
  .poster-chip-name { font-size: 14px; }
  .poster-strip { gap: 20px; }
}

.poster-viewer {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: #0b0b0b; color: #fff; overflow: hidden;
}
.poster-viewer::backdrop { background: #000; }
.poster-stage { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 46px 16px 30px; }
.poster-img { max-width: 100%; max-height: 72dvh; object-fit: contain; margin: 0 auto; display: block; }
.poster-cap { display: flex; flex-direction: column; gap: 4px; text-align: center; max-width: 46rem; margin: 0 auto; }
.poster-cap strong { font-size: 1.05rem; }
.poster-cap span { font-size: 0.9rem; opacity: 0.85; }
.poster-cap em { font-style: normal; font-size: 12px; opacity: 0.6; }
.poster-bars { position: absolute; inset: 10px 12px auto 12px; display: flex; gap: 4px; z-index: 3; }
.poster-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.32); overflow: hidden; }
.poster-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }
.poster-bar.is-done i { width: 100%; }
/* An animation rather than a width transition: a transition would not replay
   when you went back to a bar that was already full. */
@keyframes poster-fill { from { width: 0; } to { width: 100%; } }
.poster-bar.is-live i { animation: poster-fill var(--poster-ms, 7000ms) linear forwards; }
@media (prefers-reduced-motion: reduce) {
  /* No crawling bar, but still show which one you are on. */
  .poster-bar.is-live i { animation: none; width: 100%; }
}
.poster-close {
  position: absolute; top: 24px; inset-inline-end: 12px; z-index: 4;
  background: rgba(0,0,0,0.4); color: #fff; border: 0; border-radius: 50%;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
}
/* Invisible halves of the screen: tap right for the next, left to go back. */
.poster-tap { position: absolute; top: 60px; bottom: 90px; width: 34%; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.poster-tap.prev { inset-inline-start: 0; }
.poster-tap.next { inset-inline-end: 0; }
.poster-tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.poster-count { position: absolute; bottom: 8px; inset-inline: 0; text-align: center; font-size: 11px; opacity: 0.5; margin: 0; }

.chip-clear { border: 0; cursor: pointer; background: none; color: var(--muted); text-decoration: underline; }

/* Where council notices come from (pages/events.js). */
.ann-source {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 24px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  background: var(--paper); line-height: 1.5;
}
.ann-source-icon { flex: none; line-height: 1; margin-top: 2px; }
.ann-source-text { flex: 1 1 auto; min-width: 0; }
.ann-source a { color: inherit; }