/* Australian marine protected areas — chart-plate palette.
   Mono carries labels and figures; system sans carries prose. */

:root {
  --ocean:#0A1B27; --deep:#06131C; --panel:#0E2431;
  --line:#1D3E4F; --line-soft:#16303E;
  --ink:#D6E4EC; --ink-dim:#7D9AAB; --ink-faint:#7C97A6;   /* AA: 5.20 on panel */
  --grid:rgba(120,170,195,.07);
  --ref-fill:rgba(90,150,180,.10); --ref-line:rgba(130,190,215,.42);
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --unprot:#1A2C39;
  --sel:#5AB8E8;                       /* selection outline */

  /* MPA Guide levels of protection */
  --l-full:#1E9E6B; --l-high:#66C08C; --l-light:#E3B03F;
  --l-minimal:#DE7F42; --l-incompatible:#D6455F; --l-unassessed:#67818F;

  --j-COM:#4FB3C4; --j-QLD:#D98A3D; --j-NSW:#A97BD4; --j-STATE:#67818F;

  --s-cth:#4FB3C4; --s-gbr:#3E86C8; --s-qgbr:#D98A3D; --s-qgs:#E8B36A;
  --s-qmb:#C9752E; --s-nsw:#A97BD4; --s-capad:#67818F;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme:light){
  :root{
    --ocean:#E7EFF3; --deep:#DCE7ED; --panel:#F4F8FA;
    --line:#C2D4DE; --line-soft:#D6E3EA;
    --ink:#12242F; --ink-dim:#4E6979; --ink-faint:#556E7C;   /* AA: 5.03 on panel */
    --grid:rgba(30,70,95,.08);
    --ref-fill:rgba(60,120,160,.10); --ref-line:rgba(40,95,130,.40);
    --shadow:0 10px 34px rgba(20,50,70,.16);
    --unprot:#CBDAE2; --sel:#1D6FA5;
    --l-full:#127B50; --l-high:#3E9E6C; --l-light:#B7871B;
    --l-minimal:#BE6227; --l-incompatible:#B32B47; --l-unassessed:#7D939F;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ocean); color:var(--ink);
  font-family:var(--sans); font-size:14px;
  display:flex; flex-direction:column; min-height:100dvh;
}
a{color:var(--sel)}

.eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin:0; font-weight:400;
}
.hint{font-size:10.5px; color:var(--ink-faint); margin:2px 0 0; line-height:1.5}

/* header */
.top{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px 32px; padding:14px 20px; background:var(--panel);
  border-bottom:1px solid var(--line);
}
.brand h1{font-family:var(--mono); font-size:17px; font-weight:600; letter-spacing:-.015em; margin:5px 0 0}
.figures{display:flex; gap:24px; margin:0; font-family:var(--mono); flex-wrap:wrap}
.figures div{display:flex; flex-direction:column; gap:3px}
.figures dt{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}
.figures dd{margin:0; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}

/* tabs */
.tabs{
  display:flex; gap:2px; padding:0 20px; background:var(--panel);
  border-bottom:1px solid var(--line); overflow-x:auto;
}
.tabs button{
  border:0; background:transparent; color:var(--ink-dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:10px 14px; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.tabs button[aria-selected="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--sel)}
.tabs button:hover{color:var(--ink)}

/* layout */
.grid{display:grid; grid-template-columns:264px minmax(0,1fr); flex:1; min-height:0}
.rail{
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px; padding:16px 14px;
  overflow-y:auto; min-height:0;
}
.group{display:flex; flex-direction:column; gap:7px}

/* segmented controls */
.seg{display:flex; flex-wrap:wrap; gap:2px; padding:2px; background:var(--deep);
  border:1px solid var(--line); border-radius:3px}
.seg button{min-width:74px}
.seg.vert{flex-direction:column}
.seg button{
  flex:1 1 auto; padding:6px 4px; border:1px solid transparent; border-radius:2px;
  background:transparent; color:var(--ink-dim); cursor:pointer;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
}
.seg button[aria-pressed="true"]{
  border-color:var(--sel); color:var(--ink); font-weight:700;
}
.seg.vert button{text-align:left; padding:6px 8px; letter-spacing:.06em}

/* rows — selection is a blue outline and bold text, never a grey-out */
.row{
  display:grid; grid-template-columns:10px 1fr auto; align-items:baseline;
  gap:9px; padding:5px 6px; border:1px solid transparent; border-radius:3px;
  background:transparent; color:inherit; text-align:left; width:100%; cursor:pointer;
}
.row:hover{background:var(--deep)}
.row[aria-pressed="true"]{border-color:var(--sel); background:var(--deep)}
.row[aria-pressed="true"] .name{font-weight:700}
.row.off .name{text-decoration:line-through; text-decoration-thickness:1px}
.row.off .swatch{background:transparent !important; box-shadow:inset 0 0 0 1px var(--ink-faint)}
#layers .row,#reference .row{grid-template-columns:10px 1fr}
.swatch{width:10px; height:10px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.row .name{font-size:11.5px; line-height:1.3}
.row .name small{display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.05em; color:var(--ink-faint); margin-top:2px; font-weight:400}
.row .val{font-family:var(--mono); font-size:10.5px;
  font-variant-numeric:tabular-nums; color:var(--ink-dim)}
.bar{grid-column:2/-1; height:2px; background:var(--line); border-radius:1px}
.bar i{display:block; height:100%; border-radius:1px}

/* map */
.stage{position:relative; overflow:hidden; background:var(--deep); min-height:0}
canvas{display:block; width:100%; height:100%; cursor:grab}
canvas.dragging{cursor:grabbing}
.tip{
  position:absolute; z-index:5; pointer-events:none; max-width:320px;
  background:color-mix(in srgb,var(--panel) 95%,transparent);
  border:1px solid var(--line); border-radius:5px; padding:11px 13px;
  box-shadow:var(--shadow); font-family:var(--mono);
}
.tip .zn{font-size:12px; font-weight:600; line-height:1.3; display:flex;
  align-items:center; gap:7px; margin-bottom:4px}
.tip .pn{font-size:10.5px; color:var(--ink-dim); line-height:1.4}
.tip .lvl{display:inline-block; margin-top:6px; padding:2px 7px; border-radius:10px;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.tip .meta{font-size:9.5px; color:var(--ink-faint); margin-top:6px; padding-top:6px;
  border-top:1px solid var(--line-soft); line-height:1.5}
.tip .acts{display:grid; grid-template-columns:1fr auto; gap:2px 10px; margin:8px 0 0;
  padding-top:8px; border-top:1px solid var(--line-soft); font-size:10px}
.tip .acts dt{color:var(--ink-dim)}
.tip .acts dd{margin:0; text-align:right; font-weight:600}
.tip .yes{color:var(--l-incompatible)}
.tip .no{color:var(--l-full)}
.tip .na{color:var(--ink-faint); font-weight:400}
.tip .acts .part{display:block; font-weight:400; font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim)}
.tip .basis{font-size:9.5px; line-height:1.5; color:var(--ink-dim); margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line-soft); font-family:var(--sans)}
.tip .confine{color:var(--ink)}
.tip .confine strong{color:var(--l-incompatible)}
.panelnote{
  position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line); border-radius:3px; padding:5px 9px;
}
.hud{position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column;
  align-items:flex-end; gap:8px; font-family:var(--mono); font-size:10px; color:var(--ink-dim)}
.coords{font-variant-numeric:tabular-nums}
.scalebar{display:flex; align-items:center; gap:7px}
.scalebar .track{display:block; height:5px; width:80px; border:1px solid var(--ink-faint); border-top:0}
.zoomer{display:flex; gap:3px}
.zoomer button{width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:3px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  color:var(--ink); font-family:var(--mono); font-size:13px; cursor:pointer}
.zoomer button.wide{width:auto; padding:0 10px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase}

/* chart + sources panels */
.panelview{overflow-y:auto; padding:18px 20px; min-height:0}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  font-family:var(--mono); font-size:10px; margin-bottom:14px}
.crumbs button{border:1px solid transparent; background:transparent; cursor:pointer;
  padding:3px 6px; color:var(--ink-dim); font-family:var(--mono); font-size:10px; border-radius:3px}
.crumbs button:hover{background:var(--deep); color:var(--ink)}
.crumbs button[aria-current="true"]{color:var(--ink); font-weight:700; border-color:var(--sel)}
.crumbs span{color:var(--ink-faint)}

.chartrow{display:grid; grid-template-columns:290px minmax(0,1fr); gap:26px; align-items:start}
.chartblock,.tableblock{display:flex; flex-direction:column; gap:10px; min-width:0}
.donutwrap{position:relative; width:100%; max-width:250px}
#donut{display:block; width:100%; height:auto}
.donutmid{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; font-family:var(--mono)}
.donutmid b{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.donutmid span{font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--l-full); font-weight:700; margin-top:2px; text-align:center;
  max-width:56%; line-height:1.35}
/* context sits below the ring — the hole is only 60% of the donut width and
   a third line never fit there cleanly at every size */
.donutsub{margin:2px auto 0; max-width:250px; text-align:center;
  font-family:var(--mono); font-size:9.5px; line-height:1.5; color:var(--ink-faint)}
#donut path.emph{stroke:var(--ink); stroke-width:1.5; paint-order:stroke}
#donut path{cursor:pointer}
#donut path.sel{stroke:var(--sel); stroke-width:3; paint-order:stroke}
.dkey{display:flex; flex-direction:column; gap:2px}
.dkey .k{display:grid; grid-template-columns:9px 1fr auto auto; align-items:baseline;
  gap:8px; font-family:var(--mono); font-size:10px; padding:3px 5px; border-radius:3px;
  cursor:pointer; border:1px solid transparent; background:transparent; color:inherit;
  text-align:left; width:100%}
.dkey .k:hover{background:var(--deep)}
.dkey .k[aria-pressed="true"]{border-color:var(--sel); background:var(--deep)}
.dkey .k[aria-pressed="true"] .lb{font-weight:700}
.dkey .k .lb{color:var(--ink); font-family:var(--sans); font-size:11px}
.dkey .k .v1{color:var(--ink-dim); font-variant-numeric:tabular-nums}
.dkey .k .v2{color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:42px; text-align:right}

.tablescroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:11px}
thead th{font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; text-align:left; padding:0 8px 6px 0;
  border-bottom:1px solid var(--line); white-space:nowrap}
th.num,td.num{text-align:right; font-variant-numeric:tabular-nums}
tbody td{padding:6px 8px 6px 0; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--deep)}
td.num{font-family:var(--mono)}
td .mix{display:flex; height:6px; border-radius:2px; overflow:hidden; min-width:70px}
td .mix i{display:block; height:100%}
td .zn{display:flex; align-items:center; gap:7px}

/* source cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.card{border:1px solid var(--line); border-radius:5px; background:var(--panel); padding:14px 15px}
.card h3{margin:6px 0 0; font-family:var(--mono); font-size:13px; font-weight:600; line-height:1.3}
.card p{margin:8px 0 0; font-size:11.5px; line-height:1.6; color:var(--ink-dim)}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:10px 0 0;
  padding-top:10px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:10px}
.card dt{color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase}
.card dd{margin:0; color:var(--ink-dim); overflow-wrap:anywhere}
.card .tag{display:inline-block; padding:2px 8px; border-radius:10px; font-family:var(--mono);
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.card a{font-size:11px; word-break:break-all}

/* Height is reserved: this text arrives after the data fetch, and letting it
   grow from one line to a paragraph was shifting the map by 0.5 CLS. */
.foot{background:var(--panel); border-top:1px solid var(--line); padding:12px 20px;
  font-size:10.5px; line-height:1.6; color:var(--ink-faint); min-height:86px}
@media (max-width:1080px){ .foot{min-height:120px} }
.foot p{margin:0; max-width:100ch}

button:focus-visible,tr.clickable:focus-visible,a:focus-visible{
  outline:2px solid var(--sel); outline-offset:1px}

/* responsive */
@media (max-width:1080px){
  .chartrow{grid-template-columns:1fr}
  .donutwrap{max-width:220px; margin:0 auto}
}
@media (max-width:820px){
  /* Budget the viewport: header + tabs + rail + map, no page scroll. The map is
     the point on a phone, so the rail is capped and the footer moves into the
     Sources tab rather than eating vertical space. */
  body{font-size:13px; height:100dvh; overflow:hidden}
  /* FIXED track, not auto + max-height. Here the rail is a grid ROW, so
     letting it grow from empty to full when the legend and layer lists
     populate pushed the map down and cost 0.51 CLS. Reserving the track
     means the map never moves. On desktop the rail is a column and this
     does not arise. */
  .grid{grid-template-columns:1fr; grid-template-rows:32dvh minmax(0,1fr); min-height:0}
  .rail{border-right:0; border-bottom:1px solid var(--line); height:32dvh;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
    gap:10px 14px; align-content:start}
  .stage{min-height:0}
  .foot{display:none}
  #viewSources .foot-inline{display:block}
  .top{padding:11px 14px; gap:10px 18px}
  .brand h1{font-size:15px}
  .figures{gap:14px}
  .figures dd{font-size:15px}
  .tabs{padding:0 10px}
  .panelview{padding:14px}
  .cards{grid-template-columns:1fr}
  .tip{max-width:250px; padding:9px 11px}
  .zoomer button{width:36px; height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}