*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}

@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-semi-condensed-500.woff2') format('woff2');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-semi-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-semi-condensed-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600.woff2') format('woff2');}

/* ============================================================
   TIEFENMESSER — Tauchlogbuch
   Design tokens. Dark-first: :root is the dark palette.
   ============================================================ */
:root{
  color-scheme: dark;

  --abyss:#04121C;      /* page ground        */
  --hull:#0A1F2E;       /* panel / card       */
  --deck:#102B3B;       /* raised / input     */
  --deck-2:#16374A;     /* hover              */
  --slate:#1B3B4C;      /* border             */
  --slate-soft:#14303F; /* hairline           */

  --value:#EEF6FA;      /* the number         */
  --title:#8AA5B4;      /* the label          */
  --unit:#587A8C;       /* the unit           */

  --accent:#39C7DC;
  --accent-ink:#04121C;
  --accent-soft:rgba(57,199,220,.14);
  --accent-line:rgba(57,199,220,.34);

  --ok:#35D18B;
  --ok-ink:#04121C;
  --ok-soft:rgba(53,209,139,.14);
  --ok-line:rgba(53,209,139,.34);
  --caution:#FFB347;
  --critical:#FF6B5B;
  --critical-soft:rgba(255,107,91,.14);

  /* depth ramp: surface -> abyss */
  --d0:#7FD8E8; --d1:#35A8C6; --d2:#1A6E96; --d3:#0E416A; --d4:#061C34;

  /* chart series — validated for the dark surface */
  --s1:#009ab4; --s2:#d66043; --s3:#209c7b; --s4:#7e6dd6;
  --s5:#bb8400; --s6:#3f80d8; --s7:#d15792; --s8:#6d9d2d;

  --grid:rgba(138,165,180,.16);
  --scrim:rgba(2,9,14,.72);
  --card-shadow:none;
  --card-top:inset 0 1px 0 rgba(255,255,255,.045);
  --map-land:#1F4E64;      /* land reads clearly against the water */
  --map-border:#4E97B5;
  --map-sea:#03141E;
  --map-water:#15536E;
  --map-hi:#2FE08A;        /* countries you have dived in */
  --map-hi-line:#A8FFD6;
  --map-wet:#2FD8FF;       /* waters you have dived in */
  --map-wet-line:#B4F2FF;

  /* illustration palette — the artwork is meant to be the colourful part */
  --il-1:#FFC94D;       /* warm reef fish   */
  --il-2:#3FC7E8;       /* cyan fish, tank  */
  --il-3:#A88BFF;       /* violet accents   */
  --il-coral:#FF7C6B;
  --il-plant:#37D69A;
  --il-sand:#C9A878;
  --il-land:#2E6E58;
  --il-trunk:#B98A54;
  --il-sun:#FFD98A;
  --il-bub:#8FE3F5;
  --il-glass:#BFF1FF;
  --il-screen:#0B2C3C;
  --il-gold:#FFCE4F;
  --il-gold-2:#F2A93B;
  --il-ink:#06202C;

  --f-display:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-label:'Barlow Semi Condensed','Archivo',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;
  --topbar-h:58px;
  --rail-w:52px;
  --ease:cubic-bezier(.32,.72,0,1);
}

/* ---- light palette --------------------------------------- */
:root[data-app-theme="light"],
:root[data-app-theme="auto"][data-theme="light"],
:root:not([data-app-theme])[data-theme="light"]{
  color-scheme: light;
  --abyss:#E9F1F5; --hull:#FFFFFF; --deck:#F1F7FA; --deck-2:#E4EFF4;
  --slate:#CFDFE8; --slate-soft:#E1EBF1;
  --value:#072230; --title:#4C6A7A; --unit:#7996A6;
  --accent:#0E7F97; --accent-ink:#FFFFFF;
  --accent-soft:rgba(14,127,151,.10); --accent-line:rgba(14,127,151,.30);
  --ok:#0E9A66; --ok-ink:#FFFFFF; --ok-soft:rgba(14,154,102,.11); --ok-line:rgba(14,154,102,.3);
  --caution:#A96A00; --critical:#C93A2C; --critical-soft:rgba(201,58,44,.10);
  --d0:#DFF3F8; --d1:#9BD5E6; --d2:#56A8C6; --d3:#2A7195; --d4:#103F5F;
  --s1:#008ba8; --s2:#cf5334; --s3:#008d6c; --s4:#705bcd;
  --s5:#b47900; --s6:#266fcf; --s7:#c54083; --s8:#5d8a1a;
  --grid:rgba(76,106,122,.20);
  --scrim:rgba(12,32,44,.44);
  --card-shadow:0 1px 2px rgba(9,42,60,.05), 0 8px 22px -14px rgba(9,42,60,.22);
  --card-top:none;
  --map-land:#F4EFE1; --map-border:#7F9DAE; --map-sea:#BFDFF0;
  --map-water:#8FC8E4; --map-hi:#20D97E; --map-hi-line:#06643C; --map-wet:#19C6F2; --map-wet-line:#065C77;
  --il-1:#F5B324; --il-2:#1FA8CC; --il-3:#8B6BEA; --il-coral:#F2604D;
  --il-plant:#1DB77E; --il-sand:#DEBE84; --il-bub:#5CC4E2; --il-glass:#DCF6FF;
}
@media (prefers-color-scheme: light){
  :root[data-app-theme="auto"]:not([data-theme="dark"]),
  :root:not([data-app-theme]):not([data-theme="dark"]){
    color-scheme: light;
    --abyss:#E9F1F5; --hull:#FFFFFF; --deck:#F1F7FA; --deck-2:#E4EFF4;
    --slate:#CFDFE8; --slate-soft:#E1EBF1;
    --value:#072230; --title:#4C6A7A; --unit:#7996A6;
    --accent:#0E7F97; --accent-ink:#FFFFFF;
    --accent-soft:rgba(14,127,151,.10); --accent-line:rgba(14,127,151,.30);
    --ok:#0E9A66; --ok-ink:#FFFFFF; --ok-soft:rgba(14,154,102,.11); --ok-line:rgba(14,154,102,.3);
    --caution:#A96A00; --critical:#C93A2C; --critical-soft:rgba(201,58,44,.10);
    --d0:#DFF3F8; --d1:#9BD5E6; --d2:#56A8C6; --d3:#2A7195; --d4:#103F5F;
    --s1:#008ba8; --s2:#cf5334; --s3:#008d6c; --s4:#705bcd;
    --s5:#b47900; --s6:#266fcf; --s7:#c54083; --s8:#5d8a1a;
    --grid:rgba(76,106,122,.20);
    --scrim:rgba(12,32,44,.44);
    --card-shadow:0 1px 2px rgba(9,42,60,.05), 0 8px 22px -14px rgba(9,42,60,.22);
    --card-top:none;
    --map-land:#F4EFE1; --map-border:#7F9DAE; --map-sea:#BFDFF0;
  --map-water:#8FC8E4; --map-hi:#20D97E; --map-hi-line:#06643C; --map-wet:#19C6F2; --map-wet-line:#065C77;
  --il-1:#F5B324; --il-2:#1FA8CC; --il-3:#8B6BEA; --il-coral:#F2604D;
  --il-plant:#1DB77E; --il-sand:#DEBE84; --il-bub:#5CC4E2; --il-glass:#DCF6FF;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--abyss); color:var(--value);
  font-family:var(--f-display); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:var(--topbar-h);
}
/* the descent: page ground drifts down the depth ramp as you scroll */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -12%, var(--scroll-top,transparent) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, var(--scroll-bottom,transparent) 100%);
  transition:background .5s linear;
}
::selection{background:var(--accent-soft); color:var(--value);}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer; background:none; border:0; padding:0;}
a{color:var(--accent);}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.eyebrow{
  font-family:var(--f-label); font-weight:600; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--title);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.hidden{display:none !important;}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:60;
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:color-mix(in srgb, var(--abyss) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--slate-soft);
}
.topbar__title{
  flex:1 1 auto; min-width:0; font-size:16px; font-weight:600; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iconbtn{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:11px; color:var(--title);
  transition:background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.iconbtn:hover{background:var(--deck); color:var(--value);}
.iconbtn:active{transform:scale(.93);}
.iconbtn svg{width:21px;height:21px;display:block;}
.iconbtn--danger:hover{background:var(--critical-soft); color:var(--critical);}

/* the three lines */
.burger{width:19px;height:13px;position:relative;}
.burger i{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor; transition:transform .34s var(--ease), opacity .2s var(--ease);
}
.burger i:nth-child(1){top:0;}
.burger i:nth-child(2){top:5.5px;}
.burger i:nth-child(3){top:11px;}
.nav-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-open .burger i:nth-child(2){opacity:0; transform:scaleX(.4);}
.nav-open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:12px; font-weight:600; font-size:14px;
  letter-spacing:-.01em; white-space:nowrap;
  transition:background .16s var(--ease), transform .12s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease);
}
.btn:active{transform:scale(.97);}
.btn svg{width:17px;height:17px;flex:none;}
.btn--ghost{color:var(--title); border:1px solid var(--slate);}
.btn--ghost:hover{background:var(--deck); color:var(--value); border-color:var(--slate);}
.btn--accent{background:var(--accent); color:var(--accent-ink);}
.btn--accent:hover{filter:brightness(1.07);}
.btn--ok{background:var(--ok); color:var(--ok-ink);}
.btn--ok:hover{filter:brightness(1.07);}
.btn--danger{background:var(--critical); color:#fff;}
.btn--danger:hover{filter:brightness(1.07);}
.btn--quiet{color:var(--title);}
.btn--quiet:hover{background:var(--deck); color:var(--value);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}

/* ============================================================
   SIDEBAR
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:70; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.nav-open .scrim{opacity:1; pointer-events:auto;}

.sidebar{
  position:fixed; top:0; bottom:0; left:0; width:min(330px,86vw); z-index:80;
  background:var(--hull); border-right:1px solid var(--slate);
  display:flex; flex-direction:column;
  transform:translateX(-102%); transition:transform .38s var(--ease);
  will-change:transform;
}
.nav-open .sidebar{transform:none;}
.sidebar__head{
  height:var(--topbar-h); flex:none; display:flex; align-items:center; gap:10px;
  padding:0 10px 0 14px; border-bottom:1px solid var(--slate-soft);
}
.sidebar__brand{flex:1; display:flex; align-items:baseline; gap:8px; min-width:0;}
.sidebar__brand b{font-size:15.5px; font-weight:700; letter-spacing:-.02em;}
.sidebar__body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:10px 10px 24px;}

.navlink{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border-radius:11px; color:var(--title); font-weight:500; font-size:14.5px;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.navlink svg{width:18px;height:18px;flex:none;opacity:.85;}
.navlink:hover{background:var(--deck); color:var(--value);}
.navlink[aria-current="page"]{background:var(--accent-soft); color:var(--value);}
.navlink[aria-current="page"] svg{color:var(--accent); opacity:1;}
.navlink__count{
  margin-left:auto; font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  color:var(--accent); font-variant-numeric:tabular-nums;
}

.navsec{margin-top:14px; padding-top:12px; border-top:1px solid var(--slate-soft);}
.navsec__head{display:flex; align-items:center; gap:6px; padding:2px 12px 8px;}
.navsec__head .eyebrow{flex:1;}
/* the one green control in a blue menu — it is the button you are looking for */
.addbtn{
  display:grid; place-items:center; width:26px; height:26px; border-radius:8px;
  color:var(--ok-ink); background:var(--ok);
  box-shadow:0 0 0 1px var(--ok-line, transparent), 0 4px 12px -4px var(--ok);
  transition:transform .14s var(--ease), filter .14s var(--ease), box-shadow .14s var(--ease);
}
.addbtn:hover{filter:brightness(1.12); box-shadow:0 0 0 1px var(--ok-line, transparent), 0 6px 16px -4px var(--ok);}
.addbtn:active{transform:scale(.9);}
.addbtn svg{width:15px;height:15px;}

.tree{display:flex; flex-direction:column; gap:1px;}
.tree__empty{padding:14px 12px; color:var(--unit); font-size:13.5px; line-height:1.5;}

.row{
  display:flex; align-items:center; gap:2px; border-radius:10px; padding-right:2px;
  transition:background .15s var(--ease);
}
.row:hover{background:var(--deck);}
.row--active{background:var(--accent-soft);}
.row__main{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  padding:8px 4px 8px 10px; text-align:left; color:var(--title); font-size:14px; font-weight:500;
}
.row:hover .row__main,.row--active .row__main{color:var(--value);}
.row__label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.row__meta{font-family:var(--f-mono); font-size:11.5px; color:var(--unit); flex:none;}
.row__acts{display:flex; gap:1px; opacity:0; transition:opacity .15s var(--ease);}
.row:hover .row__acts,.row:focus-within .row__acts{opacity:1;}
@media (hover:none){.row__acts{opacity:1;}}
.row__act{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--unit);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.row__act:hover{background:var(--deck-2); color:var(--value);}
.row__act--del:hover{background:var(--critical-soft); color:var(--critical);}
.row__act svg{width:15px;height:15px;}

.twisty{
  display:grid; place-items:center; width:22px; height:22px; flex:none; margin-left:4px;
  color:var(--unit); border-radius:6px;
}
.twisty svg{width:13px;height:13px; transition:transform .26s var(--ease);}
.row--open .twisty svg{transform:rotate(90deg);}
.tree__children{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease);
  margin-left:19px; border-left:1px solid var(--slate-soft); padding-left:5px;
}
.tree__children.open{grid-template-rows:1fr;}
.tree__children > div{overflow:hidden;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--d2);flex:none;}
.dot--folder{width:0;height:0;}

/* ============================================================
   LAYOUT
   ============================================================ */
.main{
  max-width:calc(940px + var(--rail-w)); margin:0 auto;
  padding:0 16px 96px calc(16px + var(--rail-w));
  position:relative;
}
@media (max-width:1080px){ .main{ padding-left:16px; } }
.view{display:none; animation:viewIn .34s var(--ease);}
.view.active{display:block;}
@keyframes viewIn{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}

.pagehead{padding:30px 0 18px;}
.pagehead h1{font-size:clamp(27px,5.2vw,36px); line-height:1.1;}
.pagehead .sub{color:var(--title); font-size:14.5px; margin-top:7px;}

.card{
  background:var(--hull); border:1px solid var(--slate); border-radius:var(--r-lg);
  box-shadow:var(--card-shadow), var(--card-top);
}
.stack{display:flex; flex-direction:column; gap:14px;}
.stack--lg{gap:22px;}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(14px);}
.reveal.in{opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  body::before{transition:none;}
}

/* ============================================================
   DEPTH RAIL — the signature
   ============================================================ */
.rail{
  position:fixed; left:calc(50vw - 470px - var(--rail-w)); top:var(--topbar-h); bottom:0;
  width:var(--rail-w); z-index:20; pointer-events:none;
  display:none;
}
@media (min-width:1080px){ .rail{display:block;} }
@media (min-width:1080px) and (max-width:1120px){ .rail{left:6px;} }
.rail__line{
  position:absolute; left:calc(var(--rail-w) - 15px); top:26px; bottom:26px; width:1px;
  background:linear-gradient(180deg, var(--d1), var(--d3) 55%, var(--slate));
  opacity:.55;
}
.rail__tick{
  position:absolute; right:14px; height:1px; width:8px; background:var(--slate);
}
.rail__tick span{
  position:absolute; right:12px; top:-8px; font-family:var(--f-mono); font-size:9.5px;
  color:var(--unit); letter-spacing:.02em; white-space:nowrap;
}
.rail__dive{
  position:absolute; right:9px; width:15px; height:15px; margin-top:-7.5px;
  pointer-events:auto; border-radius:50%; display:grid; place-items:center;
  transition:transform .18s var(--ease);
}
.rail__dive::after{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--d1); border:1px solid var(--abyss);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.rail__dive:hover{transform:scale(1.25);}
.rail__dive:hover::after{background:var(--accent);}
.rail__cap{
  position:absolute; right:8px; font-family:var(--f-label); font-weight:600; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--unit); white-space:nowrap;
}

/* ============================================================
   APPLE-STYLE SLIDER
   ============================================================ */
.slider{--fill:0%; padding:2px 0;}
.slider__top{display:flex; align-items:baseline; gap:10px; margin-bottom:9px;}
.slider__label{flex:1; font-size:14px; font-weight:500; color:var(--value);}
.slider__val{
  font-family:var(--f-mono); font-size:14px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.slider__val small{font-family:var(--f-label); font-size:11px; color:var(--unit); margin-left:3px; letter-spacing:.05em; text-transform:uppercase;}
.slider__track{
  position:relative; height:30px; display:flex; align-items:center; touch-action:none;
}
.slider__track::before{
  content:''; position:absolute; left:0; right:0; height:7px; border-radius:99px;
  background:var(--deck-2); transition:height .22s var(--ease);
}
.slider__track::after{
  content:''; position:absolute; left:0; width:var(--fill); height:7px; border-radius:99px;
  background:linear-gradient(90deg, var(--d2), var(--accent));
  transition:height .22s var(--ease);
}
.slider__thumb{
  position:absolute; left:var(--fill); top:50%; width:25px; height:25px; border-radius:50%;
  transform:translate(-50%,-50%); background:#fff; pointer-events:none;
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.30), 0 0 0 .5px rgba(0,0,0,.06);
  transition:width .22s var(--ease), height .22s var(--ease);
}
.slider__ticks{position:absolute; left:0; right:0; height:7px; display:flex; justify-content:space-between; padding:0 3px; pointer-events:none;}
.slider__ticks i{width:1.5px; height:1.5px; border-radius:50%; background:var(--unit); opacity:.5;}
.slider input[type=range]{
  position:absolute; inset:0; width:100%; height:30px; margin:0; opacity:0; cursor:grab;
  -webkit-appearance:none; appearance:none;
}
.slider input[type=range]:active{cursor:grabbing;}
.slider.is-live .slider__track::before,
.slider.is-live .slider__track::after{height:11px;}
.slider.is-live .slider__thumb{width:29px; height:29px;}
.slider__scale{display:flex; justify-content:space-between; margin-top:5px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--unit);}
.slider input[type=range]:focus-visible + .slider__thumb{box-shadow:0 0 0 3px var(--accent), 0 4px 10px rgba(0,0,0,.3);}

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.seg{
  position:relative; display:flex; padding:3px; border-radius:13px;
  background:var(--deck); border:1px solid var(--slate-soft); overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x;
}
.seg::-webkit-scrollbar{display:none;}
.seg__pill{
  position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:10px;
  background:var(--hull); box-shadow:0 1px 2px rgba(0,0,0,.18), 0 3px 8px -3px rgba(0,0,0,.3);
  border:1px solid var(--slate);
  transition:transform .36s var(--ease), width .36s var(--ease);
  pointer-events:none;
}
.seg__btn{
  position:relative; z-index:1; flex:1 0 auto; min-width:max-content;
  padding:8px 15px; border-radius:10px; font-size:13.5px; font-weight:600;
  letter-spacing:-.005em; color:var(--title); white-space:nowrap;
  transition:color .22s var(--ease);
}
.seg__btn[aria-selected="true"]{color:var(--value);}
.seg--sm .seg__btn{padding:6px 12px; font-size:12.5px;}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.fieldset{padding:18px; display:flex; flex-direction:column; gap:16px;}
.fieldset__title{display:flex; align-items:center; gap:9px; padding-bottom:2px;}
.fieldset__title h3{font-size:16px; letter-spacing:-.02em;}
.fieldset__title .eyebrow{margin-left:auto;}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.grid--1{grid-template-columns:1fr;}
.span-all{grid-column:1/-1;}

.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field > label,.field__label{
  font-family:var(--f-label); font-weight:600; font-size:11.5px; letter-spacing:.085em;
  text-transform:uppercase; color:var(--title);
}
.field__hint{font-size:12px; color:var(--unit); line-height:1.45;}
.inputwrap{position:relative; display:flex; align-items:center;}
.input,.select,.textarea{
  width:100%; background:var(--deck); border:1px solid var(--slate-soft); border-radius:var(--r-md);
  padding:10px 12px; font-size:14.5px; color:var(--value); outline:none;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--unit);}
.input:hover,.select:hover,.textarea:hover{border-color:var(--slate);}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent-line); background:var(--hull);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.input--num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; padding-right:52px;}
.input--num.no-unit{padding-right:12px;}
.textarea{resize:vertical; min-height:96px; line-height:1.6; font-size:14px;}
.inputwrap__unit{
  position:absolute; right:12px; font-family:var(--f-label); font-weight:600; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--unit); pointer-events:none;
}
.select{
  appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708fa0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px;
}
.select option{background:var(--hull); color:var(--value);}

/* choice chips (single + multi) */
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:99px; font-size:13.5px; font-weight:500;
  background:var(--deck); border:1px solid var(--slate-soft); color:var(--title);
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.chip:hover{background:var(--deck-2); color:var(--value);}
.chip:active{transform:scale(.96);}
.chip[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--value);
}
.chip[aria-pressed="true"] .chip__tick{opacity:1; width:13px; margin-right:0;}
.chip__tick{opacity:0; width:0; height:13px; color:var(--accent); transition:opacity .15s var(--ease), width .15s var(--ease); overflow:hidden;}
.chip svg{flex:none;}
.chip--sm{padding:5px 10px; font-size:12.5px;}

/* iOS switch */
.switch{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch__track{
  position:relative; width:50px; height:30px; border-radius:99px; flex:none;
  background:var(--deck-2); transition:background .28s var(--ease);
}
.switch__track::after{
  content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2), 0 3px 7px rgba(0,0,0,.22);
  transition:transform .28s var(--ease), width .18s var(--ease);
}
.switch input:checked + .switch__track{background:var(--ok);}
.switch input:checked + .switch__track::after{transform:translateX(20px);}
.switch:active .switch__track::after{width:29px;}
.switch input:checked:active + .switch__track::after{transform:translateX(15px);}
.switch input:focus-visible + .switch__track{box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);}
.switch__text{font-size:14px; color:var(--value);}

/* readout tiles — the instrument register */
.readouts{display:grid; gap:1px; background:var(--slate-soft); border-radius:var(--r-md); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));}
.readout{background:var(--hull); padding:13px 14px; display:flex; flex-direction:column; gap:3px; min-width:0;}
.readout__k{font-family:var(--f-label); font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.readout__v{font-family:var(--f-mono); font-weight:600; font-size:23px; line-height:1.12; letter-spacing:-.02em; color:var(--value); font-variant-numeric:tabular-nums;}
.readout__v small{font-family:var(--f-label); font-size:11.5px; font-weight:600; color:var(--unit); letter-spacing:.05em; text-transform:uppercase; margin-left:4px;}
.readout__v.is-empty{color:var(--unit); font-size:20px;}
.readout--warn .readout__v{color:var(--caution);}
.readout--crit .readout__v{color:var(--critical);}
.readout__note{font-size:11.5px; color:var(--unit); line-height:1.35;}


/* ============================================================
   HOME
   ============================================================ */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  border:1px solid var(--slate); background:
    radial-gradient(130% 100% at 12% -20%, color-mix(in srgb,var(--d1) 26%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--deck) 0%, var(--hull) 58%);
  padding:26px 24px 24px; margin-bottom:20px;
}
/* the hero is the one place that gets a full scene: sun above the water,
   an island on the horizon, reef along the floor, and things that move */
.hero{ padding-bottom:88px; }
.hero__scene{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.hero__caustics{position:absolute; inset:-40% -10% auto -10%; height:180%; opacity:.5;}
.hero__ray{
  position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:
    linear-gradient(102deg, transparent 46%, color-mix(in srgb, var(--d0) 16%, transparent) 49%, transparent 53%),
    linear-gradient(94deg,  transparent 66%, color-mix(in srgb, var(--d0) 12%, transparent) 69%, transparent 73%);
}
.hero__island{
  position:absolute; right:6px; top:2px; width:210px; height:79px; opacity:.42;
}
.hero__reef{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:92px; opacity:.72;
}
.hero__fish{ position:absolute; width:46px; height:29px; opacity:.75; }
.hero__fish--1{ top:58%; left:-70px; animation:heroSwim 26s linear infinite; }
.hero__fish--2{ top:72%; left:-90px; width:34px; height:21px; animation:heroSwim 34s linear infinite 6s; }
.hero__fish--3{ top:64%; left:-60px; width:26px; height:17px; opacity:.55; animation:heroSwim 44s linear infinite 15s; }
@keyframes heroSwim{ to{ transform:translateX(calc(100vw + 160px)); } }
.hero__bub{
  position:absolute; bottom:52px; width:8px; height:8px; border-radius:50%;
  background:color-mix(in srgb, var(--il-bub) 60%, transparent);
  left:calc(12% + var(--i) * 18%);
  animation:heroRise 11s linear infinite;
  animation-delay:calc(var(--i) * -2.4s);
}
.hero__bub:nth-child(even){ width:5px; height:5px; }
@keyframes heroRise{
  0%{ transform:translateY(0) translateX(0) scale(.7); opacity:0; }
  14%{ opacity:.7; }
  100%{ transform:translateY(-230px) translateX(16px) scale(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__fish,.hero__bub{ animation:none; }
  .hero__fish{ display:none; }
}
.hero__inner{position:relative; z-index:2;}
.hero h1{font-size:clamp(26px,5vw,38px); line-height:1.08; margin-bottom:9px;}
.hero__sub{color:var(--title); font-size:15px; max-width:52ch; line-height:1.55;}
.bigbtn{
  display:flex; align-items:center; gap:14px; width:100%; margin-top:22px;
  padding:17px 20px; border-radius:16px; background:var(--accent); color:var(--accent-ink);
  text-align:left; transition:transform .14s var(--ease), filter .16s var(--ease), box-shadow .2s var(--ease);
  box-shadow:0 6px 22px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.bigbtn:hover{filter:brightness(1.06); box-shadow:0 10px 26px -13px color-mix(in srgb, var(--accent) 62%, transparent);}
.bigbtn:active{transform:scale(.985);}
.bigbtn__icon{
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:13px;
  background:color-mix(in srgb, var(--accent-ink) 13%, transparent);
}
.bigbtn__icon svg{width:22px;height:22px;}
.bigbtn__t{flex:1; min-width:0;}
.bigbtn__t b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.02em;}
.bigbtn__t span{display:block; font-size:13px; opacity:.78; margin-top:1px;}
.bigbtn__go{width:20px;height:20px;flex:none;opacity:.7;}

.sectionhead{display:flex; align-items:center; gap:10px; margin:26px 0 12px;}
.sectionhead h2{font-size:17px; letter-spacing:-.02em; flex:1;}
.sectionhead .eyebrow{flex:1;}
.linkbtn{font-size:13px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:4px;}
.linkbtn:hover{text-decoration:underline; text-underline-offset:3px;}
.linkbtn svg{width:14px;height:14px;}

/* dive card */
.divecard{
  display:block; width:100%; text-align:left; padding:15px 16px; border-radius:var(--r-lg);
  background:var(--hull); border:1px solid var(--slate); box-shadow:var(--card-shadow), var(--card-top);
  transition:border-color .18s var(--ease), transform .16s var(--ease), background .18s var(--ease);
}
.divecard:hover{border-color:var(--accent-line); transform:translateY(-2px);}
.divecard:active{transform:translateY(0) scale(.995);}
.divecard__top{display:flex; align-items:flex-start; gap:12px; margin-bottom:11px;}
.divecard__no{
  font-family:var(--f-mono); font-size:11.5px; font-weight:600; color:var(--unit);
  background:var(--deck); border-radius:7px; padding:3px 7px; flex:none; line-height:1.3;
}
.divecard__t{flex:1; min-width:0;}
.divecard__t b{display:block; font-size:15.5px; font-weight:600; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.divecard__t span{display:block; font-size:13px; color:var(--title); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.divecard__date{font-family:var(--f-mono); font-size:12px; color:var(--unit); flex:none; white-space:nowrap;}
.divecard__stats{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:11px;}
.divecard__stat{display:flex; flex-direction:column; gap:1px;}
.divecard__stat b{font-family:var(--f-mono); font-size:16px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.divecard__stat b small{font-family:var(--f-label); font-size:10.5px; font-weight:600; color:var(--unit); letter-spacing:.06em; text-transform:uppercase; margin-left:3px;}
.divecard__stat i{font-family:var(--f-label); font-style:normal; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--title);}
.divecard__bar{height:4px; border-radius:99px; background:var(--deck-2); overflow:hidden; margin-bottom:11px;}
.divecard__bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--d1),var(--d3));}
.divecard__tags{display:flex; flex-wrap:wrap; gap:5px;}
.tag{
  font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.075em;
  text-transform:uppercase; padding:3px 8px; border-radius:6px;
  background:var(--deck); color:var(--title); border:1px solid var(--slate-soft);
}
.tag--env{background:var(--accent-soft); color:var(--value); border-color:var(--accent-line);}
.tag--draft{background:var(--critical-soft); color:var(--critical); border-color:transparent;}
.chip--auto::after{
  content:'A'; font-family:var(--f-label); font-size:9px; font-weight:700; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-soft); border-radius:4px; padding:1px 3px; margin-left:2px;
}

.projcard{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px 16px;
  border-radius:var(--r-md); background:var(--hull); border:1px solid var(--slate);
  box-shadow:var(--card-shadow), var(--card-top);
  transition:border-color .18s var(--ease), transform .16s var(--ease);
}
.projcard:hover{border-color:var(--accent-line); transform:translateY(-2px);}
.projcard__icon{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent); flex:none;}
.projcard__icon svg{width:19px;height:19px;}
.projcard__t{flex:1; min-width:0;}
.projcard__t b{display:block; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.projcard__t span{display:block; font-size:12.5px; color:var(--title); margin-top:1px;}
.projcard__n{font-family:var(--f-mono); font-size:19px; font-weight:600; color:var(--accent); flex:none; display:flex; align-items:center;}
.projcard__n svg{width:19px; height:19px; display:block;}
.projcard__t b{white-space:normal;}
.projcard{align-items:flex-start;}
.projcard__icon{margin-top:1px;}

/* info dot with popover */
.infodot{
  position:relative; display:inline-grid; place-items:center; width:20px; height:20px; flex:none;
  border-radius:50%; background:var(--deck-2); color:var(--title);
  font-family:var(--f-label); font-weight:700; font-size:12px; line-height:1;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.infodot:hover,.infodot[aria-expanded="true"]{background:var(--accent-soft); color:var(--accent);}
.pop{
  position:absolute; z-index:90; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  width:min(300px, 78vw); padding:12px 14px; border-radius:13px;
  background:var(--hull); border:1px solid var(--slate); color:var(--value);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.55);
  font-size:12.8px; line-height:1.55; font-weight:400; text-align:left;
  opacity:0; pointer-events:none; transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.infodot:hover .pop,.infodot[aria-expanded="true"] .pop{opacity:1; transform:translateX(-50%);}
.infodot[aria-expanded="true"] .pop{pointer-events:auto;}
.pop::after{
  content:''; position:absolute; top:100%; left:50%; margin-left:-6px;
  border:6px solid transparent; border-top-color:var(--slate);
}
.pop b{display:block; margin-bottom:4px; font-size:13px;}
.switchrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.emptystate{
  padding:26px 22px; text-align:center; border-radius:var(--r-lg);
  border:1px dashed var(--slate); background:var(--hull);
}
.emptystate svg{width:32px;height:32px;color:var(--unit); margin-bottom:9px;}
.emptystate b{display:block; font-size:15.5px; margin-bottom:5px;}
.emptystate p{color:var(--title); font-size:13.5px; max-width:42ch; margin:0 auto; line-height:1.55;}

.savebar{
  display:flex; align-items:center; gap:12px; padding:11px 15px; margin-bottom:16px;
  border-radius:var(--r-md); background:var(--hull);
  border:1px solid color-mix(in srgb, var(--caution) 40%, transparent);
}
.savebar__i{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px;
  background:color-mix(in srgb, var(--caution) 16%, transparent); color:var(--caution);}
.savebar__i svg{width:16px;height:16px;}
.savebar__t{flex:1; min-width:0; font-size:13.5px; line-height:1.4;}
.savebar__t b{display:block; font-weight:600; font-size:14px;}
.savebar__t span{color:var(--title); font-size:12.5px;}

/* ============================================================
   OVERVIEW
   ============================================================ */
.kpis{display:grid; background:var(--hull); border:1px solid var(--slate); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); box-shadow:var(--card-shadow), var(--card-top);}
.kpi{padding:16px; display:flex; flex-direction:column; gap:3px; box-shadow:inset 1px 0 0 var(--slate-soft), inset 0 1px 0 var(--slate-soft);}
.kpi__k{font-family:var(--f-label); font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--title);}
.kpi__v{font-family:var(--f-mono); font-weight:600; font-size:27px; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.kpi__v small{font-family:var(--f-label); font-size:12px; font-weight:600; color:var(--unit); letter-spacing:.05em; text-transform:uppercase; margin-left:4px;}
.kpi--hero{grid-column:span 2;}
.kpi--hero .kpi__v{font-size:42px; color:var(--accent);}
.kpi__v{white-space:nowrap;}

.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 14px;}
.toolbar__spacer{flex:1;}

.chartcard{padding:18px; border-radius:var(--r-lg); background:var(--hull); border:1px solid var(--slate); box-shadow:var(--card-shadow), var(--card-top);}
.chartcard__head{margin-bottom:14px; display:flex; align-items:flex-start; gap:10px;}
.chartcard__txt{flex:1; min-width:0;}
.chartcard__head h3{font-size:15px; letter-spacing:-.015em;}
.chartcard__head p{font-size:12.5px; color:var(--title); margin-top:3px; line-height:1.45;}
.chartcard__tools{display:flex; align-items:center; gap:6px; flex:none;}
.chartcard__tools .seg{padding:2px;}
.chartcard__tools .seg__btn{padding:4px 8px; font-size:11px;}
.chartcard__x{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px; flex:none;
  color:var(--unit); opacity:0; transition:opacity .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.chartcard:hover .chartcard__x,.chartcard__x:focus-visible{opacity:1;}
:root[data-touch="1"] .chartcard__x{opacity:1;}
.chartcard__x:hover{background:var(--critical-soft); color:var(--critical);}
.chartcard__x svg{width:14px;height:14px;}
.chartcard__gran{display:flex; align-items:center; gap:9px; margin:-4px 0 14px; flex-wrap:wrap;}
.chartcard__gran .eyebrow{flex:none;}
.chartcard__gran .seg{flex:1 1 auto; min-width:0;}
.chartfoot{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* chart builder */
.typegrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.typecard{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 12px;
  border-radius:var(--r-md); background:var(--deck); border:1px solid var(--slate-soft);
  color:var(--value); transition:border-color .16s var(--ease), background .16s var(--ease), transform .14s var(--ease);
}
.typecard:hover{border-color:var(--accent-line); background:var(--deck-2);}
.typecard:active{transform:scale(.97);}
.typecard.sel{border-color:var(--accent-line); background:var(--accent-soft);}
.typecard__i{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent);}
.typecard__i svg{width:20px;height:20px;}
.typecard__l{font-size:13px; font-weight:500; text-align:center; line-height:1.3;}
.bigbtn--quiet{
  background:var(--deck); color:var(--value); border:1px solid var(--slate); box-shadow:none; margin-top:0;
}
.bigbtn--quiet:hover{background:var(--deck-2); filter:none; box-shadow:none;}
.bigbtn--quiet .bigbtn__icon{background:var(--accent-soft); color:var(--accent);}
.bigbtn--quiet .bigbtn__t span{color:var(--title); opacity:1;}
.tplcard{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:11px 13px;
  border-radius:var(--r-md); background:var(--hull); border:1px solid var(--slate);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.tplcard:hover{border-color:var(--accent-line);}
.tplcard--used{opacity:.5; cursor:not-allowed;}
.tplcard--used:hover{border-color:var(--slate);}
.tplcard__prev{
  width:104px; flex:none; display:grid; place-items:center; padding:5px;
  background:var(--deck); border-radius:9px; overflow:hidden;
}
.tplcard__prev svg{width:100%; height:auto; display:block;}
.tplcard__none{color:var(--unit);}
.tplcard__none svg{width:20px;height:20px;}
.tplcard__t{flex:1; min-width:0;}
.tplcard__t b{display:block; font-size:14px; font-weight:600;}
.tplcard__t span{display:block; font-size:12px; color:var(--title); margin-top:2px; line-height:1.4;}
.chartgrid{display:grid; gap:14px; align-items:start; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.chartwrap{position:relative; overflow-x:auto;}
.chartwrap svg{display:block; width:100%; height:auto;}
.legend{display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:13px;}
.legend__i{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--title);}
.legend__sw{width:11px; height:11px; border-radius:3.5px; flex:none;}
.legend__i b{color:var(--value); font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums;}

.tip{
  position:fixed; z-index:95; pointer-events:none; opacity:0;
  background:var(--hull); border:1px solid var(--slate); border-radius:10px;
  padding:8px 11px; font-size:12.5px; box-shadow:0 8px 26px -8px rgba(0,0,0,.5);
  transition:opacity .12s var(--ease); max-width:230px;
}
.tip.show{opacity:1;}
.tip b{display:block; font-size:13px; margin-bottom:2px;}
.tip span{color:var(--title); font-family:var(--f-mono); font-variant-numeric:tabular-nums;}

.datatable{width:100%; border-collapse:collapse; font-size:13px;}
.datatable th,.datatable td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--slate-soft);}
.datatable th{font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--title);}
.datatable td.num{font-family:var(--f-mono); text-align:right; font-variant-numeric:tabular-nums;}
.tablewrap{overflow-x:auto; margin-top:10px;}

/* list rows */
.listgroup__head{display:flex; align-items:center; gap:9px; margin:20px 0 9px;}
.listgroup__head .eyebrow{flex:1;}
.listgroup__head .n{font-family:var(--f-mono); font-size:11.5px; color:var(--unit);}

/* map */
.maphead{display:flex; align-items:flex-end; gap:14px; margin:4px 0 12px; flex-wrap:wrap;}
.maphead__t{flex:1; min-width:200px;}
.maphead__t h2{font-size:17px; letter-spacing:-.02em;}
.maphead__t p{margin-top:4px;}
.maphead .seg{flex:0 0 auto;}
.mapcard{padding:0; overflow:hidden; border-radius:var(--r-lg); background:var(--map-sea); border:1px solid var(--slate);}
.mapstage{position:relative; width:100%; aspect-ratio:1000/643; min-height:290px; overflow:hidden; cursor:grab; touch-action:none; background:var(--map-sea);}
.mapstage.dragging{cursor:grabbing;}
.mapstage svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* every stroke on the map is in screen pixels, so borders stay legible at
   any zoom instead of thinning away to nothing */
.m-shelf{
  fill:none; stroke:var(--map-water); stroke-width:9; stroke-opacity:.5;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round;
}
.m-land{
  fill:var(--map-land); stroke:var(--map-border); stroke-width:0.9;
  vector-effect:non-scaling-stroke; stroke-linejoin:round;
}
.m-land--on{fill:var(--map-hi); stroke:var(--map-hi-line); stroke-width:1.4;}
.m-border{fill:none; stroke:var(--map-border); stroke-width:0.9; vector-effect:non-scaling-stroke;}
.m-sea{fill:none;}
.m-sea--on{fill:var(--map-wet); fill-opacity:.55; stroke:var(--map-wet-line); stroke-width:1.6; vector-effect:non-scaling-stroke;}
.m-lake{fill:var(--map-water); stroke:none;}
.m-lake--on{fill:var(--map-wet); stroke:var(--map-wet-line); stroke-width:1; vector-effect:non-scaling-stroke;}
.m-river{fill:none; stroke:var(--map-water); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.m-river--on{stroke:var(--map-wet);}
.m-city{fill:var(--unit); opacity:.85;}
.m-city--big{fill:var(--value); opacity:1;}
.m-grid line{stroke:var(--map-border); opacity:.28;}
.m-lab{
  font-family:var(--f-display); font-weight:600; fill:var(--value);
  stroke:var(--map-sea); stroke-linejoin:round; pointer-events:none; paint-order:stroke;
}
.m-lab--city{fill:var(--title); font-weight:500;}
.m-lab--big{fill:var(--value); font-weight:700; letter-spacing:.01em;}
.m-lab--water{fill:var(--map-wet-line); font-weight:500;}
.m-lab--sea{fill:var(--map-wet-line); font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.m-lab--country{fill:var(--map-hi-line); font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.m-lab--pin{fill:var(--value); font-weight:600;}
.pin{cursor:grab;}
.pin.editing{cursor:grabbing;}
.pin__halo{fill:var(--critical); opacity:.16;}
.pin__body{fill:var(--critical); stroke:var(--map-sea);}
.pin.sel .pin__body{fill:var(--accent);}
.mapbar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--slate); background:var(--hull); flex-wrap:wrap;}
.mapbar__info{flex:1; min-width:140px; font-size:12.5px; color:var(--title);}
.mapbar__info b{color:var(--value);}
.mapbar__scale{font-size:11.5px; color:var(--unit); padding:3px 8px; border-radius:7px; background:var(--deck); white-space:nowrap;}
.zoombtn{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--deck); color:var(--title); border:1px solid var(--slate-soft); transition:background .15s var(--ease), color .15s var(--ease);}
.zoombtn:hover{background:var(--deck-2); color:var(--value);}
.zoombtn svg{width:16px;height:16px;}
.maplist{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 12px; max-height:118px; overflow-y:auto;}

/* place search */
.combo{position:relative;}
.combo__list{
  position:absolute; z-index:88; left:0; right:0; top:calc(100% + 6px);
  background:var(--hull); border:1px solid var(--slate); border-radius:var(--r-md);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55); overflow:hidden auto; max-height:290px;
  display:none;
}
.combo__list.open{display:block;}
.combo__opt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; font-size:14px; color:var(--value); border-bottom:1px solid var(--slate-soft);
}
.combo__opt:last-child{border-bottom:0;}
.combo__opt:hover,.combo__opt[aria-selected="true"]{background:var(--deck);}
.combo__opt b{font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.combo__opt i{
  font-style:normal; font-family:var(--f-label); font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--title); background:var(--deck); border-radius:5px; padding:2px 6px; flex:none;
}
.combo__opt span{font-size:11.5px; color:var(--unit); flex:none; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.combo__note{padding:8px 12px; font-size:11.5px; color:var(--unit); border-top:1px solid var(--slate-soft);}
.combo__geo{
  display:inline-flex; align-items:center; gap:5px; margin-top:5px;
  font-size:11.5px; color:var(--accent); font-family:var(--f-mono);
}
.combo__geo svg{width:12px;height:12px;}

/* ============================================================
   MODAL / SHEET
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px;
  background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .26s var(--ease);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal.open{opacity:1; pointer-events:auto;}
.modal__box{
  width:100%; max-width:540px; max-height:min(86vh, 780px); display:flex; flex-direction:column;
  background:var(--hull); border:1px solid var(--slate); border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  transform:translateY(18px) scale(.97); transition:transform .3s var(--ease);
}
.modal.open .modal__box{transform:none;}
.modal__box--sm{max-width:420px;}
.modal__head{display:flex; align-items:center; gap:10px; padding:16px 14px 14px 20px; border-bottom:1px solid var(--slate-soft); flex:none;}
.modal__head h2{flex:1; font-size:17px; letter-spacing:-.02em;}
.modal__body{padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:20px;}
.modal__foot{padding:14px 16px; border-top:1px solid var(--slate-soft); display:flex; gap:9px; align-items:center; flex:none; flex-wrap:wrap;}
.modal__foot .sp{flex:1;}
.modal__text{font-size:14px; color:var(--title); line-height:1.6;}
.modal__text b{color:var(--value);}
.settinggroup{display:flex; flex-direction:column; gap:11px;}
.settinggroup > .eyebrow{padding-bottom:2px; border-bottom:1px solid var(--slate-soft);}
.setrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.setrow__l{flex:1; min-width:118px;}
.setrow__l b{display:block; font-size:14px; font-weight:500;}
.setrow__l span{display:block; font-size:12px; color:var(--unit); margin-top:1px;}
.setrow .seg{flex:0 1 auto;}
.warnbox{
  display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--critical-soft); border:1px solid color-mix(in srgb,var(--critical) 30%, transparent);
  font-size:13px; line-height:1.5; color:var(--value);
}
.warnbox svg{width:17px;height:17px;flex:none;color:var(--critical); margin-top:1px;}
.infobox{
  display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--deck); border:1px solid var(--slate-soft);
  font-size:12.5px; line-height:1.55; color:var(--title);
}
.infobox svg{width:16px;height:16px;flex:none;color:var(--accent); margin-top:1px;}
.infobox b{color:var(--value);}

/* toast */
.toasts{position:fixed; left:0; right:0; bottom:22px; z-index:120; display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:none; padding:0 16px;}
.toast{
  display:flex; align-items:center; gap:11px; padding:12px 17px; border-radius:14px;
  background:var(--hull); border:1px solid var(--slate); box-shadow:0 16px 42px -14px rgba(0,0,0,.6);
  font-size:14px; font-weight:500; max-width:min(440px,100%);
  animation:toastIn .4s var(--ease); pointer-events:auto;
}
.toast.out{animation:toastOut .3s var(--ease) forwards;}
.toast__i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;}
.toast--ok .toast__i{background:var(--ok); color:var(--ok-ink);}
.toast--err .toast__i{background:var(--critical); color:#fff;}
.toast--info .toast__i{background:var(--accent); color:var(--accent-ink);}
.toast__i svg{width:14px;height:14px;}
@keyframes toastIn{from{opacity:0; transform:translateY(20px) scale(.94);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(10px) scale(.97);}}

/* dive editor */
.editorbar{
  position:sticky; top:var(--topbar-h); z-index:40; margin:0 -16px; padding:11px 16px;
  background:color-mix(in srgb,var(--abyss) 88%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--slate-soft);
}
.editorpanes{position:relative;}
.pane{display:none;}
.pane.active{display:block; animation:paneIn .3s var(--ease);}
@keyframes paneIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.panefoot{display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap;}
.panefoot .sp{flex:1;}
.autonote{font-size:12px; color:var(--unit); display:flex; align-items:center; gap:6px;}
.autonote svg{width:13px;height:13px;}

.buddylist{display:flex; flex-direction:column; gap:7px;}
.buddyrow{display:flex; gap:7px; align-items:center;}
.buddyrow .input{flex:1;}

.profileview{padding:16px 18px 18px;}
.profileview svg{display:block; width:100%; height:auto;}

@media (max-width:640px){
  .fieldset{padding:15px;}
  .hero{padding:20px 17px 82px;}
  .hero__island{display:none;}
  .hero__reef{height:72px;}
  .hero__fish--3{display:none;}
  .main{padding-left:14px; padding-right:14px;}
  .editorbar{margin:0 -14px; padding:10px 14px;}
  .modal{padding:0; align-items:flex-end;}
  .modal__box{max-width:none; border-radius:22px 22px 0 0; max-height:92vh;}
  .modal.open .modal__box{transform:none;}
  .modal__box{transform:translateY(34px);}
}

/* ============================================================
   DEVICE & VIEWPORT
   data-device: phone | tablet | desktop   ·   data-touch: 0 | 1
   Set from JS on load, resize and orientation change.
   ============================================================ */
:root{ --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
       --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px); }
body{ padding-top:calc(var(--topbar-h) + var(--safe-t)); }
.topbar{ height:calc(var(--topbar-h) + var(--safe-t)); padding-top:var(--safe-t);
         padding-left:max(12px, var(--safe-l)); padding-right:max(12px, var(--safe-r)); }
.sidebar__head{ height:calc(var(--topbar-h) + var(--safe-t)); padding-top:var(--safe-t); }
.sidebar{ padding-left:var(--safe-l); }
.editorbar{ top:calc(var(--topbar-h) + var(--safe-t)); }
.rail{ top:calc(var(--topbar-h) + var(--safe-t)); left:0; }
.toasts{ bottom:calc(22px + var(--safe-b)); }
.main{ padding-bottom:calc(96px + var(--safe-b)); }


.envbadge{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:10px; background:var(--deck); border:1px solid var(--slate-soft);
}
.envbadge__i{ width:19px; height:19px; }
.envbadge.env--pool .envbadge__i{ width:17px; height:17px; }
.envbadge.env--wreck .envbadge__i{ width:21px; height:21px; }

/* ---- illustration accents -------------------------------------------- */
.fsil{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:11px; background:var(--deck); border:1px solid var(--slate-soft);
}
.fsil svg{ width:22px; height:22px; }
.emptystate--il{ padding:0 22px 24px; overflow:hidden; }
.emptyscene{
  position:relative; height:132px; margin:0 -22px 16px; overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--d1) 10%, transparent) 0%,
    color-mix(in srgb, var(--d2) 16%, transparent) 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.emptyscene svg{ margin:0; }
.emptyscene .es-reef{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:74px; opacity:.8; }
.emptyscene .es-island{ position:absolute; left:50%; top:16px; transform:translateX(-50%); width:190px; height:71px; opacity:.9; }
.emptyscene .es-fish{ position:absolute; opacity:.9; }
.emptyscene .es-fish--1{ width:42px; height:26px; top:26px; left:-60px; animation:heroSwim 17s linear infinite; }
.emptyscene .es-fish--2{ width:28px; height:18px; top:58px; left:-50px; animation:heroSwim 23s linear infinite 3s; }
.emptyscene .es-bub{
  position:absolute; bottom:8px; width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--il-bub) 65%, transparent);
  left:calc(22% + var(--i) * 22%);
  animation:heroRise 8s linear infinite; animation-delay:calc(var(--i) * -1.7s);
}
.foot__wave{ display:block; width:100%; max-width:360px; height:18px; margin:0 auto 14px; }
@media (prefers-reduced-motion: reduce){ .emptyscene .es-fish,.emptyscene .es-bub{ animation:none; } .emptyscene .es-fish{ display:none; } }

/* ---- milestone celebration ------------------------------------------- */
.modal--award .modal__box{ overflow:hidden; }
.awardbox--in{ animation:awardPop .55s var(--ease) both; }
@keyframes awardPop{
  0%{ transform:scale(.9) translateY(14px); opacity:0; }
  60%{ transform:scale(1.015) translateY(0); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
.awardbox__sky{
  position:relative; height:190px; overflow:hidden;
  background:linear-gradient(180deg, var(--d1) 0%, var(--d2) 46%, var(--d3) 100%);
}
.awardray{
  position:absolute; inset:-40% -20% auto -20%; height:150%;
  background:
    linear-gradient(104deg, transparent 44%, rgba(255,255,255,.20) 48%, transparent 52%),
    linear-gradient(96deg,  transparent 60%, rgba(255,255,255,.14) 64%, transparent 68%),
    linear-gradient(112deg, transparent 24%, rgba(255,255,255,.12) 28%, transparent 32%);
  pointer-events:none;
}
.awardmedal{
  position:absolute; left:50%; top:26px; width:104px; height:104px;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.30));
  animation:awardMedal 3.6s ease-in-out infinite; z-index:2;
}
@keyframes awardMedal{ 0%,100%{ transform:translateX(-50%) translateY(0) rotate(-2deg); } 50%{ transform:translateX(-50%) translateY(-7px) rotate(2deg); } }
.awardnum{
  position:absolute; left:50%; top:73px; z-index:3; transform:translateX(-50%);
  font-size:30px; font-weight:800; color:var(--il-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.45); letter-spacing:-.02em;
}
.awardreef{ position:absolute; left:0; right:0; bottom:-2px; width:100%; height:74px; }
.awardfish{ position:absolute; width:44px; height:28px; opacity:.95; }
.awardfish--1{ top:34px; left:-60px; animation:awardSwim 9s linear infinite; }
.awardfish--2{ top:112px; left:-70px; width:34px; height:22px; animation:awardSwim 12s linear infinite 1.6s; }
.awardfish--3{ top:70px; left:-80px; width:28px; height:18px; animation:awardSwim 15s linear infinite 4s; }
@keyframes awardSwim{ to{ transform:translateX(560px); } }
.awardbub{
  position:absolute; bottom:-16px; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.55); box-shadow:inset -2px -2px 0 rgba(255,255,255,.5);
  left:calc(8% + var(--i) * 15%);
  animation:awardRise 5.5s linear infinite;
  animation-delay:calc(var(--i) * -0.9s);
}
.awardbub:nth-child(even){ width:6px; height:6px; }
@keyframes awardRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.85; }
  100%{ transform:translateY(-210px) translateX(12px); opacity:0; }
}
.awardbox__body{ padding:20px 22px 4px; text-align:center; }
.awardbox__body h2{ font-size:24px; margin-top:4px; }
.awardbox__t{ margin-top:8px; color:var(--title); font-size:14px; line-height:1.6; }
.awardstats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.awardchip{
  display:flex; flex-direction:column; gap:2px; align-items:center;
  padding:8px 14px; border-radius:var(--r-md);
  background:var(--deck); border:1px solid var(--slate-soft); min-width:82px;
}
.awardchip b{ font-size:15px; color:var(--value); }
.awardchip span{ font-size:10.5px; color:var(--unit); letter-spacing:.05em; text-transform:uppercase; }
@media (prefers-reduced-motion: reduce){
  .awardmedal,.awardfish,.awardbub,.awardbox--in{ animation:none; }
  .awardfish{ display:none; }
}

/* ---- people --------------------------------------------------------- */
.avatar{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
  font-size:10.5px; font-weight:700; letter-spacing:.02em; flex:none;
  font-family:var(--f-display);
}
.avatar--lg{width:38px; height:38px; font-size:13px;}
.combo__opt--ppl{align-items:center;}
.pplgrid{display:flex; flex-direction:column; gap:2px;}
.pplrow{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-md);
  transition:background .15s var(--ease);
}
.pplrow:hover{background:var(--deck);}
.pplrow__mid{flex:1; min-width:0;}
.pplrow__n{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pplrow__n b{font-size:14px; color:var(--value);}
.pplrow__meta{margin-top:5px; font-size:11.5px; color:var(--unit); font-variant-numeric:tabular-nums;}
.pplrow__n2{font-size:17px; color:var(--value); font-weight:600; flex:none;}
.pplbar{margin-top:7px; height:4px; border-radius:99px; background:var(--slate-soft); overflow:hidden;}
.pplbar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--ok));}
.ptag{
  font-family:var(--f-label); font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid transparent;
}
.ptag--buddy{color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line);}
.ptag--guide{color:var(--ok); background:var(--ok-soft); border-color:rgba(53,209,139,.34);}
.ptag--both{color:var(--caution); background:rgba(255,179,71,.14); border-color:rgba(255,179,71,.32);}

/* ---- footer: the legal line, on every page because it sits outside the views */
.foot{ margin-top:54px; padding-bottom:8px; text-align:center; }
.foot__rule{
  height:1px; margin:0 auto 18px; max-width:520px;
  background:linear-gradient(90deg, transparent, var(--slate-soft) 22%, var(--slate-soft) 78%, transparent);
}
.foot__c{ font-size:12.5px; color:var(--title); letter-spacing:.01em; }
.foot__dot{ margin:0 7px; color:var(--unit); }
.foot__built{ margin-top:5px; font-size:12px; color:var(--title); }
.foot__src{ margin-top:6px; font-size:11.5px; color:var(--unit); line-height:1.6; }

/* ---- desktop is the base; the rail only appears when there is room ---- */
.rail{ display:none; }
:root[data-device="desktop"][data-rail="1"] .rail{ display:block; }
:root[data-device="desktop"][data-rail="1"] .main{ padding-left:calc(16px + var(--rail-w)); }
:root:not([data-device="desktop"]) .main,
:root[data-device="desktop"]:not([data-rail="1"]) .main{ padding-left:max(16px, var(--safe-l)); }

/* ---- tablet ---- */
:root[data-device="tablet"] .main{
  max-width:760px; padding-left:max(18px, var(--safe-l)); padding-right:max(18px, var(--safe-r));
}
:root[data-device="tablet"] .chartgrid{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
:root[data-device="tablet"] .grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- phone ---- */
:root[data-device="phone"]{ --topbar-h:54px; --r-lg:16px; --r-xl:18px; }
:root[data-device="phone"] body{ font-size:15px; }
:root[data-device="phone"] .main{
  padding-left:max(13px, var(--safe-l)); padding-right:max(13px, var(--safe-r));
  padding-bottom:calc(72px + var(--safe-b));
}
:root[data-device="phone"] .pagehead{ padding:20px 0 12px; }
:root[data-device="phone"] .hero{ padding:18px 16px 78px; border-radius:18px; }
:root[data-device="phone"] .hero__island{ display:none; }
:root[data-device="phone"] .hero__reef{ height:68px; }
:root[data-device="phone"] .hero__fish--3{ display:none; }
:root[data-device="phone"] .hero h1{ font-size:clamp(23px, 7.4vw, 30px); }
:root[data-device="phone"] .hero__sub{ font-size:14px; }
:root[data-device="phone"] .bigbtn{ padding:14px 15px; gap:11px; margin-top:18px; }
:root[data-device="phone"] .bigbtn__icon{ width:38px; height:38px; }
:root[data-device="phone"] .bigbtn__t b{ font-size:15.5px; }
:root[data-device="phone"] .bigbtn__t span{ font-size:12.5px; }
:root[data-device="phone"] .grid,
:root[data-device="phone"] .grid--2{ grid-template-columns:1fr; gap:13px; }
:root[data-device="phone"] .chartgrid{ grid-template-columns:1fr; }
:root[data-device="phone"] .kpis{ grid-template-columns:repeat(2, 1fr); }
:root[data-device="phone"] .kpi{ padding:13px; }
:root[data-device="phone"] .kpi__v{ font-size:23px; }
:root[data-device="phone"] .kpi--hero .kpi__v{ font-size:34px; }
:root[data-device="phone"] .readouts{ grid-template-columns:repeat(2, 1fr); }
:root[data-device="phone"] .readout__v{ font-size:20px; }
:root[data-device="phone"] .fieldset{ padding:14px; gap:14px; }
:root[data-device="phone"] .divecard{ padding:13px 14px; }
:root[data-device="phone"] .divecard__stats{ gap:13px; }
:root[data-device="phone"] .divecard__stat b{ font-size:15px; }
:root[data-device="phone"] .sidebar{ width:min(340px, 90vw); }
:root[data-device="phone"] .sectionhead{ margin:20px 0 10px; }
:root[data-device="phone"] .sectionhead h2{ font-size:16px; }
:root[data-device="phone"] .seg__btn{ padding:8px 13px; font-size:13px; }
:root[data-device="phone"] .panefoot{ gap:8px; }
:root[data-device="phone"] .panefoot .btn{ flex:1 1 auto; }
:root[data-device="phone"] .mapstage{ aspect-ratio:4/5; min-height:340px; }
:root[data-device="phone"] .pop{ width:min(260px, 72vw); }

/* modals become sheets on phones, centred dialogs elsewhere */
:root[data-device="phone"] .modal{ padding:0; align-items:flex-end; }
:root[data-device="phone"] .modal__box{
  max-width:none; width:100%; border-radius:22px 22px 0 0; max-height:88svh;
  transform:translateY(36px); padding-bottom:var(--safe-b);
}
:root[data-device="phone"] .modal.open .modal__box{ transform:none; }
:root[data-device="phone"] .modal__body{ padding:16px; }
:root[data-device="phone"] .modal__foot{ padding:12px 14px calc(12px + var(--safe-b)); }
:root[data-device="phone"] .modal__foot .btn{ flex:1 1 auto; }

/* ---- touch: everything you tap is at least 44px, nothing hides on hover ---- */
:root[data-touch="1"] .row__acts{ opacity:1; }
:root[data-touch="1"] .row__main{ padding-top:11px; padding-bottom:11px; }
:root[data-touch="1"] .row__act{ width:38px; height:38px; }
:root[data-touch="1"] .twisty{ width:32px; height:32px; }
:root[data-touch="1"] .iconbtn{ width:44px; height:44px; }
:root[data-touch="1"] .chip{ padding:9px 15px; font-size:14px; }
:root[data-touch="1"] .chip--sm{ padding:7px 12px; font-size:13px; }
:root[data-touch="1"] .slider__track{ height:40px; }
:root[data-touch="1"] .slider input[type=range]{ height:40px; }
:root[data-touch="1"] .slider__thumb{ width:28px; height:28px; }
:root[data-touch="1"] .slider.is-live .slider__thumb{ width:32px; height:32px; }
:root[data-touch="1"] .input,
:root[data-touch="1"] .select,
:root[data-touch="1"] .textarea{ padding:12px 13px; font-size:16px; }  /* 16px stops iOS zooming on focus */
:root[data-touch="1"] .btn{ height:44px; padding:0 18px; }
:root[data-touch="1"] .zoombtn{ width:40px; height:40px; }
:root[data-touch="1"] .divecard:hover,
:root[data-touch="1"] .projcard:hover{ transform:none; }
:root[data-touch="1"] .linkbtn{ padding:6px 0; }

/* very short viewports (phone in landscape) */
@media (max-height: 520px){
  .hero{ padding:15px 16px 62px; }
  .hero__reef{ height:54px; }
  .pagehead{ padding:14px 0 10px; }
  .modal__box{ max-height:94svh; }
}
/* narrow phones */
@media (max-width: 360px){
  :root[data-device="phone"] .kpis{ grid-template-columns:1fr; }
  :root[data-device="phone"] .kpi--hero{ grid-column:span 1; }
  :root[data-device="phone"] .readouts{ grid-template-columns:1fr; }
}


  .tb-embed-footer{display:block;margin-top:6px;padding:0;text-align:center;font-family:inherit;border-top:none;}
  .tb-embed-footer a{display:inline-block;margin:0 8px;font-size:11.5px;text-decoration:none;color:inherit;opacity:.75;}
  .tb-embed-footer a:not(.tb-embed-legal){opacity:.9;}
  .tb-embed-footer a.tb-embed-legal{opacity:.6;}
  .tb-embed-footer a:hover{text-decoration:underline; opacity:1;}