/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2016 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      CastleType
 * License URL: https://www.fontspring.com/licenses/castletype/webfont
 *
 *
 */
/* Standard CT (Light, Medium): the title block only (USI diploma identity) */
@font-face {
  font-family: 'Standard CT';
  src: url('../assets/fonts/standard-light-webfont.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Standard CT';
  src: url('../assets/fonts/standard-medium-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #6e6e6e;
  --rule: #d0d0d0;
  --river: #000000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --title-font: "Standard CT", var(--font);
  --strip-h: clamp(240px, 32vh, 320px);   /* overview strip: tall enough for the title block */
  --logo-h: clamp(28px, calc(var(--strip-h) * 0.13), 46px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  user-select: none;              /* an interface, not a document: nothing is text-selectable */
  -webkit-user-select: none;
  -webkit-touch-callout: none;    /* no long-press callout on iOS */
  -webkit-tap-highlight-color: transparent;
  background: var(--paper);
  color: var(--ink);
  font: 12px/1.3 var(--font);
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* lets every row shrink with the window (map canvases otherwise hold it open) */
  grid-template-rows: var(--strip-h) 40px minmax(0, 1fr);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.map { position: relative; min-width: 0; overflow: hidden; }

#overview { touch-action: none; }
#overview .maplibregl-canvas-container { cursor: crosshair; }
#ov-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  margin: -24px 0 0 8px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 11px;
}

/* Title block in the empty corner of the strip (logo, title, diploma, staff; Po / Region under it), sized to the
   strip's height. Its width is kept free of squares: layoutOverview pads the fit by it. */
#titleblock {
  --u: calc(var(--strip-h) / 100);   /* 1% of the strip's height */
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  font-family: var(--title-font);
  font-size: clamp(10px, calc(var(--u) * 3.6), 12px);
  line-height: 1.3;
}
#titleblock img { display: block; width: auto; height: var(--logo-h); margin-bottom: calc(var(--u) * 4.5); }
#titleblock h1 { margin: 0 0 calc(var(--u) * 5); font-weight: 500; font-size: clamp(22px, calc(var(--u) * 11), 36px); line-height: 0.98; letter-spacing: -0.025em; }
#titleblock p { margin: 0 0 3px; font-weight: 500; font-size: 1.08em; }
#titleblock dl { margin: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 14px; }
#titleblock dt { font-weight: 300; }
#titleblock dd { margin: 0; font-weight: 500; }
#ruler {
  border-bottom: 1px solid var(--ink);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
#ruler svg { display: block; }
#ruler line.base { stroke: var(--ink); stroke-width: 1; }
#ruler line.tick { stroke: var(--ink); stroke-width: 1; }
#ruler line.area { stroke: var(--ink); stroke-width: 1; }
#ruler text { font: 9px var(--font); fill: var(--ink-soft); text-anchor: middle; font-variant-numeric: tabular-nums; }
#ruler text.end { text-anchor: end; }
#ruler text.area { font-weight: 700; fill: var(--ink); letter-spacing: 0.08em; }
#ruler-cursor line { stroke: var(--river); stroke-width: 2; }
#ruler-cursor path { fill: var(--river); }
#ruler #ruler-km { font-size: 10px; font-weight: 700; fill: var(--ink); }

/* Veil outside the framed sheet / band of sheets, and the frame outline (see drawVeil in app.js). */
#veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#veil .veil { fill: var(--paper); fill-opacity: 0.82; }
#veil .frame { fill: none; stroke: var(--ink); stroke-width: 1.5; }
#veil .caption { font: 11px var(--font); font-variant-numeric: tabular-nums; }
#veil .caption .code { fill: var(--ink); font-weight: 700; letter-spacing: 0.04em; }
#veil .caption .size { fill: var(--ink-soft); }

/* Satellite / Map: small text floating on the detail map. */
.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: 3px 7px;
  background: var(--paper);
  font-size: 11px;
}
.toggle button { color: var(--ink-soft); }
.toggle button:hover { color: var(--ink); }
.toggle button.on { color: var(--ink); }

/* Po | Region switch, top-left over the overview strip (and over the Region view). */
#view { position: fixed; z-index: 20; gap: 6px; }
/* Po / Region: title font, the view you can switch to underlined (it reads as a link) */
#view button { font-family: var(--title-font); font-weight: 500; }
#view button:not(.on) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#view button + button::before { content: "/"; display: inline-block; margin-right: 6px; color: var(--ink-soft); font-weight: 300; }
/* desktop: at the foot of the title block, just above the ruler. Over the Region view the logo keeps its place
   and the switch goes back to the top, beside the logo (logo 358 x 160) */
#region-logo { display: none; }
#titlebar { display: none; height: 52px; align-items: center; gap: 12px; padding: 10px 16px 0; font-family: var(--title-font); }   /* fixed height: same place in Po and Region views */
#titlebar img { display: block; width: auto; height: 30px; }
#phonefoot { display: none; gap: 14px; align-items: baseline; padding: 8px 16px 10px; border-top: 1px solid var(--rule);
  font-family: var(--title-font); font-size: 10px; line-height: 1.3; }
#phonefoot p { margin: 0; font-weight: 500; white-space: nowrap; }
#phonefoot dl { margin: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 10px; }
#phonefoot dt { font-weight: 300; } #phonefoot dd { margin: 0; font-weight: 500; }
#titlebar p { margin: 0; font-weight: 500; font-size: clamp(12px, 3.85vw, 16px); line-height: 1.05; letter-spacing: -0.01em; }
@media (min-width: 761px) {
  body:has(#region[hidden]) #view { top: calc(var(--strip-h) - 30px); left: 9px; }
  body:has(#region:not([hidden])) #view { top: calc(14px + var(--logo-h) / 2 - 11px); left: calc(16px + var(--logo-h) * 2.2375 + 10px); }
  body:has(#region:not([hidden])) #region-logo { display: block; position: fixed; z-index: 16; left: 16px; top: 14px; width: auto; height: var(--logo-h); }
  html #region { padding-top: calc(28px + var(--logo-h)); }   /* html: wins over the base #region rule below */
}

/* Region view: the whole A-Z x 10-440 grid as one drawing (js/region.js). */
#region {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  padding: 44px 0 0;   /* the drawing keeps its own margin (region.js), so zoomed in it runs edge to edge */
  overflow: hidden;
  background: var(--paper);
}
#region[hidden] { display: none; }
#region svg { width: 100%; height: 100%; display: block; touch-action: none; }   /* pinch / drag zoom the drawing itself (region.js) */
#region { touch-action: none; }
#region svg * { vector-effect: non-scaling-stroke; }
#region .border { fill: none; stroke: #c7c7c7; stroke-width: 0.8; stroke-dasharray: 5 2; }
#region .grid { fill: none; stroke: #cecece; stroke-width: 0.5; }
#region .marked { fill-opacity: 0.3; stroke: #cecece; stroke-width: 0.5; }   /* grid line kept over the tint */
#region .trib { fill: none; stroke-width: 0.6; stroke-linejoin: round; }
#region .canal { fill: none; stroke-width: 1.2; stroke-linejoin: round; }   /* colours: region.js, CONFIG.region.lighten */
#region .delta { fill: none; stroke-width: 1.1; stroke-linejoin: round; }
#region .po { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#region .place { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
#region .place-label { font: 2.6px var(--font); letter-spacing: 0.16em; text-anchor: middle; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3; }
#region .hover { fill: none; stroke-width: 1.5; pointer-events: none; }
#region .frame { fill: none; stroke: var(--ink); stroke-width: 1; }
#region .cell { fill: none; stroke: var(--ink); stroke-width: 0.6; }
#region .letter, #region .num { font: 3.4px var(--font); text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
#region .num { font-size: 3px; }
#region .readout { font: 700 4px var(--font); fill: var(--ink); letter-spacing: 0.04em; }

main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* Places: a small button on the detail map that opens a compact list over it. */
#places {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.chip { padding: 3px 7px; background: var(--paper); font-size: 11px; color: var(--ink); }
#places-toggle[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }
#index {
  width: 230px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: 8px 0;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}
#index section { padding: 3px 14px; }
#index button { display: block; width: 100%; text-align: left; padding: 4px 0; }
#index button.area { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
#index section.near button.area::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 6px 1px -11px;
  background: var(--ink);
}
#index ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 10px; }
#index li button { font-size: 12px; color: var(--ink-soft); padding: 3px 0; }
#index li button.square, #index li button.region { color: var(--ink); font-variant-numeric: tabular-nums; }
#index ul.marks { margin: 0 0 3px; }
/* the list in the title's typeface: places, squares, regions in Medium; the marks in Light */
#index, #places-toggle { font-family: var(--title-font); }
#index button.area, #index li button.square, #index li button.region, #places-toggle { font-weight: 500; }
#index li button, #index ul.marks li { font-weight: 300; }
/* Design ateliers under the places, after a rule: same three levels (atelier like a square, professors like marks) */
#index section.ateliers { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ink); }
#index .ateliers .area { margin: 0; padding: 4px 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
#index .ateliers .atelier { display: block; padding: 3px 0; font-size: 12px; font-weight: 500; }
#index section.whole, #index section.whole ul { padding-top: 0; padding-bottom: 0; margin: 0; }   /* Overview: one item tall */
#index ul.marks li { font-size: 12px; color: var(--ink-soft); padding: 2px 0; }
#index li button.on, #index li button:hover, #index button.area:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

#error {
  position: fixed;
  left: 24px;
  bottom: 24px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 520px;
}


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

/* Desktop: Places is a fixed column to the right of the detail map, like the legend of a drawing sheet. */
@media (min-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr) 230px; }
  #veil { right: 230px; width: auto; }
  #places {
    position: static;
    display: block;
    min-height: 0;
    overflow-y: auto;
    border-left: 1px solid var(--rule);
  }
  #places-toggle { display: none; }
  #index, #index[hidden] { display: block; width: auto; max-height: none; padding: 8px 0 16px; box-shadow: none; overflow: visible; }
}

/* Phone / narrow window: index moves under the map, gutters shrink to 16px. */
@media (max-width: 760px) {
  :root { --strip-h: 170px; }
  body { grid-template-rows: 52px var(--strip-h) 40px minmax(0, 1fr) auto; }
  #titlebar, #phonefoot { display: flex; }
  /* Region view: the title bar stays on top (above the drawing), the switch under it */
  body:has(#region:not([hidden])) #titlebar { position: fixed; top: 0; left: 0; right: 0; z-index: 16; background: var(--paper); }
  body:has(#region:not([hidden])) #view { top: 62px; }
  html #region { padding-top: 92px; }
  #titleblock { display: none; }
  body:has(#region[hidden]) #view { top: 62px; }   /* top-left of the strip, under the title bar */
  #overview .maplibregl-canvas-container { cursor: grab; }
  #index { width: calc(100vw - 20px); max-height: 55vh; }
  #index button { padding: 7px 0; }            /* comfortable touch targets */
  #index li button { padding: 6px 0; }
}

/* our credit, first line of the map's (i) credits box (app.js); hidden with the rest until (i) is clicked */
.attrib-credit { color: var(--ink); }
.maplibregl-compact:not(.maplibregl-compact-show) .attrib-credit { display: none; }

/* River position (overview + detail) and the ring under the pointer while scrubbing: DOM markers (app.js) */
.pos-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--paper); pointer-events: none; }
.pos-dot-detail { width: 7px; height: 7px; }
.scrub-ring { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); pointer-events: none; }