/* ============================================================================
   dashboard.css — the dashboard link's page, round 3: the owner's new design.

   1. WHAT IT DOES. Styles index.html: the design delivered in W-other/link_dashboard
      (source/style.css), Wasim's Oasis palette, type and gazelle art, light and dark,
      phone to desktop, and an A4 print layout. Plus what the design did not have and
      the survey requires: the real map's colours, the heatmap switch, the camera
      buttons under the map, the IUCN tag (RL.7), a calendar of any length, the gates.

   2. WHY THIS AND NOT THE ROUND-2 LOOK. The owner, 2026-10-13: "implement it rather
      than the one we have now ... keep the new colors". Values are the design's, as
      delivered; the rules are rewritten one per line so a reader can find them.
      ⚠ RL.14 and RL.16 (Viora's colours and mark) are REVERSED by this, out loud in
      the survey's §R3: the design is Wasim's own (Oasis paper, blue and cyan, amber
      for concern), and the owner asked for those colours to join Viora's tokens.

   3. WHAT CONNECTS TO IT. index.html (classes and ids) · dashboard.js (sets
      data-theme on <html>, the --days / --gap calendar sizes and every bar's size
      through the CSSOM, because the page's own rule refuses inline style=) · map.js
      (reads the --map-* and --heat-* tokens and the dot colours when it draws, and
      again on a theme switch) · Wasim's fonts, read in place from
      apps/desktop/ui/styles/fonts/ (the Worker will serve copies, R-RL.8).

   4. WHAT CHANGING IT AFFECTS — traced, not exhaustive. A token renamed here is a
      colour map.js reads as "" (MapLibre then draws black). The print block decides
      the A4 pages a returning PDF would have (RLD.23). `.calendar-row`'s columns
      must match the cells dashboard.js writes. There may be more.

   5. WHAT IT PRODUCES. Light and dark colour roles; English (EB Garamond, Source
      Sans 3, Fira Code) and Arabic (Handicrafts, IBM Plex Sans Arabic) type; no
      external resource.
   ============================================================================ */

/* The faces the design embeds, from Wasim's own files. Arabic faces carry a
   unicode-range, so Latin text never falls into them. */
@font-face{font-family:'EB Garamond';src:url("../../../../../../apps/desktop/ui/styles/fonts/EBGaramond/EBGaramond-VariableFont_wght.ttf") format("truetype");font-weight:400 800;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url("../../../../../../apps/desktop/ui/styles/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf") format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:'Fira Code';src:url("../../../../../../apps/desktop/ui/styles/fonts/FiraCode-VariableFont_wght.ttf") format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:'Handicrafts';src:url("../../../../../../apps/desktop/ui/styles/fonts/Handicrafts/TheYearofHandicrafts-Regular.otf") format("opentype");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url("../../../../../../apps/desktop/ui/styles/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url("../../../../../../apps/desktop/ui/styles/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.ttf") format("truetype");font-weight:600 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

/* ---- the colours: the design's, exactly (the owner: "keep the new colors").
   --red is Wasim's own (tokens.css `--red`), for RL.7's tag only. The --map-* and
   --heat-* tokens are new here: the design's map was a placeholder. ---------- */
:root{
  --paper:#faf9f5;--card:#fffdf8;--ink:#1a1614;--muted:#66645f;--line:#e8e3d8;--track:#e0dacd;
  --brand:#0284c7;--brand-text:#006894;--tint:#eaf3f5;--orange:#995000;--orange-tint:#fff0dc;
  --night:#0284c7;--day:#70bdcd;--red:#dc3545;
  --body:'Source Sans 3','IBM Plex Sans Arabic',sans-serif;--display:'EB Garamond','Handicrafts',serif;--mono:'Fira Code',monospace;
  --shadow:0 12px 35px #1a161408;
  --map-land:#f4f2ec;--map-sand:#efe8d9;--map-green:#e1ebe0;--map-water:#cfe5ee;--map-road:#d6cfc1;--map-road2:#e4ded2;
  --map-border:#8f9a9e;--map-text:#57544e;--map-halo:#fffdf8;
  --heat-1:#cfe8ef;--heat-2:#70bdcd;--heat-3:#0284c7;--heat-4:#006894;
  color-scheme:light}
:root[data-theme=dark]{
  --paper:#1a1614;--card:#25211f;--ink:#f5f5f5;--muted:#c1bdb4;--line:#403a35;--track:#514b43;
  --brand:#06b6d4;--brand-text:#38bdf8;--tint:#18333d;--orange:#f59e0b;--orange-tint:#3e2d17;
  --night:#06b6d4;--day:#6b919d;--shadow:none;
  --map-land:#221e1c;--map-sand:#2a2420;--map-green:#1f2c27;--map-water:#17303a;--map-road:#4a433d;--map-road2:#38322e;
  --map-border:#6f7a7e;--map-text:#c1bdb4;--map-halo:#1a1614;
  --heat-1:#18333d;--heat-2:#6b919d;--heat-3:#06b6d4;--heat-4:#38bdf8;
  color-scheme:dark}
html[lang=ar]{--body:'IBM Plex Sans Arabic','Source Sans 3',sans-serif;--display:'Handicrafts','EB Garamond',serif}

/* ---- the document and its controls (the design's) ---------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
button,select{min-height:40px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--display);font-weight:500;line-height:1.15}
h2{font-size:29px}
h3{font-size:18px;font-weight:600;line-height:1.35}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button{transition:background .15s,transform .15s}
button:active{transform:translateY(1px)}
.mono{font-family:var(--mono);font-size:11px}
bdi{font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:20px;padding:10px;background:var(--card);z-index:9}
.skip:focus{inset-block-start:10px}
[hidden]{display:none!important}

/* ---- the slim route bar and the hero --------------------------------------- */
.topbar{border-bottom:1px solid var(--line);background:var(--card)}
.top-inner{max-width:1280px;min-height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 40px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:30px;font-weight:600}
.brand img{width:42px;height:42px;object-fit:contain}
.brand-divider,.toolbar-divider{height:23px;width:1px;background:var(--line);margin-inline:10px}
.brand .brand-descriptor{font:10px var(--mono);letter-spacing:1.4px;color:var(--muted)}
.brand-dark{display:none!important}
html[data-theme=dark] .brand-light{display:none!important}
html[data-theme=dark] .brand-dark{display:block!important}
.toolbar{display:flex;gap:13px;align-items:center}
.plain,.icon-button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;padding:8px 4px}
.plain:hover,.icon-button:hover{color:var(--brand-text)}
.language{font-family:'IBM Plex Sans Arabic','Source Sans 3',sans-serif}
.icon-button{width:36px}
.theme-sun{display:none}
html[data-theme=dark] .theme-moon{display:none}
html[data-theme=dark] .theme-sun{display:block}
.page{max-width:1280px;margin:auto;padding:34px 40px 0}
.report-meta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.eyebrow{font:10px/1.6 var(--mono);letter-spacing:1.3px;color:var(--brand-text);text-transform:uppercase}
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;padding:28px 0 34px;align-items:center}
.project-name{color:var(--muted);font-size:15px;margin-bottom:12px;overflow-wrap:anywhere}
.hero h1{font-size:76px;letter-spacing:-2px;line-height:.99}
.hero h1 em{font-weight:400;color:var(--brand);font-style:normal}
.intro{max-width:445px;font-size:17px;color:var(--muted);margin-top:21px;line-height:1.6}
.period{font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:22px;color:var(--muted)}
.tiny-rule{width:23px;height:1px;background:var(--brand)}
.period-dot{color:var(--track)}
.hero-art{height:295px;position:relative;overflow:hidden;isolation:isolate}
.gazelle{position:absolute;height:258px;width:100%;object-fit:contain;inset-block-start:5px;inset-inline-start:0;z-index:1}
.art-orbit{position:absolute;width:250px;height:250px;border:1px solid var(--line);border-radius:50%;inset-block-start:4px;inset-inline-start:calc(50% - 125px)}
.orbit-two{width:290px;height:290px;inset-block-start:-16px;inset-inline-start:calc(50% - 145px);border-style:dashed;opacity:.5}
.art-index{position:absolute;inset-inline-end:0;inset-block-start:10px;font:11px var(--mono);color:var(--brand-text)}
.art-line{position:absolute;inset-inline:10px;inset-block-end:31px;height:1px;background:var(--brand);opacity:.4}
.art-caption{position:absolute;inset-block-end:6px;inset-inline:0;text-align:center;font:9px var(--mono);letter-spacing:2px;color:var(--muted)}

/* ---- the takeaway and the four tinted tiles ----------------------------------- */
.brief{display:flex;gap:24px;align-items:center;background:var(--tint);border-inline-start:3px solid var(--brand);padding:20px 24px;border-radius:0 6px 6px 0}
.brief-label{flex:0 0 125px;font:10px var(--mono);letter-spacing:1px;color:var(--brand-text)}
.brief-label small{display:block;font:12px var(--body);letter-spacing:0;color:var(--muted);margin-top:5px}
.brief p{font-size:17px;line-height:1.5;flex:1}
.brief strong{font-weight:600}
.text-link{border:0;padding:0;background:transparent;color:var(--brand-text);font-size:13px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;min-height:30px}
.text-link:hover{text-decoration:underline}
.section-bar{margin-top:37px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.section-bar h2{margin-top:5px}
.scope-line{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:12px;min-height:41px;flex-wrap:wrap}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.metric{padding:16px 20px 17px;position:relative;background:var(--tint);border-top:3px solid var(--brand);border-radius:7px;min-width:0}
.metric-concern{background:var(--orange-tint);border-color:var(--orange)}
.metric-concern .value,.metric-concern .metric-top{color:var(--orange)}
.concern-icon{width:16px;height:16px;flex-shrink:0}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:14px}
.metric-number{font:10px var(--mono);color:var(--muted)}
.value{font:48px/1.12 var(--display);margin:7px 0 5px;letter-spacing:-1px;white-space:nowrap}
.metric p{font-size:11px;color:var(--muted);line-height:1.5;max-width:220px}

/* ---- panels: the register, the hours, the readings, the calendar -------------- */
.result-grid{margin-top:24px}
.panel{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:26px;box-shadow:var(--shadow);min-width:0}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel h2{margin-top:7px}
.small-tag{font-size:11px;border:1px solid var(--line);color:var(--muted);border-radius:4px;padding:4px 8px;white-space:nowrap}
.panel-description{font-size:13px;color:var(--muted);margin-top:8px}
.species-list{margin-top:15px}
.species-row{display:grid;grid-template-columns:25px 1fr 60px;gap:12px;align-items:center;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:start;position:relative}
.species-row:last-child{border-bottom:0}
.species-row>span:nth-child(2){min-width:0}
.species-rank{font:10px var(--mono);color:var(--muted)}
.species-info{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.species-name{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.species-latin{font-size:12px;color:var(--muted);font-style:italic}
.species-bar{display:block;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
.species-bar span{display:block;height:100%;background:var(--brand);border-radius:3px;inline-size:0}
.species-count{font:14px var(--mono);text-align:end}
.species-row:hover .species-name{color:var(--brand-text)}
.species-row[aria-pressed=true]{background:var(--tint);padding-inline:8px;border-radius:5px}
.species-row.dim{opacity:.5}
/* RL.7: the species' IUCN status, red when it is not Least Concern (RLD.4). White on
   Wasim's --red measures 4.5:1. LC and the rest wear the quiet outline. */
.iucn{font:600 9px/1 var(--mono);letter-spacing:.6px;padding:3px 5px;border-radius:3px;border:1px solid var(--line);color:var(--muted);font-style:normal}
.iucn.is-concern{background:var(--red);border-color:var(--red);color:#fff}
.footnote{font-size:11px;line-height:1.6;color:var(--muted);margin-top:18px}
.insight-panel{background:var(--tint);border-radius:8px;padding:25px 28px;position:relative;display:flex;flex-direction:column;border-top:4px solid var(--brand);grid-column:1/-1;grid-row:2}
.insight-mark{position:absolute;inset-inline-end:28px;inset-block-start:23px;color:var(--brand);font-size:30px}
.insight-panel h2{font-size:33px;margin-top:9px;margin-bottom:19px}
#readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.readout-item{padding:15px 0 0;border-top:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.readout-item h3{font-size:16px;margin-bottom:6px}
.readout-item p{font-size:13px;line-height:1.65;color:var(--muted)}
.insight-bottom{display:flex;gap:11px;align-items:flex-start;margin-top:0;padding-top:18px}
.insight-bottom p{font-size:11px;color:var(--muted)}
.mini-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--brand);margin-top:5px}
.detail-grid{display:grid;grid-template-columns:1fr 1.13fr;gap:22px;margin-top:22px}
.activity-stack{display:contents}
.hourly-panel{grid-column:1;grid-row:1}
.calendar-panel{grid-column:2;grid-row:1}
.chart-axis{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:24px}
.hour-chart{height:160px;display:flex;gap:5px;align-items:flex-end;border-bottom:1px solid var(--track);background:repeating-linear-gradient(to top,transparent 0,transparent 39px,var(--line) 40px);direction:ltr;position:relative}
.hour-bar{width:100%;flex:1;min-width:0;min-height:2px;max-height:160px;position:relative;border:0;background:var(--day);border-radius:3px 3px 0 0;padding:0;block-size:0}
.hour-bar.night{background:var(--night)}
.hour-bar:hover,.hour-bar:focus-visible{filter:brightness(.8)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:6px 9px;white-space:nowrap;font:11px var(--body);border-radius:4px;z-index:8;pointer-events:none}
.hour-bar:nth-child(-n+4)::after{left:0;transform:none}
.hour-bar:nth-last-child(-n+4)::after{left:auto;right:0;transform:none}
.hour-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted);margin-top:10px}
.chart-legend,.calendar-legend{display:flex;flex-wrap:wrap;gap:15px;margin-top:17px;font-size:10px;color:var(--muted)}
.chart-legend>span,.calendar-legend>span{display:flex;align-items:center;gap:6px}
.swatch{width:9px;height:9px;display:inline-block;border-radius:2px;background:var(--brand)}
.swatch.day{background:var(--day)}
.swatch.night{background:var(--night)}
/* The calendar's three strengths, the Results screen's (results.css .heat__cell--on
   / --hit / --hit2): running with no photograph 22 %, one 62 %, two or more solid. */
.swatch.on,.swatch.hit,.swatch.hit2{background:var(--brand)}
.swatch.on{opacity:.22}.swatch.hit{opacity:.62}
.swatch.downtime{background:var(--orange-tint);color:var(--orange);font-size:12px;font-style:normal;line-height:8px;text-align:center}
.swatch.off{background:transparent;border:1px dashed var(--track)}

/* ⭐ A CALENDAR OF ANY LENGTH (round 2's "the camera activity chart is not flexible",
   kept). The design's grid was 30 columns for one September; here dashboard.js sets
   --days to the survey's length and --gap to suit it. Each day keeps at least
   --cmin, and a phone scrolls sideways only when the days cannot fit. */
.calendar-scroll{overflow-x:auto;margin-top:21px;padding-bottom:4px;direction:ltr}
/* ⚠ direction:ltr ON THE SCROLLER TOO: in an Arabic page a scroller starts at its RIGHT
   end, which hid the camera names off the left edge on a phone (seen in the round-3
   screenshots). The names also stay put while the days scroll under them. */
.camera-calendar{min-inline-size:calc(61px + var(--days,30) * (var(--cmin,4px) + var(--gap,3px)))}
.calendar-row{display:grid;grid-template-columns:61px repeat(var(--days,30),minmax(var(--cmin,4px),1fr));gap:var(--gap,3px);align-items:center;margin-top:8px;direction:ltr}
.calendar-row.dim{opacity:.3}
.calendar-name{font:10px var(--mono);color:var(--muted);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:sticky;left:0;z-index:1;background:var(--card);align-self:stretch;display:flex;align-items:center}
.calendar-day{aspect-ratio:1;min-height:0;max-height:22px;border-radius:2px;background:var(--brand);position:relative}
.calendar-day.on{opacity:.22}
.calendar-day.hit{opacity:.62}
.calendar-day.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.calendar-day.down{background:var(--orange-tint);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;overflow:hidden}
.calendar-day:hover{outline:1px solid var(--brand)}
.calendar-ticks{font:9px var(--mono);color:var(--muted)}
.calendar-ticks span{white-space:nowrap;overflow:visible}
.calendar-legend{margin-top:20px}

/* ---- section 05: the map shell, now holding the real map ------------------------ */
.map-section{margin-top:22px}
.map-shell{height:360px;margin-top:20px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background-color:var(--tint);background-image:linear-gradient(color-mix(in srgb,var(--brand) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--brand) 6%,transparent) 1px,transparent 1px);background-size:36px 36px}
.map-shell[data-map-state=live]{display:block;background:var(--map-land)}
.map-shell[data-map-state=live]>.map-contours,.map-shell[data-map-state=live]>.map-placeholder,.map-shell[data-map-state=plain]>.map-contours,.map-shell[data-map-state=plain]>.map-placeholder{display:none}
.map-shell[data-map-state=plain]{display:block}
.map-canvas{position:absolute;inset:0}
.map-print{display:none}
.map-contours{position:absolute;inset:0;width:100%;height:100%;color:var(--brand);opacity:.23;stroke-width:1;pointer-events:none}
.map-placeholder{position:relative;text-align:center;padding:23px 34px;border-radius:8px;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);max-width:calc(100% - 40px)}
.map-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:0 auto 12px;border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);border-radius:50%;color:var(--brand-text);background:var(--tint)}
.map-icon svg{width:25px;height:25px;stroke-width:1.3}
.map-placeholder h3{font-size:17px;font-weight:600}
.map-placeholder p{font-size:12px;color:var(--muted);margin-top:5px}
.map-note{font-size:11px;line-height:1.6;color:var(--muted);margin-top:12px}
.map-note:empty{display:none}
.plain-plot{display:block;width:100%;height:100%}
.plain-plot .dot{fill:var(--brand);stroke:var(--card);stroke-width:2;cursor:pointer}
.plain-plot .dot.is-zero{fill:var(--card);stroke:var(--brand)}
.plain-plot .dot.is-picked{stroke:var(--ink);stroke-width:3}
.plain-plot .lbl{font:11px var(--mono);fill:var(--muted)}
/* The heatmap switch, in the panel heading where the design's small tag stood. */
.switch{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;background:var(--card);padding:4px 12px 4px 6px;font-size:12px;color:var(--muted);min-height:34px;white-space:nowrap}
.switch-track{position:relative;width:28px;height:16px;border-radius:10px;background:var(--track);transition:background .15s}
.switch-knob{position:absolute;inset-block-start:2px;inset-inline-start:2px;width:12px;height:12px;border-radius:50%;background:var(--card);transition:inset-inline-start .15s}
.switch[aria-checked=true]{color:var(--brand-text);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.switch[aria-checked=true] .switch-track{background:var(--brand)}
.switch[aria-checked=true] .switch-knob{inset-inline-start:14px}
/* The cameras, as buttons: the map's keyboard and screen-reader equivalent, and the
   way to a camera when the map cannot load. */
.cam-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cam-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;background:transparent;padding:4px 12px;min-height:34px;font:12px var(--mono);color:var(--muted)}
.cam-chip bdi{color:var(--ink)}
.cam-chip:hover{border-color:var(--brand);color:var(--brand-text)}
.cam-chip[aria-pressed=true]{background:var(--tint);border-color:var(--brand);color:var(--brand-text)}
.cam-chip.is-zero bdi{color:var(--muted)}
.maplibregl-ctrl-attrib{font:10px var(--body)}
.tip{position:fixed;z-index:30;pointer-events:none;background:var(--ink);color:var(--paper);padding:6px 9px;font:11px var(--body);border-radius:4px;max-width:260px}

/* ---- the footer: Wasim's name opens v-ora.co, and the link's end date ----------- */
.footer{margin-top:32px;border-top:1px solid var(--line);padding:25px 0 32px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:18px}
.footer strong{font:18px var(--display);color:var(--brand-text)}
.footer-brand,.footer-brand:hover,.footer-brand:visited{color:inherit;text-decoration:none}
.footer-dot{margin-inline:9px}

/* ---- the gates: passcode, too many tries, expired, ended (RL.21, RL.22, RL.28) --- */
.gate-page{min-height:70vh;display:flex;align-items:center;justify-content:center}
.gate{width:100%;max-width:440px;margin:48px auto;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:8px;padding:30px 28px;box-shadow:var(--shadow);text-align:center}
.gate h1{font-size:34px;margin:10px 0 12px}
.gate p{color:var(--muted);font-size:14px;line-height:1.6}
.gate input{display:block;width:100%;margin:20px 0 10px;padding:11px 13px;border:1px solid var(--track);border-radius:5px;background:var(--paper);font-size:16px}
.gate .go{width:100%;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:5px;font-weight:600;margin-top:8px}
html[data-theme=dark] .gate .go{color:#102026}
.gate .err{color:var(--orange);font-size:13px}
.gate .count{font:64px/1 var(--display);color:var(--brand);margin:18px 0 6px}

/* ---- Arabic, narrow screens, reduced motion (the design's) --------------------- */
html[lang=ar] .eyebrow,html[lang=ar] .brief-label,html[lang=ar] .brand-descriptor{font-family:var(--body);letter-spacing:0}
html[lang=ar] .hero h1{font-size:61px;line-height:1.3;letter-spacing:0}
html[lang=ar] h2{line-height:1.6;font-size:25px}
html[lang=ar] .insight-panel h2{font-size:31px}
html[lang=ar] .hero{padding-block:16px 29px}
html[lang=ar] .value{font-family:'EB Garamond',serif}
html[lang=ar] .brief{border-radius:6px 0 0 6px}
html[lang=ar] .species-info{align-items:flex-start;flex-direction:column;gap:0}
html[lang=ar] .species-row{padding-block:8px}
html[lang=ar] .art-caption{letter-spacing:0;font-family:var(--body);font-size:11px}
html[lang=ar] .footer .mono{font-family:var(--body);font-size:11px}
@media(max-width:1000px){
  .top-inner,.page{padding-inline:25px}
  .hero{gap:30px}.hero h1{font-size:68px}
  .brand-descriptor,.brand-divider{display:none!important}
  .metric{padding:15px 17px}.metric-top{font-size:13px}.metric-number{display:none}.value{font-size:44px}
  .detail-grid{grid-template-columns:1fr}.activity-stack{display:grid;gap:22px}
  .hourly-panel,.calendar-panel,.insight-panel{grid-column:auto;grid-row:auto}
  .species-latin{display:none}.insight-panel{padding:25px}.brief-label{flex-basis:105px}
}
@media(max-width:700px){
  .top-inner{padding:12px 18px;min-height:72px;gap:12px}
  .brand{font-size:26px;gap:6px}.brand img{width:33px;height:33px}
  .toolbar{gap:7px}.toolbar-divider,.print{display:none}
  .language{font-size:12px;gap:4px}.icon-button{width:28px}
  .page{padding:23px 20px 0}
  .eyebrow{font-size:9px;letter-spacing:.6px}
  .hero{grid-template-columns:1fr;gap:0;padding-top:23px;padding-bottom:26px;position:relative}
  .hero h1{font-size:61px}
  .hero-art{position:absolute;width:150px;height:170px;inset-inline-end:-10px;inset-block-start:56px;opacity:.3;z-index:-1}
  .gazelle{height:160px}.art-orbit,.art-index,.art-caption,.art-line{display:none}
  .intro{font-size:15px;max-width:90%;margin-top:17px}.project-name{font-size:13px}
  .period{font-size:10px;gap:7px;margin-top:20px}
  .brief{display:block;padding:17px 19px}
  .brief-label{display:flex;gap:9px;align-items:center;margin-bottom:9px}
  .brief-label small{margin:0;font-size:10px}.brief p{font-size:15px}
  .section-bar{align-items:flex-start;flex-direction:column;margin-top:28px;gap:14px}
  .section-bar h2,h2{font-size:26px}
  .metrics{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:14px 15px}.value{font-size:43px}
  .metric p{font-size:11px}.metric-top{font-size:12px}
  .result-grid,.detail-grid{grid-template-columns:1fr;gap:18px;margin-top:18px}
  .activity-stack{gap:18px}.panel{padding:21px}
  .insight-panel{padding:25px}.insight-panel h2{font-size:31px;margin-bottom:12px}
  #readout{grid-template-columns:1fr;gap:14px}.readout-item{padding-top:13px}.insight-bottom{padding-top:12px}
  .species-latin{display:block;font-size:10px}
  .species-info{flex-direction:column;align-items:flex-start;gap:0}
  .species-row{grid-template-columns:20px 1fr 47px;gap:9px}.species-name{font-size:14px}.species-count{font-size:12px}
  .panel-heading .small-tag{font-size:10px}
  .hour-chart{gap:4px}
  .calendar-row{grid-template-columns:48px repeat(var(--days,30),minmax(var(--cmin,4px),1fr))}
  .camera-calendar{min-inline-size:calc(48px + var(--days,30) * (var(--cmin,4px) + var(--gap,3px)))}
  .calendar-name{font-size:8px}.calendar-day.down{font-size:8px}.calendar-ticks{font-size:8px}.calendar-legend{gap:9px}
  .map-section{margin-top:18px}.map-shell{height:300px}.map-placeholder{padding:20px 24px}
  .map-section .panel-heading{align-items:flex-start}
  .footer{display:block;font-size:10px}.footer>.mono{display:block;margin-top:12px}
  html[lang=ar] .hero h1{font-size:45px}html[lang=ar] .hero-art{inset-block-start:82px}html[lang=ar] .metric-top{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.switch-track,.switch-knob{transition:none}}

/* ---- PRINT: the design's A4 sequence, KEPT for the day the PDF returns (RLD.23) --
   Page 1 the summary and the register, page 2 the hours, readings and calendar,
   page 3 the map. Always the light palette. The map prints because map.js keeps its
   drawing buffer. Section 06 (actions) is not on this page, so page 3 is the map
   alone. */
@page{size:A4;margin:12mm}
@media print{
  html[lang=ar] .species-info{flex-direction:row;align-items:center;gap:5px}html[lang=ar] .species-row{padding-block:5px}html[lang=ar] .hero{padding-block:10px}
  :root,:root[data-theme=dark]{--paper:#fff;--card:#fff;--ink:#1a1614;--muted:#57544e;--line:#ded9cf;--brand:#0284c7;--brand-text:#006894;--tint:#eaf3f5;--track:#e0dacd;--orange:#995000;--orange-tint:#fff0dc;--night:#0284c7;--day:#70bdcd;color-scheme:light}
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body{font-size:11px}
  .toolbar,#reset,.hero-art,.skip,.tip,.switch,.cam-chips,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{display:none!important}
  .top-inner{padding:0;min-height:45px}.topbar{border:0}.page{padding:10px 0 0;max-width:none}
  .brand{font-size:24px}.brand img{width:30px;height:30px}
  .brand-dark{display:none!important}html[data-theme=dark] .brand-light{display:block!important}html[data-theme=dark] .brand-dark{display:none!important}
  .hero{display:block;padding:14px 0}.hero h1{font-size:45px}.hero h1 br{display:none}.hero h1 em{margin-inline-start:10px}
  .intro{font-size:12px;max-width:none;margin-top:8px}.project-name{margin-bottom:7px}.period{margin-top:7px}
  .brief{padding:13px 16px;gap:15px}.brief p{font-size:12px}.brief-label{flex-basis:110px}
  .section-bar{margin-top:20px}.section-bar h2,h2{font-size:22px}.scope-line{min-height:29px}
  .metrics{grid-template-columns:repeat(4,1fr);gap:9px}.metric{padding:12px}.metric-top{font-size:11px}.value{font-size:37px;margin:3px 0}.metric p{font-size:9px}.metric-number{display:none}
  .result-grid{margin-top:17px}.panel{padding:16px;box-shadow:none}
  .species-row{padding:7px 0;gap:8px;grid-template-columns:20px 1fr 45px}.species-name{font-size:12px}.species-latin{font-size:9px;display:block}.species-count{font-size:11px}.species-info{gap:5px}
  .species-panel .footnote{font-size:9px;margin-top:10px}.panel-description{font-size:10px}
  .detail-grid{break-before:page;grid-template-columns:1fr 1.13fr;gap:14px;margin-top:0}.activity-stack{display:contents}
  .hourly-panel{grid-column:1;grid-row:1}.calendar-panel{grid-column:2;grid-row:1}
  .detail-grid .panel{break-inside:avoid;padding:16px}.detail-grid h2{font-size:21px}.detail-grid .panel-heading{align-items:flex-start}.detail-grid .panel-heading .small-tag{display:none}
  .chart-axis{margin-top:12px}.hour-chart{height:120px}.hour-bar{max-height:120px}.hour-labels{font-size:8px}.footnote{font-size:9px;margin-top:12px}
  .calendar-scroll{overflow:visible}.camera-calendar{min-inline-size:0}
  .calendar-row{grid-template-columns:43px repeat(var(--days,30),minmax(0,1fr));gap:1px;margin-top:6px}.calendar-name{font-size:8px}.calendar-ticks{font-size:7px}.calendar-day{max-height:13px}.calendar-day.down{font-size:7px}.calendar-legend{gap:8px;font-size:8px}
  .insight-panel{grid-column:1/-1;grid-row:2;padding:20px;break-inside:avoid}.insight-panel h2{font-size:28px;margin-bottom:14px}
  #readout{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.readout-item{padding:11px 0 0}.readout-item h3{font-size:12px}.readout-item p{font-size:10px}.insight-bottom p{font-size:9px}
  .map-section{break-before:page;break-inside:avoid;margin-top:0}.map-shell{height:120mm;margin-top:14px}
  .map-print{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  /* the © OpenStreetMap credit stays above the picture: the map's licence (ODbL) asks for it on paper too */
  .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{z-index:2}
  .footer{margin-top:28px;padding:15px 0;display:flex}
  .metrics,.result-grid,.brief{break-inside:avoid}
  html[lang=ar] .hero h1{font-size:34px}html[lang=ar] h2{font-size:20px}html[lang=ar] .insight-panel h2{font-size:23px}
}