.ground { margin: 0; background: var(--ground); color: var(--ink-2); --flat: var(--tile); }



.tiles { max-width: var(--tile-col); margin: 0 auto; padding: var(--s-4) var(--tile-gutter) var(--s-8);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.tiles > * { grid-column: 1 / -1; min-width: 0; }
.tiles > .half-large, .tiles > .half-small { grid-column: auto; }

.tiles > :is(.call, .card, .callout, .rule-box, .panel, .gallery-card) { border-radius: var(--r-4); margin: 0;
  background: var(--tile); --flat: var(--ground); }   
.tiles > .folio { max-width: none; margin: 0; padding: var(--s-6) 0 0; }
.tiles > [id] { scroll-margin-top: calc(var(--tile-nav-h) + var(--s-4)); }   



.page-title { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-h1); font-weight: var(--fw-black);
  line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--ink); }

.eyebrow { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin: var(--s-6) 0 0; font-size: var(--fs-meta); font-weight: var(--fw-bold); line-height: 1.4;
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); }
.eyebrow .count { font-family: var(--mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); color: var(--signal-text); text-transform: uppercase; }
.tile .eyebrow { margin: 0; }
.page-title + .eyebrow { margin-top: 0; }
@media (max-width: 735px) { .page-title { font-size: var(--fs-h2); margin-top: var(--s-4); } }



.tile { position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--tile); color: var(--ink-2); border: 0; border-radius: var(--r-4); box-shadow: none;
  padding: var(--s-5); --flat: var(--ground); }
.tile.full-large { min-height: var(--tile-full-large-h); }   
.tile.full-small { min-height: var(--tile-full-small-h); }   
.tile.half-large { min-height: var(--tile-half-large-h); }   
.tile.half-small { min-height: var(--tile-half-small-h); }   

.tile.canvas { background: var(--canvas); color: var(--ink-2); --flat: var(--surface-2); }

.cover-corners { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.cover-corners .corner { position: static; max-width: none; }
.tile-read { display: block; }
.tile-foot { margin-top: auto; padding-top: var(--s-4); }

.headline { margin: var(--s-4) 0 0; font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); color: var(--ink); max-width: 24ch; }
.summary { margin: var(--s-3) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-width: var(--measure-copy); }
.tile-title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: var(--ls-head); color: var(--ink); }
.tile-title.small { font-size: var(--fs-18); line-height: 1.2; }
.tile-h { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--ink); }

.tile-h .counter { font-family: var(--mono); font-size: var(--fs-meta); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--ink-3); }
.tile-sub { margin: var(--s-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); }
.tile-meta { margin: var(--s-2) 0 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-3); }
.tile-meta .counter { font-family: var(--mono); letter-spacing: var(--ls-mono); }
.eyebrow + .tile-title, .eyebrow + .headline { margin-top: var(--s-3); }
.tile .lede { margin: var(--s-3) 0 0; }

.eyebrow.marked { justify-content: flex-start; align-items: center; gap: var(--s-2); }
@media (max-width: 735px) { .tiles > .half-large, .tiles > .half-small { grid-column: 1 / -1; } }


.tile-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-3); background: var(--ground); }
.tile-cap { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--ink-2); min-width: 0; }
.tile-cap .counter { font-family: var(--mono); letter-spacing: var(--ls-mono); color: var(--ink-3); flex: none; }



.tile-grid { display: grid; gap: var(--tile-grid-gap); }
.tile-grid.review, .tile-grid.big-square { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid.small-square { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 735px) {
  .tile-grid.review, .tile-grid.big-square { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid.small-square { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.review-card, .square { position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--flat, var(--surface-2)); color: var(--ink); border-radius: var(--r-3); text-decoration: none;
  transition: transform var(--press-dur) var(--ease); }
a.review-card:active, a.square:active { transform: scale(var(--press-scale)); }
a.review-card:focus-visible, a.square:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.review-card { height: var(--tile-review-h); padding: var(--s-4); }
.review-card .label { font-size: var(--fs-meta); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--ink-3); }
.review-card .title { margin-top: auto; font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 1.2;
  letter-spacing: var(--ls-head); color: var(--ink); overflow-wrap: anywhere; }

.big-square .square { height: var(--tile-big-square); padding: var(--s-4); }
.big-square .square .label { font-size: var(--fs-h4); font-weight: var(--fw-black); line-height: 1; letter-spacing: var(--ls-head); color: var(--ink); }
.big-square .square .sub { margin-top: auto; align-self: flex-end; text-align: right; font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--ink-2); }
.small-square .square { height: var(--tile-small-square); padding: var(--s-2); align-items: center; justify-content: center; gap: var(--s-1); text-align: center; }
.small-square .square .label { font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: 1.2; color: var(--ink); }
.small-square .square .sub { font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); }


.tile-grid.shelf { grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--tile-grid-gap)) / 4.25); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-3); }
.tile-grid.shelf::-webkit-scrollbar { display: none; }
.tile-grid.shelf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tile-grid.shelf > .review-card { scroll-snap-align: start; }
.review-card .card-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: var(--r-1); background: var(--ground); margin-bottom: var(--s-3); flex: none; }
.review-card .read { margin-top: var(--s-1); font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 735px) {
  .tile-grid.shelf { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * var(--tile-grid-gap)) / 2.25); }
  .review-card .read { -webkit-line-clamp: 1; }
}


.one-line { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acc-head .one-line { flex: 1; }



.step-grid { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.step-col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.step-h { font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); }
.steps { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.step { display: inline-block; flex: none; width: var(--s-5); height: var(--s-5); border-radius: calc(var(--r-1) / 2); box-shadow: inset 0 0 0 1px var(--smoke); }
.step.done { background: var(--ink); box-shadow: none; }
.step.next { background: var(--signal); box-shadow: none; }
.step.waiting { background: var(--mark-waiting); box-shadow: inset 0 0 0 1.5px var(--mark-active); }   
.step.parked { background: var(--mark-parked); box-shadow: inset 0 0 0 1px var(--line-strong); }
.step-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--ink-3); }
.step-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.step-legend .step { width: var(--s-3); height: var(--s-3); }

.rail { list-style: none; margin: 0; padding: 0; }
.rail-row { position: relative; display: grid; grid-template-columns: var(--s-5) minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-2) 0; }
.rail-row::before { content: ''; position: absolute; left: calc(var(--s-5) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--line); }
.rail-row.inked::before { background: var(--ink); }
.rail-row:first-child::before { top: var(--s-4); }
.rail-row:last-child::before { bottom: auto; height: var(--s-4); }
.rail .node { position: relative; z-index: 1; width: var(--s-3); height: var(--s-3); margin: var(--s-1) auto 0; border-radius: var(--r-pill);
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--smoke); }
.rail .node.done { background: var(--ink); box-shadow: none; }
.rail .node.next { background: var(--signal); box-shadow: none; }
.rail .node.waiting { background: var(--mark-waiting); box-shadow: inset 0 0 0 1.5px var(--mark-active); }
.rail .node.parked { background: var(--mark-parked); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rail-step { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.rail-who { margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--ink-3); }
.rail-state { font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 2px; }
@media (max-width: 735px) {
  .rail-row { grid-template-columns: var(--s-5) minmax(0, 1fr); }
  .rail-state { grid-column: 2; padding-top: var(--s-1); }
}



.chip-tabs { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; width: fit-content;
  align-self: center; justify-self: center; margin-inline: auto;   
  gap: var(--s-2); max-width: 100%; padding: var(--s-1); border-radius: calc(var(--control-h) / 2); background: var(--surface-3); }

.chip-tabs .chip { position: relative; z-index: 1; height: calc(var(--control-h) - 2 * var(--s-1)); padding: 0 var(--s-5); border: 0;
  border-radius: var(--r-pill); background: transparent; box-shadow: none; color: var(--ink-2); font-family: var(--grotesk);
  font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; letter-spacing: normal; text-transform: lowercase;
  cursor: pointer; transition: color var(--dur-fast) var(--ease), transform var(--press-dur) var(--ease); }
.chip-tabs .chip:hover { color: var(--ink); }
.chip-tabs .chip:active { transform: scale(var(--press-scale)); }
.chip-tabs .chip:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { color: var(--ink); font-weight: var(--fw-semibold); }

.chip-tabs:not([data-glide="on"]) :where(.chip[aria-selected="true"], .chip[aria-pressed="true"], .chip[aria-current="page"]) {
  background: var(--seg-thumb); box-shadow: var(--seg-shadow); }
.chip-tabs a.chip { text-decoration: none; min-height: var(--target); }   
.chip-tabs .chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.chip-tabs-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r-pill);
  background: var(--seg-thumb); box-shadow: var(--seg-shadow); pointer-events: none;
  transition: transform var(--dur-glide) var(--ease-glide), width var(--dur-glide) var(--ease-glide), opacity var(--dur-fast) var(--ease); }
.chip-tabs-indicator.is-still { transition: none; }
.chip-tabs[data-glide="off"] .chip-tabs-indicator { opacity: 0; }

.chip-tabs[data-glide] .chip { flex-direction: column; justify-content: center; }
.chip-tabs[data-glide] .chip::after { content: attr(data-label); content: attr(data-label) / ""; display: block; height: 0;
  overflow: hidden; visibility: hidden; font-weight: var(--fw-semibold); pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .chip-tabs-indicator { transition: none; } }
@media (max-width: 735px) {
  .chip-tabs .chip { flex: 1 1 auto; justify-content: center; padding: 0 var(--s-2); }
}
.tile.tabpanel { padding: var(--s-5); }



.float-btn, .float-pill, .popout-pill {
  background: var(--glass-sheen), var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(11, 11, 11, .03), var(--glass-shadow); }

.float-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--control-h); height: var(--control-h); border-radius: var(--r-pill); }
.float-btn .icon-btn { width: 100%; height: 100%; color: var(--ink); }

.float-pill { position: fixed; z-index: 35; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-1); padding: calc(var(--s-1) / 2); border-radius: var(--r-pill); }
.float-pill .fp-value { display: flex; flex-direction: column; align-items: center; padding: 0 var(--s-2); line-height: 1.2; white-space: nowrap; }
.float-pill .fp-value b { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--ink); }
.float-pill .fp-value .counter { font-size: var(--fs-meta); color: var(--ink-3); }
.float-pill .icon-btn { color: var(--ink); }
.float-pill .prev .icon { transform: rotate(90deg); }
.float-pill .next .icon { transform: rotate(-90deg); }
@media (max-width: 735px) { .float-pill { bottom: calc(var(--tile-tabbar-h) + var(--tile-gutter) * 2); } }


.popout { position: fixed; z-index: 45; top: var(--s-4); left: var(--s-4); display: flex; align-items: flex-start; gap: var(--s-2);
  max-width: calc(100vw - 2 * var(--s-4)); }

.popout-toggle .icon { transition: transform var(--dur-fast) var(--ease); }
.popout-toggle[aria-expanded="true"] .icon { transform: rotate(45deg); }
.popout-pill { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); min-width: 0;
  padding: calc(var(--s-1) / 2) calc(var(--s-1) / 2) calc(var(--s-1) / 2) var(--s-4);
  border-radius: calc((var(--control-h) + var(--s-1)) / 2); }
.popout-pill[hidden] { display: none; }
.popout-count { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); color: var(--ink-3); white-space: nowrap; }
.popout-count b { color: var(--ink); font-weight: var(--fw-semibold); }
.popout-track { flex: none; width: var(--s-8); height: var(--s-1); border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.popout-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-med) var(--ease); }
.popout-actions { display: flex; gap: var(--s-2); }
@media (max-width: 735px) { .popout-pill { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); } .popout-actions .btn { padding: 0 var(--s-4); } }



.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-2) 0 var(--s-3); }
.previews.one { grid-template-columns: minmax(0, 1fr); }
.previews.phone { grid-template-columns: minmax(0, 390px); }   
.previews figure { margin: 0; min-width: 0; }
.pv { display: block; position: relative; overflow: hidden; border-radius: var(--r-3); background: var(--ground); }
.pv iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.pv:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.previews figcaption { margin-top: var(--s-2); font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); color: var(--ink-3); }
@media (max-width: 735px) { .previews { grid-template-columns: minmax(0, 1fr); } }



[data-mode-toggle] .icon { transition: transform var(--dur-med) var(--ease); }
[data-mode="dark"] [data-mode-toggle] .icon { transform: rotate(180deg); }
.when-dark { display: none; }
[data-mode="dark"] .when-light { display: none; }
[data-mode="dark"] .when-dark { display: block; }

:is([data-mode="dark"], .canvas) .tile :is(.sec-head .idx, .sec-label .no, .need .n, .hero-badge b, .c-br b, .c-tr b) { color: var(--ink-3); }
@media screen and (prefers-color-scheme: dark) {
  :root[data-modes]:not([data-mode="light"]) [data-mode-toggle] .icon { transform: rotate(180deg); }
  :root[data-modes]:not([data-mode="light"]) .when-light { display: none; }
  :root[data-modes]:not([data-mode="light"]) .when-dark { display: block; }
  :root[data-modes]:not([data-mode="light"]) .tile :is(.sec-head .idx, .sec-label .no, .need .n, .hero-badge b, .c-br b, .c-tr b) { color: var(--ink-3); }
}
@media print {
  .navbar, .popout, .float-pill { display: none; }
  .ground { background: var(--paper); }
  .tile { break-inside: avoid; }
}