/* ==========================================================================
   Restore Roofing: wireframe presentation
   Design movement: the drafting sheet. A specification is a working document,
   so the page behaves like one: warm paper, hairline rules, measured ticks,
   numbered sections, and annotation in a single drafting orange.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  --paper:      #f7f6f2;
  --sheet:      #ffffff;
  --sunk:       #efeee9;

  --ink:        #171a1e;
  --ink-2:      #4b535b;
  --ink-3:      #838b93;
  --ink-4:      #a8afb6;

  --rule:       #e3e2dc;
  --rule-2:     #d2d1ca;

  --accent:     #c2410c;
  --accent-2:   #e8722a;
  --accent-wash:#fdf0e8;

  --wire:       #c9ced4;
  --wire-strong:#8d949c;
  --wire-dark:  #3f454b;
  --wire-bg:    #eceded;
  --wire-line:  #d6d9dd;

  --ok:         #1f6f43;

  --rail:       274px;
  --measure:    72ch;
  --radius:     3px;
  --radius-lg:  6px;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --shadow-sm: 0 1px 2px rgba(23, 26, 30, .05);
  --shadow:    0 1px 3px rgba(23, 26, 30, .07), 0 8px 24px -12px rgba(23, 26, 30, .18);
}

/* --- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px;
  font: 600 13px/1 var(--sans); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 640;
  letter-spacing: -.018em;
  line-height: 1.16;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.28rem, 1.05rem + .8vw, 1.62rem); margin-top: 2.4em; }
h3 { font-size: 1.06rem; margin-top: 1.9em; }
h4 { font-size: .95rem; margin-top: 1.5em; }

h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 1em; max-width: var(--measure); }
p.lead { font-size: 1.09rem; color: var(--ink-2); }

strong { font-weight: 640; }
small { font-size: .85rem; color: var(--ink-3); }

.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9em;
}

.mono { font-family: var(--mono); font-size: .84em; }

code, .code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .12em .38em;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

pre.code {
  display: block;
  padding: 12px 14px;
  margin: 0 0 1em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- shell -------------------------------------------------------------- */

.shell { display: flex; align-items: flex-start; min-height: 100vh; }

/* --- rail --------------------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  flex: 0 0 var(--rail);
  width: var(--rail);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-right: 1px solid var(--rule);
  z-index: 20;
}

.rail__head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--rule);
}

.rail__brand {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 680; font-size: 1.02rem; letter-spacing: -.02em;
  text-decoration: none;
  margin-bottom: 3px;
}

.rail__brand span {
  font: 600 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-wash);
  background: var(--accent-wash);
  padding: 3px 5px;
  border-radius: 2px;
}

.rail__sub {
  font: 500 11.5px/1.45 var(--mono);
  color: var(--ink-3);
  margin: 0;
  letter-spacing: .01em;
}

.rail__nav { flex: 1; overflow-y: auto; padding: 14px 12px 24px; }

.rail__group {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 16px 10px 7px;
}
.rail__group:first-child { padding-top: 2px; }

.rail__link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.3;
  transition: background .14s ease, color .14s ease;
}
.rail__link:hover { background: var(--sunk); color: var(--ink); }

.rail__link[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 620;
}

.rail__num {
  font: 600 10px/1 var(--mono);
  color: var(--ink-4);
  min-width: 15px;
  flex: 0 0 auto;
}
.rail__link[aria-current="page"] .rail__num { color: var(--accent); }

.rail__link .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rule-2); flex: 0 0 auto;
}
.rail__link[aria-current="page"] .dot { background: var(--accent); }

.rail__foot {
  padding: 12px 22px 18px;
  border-top: 1px solid var(--rule);
  font: 500 10.5px/1.5 var(--mono);
  color: var(--ink-4);
}

/* --- main --------------------------------------------------------------- */

.main { flex: 1 1 auto; min-width: 0; }

.masthead {
  padding: 40px 56px 30px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--sheet), var(--paper));
}

.masthead__inner { max-width: 1080px; }

.masthead h1 { margin-bottom: .3em; }

.masthead__meta {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.masthead__meta div { min-width: 96px; }
.masthead__meta dt {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 5px;
}
.masthead__meta dd {
  margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4;
}

.content { padding: 44px 56px 96px; }
.content__inner { max-width: 1080px; }

.content--wide .content__inner { max-width: 1240px; }

/* --- section rhythm ----------------------------------------------------- */

.block + .block { margin-top: 58px; }

.rule {
  height: 1px; background: var(--rule); border: 0; margin: 0 0 34px;
}

/* --- cards and grids ---------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }

.card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.card--link {
  text-decoration: none;
  display: block;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.card--link:hover {
  border-color: var(--rule-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card__kicker {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

.card h3 { margin: 0 0 .35em; font-size: 1rem; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.stat {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.stat__n {
  font: 640 1.9rem/1 var(--sans);
  letter-spacing: -.03em;
  display: block;
  margin-bottom: 7px;
}
.stat__l {
  font: 600 9.5px/1.35 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --- tables ------------------------------------------------------------- */

.tablewrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--sheet);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 660px;
}

table.data th {
  text-align: left;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-2);
  background: var(--sunk);
  white-space: nowrap;
  position: sticky; top: 0;
}

table.data td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.5;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #fbfbf9; }

table.data td.k { color: var(--ink); font-weight: 560; }
table.data td.n { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
table.data td.w { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--ink); }

.tag {
  display: inline-block;
  font: 600 10px/1 var(--mono);
  letter-spacing: .04em;
  padding: 4px 7px;
  border-radius: 2px;
  background: var(--sunk);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.tag--commercial { background: var(--accent-wash); color: var(--accent); border-color: #f6ddcd; }
.tag--local      { background: #eef4f0; color: var(--ok); border-color: #d8e8de; }
.tag--info       { background: #eef1f6; color: #3b5b86; border-color: #dbe3ee; }
.tag--none       { background: var(--sunk); color: var(--ink-3); }

.layoutlink {
  font: 500 12px/1.4 var(--mono);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-wash);
}
.layoutlink:hover { border-bottom-color: var(--accent); }

/* --- page tree ---------------------------------------------------------- */

.tree { list-style: none; margin: 0; padding: 0; }

.tree__row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .12s ease;
}
.tree__row:hover { background: var(--sheet); }

.tree__name { font-weight: 560; color: var(--ink); font-size: 14.5px; }
.tree__url {
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.tree__note {
  grid-column: 2 / -1;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.45;
}

.tree__d0 { --ind: 0;  background: var(--sheet); }
.tree__d1 { --ind: 1; }
.tree__d2 { --ind: 2; }

.tree__name::before {
  content: "";
  display: inline-block;
  width: calc(var(--ind) * 22px);
  height: 1px;
  margin-right: 0;
  background: transparent;
}

.tree__branch {
  font: 600 13px/1 var(--mono);
  color: var(--accent-2);
  opacity: calc(1 - var(--ind) * .34);
}

.tree__wrap { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tree__wrap .tree__row { padding-left: calc(14px + var(--ind) * 26px); }
.tree__wrap .tree__row:last-child { border-bottom: 0; }

/* --- callouts ----------------------------------------------------------- */

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2);
  background: var(--sheet);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.note h3 { margin: 0 0 .4em; font-size: .96rem; }
.note p:last-child { margin-bottom: 0; }
.note--sunk { background: var(--sunk); }

/* --- wireframe index cards --------------------------------------------- */

.wfcard { display: flex; flex-direction: column; }

.wfcard__thumb {
  position: relative;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--sunk);
  overflow: hidden;
  height: 190px;
}

/* A real, scaled-down render of the whole wireframe, not a separate drawing. */
.wfthumb {
  position: absolute;
  top: 12px;
  right: 14px;
  bottom: 0;
  left: 14px;
  overflow: hidden;
}
.wfthumb__inner {
  width: 320%;
  transform: scale(.3125);
  transform-origin: top left;
}

.wfcard__body {
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--sheet);
  padding: 15px 18px 17px;
  flex: 1;
  box-shadow: var(--shadow-sm);
}

.wfcard__n {
  font: 600 10px/1 var(--mono);
  color: var(--accent);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 8px;
}
.wfcard h3 { font-size: .98rem; margin: 0 0 .3em; }
.wfcard p { font-size: 12.5px; color: var(--ink-2); margin: 0 0 .7em; line-height: 1.5; }
.wfcard__uses {
  font: 500 11px/1.5 var(--mono);
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: auto;
}
.wfcard--link { text-decoration: none; }
.wfcard--link:hover .wfcard__thumb { border-color: var(--rule-2); }
.wfcard--link:hover .wfcard__body { box-shadow: var(--shadow); }
.wfcard--link:hover h3 { color: var(--accent); }

/* ==========================================================================
   Wireframe engine
   ========================================================================== */

.wf-sheet {
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
  transition: max-width .25s ease;
  max-width: 100%;
}

/* device width toggle */
.wf-sheet[data-width="phone"] { max-width: 390px; }
.wf-sheet[data-width="tablet"] { max-width: 720px; }
.wf-sheet[data-width="desktop"] { max-width: 100%; }

.wf-sheet__ruler {
  height: 18px;
  background:
    repeating-linear-gradient(90deg,
      var(--rule-2) 0 1px,
      transparent 1px 10px),
    repeating-linear-gradient(90deg,
      var(--ink-4) 0 1px,
      transparent 1px 50px),
    var(--sunk);
  border-bottom: 1px solid var(--rule);
}

.wf-canvas { padding: 26px 26px 30px 56px; }

/* --- primitives --------------------------------------------------------- */

.ph {
  display: block;
  width: var(--w, 100%);
  height: var(--h, 4px);
  border-radius: 2px;
  flex: 0 0 auto;
}

.ph-t { background: var(--wire); height: var(--h, 4px); }
.ph-h { background: var(--wire-strong); height: var(--h, 9px); border-radius: 2px; }

.ph-btn,
.ph-btn-s {
  display: inline-block;
  width: var(--w, 76px);
  height: 19px;
  border-radius: 3px;
  vertical-align: middle;
}
.ph-btn   { background: var(--wire-dark); }
.ph-btn-s { background: transparent; border: 1px solid var(--wire-strong); }

.ph-img {
  position: relative;
  width: var(--w, 100%);
  height: var(--h, 30px);
  border: 1px solid var(--wire-line);
  background:
    linear-gradient(to top right,
      transparent calc(50% - .6px), var(--wire-line) calc(50% - .6px),
      var(--wire-line) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(to bottom right,
      transparent calc(50% - .6px), var(--wire-line) calc(50% - .6px),
      var(--wire-line) calc(50% + .6px), transparent calc(50% + .6px)),
    var(--wire-bg);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-lab {
  font: 500 9px/1 var(--mono);
  color: var(--ink-4);
  background: var(--wire-bg);
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: .02em;
}

.ph-box {
  width: 11px; height: 11px;
  border: 1px solid var(--wire-strong);
  border-radius: 2px;
  background: var(--sheet);
}
.ph-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wire-strong);
  flex: 0 0 auto;
}

.pf { display: inline-block; flex: 0 0 auto; }
.pf-logo   { width: 46px; height: 15px; border-radius: 2px; background: var(--wire-strong); }
.pf-navitem{ width: 34px; height: 6px; border-radius: 2px; background: var(--wire); }
.pf-navbtn { width: 72px; height: 17px; border-radius: 3px; background: var(--wire-dark); }
.pf-badge  { width: 62px; height: 17px; border-radius: 2px; background: var(--wire-bg); border: 1px solid var(--wire-line); }
.pf-chip   { width: 58px; height: 16px; border-radius: 10px; background: var(--wire-bg); border: 1px solid var(--wire-line); }

/* --- composites --------------------------------------------------------- */

.wf-nav {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--wire-line);
}
.wf-nav .pf-navbtn { margin-left: auto; }

.wf-row {
  display: flex;
  gap: var(--gap, 10px);
  align-items: flex-start;
  margin-bottom: 12px;
}
.wf-row > .wf-col { flex: 1 1 0; min-width: 0; }
.wf-row[style*="--fw"] > .wf-col { flex: 0 0 auto; width: calc(var(--fw) * 1%); }

.wf-point { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wf-point .ph-t { flex: 1 1 auto; width: auto; }

.wf-btnrow { display: flex; gap: 9px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.wf-splitbtn { margin-top: 13px; }

/* hero + closing CTA bands */
.wf-band {
  position: relative;
  border: 1px solid var(--wire-line);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 22px 20px 18px;
  margin-bottom: 12px;
}
.wf-band--hero { background: linear-gradient(180deg, #f3f2ee, var(--sheet)); }
.wf-band--cta  { background: linear-gradient(180deg, #f0efeb, var(--sheet)); }

.wf-bgflag {
  position: absolute;
  top: -1px; right: -1px;
  font: 600 8.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sunk);
  border: 1px solid var(--wire-line);
  border-radius: 0 var(--radius) 0 var(--radius);
  padding: 5px 8px;
}

/* the quote form */
.wf-form {
  border: 1px solid var(--wire-line);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(23,26,30,.05);
}
.wf-field { margin-bottom: 8px; }
.wf-field .ph-t:first-child { margin-bottom: 5px; }
.wf-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.wf-check .ph-t { flex: 1 1 auto; width: auto; }
.wf-formbtn { margin-top: 12px; }

.wf-badges { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }

.wf-card {
  border: 1px solid var(--wire-line);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 12px;
}
.wf-card .ph-img { margin-bottom: 9px; }
.wf-card .ph-t { margin-bottom: 5px; }
.wf-card .ph-t:last-child { margin-bottom: 0; }

.wf-step {
  border-top: 2px solid var(--wire-strong);
  padding-top: 11px;
  position: relative;
}
.wf-step .ph-t { margin-bottom: 5px; }
.wf-stepn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--wire-dark); color: #fff;
  font: 600 10px/1 var(--mono);
  margin-bottom: 9px;
}

.wf-rev {
  border: 1px solid var(--wire-line);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 12px;
}
.wf-rev .ph-t { margin-bottom: 5px; }
.wf-rev .ph-t:last-child { margin-bottom: 0; }
.wf-stars { display: block; font-size: 12px; color: var(--wire-strong); letter-spacing: 2px; margin-bottom: 9px; }

.wf-acc {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--wire-line);
  border-radius: var(--radius);
  background: var(--sheet);
  padding: 11px 13px;
  margin-bottom: 7px;
}
.wf-acctext { flex: 1 1 auto; }
.wf-acctext .ph-t { width: var(--w); }
.wf-accicon { font: 500 14px/1 var(--mono); color: var(--wire-strong); }

.wf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

.wf-banner {
  border: 1px solid var(--wire-line);
  border-left: 3px solid var(--wire-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--sunk);
  padding: 13px 15px;
  margin-bottom: 12px;
}
.wf-bannerbtn { margin-top: 10px; }

.wf-footer {
  border-top: 1px solid var(--wire-line);
  background: var(--sunk);
  padding: 16px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.wf-footbar { height: 8px; background: var(--wire-line); border-radius: 2px; margin: 10px 0 8px; }
.wf-footnote {
  font: 500 9px/1 var(--mono);
  color: var(--ink-4);
  letter-spacing: .03em;
}

.wf-panel {
  border: 1px dashed var(--wire-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, var(--wire-bg) 0 8px, #f4f5f5 8px 16px);
  min-height: 118px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.wf-panellab {
  font: 500 10px/1 var(--mono);
  color: var(--ink-3);
  background: var(--sheet);
  padding: 4px 8px;
  border: 1px solid var(--wire-line);
  border-radius: 2px;
}

.wf-table { border: 1px solid var(--wire-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.wf-trow { display: flex; border-bottom: 1px solid var(--wire-line); }
.wf-trow:last-child { border-bottom: 0; }
.wf-trow--head { background: var(--sunk); }
.wf-tcell { flex: 1 1 0; padding: 10px 12px; border-right: 1px solid var(--wire-line); }
.wf-tcell:last-child { border-right: 0; }
.wf-trow--head .wf-tcell { height: 30px; }
.wf-tcell .ph-t { width: var(--w); }

.wf-fine { border-top: 1px solid var(--wire-line); padding-top: 11px; }
.wf-fine .ph-t { margin-bottom: 5px; }

/* ==========================================================================
   Wireframe page layout
   ========================================================================== */

.wfmeta {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  margin: 0 0 30px;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.wfmeta dt {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
.wfmeta dd { margin: 0; font-size: 13px; color: var(--ink-2); }

.wfmeta__uses a {
  display: inline-block;
  font: 500 12px/1.5 var(--mono);
  color: var(--accent);
  text-decoration: none;
  margin-right: 12px;
  border-bottom: 1px solid var(--accent-wash);
}
.wfmeta__uses a:hover { border-bottom-color: var(--accent); }

/* toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0 13px;
  margin-bottom: 26px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.toolbar__label {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4);
  margin-right: 2px;
}

.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; background: var(--sheet); }
.seg button {
  appearance: none; border: 0; background: transparent;
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-2);
  padding: 8px 13px;
  cursor: pointer;
  border-right: 1px solid var(--rule);
  transition: background .12s ease, color .12s ease;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--sunk); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--sheet);
  padding: 8px 12px;
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.toggle:hover { background: var(--sunk); color: var(--ink); }
.toggle[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.toggle__box {
  width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 2px;
  display: inline-block; position: relative;
}
.toggle[aria-pressed="true"] .toggle__box { background: currentColor; }

.toolbar__spacer { margin-left: auto; }

/* sections */
.wfsection {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 18px;
  padding: 26px 0 4px;
  border-top: 1px solid var(--rule);
}
.wfsection:first-of-type { border-top: 0; padding-top: 6px; }

.wfsection__chip {
  grid-row: 1 / span 2;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  color: var(--accent);
  font: 600 11px/1 var(--mono);
  background: var(--accent-wash);
}

.wfsection__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
  margin-bottom: 4px;
}
.wfsection__head h3 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: -.012em;
}
.wfsection__blocks {
  font: 500 10px/1 var(--mono);
  color: var(--ink-4);
  letter-spacing: .04em;
}

.wfsection__note {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: var(--measure);
  margin: 0 0 16px;
}
.wfsection__note strong { color: var(--ink); }

.wfsection__draw { margin-top: 2px; }

/* --- the continuous page drawing ---------------------------------------- */

/* A page is drawn as one sheet. Bands follow one another with only spacing
   between them, and the number in the left gutter is what ties a band to its
   entry in the specification underneath. */
.wfband { position: relative; }
.wfband + .wfband { margin-top: 30px; }
.wfband__chip {
  position: absolute;
  left: -36px;
  top: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  background: var(--accent-wash);
  color: var(--accent);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .02em;
}
.wfpage__caption {
  margin: 14px 0 0;
  font: 500 11px/1.6 var(--mono);
  color: var(--ink-4);
  letter-spacing: .02em;
}
/* A sheet with no section numbers does not need the gutter. */
.wf-sheet--plain .wf-canvas { padding: 26px 26px 30px; }
.wf-sheet[data-width="phone"] .wf-canvas { padding: 20px 16px 24px 40px; }
.wf-sheet[data-width="phone"] .wfband__chip { left: -30px; }

/* --- section specification ---------------------------------------------- */

.spec { margin-top: 26px; }
.spec__head { border-top: 1px solid var(--rule); padding-top: 24px; }
.spec__head h2 { margin: 0 0 8px; }
.spec__head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: var(--measure);
}
.spec__list { list-style: none; margin: 20px 0 0; padding: 0; }
.spec__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 18px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.spec__item:first-child { border-top: 0; padding-top: 4px; }
.spec__chip {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  background: var(--accent-wash);
  color: var(--accent);
  font: 600 11px/1 var(--mono);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.spec__chip:hover, .spec__chip:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.spec__body h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px;
}
.spec__blocks {
  font: 500 10px/1 var(--mono);
  color: var(--ink-4);
  letter-spacing: .04em;
}
.spec__body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: var(--measure);
}

.blanknote {
  font: 500 12px/1.5 var(--mono);
  color: var(--ink-4);
  padding: 12px 0 0;
}

/* The notes toggle is a real on/off switch. On shows the specification above
   the drawing; off hides it and leaves the drawing alone. */
body.notes-off .spec,
body.notes-off .wfpage__caption { display: none; }

#notesToggle .toggle__state {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-left: 7px;
}
#notesToggle[aria-pressed="true"] .toggle__box {
  background: var(--accent);
  border-color: var(--accent);
}
#notesToggle[aria-pressed="true"] .toggle__state { color: var(--accent); }

/* --- legend ------------------------------------------------------------- */

.legend { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--sheet); }
.legend__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.legend__row:last-child { border-bottom: 0; }
.legend__swatch {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 9px;
  min-height: 46px;
  min-width: 0;
  overflow: hidden;
}

/* The legend swatches hold real drawing primitives, so their widths have to
   add up inside the swatch box rather than spill past it. */
.swatch-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
}
.swatch-col { flex: 1 1 auto; min-width: 0; }
.swatch-col .ph-t + .ph-t { margin-top: 6px; }
.legend__name { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.legend__desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }

/* --- footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 30px 56px 46px;
  background: var(--sheet);
}
.foot__inner {
  max-width: 1080px;
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-3);
}
.foot__inner a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.foot__inner a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot__spacer { margin-left: auto; }

/* --- pager -------------------------------------------------------------- */

.pager {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.pager a {
  flex: 1 1 240px;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--sheet);
  padding: 15px 18px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.pager a:hover { border-color: var(--rule-2); box-shadow: var(--shadow-sm); }
.pager span {
  display: block;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 7px;
}
.pager strong { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.pager a:hover strong { color: var(--accent); }
.pager .next { text-align: right; }

/* --- journey ------------------------------------------------------------ */

.journey { display: grid; gap: 0; border-left: 1px solid var(--rule-2); margin-left: 11px; }
.journey__step { position: relative; padding: 0 0 26px 28px; }
.journey__step:last-child { padding-bottom: 0; }
.journey__step::before {
  content: "";
  position: absolute; left: -6px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sheet);
  border: 2px solid var(--accent-2);
}
.journey__n {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4);
  display: block; margin-bottom: 6px;
}
.journey__step p { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 68ch; }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --rail: 240px; }
  .masthead, .content, .foot { padding-left: 34px; padding-right: 34px; }
}

/* Below this width the swatch and its label no longer sit side by side. */
@media (max-width: 620px) {
  .legend__row { grid-template-columns: 1fr; gap: 10px; }
  .legend__swatch { max-width: 224px; }
}

@media (max-width: 820px) {
  .shell { display: block; }

  .rail {
    position: static;
    width: auto; height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .rail__nav {
    display: none;
    padding: 8px 12px 16px;
    max-height: 60vh;
  }
  .rail--open .rail__nav { display: block; }
  .rail__foot { display: none; }

  .rail__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
  .rail__head .rail__brand { margin: 0; }
  .rail__head .rail__sub { flex: 1 1 auto; }

  .rail__toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .masthead { padding: 26px 20px 22px; }
  .content { padding: 30px 20px 72px; }
  .foot { padding: 24px 20px 40px; }

  .wf-canvas { padding: 18px 14px 22px; }
  .wf-sheet[data-width="phone"] { max-width: 100%; }

  .wfsection { grid-template-columns: 28px 1fr; gap: 0 12px; }
  .wfsection__chip { width: 22px; height: 22px; font-size: 10px; }

  .legend__row { grid-template-columns: 1fr; gap: 12px; }
  .tree__row { grid-template-columns: 46px 1fr; }
  .tree__url { grid-column: 2 / -1; margin-top: 3px; }

  .toolbar { gap: 8px; }
  .toolbar__spacer { display: none; }
}

@media (min-width: 821px) {
  .rail__toggle { display: none; }
}

/* --- print -------------------------------------------------------------- */

@media print {
  :root { --paper: #fff; --sheet: #fff; }
  .rail, .toolbar, .pager, .skip, .foot__spacer { display: none !important; }
  .shell { display: block; }
  .masthead, .content, .foot { padding: 0 0 12px; }
  body { font-size: 10.5pt; }
  .wfsection { break-inside: avoid; }
  .wf-sheet { box-shadow: none; break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* --- how the drawing reflows on each device ------------------------------
   The width control does not simply narrow the sheet. The drawing reflows the
   way the real page would, so a phone wireframe is a phone layout: one column,
   a collapsed navigation, and the quote form beneath the copy rather than
   beside it. */

/* Tablet: a shorter navigation, a two-column footer, a tighter band. */
.wf-sheet[data-width="tablet"] .wf-nav .pf-navitem ~ .pf-navitem ~ .pf-navitem ~ .pf-navitem { display: none; }
.wf-sheet[data-width="tablet"] .wf-band { padding: 20px 18px 16px; }
.wf-sheet[data-width="tablet"] .wf-form { padding: 12px; }
.wf-sheet[data-width="tablet"] .wf-footer .wf-row { flex-wrap: wrap; }
.wf-sheet[data-width="tablet"] .wf-footer .wf-row > .wf-col { flex: 1 1 44%; }

/* Phone: one column throughout. */
.wf-sheet[data-width="phone"] .wf-nav .pf-navitem,
.wf-sheet[data-width="phone"] .wf-nav .pf-navbtn { display: none; }
.wf-sheet[data-width="phone"] .wf-nav::after {
  content: "";
  margin-left: auto;
  width: 18px;
  height: 12px;
  background:
    linear-gradient(var(--wire-strong), var(--wire-strong)) top / 100% 2px no-repeat,
    linear-gradient(var(--wire-strong), var(--wire-strong)) center / 100% 2px no-repeat,
    linear-gradient(var(--wire-strong), var(--wire-strong)) bottom / 100% 2px no-repeat;
}
.wf-sheet[data-width="phone"] .wf-row { flex-direction: column; --gap: 12px; }
.wf-sheet[data-width="phone"] .wf-row > .wf-col { flex: 1 1 auto; width: 100%; }
.wf-sheet[data-width="phone"] .wf-band { padding: 16px 14px 14px; }
.wf-sheet[data-width="phone"] .wf-form { padding: 12px; }
.wf-sheet[data-width="phone"] .wf-tcell { padding: 8px; }
.wf-sheet[data-width="phone"] .wf-badges,
.wf-sheet[data-width="phone"] .wf-chips { gap: 6px; }

/* On a phone the calls to action run full width, as they would in the build. */
.wf-sheet[data-width="phone"] .wf-btnrow { flex-direction: column; align-items: stretch; }
.wf-sheet[data-width="phone"] .wf-btnrow .ph-btn,
.wf-sheet[data-width="phone"] .wf-btnrow .ph-btn-s,
.wf-sheet[data-width="phone"] .wf-formbtn .ph-btn,
.wf-sheet[data-width="phone"] .wf-splitbtn .ph-btn,
.wf-sheet[data-width="phone"] .wf-bannerbtn .ph-btn { width: 100%; }