/* =============================================================
   dossier.css: the page layer every page shares, after the Refero style Pravah (an engineering
   dossier) and kept inside the Fab City system. Loaded after main.css and nav.css, so it restyles
   their shared vocabulary rather than adding a new one:

     tags         .eyebrow and .kicker become a field label: white, hairline, 4px, tracked 0.1em
     headers      .page-header__title at weight 500; a two-sentence title splits into a grey
                  lead-in (.h1__lead) and the statement (.h1__main); no italic word swaps
     surfaces     panels sit on white, one step above the paper, with a 4px radius; ink stays
                  the structural outline, hairlines divide
     way-on       .next3 cards are white with a hairline, ink on hover
     network map  #netpanel, the dark map with glass cards (home and the list)

   The same file sits in all three site folders. Tokens only; the literals are the white surface,
   the 4px radius and the map's dark filter, which have no token.
   ============================================================= */

/* ---------- Tags ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .45em; width: fit-content;
  font-family: var(--fc-font-body); font-weight: 500; font-size: .72rem; line-height: 1.5; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fc-ink); background: #fff;
  border: 1px solid var(--fc-neutral-200); border-radius: 4px; padding: 2px 8px; }

/* .kicker is the same label; its colour moves to the hexagon bullet so the code (red, green, ink,
   boundary) survives while the text reads ink */
.kicker { display: inline-flex; align-items: center; width: fit-content; font-weight: 500; font-size: .72rem; line-height: 1.5;
  letter-spacing: .1em; background: #fff; border: 1px solid var(--fc-neutral-200); border-radius: 4px; padding: 2px 8px; }
.kicker:not(.kicker--boundary) { color: var(--fc-ink); }
.kicker::before { background: var(--fc-red); }
.kicker--fc-ink::before { background: var(--fc-neutral-600); }
.kicker--fc-green::before { background: var(--fc-green); }
.kicker--boundary::before { background: currentColor; }

/* ---------- Headers ---------- */
.page-header__title { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; margin-top: 18px; }
.page-header__title .h1__lead { display: block; font-size: .6em; color: var(--fc-neutral-500); letter-spacing: -0.015em; margin-bottom: .3em; }
.page-header__title .h1__main { display: block; }
.page-header__title:not([style*="italic"]) em { font-style: normal; color: inherit; }
.page-header__deck { color: var(--fc-ink-2); text-wrap: pretty; }
.page-header__meta { gap: 8px; letter-spacing: 0; }
.page-header__meta > * { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--fc-neutral-200); border-radius: 4px; padding: 3px 9px;
  color: var(--fc-ink-2); line-height: 1.45; }
main h2 { font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }

/* ---------- Surfaces ---------- */
.cell-panel, .scoreboard, .constellation-figure, .fciscore, .atlas__matryoshka, .atlas__fci-card, .telescope,
.fcimap__card, .bench-summary, .bench-grid, .cell-frame, .intake-grid, .sov-pub, .sov-auth, .src-add {
  background: #fff; border-radius: 4px; }
.netmap, .fcimap__stage, .phase-canvas-wrap { border-radius: 4px; overflow: hidden; }
.fciact__item a, .queue__action, .drill-selector__chip, .btn { border-radius: 4px; }

/* ---------- The workbench's rows under the menu ---------- */
/* the city chooser sits at the end of the section bar as its one control, a pill like the menu's */
.masthead__city { border-radius: 100px; background: #fff; padding: .3rem .85rem .3rem .9rem; font-size: .7rem; width: 100%; }
.masthead__city select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.subbar { background: transparent; }

/* ---------- Way-on cards ---------- */
.next3__card { background: #fff; border-color: var(--fc-neutral-200); border-radius: 4px; }
.next3__card:hover, .next3__card:focus-visible { border-color: var(--fc-ink); }

/* The network map: OpenStreetMap tiles turned dark, places over them */
.netpanel { margin: 0; position: relative; aspect-ratio: 11/10; background: var(--fc-ink); border-radius: 4px;
  overflow: hidden; color: var(--fc-paper); isolation: isolate; }
.netpanel__map { position: absolute; inset: 0; background: var(--fc-ink); }
/* These rules must beat leaflet.css, which some pages load after this file, and must match both a
   map inside a panel (.netpanel .leaflet-container) and a map that is the container (.netmap). */
.netpanel .leaflet-container, .netmap.leaflet-container { background: var(--fc-ink); font-family: var(--fc-font-body); }
:is(.netpanel, .netmap) .leaflet-pane.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.95) contrast(0.85); }
/* fractional zoom leaves hairline seams between tiles; a one-pixel overlap closes them. Leaflet blends
   tiles plus-lighter, which the dark filter turns into a dark line where they overlap, so blend normally */
:is(.netpanel, .netmap) .leaflet-tile-pane img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }
:is(.netpanel, .netmap) .leaflet-control-container .leaflet-control-attribution { background: rgba(23,23,23,0.7); color: var(--fc-neutral-400); font-size: 10px; }
:is(.netpanel, .netmap) .leaflet-control-container .leaflet-control-attribution a { color: var(--fc-neutral-300); }
:is(.netpanel, .netmap) .leaflet-control-container .leaflet-control-zoom a { background: var(--fc-ink); color: var(--fc-paper); border-color: rgba(249,245,242,0.25); }
:is(.netpanel, .netmap) .leaflet-control-container .leaflet-control-zoom { border: 1px solid rgba(249,245,242,0.25); border-radius: 4px; overflow: hidden; }
.netpanel__cap { position: absolute; left: 18px; bottom: 14px; right: 18px; z-index: 1000; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.02em; color: var(--fc-neutral-300); }
.netpanel__cap b { color: var(--fc-paper); font-weight: 500; }
.netpanel__key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: 0; }
.netpanel__key--partial { background: var(--fc-web-orange); }
.netpanel__key--sim { background: var(--fc-red); }
.netpanel__key--off { background: var(--fc-neutral-500); }
.netpanel__key--complete { background: var(--fc-green); }

/* the map page's map: the same dark map at full width, its popups white cards */
.netmap { background: var(--fc-ink); border: 1px solid var(--fc-ink); border-radius: 4px; overflow: hidden; }
.netmap .glass--a { top: 14px; left: 14px; }
.netmap .leaflet-popup-content-wrapper { border-radius: 4px; box-shadow: var(--fc-shadow-md); font-family: var(--fc-font-body); }
.netmap .leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.netmap .leaflet-popup-content a { color: var(--fc-ink); }
.netmap__legend .netpanel__key:first-child { margin-left: 0; }
.netmap__legend-note { margin-left: 14px; }
/* the partial places are named on the map */
:is(.netpanel, .netmap) .leaflet-pane .leaflet-tooltip.netlabel { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 4px;
  color: var(--fc-paper); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500;
  text-shadow: 0 0 3px var(--fc-ink), 0 0 6px var(--fc-ink); }
:is(.netpanel, .netmap) .leaflet-pane .leaflet-tooltip.netlabel::before { display: none; }

.glass { position: absolute; z-index: 1000; max-width: 240px; padding: 12px 14px; border-radius: 4px;
  background: rgba(23,23,23,0.55); border: 1px solid rgba(249,245,242,0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  color: var(--fc-paper); font-size: 0.84rem; line-height: 1.45; }
.glass__tag { display: block; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-neutral-300); margin-bottom: 4px; }
.glass strong { display: block; font-family: var(--fc-font-display); font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
.glass--a { top: 18px; left: 18px; }
.glass--b { right: 18px; bottom: 42px; }
:is(.netpanel, .netmap) .glass a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.glass .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-web-orange); margin-right: 6px; vertical-align: 1px; }

@media (max-width: 980px) { .netpanel { aspect-ratio: 4/3; } }
@media (max-width: 520px) {
  .netpanel { aspect-ratio: 1/1; }
  .glass { display: none; }   /* on a phone the map names the partial places itself */
  .netpanel__cap { left: 12px; right: 12px; bottom: 10px; font-size: 0.62rem; white-space: normal; line-height: 1.5; }
}