/* village.css — LastStop "One brand. A Village behind it." — embedded in the P1 site.
   Page chrome (site-header/footer/body) comes from /assets/site.css; this file styles
   only the three diagrams, the details panel, and the in-page diagram toolbar. */

:root{
  --stone:#E9E8E4;
  --card:#FAFAF8;
  --ink:#1B1D20;
  --ink-soft:#4B4E52;
  --gold:#A57A2C;
  --gold-text:#7E5C1E;
  --rust:#A3472B;
  --violet:#5B4B8A;
  --blue:#2F5D8A;
  --line:#C9C6BE;
  --focus:#2F5D8A;
  --radius:8px;
}

[data-skin="clean"]{
  --gold:#6E6E66;
  --gold-text:#55554F;
  --rust:#6E6E66;
  --violet:#6E6E66;
  --blue:#3A5A75;
  --line:#D6D4CE;
}

/* ---------- in-page diagram toolbar (sits below the real site header) ---------- */
.diagram-toolbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:16px 0 14px;
}
.diagram-toolbar .diagram-nav{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.diagram-toolbar .diagram-nav a{
  font:500 13px/1.3 'IBM Plex Sans';
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.diagram-toolbar .diagram-nav a:hover,.diagram-toolbar .diagram-nav a:focus-visible{border-bottom-color:var(--gold);}
.skin-toggle{
  margin-left:auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  background:var(--stone);
  border:1px solid var(--ink);
  color:var(--ink);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
}
.skin-toggle:hover{background:var(--card);}

section.diagram-section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 24px 32px;
  margin-bottom:40px;
  scroll-margin-top:130px;
}

.diagram-kicker{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 6px;
}

section.diagram-section h2{font-size:24px;margin-bottom:6px;}
.diagram-sub{color:var(--ink-soft);font-size:15px;margin:0 0 20px;max-width:64ch;}
.diagram-frame{width:100%;max-width:1180px;margin:0 auto;}
.diagram-scroll{width:100%;overflow-x:auto;}
.diagram-scroll svg{display:block;min-width:1040px;}
/* min-width keeps rendered scale at or above the SVG's own viewBox width (1024) so
   embedded text never shrinks below ~12px effective size on a narrow viewport.
   #rights-svg and #funding-svg additionally relayout to a single column below
   700px (see village.js initRightsLayoutSwap/initFundingLayoutSwap) so the
   whole diagram is visible without scrolling on mobile — the narrower is-mobile
   viewBox below overrides this min-width back down to fit the column width. */
#rights-svg.is-mobile{min-width:0;width:100%;max-width:560px;}
#funding-svg.is-mobile{min-width:0;width:100%;max-width:480px;}
svg{width:100%;height:auto;display:block;}
.caption{font-size:13px;font-style:italic;color:var(--ink-soft);margin-top:14px;max-width:70ch;}

/* ---------- Diagram 1: Village 20 ---------- */
#village-ring-svg text{font-family:'IBM Plex Sans',Arial,sans-serif;fill:var(--ink);}
#village-ring-svg .module{cursor:pointer;}
#village-ring-svg .module-box{width:140px;height:64px;x:0;y:0;rx:8;ry:8;fill:var(--card);stroke:var(--gold);stroke-width:1.6;}
#village-ring-svg .module:hover .module-box{stroke:var(--blue);stroke-width:2;}
#village-ring-svg .module:focus{outline:none;}
#village-ring-svg .module:focus-visible .module-box{stroke:var(--focus);stroke-width:3;}
#village-ring-svg .module-num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:17px;fill:var(--gold-text);}
#village-ring-svg .module-fo{width:116px;height:34px;x:12px;y:28px;}
.module-label{font-family:'IBM Plex Sans',Arial,sans-serif;font-size:14px;line-height:1.16;color:var(--ink);}
#village-ring-svg #center-node .module-box,#village-ring-svg #center-node rect{width:300px;height:140px;x:0;y:0;rx:10;ry:10;fill:var(--stone);stroke:var(--ink);stroke-width:2;}
#village-ring-svg #center-node .module-fo{width:272px;height:112px;x:14px;y:14px;}
.center-label{font-family:'IBM Plex Serif',Georgia,serif;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);text-align:center;}

@media (prefers-reduced-motion:no-preference){
  #village-ring-svg .module-box,.panel,.panel-backdrop{transition:stroke .15s ease,opacity .15s ease;}
}

#village-ring-svg #center-node{transform:translate(440px,520px);}
#village-ring-svg .module[data-module="01"]{transform:translate(520.0px,58.0px);}
#village-ring-svg .module[data-module="02"]{transform:translate(674.5px,82.5px);}
#village-ring-svg .module[data-module="03"]{transform:translate(813.9px,153.5px);}
#village-ring-svg .module[data-module="04"]{transform:translate(924.5px,264.1px);}
#village-ring-svg .module[data-module="05"]{transform:translate(995.5px,403.5px);}
#village-ring-svg .module[data-module="06"]{transform:translate(1020.0px,558.0px);}
#village-ring-svg .module[data-module="07"]{transform:translate(995.5px,712.5px);}
#village-ring-svg .module[data-module="08"]{transform:translate(924.5px,851.9px);}
#village-ring-svg .module[data-module="09"]{transform:translate(813.9px,962.5px);}
#village-ring-svg .module[data-module="10"]{transform:translate(674.5px,1033.5px);}
#village-ring-svg .module[data-module="11"]{transform:translate(520.0px,1058.0px);}
#village-ring-svg .module[data-module="12"]{transform:translate(365.5px,1033.5px);}
#village-ring-svg .module[data-module="13"]{transform:translate(226.1px,962.5px);}
#village-ring-svg .module[data-module="14"]{transform:translate(115.5px,851.9px);}
#village-ring-svg .module[data-module="15"]{transform:translate(44.5px,712.5px);}
#village-ring-svg .module[data-module="16"]{transform:translate(20.0px,558.0px);}
#village-ring-svg .module[data-module="17"]{transform:translate(44.5px,403.5px);}
#village-ring-svg .module[data-module="18"]{transform:translate(115.5px,264.1px);}
#village-ring-svg .module[data-module="19"]{transform:translate(226.1px,153.5px);}
#village-ring-svg .module[data-module="20"]{transform:translate(365.5px,82.5px);}

#village-ring-svg.is-mobile #center-node{transform:translate(30px,20px);}
#village-ring-svg.is-mobile #center-node .module-box,#village-ring-svg.is-mobile #center-node rect{width:420px;height:100px;}
#village-ring-svg.is-mobile #center-node .module-fo{width:392px;height:84px;}
#village-ring-svg.is-mobile .module-box{width:420px;}
#village-ring-svg.is-mobile .module-fo{width:396px;}
#village-ring-svg.is-mobile .module[data-module="01"]{transform:translate(30px,150.0px);}
#village-ring-svg.is-mobile .module[data-module="02"]{transform:translate(30px,228.0px);}
#village-ring-svg.is-mobile .module[data-module="03"]{transform:translate(30px,306.0px);}
#village-ring-svg.is-mobile .module[data-module="04"]{transform:translate(30px,384.0px);}
#village-ring-svg.is-mobile .module[data-module="05"]{transform:translate(30px,462.0px);}
#village-ring-svg.is-mobile .module[data-module="06"]{transform:translate(30px,562.0px);}
#village-ring-svg.is-mobile .module[data-module="07"]{transform:translate(30px,640.0px);}
#village-ring-svg.is-mobile .module[data-module="08"]{transform:translate(30px,718.0px);}
#village-ring-svg.is-mobile .module[data-module="09"]{transform:translate(30px,796.0px);}
#village-ring-svg.is-mobile .module[data-module="10"]{transform:translate(30px,874.0px);}
#village-ring-svg.is-mobile .module[data-module="11"]{transform:translate(30px,974.0px);}
#village-ring-svg.is-mobile .module[data-module="12"]{transform:translate(30px,1052.0px);}
#village-ring-svg.is-mobile .module[data-module="13"]{transform:translate(30px,1130.0px);}
#village-ring-svg.is-mobile .module[data-module="14"]{transform:translate(30px,1208.0px);}
#village-ring-svg.is-mobile .module[data-module="15"]{transform:translate(30px,1286.0px);}
#village-ring-svg.is-mobile .module[data-module="16"]{transform:translate(30px,1386.0px);}
#village-ring-svg.is-mobile .module[data-module="17"]{transform:translate(30px,1464.0px);}
#village-ring-svg.is-mobile .module[data-module="18"]{transform:translate(30px,1542.0px);}
#village-ring-svg.is-mobile .module[data-module="19"]{transform:translate(30px,1620.0px);}
#village-ring-svg.is-mobile .module[data-module="20"]{transform:translate(30px,1698.0px);}

.module-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.module-list li{margin:0;}
.module-list button{width:100%;text-align:left;background:var(--stone);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;cursor:pointer;font-family:'IBM Plex Sans';font-size:13px;color:var(--ink);}
.module-list button .num{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--gold-text);margin-right:6px;}
.module-list button:hover,.module-list button:focus-visible{border-color:var(--blue);outline:2px solid var(--focus);outline-offset:1px;}

.panel-backdrop{position:fixed;inset:0;background:rgba(27,29,32,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;}
.panel-backdrop[hidden]{display:none;}
.panel{background:var(--card);border:1px solid var(--ink);border-radius:12px;max-width:480px;width:100%;padding:26px 26px 22px;box-shadow:0 12px 34px rgba(27,29,32,.25);}
.panel h3{font-size:19px;margin-bottom:4px;}
.panel .panel-purpose{font-size:14px;color:var(--ink-soft);margin:0 0 16px;}
.panel dl{margin:0;}
.panel dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-text);margin-top:12px;}
.panel dd{margin:2px 0 0;font-size:14px;color:var(--ink);}
.panel-close{margin-top:22px;background:var(--ink);color:var(--card);border:none;border-radius:999px;padding:9px 20px;font-family:'IBM Plex Sans';font-size:13px;font-weight:600;cursor:pointer;}
.panel-close:hover{background:#000;}
.panel-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}

/* ---------- Diagram 2: rights flow ---------- */
#rights-svg text{font-family:'IBM Plex Sans',Arial,sans-serif;fill:var(--ink);}
#rights-svg .rights-title{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:22px;}
#rights-svg .col-header{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:16px;}
#rights-svg .boundary{stroke:var(--rust);stroke-width:2;stroke-dasharray:6 6;}
#rights-svg .box-partner rect{fill:var(--card);stroke:var(--blue);stroke-width:1.6;}
#rights-svg .box-laststop rect{fill:var(--card);stroke:var(--violet);stroke-width:1.6;}
.rights-label{font-family:'IBM Plex Sans';font-size:13px;font-weight:500;line-height:1.25;color:var(--ink);}
.rights-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold-text);margin-top:3px;}

/* ---------- rights-flow mobile stack (2 columns -> 1 column, real relayout) ----------
   Left column (12 "what the partner receives" items) keeps its desktop x/y — it already
   sits in a viewBox-560-wide left margin. The 3 "what stays with LastStop" items and
   their header translate down to sit below it as a second stacked block; the boundary
   line and the desktop title's centering translate accordingly. See village.js
   initRightsLayoutSwap for the matching viewBox swap (0 0 1024 950 -> 0 0 560 1200). */
#rights-svg.is-mobile #rights-title-text{transform:translateX(-232px);}
#rights-svg.is-mobile #rights-boundary{display:none;}
#rights-svg.is-mobile #rights-col-header-right{transform:translate(-504px,855px);}
#rights-svg.is-mobile #rights-laststop-1{transform:translate(-504px,587px);}
#rights-svg.is-mobile #rights-laststop-2{transform:translate(-504px,553px);}
#rights-svg.is-mobile #rights-laststop-3{transform:translate(-504px,519px);}

/* ---------- Diagram 3: funding flow ---------- */
#funding-svg text{font-family:'IBM Plex Sans',Arial,sans-serif;fill:var(--ink);}
#funding-svg .funding-title{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:22px;}
#funding-svg .flow-line{stroke:var(--ink);stroke-width:2;fill:none;}
#funding-svg .flow-label{font-family:'IBM Plex Mono',monospace;font-size:12px;fill:var(--ink-soft);}
#funding-svg .box-tier rect{fill:var(--card);stroke:var(--gold);stroke-width:1.6;}
#funding-svg .box-media rect{fill:var(--card);stroke:var(--blue);stroke-width:1.6;}
#funding-svg .box-reserve rect{fill:var(--card);stroke:var(--rust);stroke-width:1.6;}
#funding-svg .box-launch rect{fill:var(--card);stroke:var(--violet);stroke-width:1.6;}
#funding-svg .box-note rect{fill:var(--stone);stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 5;}
.funding-figure{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;color:var(--ink);}
.funding-sub{font-family:'IBM Plex Sans';font-size:12px;color:var(--ink-soft);line-height:1.25;}
.funding-note{font-family:'IBM Plex Sans';font-style:italic;font-size:13px;color:var(--ink);line-height:1.3;}

/* ---------- funding-flow mobile stack (row of 3 + 2 side-by-side -> single column
   of 6, real relayout at full nominal type size) — see village.js
   initFundingLayoutSwap for the matching viewBox swap (0 0 1024 410 -> 0 0 480 600).
   Connector arrows are desktop-only: order is implied by vertical stacking on mobile,
   and the arrows' geometry does not translate cleanly to the new positions. ---------- */
#funding-svg.is-mobile #funding-title-text{transform:translateX(-272px);}
#funding-svg.is-mobile #funding-arrows{display:none;}
#funding-svg.is-mobile #funding-tier1{transform:translate(-92px,40px);}
#funding-svg.is-mobile #funding-tier2{transform:translate(-372px,116px);}
#funding-svg.is-mobile #funding-tier3{transform:translate(-652px,192px);}
#funding-svg.is-mobile #funding-media{transform:translate(-22px,128px);}
#funding-svg.is-mobile #funding-license{transform:translate(-502px,244px);}
#funding-svg.is-mobile #funding-note{display:none;}
#funding-svg:not(.is-mobile) #funding-note-mobile{display:none;}

@media (max-width:700px){
  section.diagram-section{padding:20px 16px 26px;}
  .diagram-toolbar{padding:12px 0;}
}