/* ==========================================================================
   PATHWAY — DIAGRAMS
   Six reusable figures, all built from the logo's geometry:
   two solid waypoints leading to one ringed destination.
     1. .ppath      Permit Path routing diagram  (SIGNATURE)
     2. .planstack  Isometric plan-set stack
     3. .gantt      Jurisdiction timeline bars
     4. .dmatrix    Department routing grid
     5. .dayfield   Dot-matrix day field
     6. .wtrack     Waypoint progress track
   ========================================================================== */

/* Diagrams keep their internal scale on small screens rather than crushing
   their labels — scroll horizontally instead. */
/* Two layouts, swapped by media query. The wide one is 1040 units across and
   would need sideways scrolling on a phone; the tall one is 360 and fits. */
.ppath-fig { display: block; }
.ppath-frame { max-width: 100%; }
.ppath-frame > svg { width: 100%; height: auto; display: block; }
/* Specificity has to match `.ppath-frame > svg` above, or display:block wins. */
.ppath-frame > .ppath--tall { display: none; }
@media (max-width: 699px) {
  .ppath-frame > .ppath--wide { display: none; }
  .ppath-frame > .ppath--tall { display: block; }
}
.figcap {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: var(--hair) solid var(--rule-on-dark);
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-mut);
}
.panel--light .figcap, .figcap--light { border-color: var(--rule); color: var(--text-muted); }
.figcap__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.figcap__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.figcap__swatch--transit { background: var(--sky); }
.figcap__swatch--done { background: var(--steel); }
.figcap__swatch--corr { background: var(--red-ink); }

.figcap__scroll { display: none; }  /* retired — nothing scrolls sideways now */

/* ==========================================================================
   1. PERMIT PATH — animated routing diagram
   ========================================================================== */
.ppath { width: 100%; height: auto; overflow: visible; }

.ppath__wire {
  fill: none; stroke: var(--graphite-600); stroke-width: 1.5;
}
.ppath__wire--live { stroke: var(--sky); stroke-opacity: 0; transition: stroke-opacity var(--d-base) var(--ease); }
/* draughtsman's dimension bracket */
.ppath__dim { fill: none; stroke: var(--graphite-600); stroke-width: 1; }
.ppath__wire--live.is-live { stroke-opacity: .9; }

/* the correction return arc — dashed, red pen, always crawling backwards */
.ppath__wire--corr {
  stroke: var(--red-ink); stroke-width: 1.5;
  stroke-dasharray: 5 5; stroke-opacity: .85;
  animation: corr-crawl 1.4s linear infinite;
}
@keyframes corr-crawl { to { stroke-dashoffset: -20; } }

/* nodes: waypoint 1 & 2 are solid dots, the destination is ringed */
.ppath__node { fill: var(--graphite-400); transition: fill var(--d-base) var(--ease), r var(--d-base) var(--ease); }
.ppath__node.is-active { fill: var(--sky); }
.ppath__node.is-done   { fill: var(--steel); }

.ppath__ring {
  fill: none; stroke: var(--graphite-600); stroke-width: 6;
  transition: stroke var(--d-slow) var(--ease);
}
.ppath__ring.is-done { stroke: var(--steel); }
.ppath__core { fill: var(--graphite-600); transition: fill var(--d-slow) var(--ease); }
.ppath__core.is-done { fill: var(--steel); }

/* the destination pulses once when the permit is issued */
.ppath__pulse {
  fill: none; stroke: var(--steel); stroke-width: 2;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.ppath__pulse.is-firing { animation: pulse-out 1200ms var(--ease-out) forwards; }
@keyframes pulse-out {
  0%   { opacity: .8; transform: scale(.55); }
  100% { opacity: 0;  transform: scale(1.7); }
}

/* department review boxes */
.ppath__dept { fill: rgba(44,51,58,.55); stroke: var(--graphite-600); stroke-width: 1; rx: 2; }
.ppath__dept.is-reviewing { fill: rgba(125,180,226,.1); stroke: var(--sky); }
.ppath__dept.is-cleared   { fill: rgba(31,86,136,.14); stroke: var(--steel); }
.ppath__dept-bar { fill: var(--graphite-600); transition: fill var(--d-base) var(--ease); }
.ppath__dept-bar.is-reviewing { fill: var(--sky); }
.ppath__dept-bar.is-cleared { fill: var(--steel); }

/* labels */
.ppath__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--offwhite);
}
.ppath__sub {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; fill: var(--graphite-400);
}
.ppath__sub--corr { fill: var(--red-ink); }
.ppath__sub--accent { fill: var(--sky); }

/* the travelling submittal */
.ppath__token { fill: var(--sky); }
.ppath__token-halo { fill: var(--sky); opacity: .18; }
.ppath__travel { fill: none; stroke: none; }

/* round counter chip */
.ppath__chip { fill: var(--graphite); stroke: var(--red-ink); stroke-width: 1; rx: 10; }
.ppath__chip-text {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; fill: var(--red-ink);
}

/* ==========================================================================
   2. ISOMETRIC PLAN STACK — the plan set, sheet by sheet
   ========================================================================== */
.planstack {
  --sheet-w: 260px; --sheet-h: 190px; --spread: 26px;
  display: grid; place-items: center;
  min-height: 400px; padding: var(--s-6) 0;
  perspective: 1400px;
}
.planstack__inner {
  position: relative;
  width: var(--sheet-w); height: var(--sheet-h);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
}
.planstack__sheet {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(44,51,58,.96), rgba(29,35,40,.96));
  border: var(--hair) solid var(--graphite-600);
  border-radius: 2px;
  transform: translateZ(calc(var(--i) * var(--spread)));
  transition: transform var(--d-slow) var(--ease-out), border-color var(--d-base) var(--ease);
  display: grid; align-content: space-between;
  padding: 14px;
}
/* faint sheet linework so each layer reads as a drawing, not a slab */
.planstack__sheet::after {
  content: ""; position: absolute; inset: 10px;
  border: var(--hair) solid rgba(240,242,244,.07);
  background-image:
    linear-gradient(to right,  rgba(240,242,244,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,242,244,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.planstack__code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--sky); position: relative; z-index: 1;
}
.planstack__name {
  font-family: var(--font-mono); font-size: 9px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite-400);
  position: relative; z-index: 1; justify-self: end;
}
/* hover / in-view: the set fans apart */
.planstack:hover .planstack__inner,
.planstack.is-open .planstack__inner { --spread: 44px; }
.planstack:hover .planstack__sheet { border-color: var(--steel); }
@media (prefers-reduced-motion: reduce) {
  .planstack__sheet { transition: none; }
}
@media (max-width: 640px) { .planstack { --sheet-w: 200px; --sheet-h: 150px; min-height: 320px; } }

/* ==========================================================================
   3. GANTT — how long a jurisdiction actually takes
   ========================================================================== */
.gantt { display: grid; gap: var(--s-2); }
.gantt__row {
  display: grid; grid-template-columns: 8.5rem minmax(0,1fr) 4rem;
  gap: var(--s-4); align-items: center;
}
.gantt__label {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.gantt__track {
  position: relative; height: 26px;
  background: rgba(34,40,46,.05);
  border-radius: 2px; overflow: hidden;
}
.gantt__bar {
  position: absolute; inset-block: 0; left: 0;
  display: flex; align-items: stretch;
  width: var(--w, 50%);
  transform-origin: left center;
  animation: gantt-grow var(--d-slow) var(--ease-out) both;
}
@keyframes gantt-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gantt__seg { height: 100%; position: relative; }
.gantt__seg--review { background: var(--steel); flex: var(--f, 1); }
.gantt__seg--wait   { background: rgba(31,86,136,.28); flex: var(--f, 1); }
.gantt__seg--corr   {
  background: var(--red-ink); flex: var(--f, 1);
  background-image: linear-gradient(135deg, rgba(255,255,255,.22) 25%, transparent 25%,
                    transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%);
  background-size: 7px 7px;
}
.gantt__days {
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--text);
}
.gantt__row--ours .gantt__days { color: var(--accent); }
.gantt__row--ours .gantt__label { color: var(--text); }
.panel .gantt__track, .on-dark .gantt__track { background: rgba(240,242,244,.07); }
.panel .gantt__label, .on-dark .gantt__label { color: var(--text-on-dark-mut); }
.panel .gantt__days, .on-dark .gantt__days { color: var(--offwhite); }
.panel .gantt__row--ours .gantt__days, .on-dark .gantt__row--ours .gantt__days { color: var(--sky); }
@media (max-width: 640px) {
  .gantt__row { grid-template-columns: 6.5rem minmax(0,1fr) 3.25rem; gap: var(--s-3); }
}

/* ==========================================================================
   4. DEPARTMENT MATRIX — which counters a project has to clear
   ========================================================================== */
.dmatrix { border: var(--hair) solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.dmatrix__head, .dmatrix__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.4fr) repeat(var(--cols, 5), minmax(0, 1fr));
}
.dmatrix__head { background: rgba(34,40,46,.03); border-bottom: var(--hair) solid var(--rule); }
.dmatrix__row + .dmatrix__row { border-top: var(--hair) solid var(--rule); }
.dmatrix__cell {
  padding: var(--s-3);
  border-left: var(--hair) solid var(--rule);
  display: grid; place-items: center; min-height: 3rem;
}
.dmatrix__cell:first-child { border-left: 0; place-items: center start; }
.dmatrix__th {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted);
  text-align: center; line-height: 1.35;
}
.dmatrix__rowhead {
  font-size: var(--t-small); font-weight: 500; line-height: 1.3;
}
.dmatrix__dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: var(--hair) solid var(--rule-strong); background: transparent;
}
.dmatrix__dot--on { background: var(--steel); border-color: var(--steel); }
.dmatrix__dot--maybe {
  border-color: var(--steel);
  background: linear-gradient(90deg, var(--steel) 50%, transparent 50%);
}
.dmatrix__legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.dmatrix__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (max-width: 700px) {
  .dmatrix__head, .dmatrix__row { grid-template-columns: minmax(5.5rem,1.2fr) repeat(var(--cols,5), minmax(0,1fr)); }
  .dmatrix__cell { padding: var(--s-2); min-height: 2.5rem; }
}

/* ==========================================================================
   5. DAY FIELD — one square per calendar day lost to review
   ========================================================================== */
.dayfield { display: flex; flex-wrap: wrap; gap: 3px; max-width: 34rem; --df-empty: rgba(240,242,244,.1); }
.dayfield__d {
  width: 10px; height: 10px; border-radius: 1px;
  background: var(--df-empty);
}
.dayfield__d--wait  { background: var(--graphite-600); }
.dayfield__d--corr  { background: var(--red-ink); }
.dayfield__d--saved { background: var(--sky); }
.dayfield__d--done  { background: var(--steel); }
/* light surfaces only need a different EMPTY square, not different modifiers */
.panel--light .dayfield { --df-empty: rgba(34,40,46,.09); }

/* ==========================================================================
   6. WAYPOINT TRACK — the logo as a live status stepper
   ========================================================================== */
.wtrack { display: grid; gap: 0; counter-reset: wp; }
.wtrack__step {
  position: relative;
  display: grid; grid-template-columns: 2.75rem minmax(0,1fr);
  gap: var(--s-4); padding-bottom: var(--s-6);
}
.wtrack__step:last-child { padding-bottom: 0; }
/* connector between waypoints */
.wtrack__step:not(:last-child)::before {
  content: ""; position: absolute;
  left: 1.375rem; top: 1.5rem; bottom: 0;
  width: var(--hair); background: var(--rule);
  transform: translateX(-50%);
}
.wtrack__step--done:not(:last-child)::before { background: var(--steel); }
.wtrack__mark {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  position: relative; z-index: 1;
}
.wtrack__dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rule-strong);
  transition: background var(--d-base) var(--ease);
}
.wtrack__step--done .wtrack__dot { background: var(--graphite); }
/* final waypoint = the ringed destination from the mark */
.wtrack__step--dest .wtrack__mark::after {
  content: ""; position: absolute; inset: 0.35rem;
  border: 4px solid var(--rule-strong); border-radius: 50%;
  transition: border-color var(--d-base) var(--ease);
}
.wtrack__step--dest .wtrack__dot { width: 11px; height: 11px; }
.wtrack__step--dest.wtrack__step--done .wtrack__mark::after { border-color: var(--steel); }
.wtrack__step--dest.wtrack__step--done .wtrack__dot { background: var(--steel); }
.wtrack__body { padding-top: 0.375rem; }
.wtrack__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.012em; margin: 0 0 var(--s-2); }
.wtrack__meta {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: var(--s-2);
}
.wtrack__text { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
.panel .wtrack__step::before, .on-dark .wtrack__step::before { background: var(--rule-on-dark); }
.panel .wtrack__dot, .on-dark .wtrack__dot { background: var(--graphite-600); }
.panel .wtrack__step--done .wtrack__dot, .on-dark .wtrack__step--done .wtrack__dot { background: var(--offwhite); }
.panel .wtrack__text, .on-dark .wtrack__text { color: var(--text-on-dark-mut); }
.panel .wtrack__meta, .on-dark .wtrack__meta { color: var(--sky); }
.panel .wtrack__step--dest .wtrack__mark::after,
.on-dark .wtrack__step--dest .wtrack__mark::after { border-color: var(--graphite-600); }

/* Long single-word department names must wrap rather than collide. */
.dmatrix__th { overflow-wrap: anywhere; hyphens: auto; }

/* Day labels carry published windows ("4–8 wks", "COA, then 15–20"), which are
   wider than a bare day count. Give the column room and let it wrap. */
.gantt__row { grid-template-columns: 8.5rem minmax(0,1fr) 7rem; }
.gantt__days { line-height: 1.3; }
@media (max-width: 640px) {
  .gantt__row { grid-template-columns: 6rem minmax(0,1fr) 5rem; }
}

/* `.panel .gantt__*` rules above also match `.panel--light`, putting off-white
   text on a white card. diagrams.css loads after components.css, so the
   correction has to be here rather than with the other light-panel fixes. */
.panel--light .gantt__label { color: var(--text-muted); }
.panel--light .gantt__days { color: var(--text); }
.panel--light .gantt__track { background: rgba(34,40,46,.05); }
.panel--light .gantt__row--ours .gantt__days { color: var(--accent); }

/* The tall layout is 360 units wide against the wide one's 1040, so it renders
   at roughly 0.86 scale instead of 0.30. Nudge the type up so labels land near
   11px on a phone rather than 3px. */
.ppath--tall .ppath__label { font-size: 13px; }
.ppath--tall .ppath__sub { font-size: 11px; }
.ppath--tall .ppath__chip-text { font-size: 10.5px; }