/* Seattle Land Cover Explorer: flat, bold, editorial.
   Navy + ink outlines on white; Rubik throughout. */

@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --ink: #0b0b0f;
  --navy: #0f2a55;
  --paper: #ffffff;
  --mist: #f3f5f9;
  --muted: #4a4f5c;
  --line: 2px solid var(--ink);
  --r: 14px;
  --lift: 0 2px 12px rgba(0, 0, 0, .3);
  --bar: 64px;
  --foot: 30px;

  /* Class colours: validated categorical slots 1-5 for a dark surface
     (colour-blind separation + contrast checked). Assigned in this fixed order. */
  --c1: #3987e5; /* blue    */
  --c2: #d95926; /* orange  */
  --c3: #199e70; /* aqua    */
  --c4: #c98500; /* yellow  */
  --c5: #d55181; /* magenta */

  font-family: "Rubik", system-ui, sans-serif;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--bar) 1fr var(--foot);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--navy); color: #fff;
}
.topbar :focus-visible { outline-color: #fff; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: #fff; border-radius: 10px;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
.crumbs .sep { color: rgba(255, 255, 255, .6); }
.chip {
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.actions { display: flex; gap: 8px; }
.nav-btn {
  font: 500 14px "Rubik", sans-serif; color: #fff; background: transparent;
  border: 2px solid #fff; border-radius: 10px; padding: 7px 16px; cursor: pointer;
}
.nav-btn:hover { background: rgba(255, 255, 255, .14); }
.nav-btn-solid { background: #fff; color: var(--navy); }
.nav-btn-solid:hover { background: #e6ecf7; }
.nav-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Stage (the map) ---------- */
.stage { position: relative; overflow: hidden; background: #1a1a19; }
.viewport { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.viewport.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 512px; height: 512px; transform-origin: 0 0; }
.world canvas { position: absolute; left: 0; top: 0; width: 512px; height: 512px; image-rendering: pixelated; }
.world.grey #basemap { filter: grayscale(1) contrast(1.05); }

/* Selected-cell marker: double ring stays visible on any imagery, constant on-screen width */
.cell-marker {
  position: absolute; width: 4px; height: 4px; pointer-events: none; --px: 1px;
  box-shadow: 0 0 0 calc(var(--px) * 2) #fff, 0 0 0 calc(var(--px) * 4) var(--ink);
}

/* Floating surfaces: no outline over the imagery; a soft shadow keeps them legible */
.float { background: var(--paper); border: 0; border-radius: var(--r); box-shadow: var(--lift); }

/* ---------- Left rail (sticky pill) ---------- */
.rail {
  position: absolute; left: 16px; top: 16px; z-index: 5; width: 58px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rail-btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink); border: 0; border-radius: 10px;
}
.rail-btn:hover { background: var(--mist); }
.rail-btn[aria-expanded="true"] { background: var(--navy); color: #fff; }
.rail-dots {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: 100%; padding: 10px 0; border-block: 2px solid var(--mist);
}
.dot { width: 22px; height: 22px; border-radius: 50%; border: var(--line); padding: 0; cursor: pointer; }
.dot:hover { transform: scale(1.15); }
.dot[aria-expanded="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); } /* Classes panel is open */

/* ---------- Drawer ---------- */
.drawer {
  position: absolute; left: 88px; top: 16px; z-index: 5; width: 340px;
  max-height: calc(100% - 32px); overflow: auto; padding: 22px 22px 20px;
}
.close {
  position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; font-size: 16px;
}
.close:hover { background: var(--mist); }
.drawer h2 { font-size: 34px; font-weight: 300; letter-spacing: -.01em; margin: 2px 0 8px; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; margin: 4px 0 0; }
.soon { font-weight: 500; color: var(--navy); }
.facts { padding-left: 18px; margin: 12px 0 0; line-height: 1.5; font-size: 14px; }
.facts li { margin-bottom: 10px; }
.facts a { color: var(--navy); text-underline-offset: 2px; }
.class-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: var(--line); border-radius: 12px; margin-bottom: 10px;
}
.class-row { cursor: pointer; }
.class-row.static { cursor: default; border-style: dashed; }
.class-row.active { border-color: var(--navy); background: var(--mist); box-shadow: inset 0 0 0 1px var(--navy); }
.class-row .dot { flex: none; cursor: inherit; }
.class-row .dot:hover { transform: none; }
.dot.none { background: transparent; border-style: dashed; }   /* Unclassified: an empty circle */
.dot.hatch { background: repeating-linear-gradient(45deg, #fff 0 2px, #5b6070 2px 4px); }  /* Low confidence: hatched */
.class-warn { margin-top: 3px; font-size: 12px; color: #9a4b00; }
.class-row.active .class-warn { color: #8a3f00; }
.class-main { flex: 1; min-width: 0; }
.class-input {
  width: 100%; font: 500 15px "Rubik", sans-serif; color: var(--ink); background: transparent;
  border: 0; border-radius: 6px; padding: 2px 4px; margin-left: -4px;
}
.class-input:hover { background: #fff; }
.class-x { width: 28px; height: 28px; flex: none; cursor: pointer; background: transparent; border: 0; border-radius: 8px; font-size: 13px; }
.class-x:hover, .class-clear:hover { background: #fff; }
.class-clear { width: 28px; height: 28px; flex: none; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink); border: 0; border-radius: 8px; padding: 0; }
.btn-outline {
  font: 500 14px "Rubik", sans-serif; color: var(--ink); background: var(--paper);
  border: var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.btn-outline:hover:not(:disabled) { background: var(--mist); }
.btn-outline:disabled { opacity: .4; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; font: 500 13px "Rubik", sans-serif; color: var(--navy); text-decoration: underline; cursor: pointer; margin-bottom: 8px; }
.class-name { font-weight: 500; }
.class-sub { font-size: 13px; color: var(--muted); }
.total { margin: 14px 0 0; font-size: 14px; }

/* ---------- Readout (top right) ---------- */
.readout { position: absolute; right: 16px; top: 16px; z-index: 4; width: 250px; padding: 12px 14px; }
.readout p { margin: 2px 0; font-size: 15px; font-weight: 500; }
.readout .small { font-weight: 400; }

/* Small load note, only shown while no cell is selected */
.readout .load-info { margin: 16px 0 0; font-size: 12px; font-weight: 400; color: var(--muted); }
.readout .load-info:empty { display: none; }

/* Cell information: (1) Row + Col, (2) coordinates, small and muted, (3) classification */
.readout .cell-empty { margin: 6px 0 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.readout .cell-id { margin: 8px 0 0; font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.readout .cell-coords { margin: 4px 0 0; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.cell-class { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--mist); }
.readout .cell-label { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.readout .cell-name { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; font-weight: 500; }
.readout .cell-name .dot { width: 18px; height: 18px; cursor: default; }
.readout .cell-name .dot:hover { transform: none; }
.readout .cell-name .muted { font-weight: 400; font-size: 15px; }
.cell-meta { margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cell-meta div { margin-top: 2px; }
/* Low-confidence "!": the status palette's warning amber, dark mark for contrast (hover / focus shows the runner-up) */
.warn {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #fab219; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; cursor: help;
}

/* ---------- Dock (bottom centre) ---------- */
.dock {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 6px; padding: 8px;
  background: var(--navy); border-radius: 18px; box-shadow: var(--lift);
}
.dock-btn {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #fff; border: 0; border-radius: 12px;
}
.dock-btn:hover { background: rgba(255, 255, 255, .16); }
.dock-btn[aria-pressed="true"] { background: #fff; color: var(--navy); }
.dock-sep { width: 2px; height: 28px; background: rgba(255, 255, 255, .3); margin: 0 4px; }

/* ---------- Bottom-left / bottom-right controls ---------- */
.ctl { position: absolute; bottom: 16px; z-index: 4; display: flex; gap: 8px; align-items: center; }
.ctl-left { left: 16px; }
.ctl-right { right: 16px; }
.fbtn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  padding: 0; border-radius: 12px; color: var(--ink);
}
.fbtn:hover { background: var(--mist); }
.fbtn[aria-pressed="true"] { background: var(--navy); color: #fff; }
/* Layers tile (bottom left): thumbnail of the map + label; opens the layers menu */
.layers-btn {
  position: relative; width: 78px; height: 78px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid #fff; border-radius: 14px; box-shadow: var(--lift);
  background: url("data/rgb.png") center / cover; color: #fff;
}
.layers-btn.grey { filter: grayscale(1); }
.layers-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .7)); }
.layers-btn span {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 1px; font: 500 12px "Rubik", sans-serif;
}
.layers-btn[aria-expanded="true"] { border-color: var(--c1); }

.layers-pop {
  position: absolute; left: 16px; bottom: 104px; z-index: 6; width: 270px; padding: 16px 16px 12px;
}
.layers-pop h3 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.base-opts { display: flex; gap: 10px; margin-bottom: 16px; }
.base-opt {
  flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0; cursor: pointer;
  background: none; border: 0; font: 500 13px "Rubik", sans-serif; color: var(--ink);
}
.base-opt i {
  display: block; width: 100%; height: 56px; border-radius: 10px; border: 3px solid transparent;
  background: url("data/rgb.png") center / cover;
}
.base-opt.grey-opt i { filter: grayscale(1); }
.base-opt[aria-pressed="true"] i { border-color: var(--navy); }
.overlay-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; opacity: .5; }
.overlay-row input { width: 18px; height: 18px; }
.overlay-row .soon { margin-left: auto; font-size: 11px; font-weight: 500; }
.overlay-row.live { opacity: 1; }

/* Global settings: label on one line, bold amount on the next, then the slider */
.setting { margin: 20px 0; }
.setting-head, .setting-value { display: flex; align-items: center; justify-content: space-between; }
.setting-head { font-size: 14px; font-weight: 400; }
.setting-value { margin: 1px 0 6px; font-size: 15px; }
.setting-value strong { font-weight: 600; }
.setting input[type="range"] { display: block; width: 100%; accent-color: var(--navy); margin: 0; }
.icon-btn { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer; background: transparent; color: var(--ink); border: 0; border-radius: 8px; }
.icon-btn:hover:not(:disabled) { background: var(--mist); }
.icon-btn:disabled { opacity: .3; cursor: default; }
/* "Reset ↺": text button under a slider, left aligned, icon just after the word */
.reset-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 0; cursor: pointer; background: none; border: 0; color: var(--navy); font: 500 13px "Rubik", sans-serif; }
.reset-btn:hover:not(:disabled) { text-decoration: underline; }
.reset-btn:disabled { opacity: .35; cursor: default; }

/* Find similar controls */
.slider { display: block; margin: 16px 0; }
.slider span { display: block; font-size: 14px; margin-bottom: 6px; }
.slider input[type="range"] { width: 100%; accent-color: var(--navy); }
.btn-solid {
  font: 500 14px "Rubik", sans-serif; color: #fff; background: var(--ink);
  border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; margin-top: 4px;
}
.btn-solid:hover { background: var(--navy); }
.note { margin-top: 18px; line-height: 1.45; }
.viewport[data-tool="similar"], .viewport[data-tool="label"] { cursor: crosshair; }
.viewport.space { cursor: grab; }

/* Brush outline that follows the pointer while painting (red = Alt is held: erasing) */
.brush {
  position: absolute; pointer-events: none; --px: 1px; background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 calc(var(--px) * 1.5) #fff, 0 0 0 calc(var(--px) * 3) rgba(11, 11, 15, .65);
}
.brush.erase { background: rgba(255, 90, 70, .22); box-shadow: 0 0 0 calc(var(--px) * 1.5) #ff5a46, 0 0 0 calc(var(--px) * 3) rgba(11, 11, 15, .65); }

/* Label diamonds layer */
.labels-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Stopping cue (in the right-hand readout, while painting) */
.stability { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--mist); }
.stability p { margin: 4px 0; font-size: 14px; font-weight: 400; }
.stability .small { font-size: 12px; }
.pill { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--mist); }
.pill.ok { background: var(--navy); color: #fff; }
.stab-bars { display: flex; align-items: flex-end; gap: 4px; height: 32px; margin: 8px 0; }
.stab-bars i { flex: 1; max-width: 22px; background: var(--navy); border-radius: 3px 3px 0 0; }

/* "+ Add class" on the left, "Clear all labels" on the right */
.class-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.class-actions .link-btn { margin: 0 0 0 auto; }   /* pushes the link to the far right */
.inline-icon { vertical-align: -3px; }

/* Lens in the readout */
#lens { display: block; width: 100%; aspect-ratio: 1; margin: 8px 0; border-radius: 10px; image-rendering: pixelated; }
.scale { height: 44px; padding: 0 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 12px; font-weight: 500; }
.scale-bar { display: block; height: 7px; border: 2px solid var(--ink); border-top: 0; }

/* ---------- Footer ---------- */
.foot {
  display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: var(--muted);
  border-top: var(--line); background: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Tooltips: on hover AND keyboard focus ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 20; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: #fff; font: 500 13px "Rubik", sans-serif;
  padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  opacity: 0; transition: opacity .12s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }
[data-tip-pos="top"]::after    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
[data-tip-pos="bottom"]::after { top: calc(100% + 12px); right: 0; }
[data-tip-pos="top-end"]::after { bottom: calc(100% + 12px); right: 0; }   /* above, right edge lined up with the button */
[data-tip-pos="top-start"]::after { bottom: calc(100% + 10px); left: 0; }  /* above, left edge lined up with the button */
[data-tip-pos="right"]::after  { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
[data-tip-pos="left"]::after   { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }

/* Longer tooltips (the (i) buttons) wrap instead of running on one line */
[data-tip-wrap]::after { white-space: normal; width: max-content; max-width: 230px; text-align: left; line-height: 1.4; font-weight: 400; }

:focus-visible { outline: 3px solid var(--c1); outline-offset: 2px; }

@media (max-width: 760px) {
  .readout, .chip { display: none; }
  .drawer { width: calc(100vw - 112px); }
  .ctl-right .scale { display: none; }
}