/* ==========================================================================
   Taq Ventures — the site-structure wireframe, shared.
   Drawn on sitemap.html (this site's own pages) and in case studies where a
   client's site structure is part of the proof (High Tek, from Nov 4, 2026 —
   render-case-studies.js). Moved out of sitemap.css unchanged so both pages
   draw it the same way; see sitemap.css for why it is a wireframe at all.
   ========================================================================== */
/* ==========================================================================
   The wireframe
   ========================================================================== */
.wf-section{ padding: 60px 0 68px; border-bottom: 1px solid var(--line); }

.wf-head{ margin-bottom: 34px; }
.wf-head h2{ font-size: 28px; margin-bottom: 10px; }
.wf-head p{ color: var(--muted); max-width: 62ch; }

/* ---- legend ----
   Three notations to explain, so three items. Inline rather than a floating
   key, because a key you have to hunt for is a key nobody reads. */
.wf-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin-bottom: 30px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}
.wf-legend-item{ display: flex; align-items: center; gap: 9px; }
.wf-legend-swatch{
  width: 26px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  flex: none;
}
.wf-legend-swatch-here{ border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.wf-legend-swatch-line{
  border: none;
  height: 0;
  border-top: 1px dashed var(--line-strong);
  border-radius: 0;
}

/* ---- the tree canvas ----
   The faint grid is what makes the panel read as drafting paper rather than
   just another tinted band. It is two gradients rather than an image so it
   costs nothing and scales to any width. */
.wf{
  --wf-indent: 34px;   /* how far each generation steps right */
  --wf-pad: 14px;      /* vertical gap above each card */
  --wf-card-h: 58px;   /* fixed, so the elbow can be positioned deterministically */

  padding: 30px 26px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(74, 103, 140, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(74, 103, 140, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow-x: auto;
}

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

/* ---- connectors ----
   Drawn with borders on the <li> rather than an SVG overlay, so the lines
   follow the cards when the text reflows instead of being a picture of where
   the cards used to be. */
.wf .wf-children{ padding-left: var(--wf-indent); }
.wf-children > li{ position: relative; padding-top: var(--wf-pad); }

/* the vertical trunk running down past every sibling */
.wf-children > li::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 1px dashed var(--line-strong);
}
/* the last sibling stops its trunk at the elbow, so the line does not
   dangle past the final card with nothing to join */
.wf-children > li:last-child::before{
  bottom: auto;
  height: calc(var(--wf-pad) + var(--wf-card-h) / 2);
}
/* the elbow into the card */
.wf-children > li::after{
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--wf-pad) + var(--wf-card-h) / 2);
  width: calc(var(--wf-indent) - 12px);
  border-top: 1px dashed var(--line-strong);
}

/* ---- the card ---- */
.wf-card{
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: var(--wf-card-h);
  max-width: 380px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.wf-card:hover{
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(22, 24, 27, 0.07);
  transform: translateY(-1px);
}
.wf-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-label{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.004em;
}
/* The real URL, in the one place on the site where showing a visitor the URL
   is the point: a readable path is a ranking signal and an audit line item. */
.wf-path{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* the root card carries the site, so it gets the weight */
.wf-root-card{
  max-width: 420px;
  min-height: 66px;
  border-color: var(--line-strong);
  background: var(--panel);
}

/* "you are here" — the only accented card on the page */
.wf-card-here{
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--bg);
}
.wf-card-here:hover{
  box-shadow: inset 3px 0 0 var(--accent), 0 2px 10px rgba(22, 24, 27, 0.07);
}
.wf-here-tag{
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  padding-left: 10px;
  flex: none;
}

/* ---- the mock inside each card ----
   One box, three bars, every variant. The variants below only move the bars
   around; nothing needs a different number of elements, which is what keeps
   the generated markup and the hand-written markup identical in shape. */
.wf-mock{
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 46px;
  height: 32px;
  flex: none;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
}
.wf-mock > span{ background: var(--line-strong); border-radius: 1px; }
.wf-root-card .wf-mock{ width: 54px; height: 38px; }

/* hero: headline, subhead, one button */
.wf-mock-hero{ grid-template-rows: 1.3fr 1fr 1fr; }
.wf-mock-hero > span:nth-child(1){ background: var(--accent); }
.wf-mock-hero > span:nth-child(2){ width: 82%; }
.wf-mock-hero > span:nth-child(3){ width: 46%; background: var(--accent-solid); }

/* hub: a title, then a row of cards — the columns are a gradient because
   three more elements per card would be markup nobody can read */
.wf-mock-hub{ grid-template-rows: 1fr 0.6fr 1.6fr; }
.wf-mock-hub > span:nth-child(1){ width: 68%; background: var(--accent); }
.wf-mock-hub > span:nth-child(2){ width: 88%; }
.wf-mock-hub > span:nth-child(3){
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 13px);
}

/* detail: a title and body copy — the shape of every service page */
.wf-mock-detail > span:nth-child(1){ width: 58%; background: var(--accent); }
.wf-mock-detail > span:nth-child(3){ width: 84%; }

/* list: stacked rows of equal weight — case studies, FAQ */
.wf-mock-list > span{ width: 100%; }
.wf-mock-list > span:nth-child(1){ background: var(--accent); width: 52%; }

/* board: a title over a grid of tiles */
.wf-mock-board{ grid-template-rows: 0.8fr 1.1fr 1.1fr; }
.wf-mock-board > span:nth-child(1){ width: 50%; background: var(--accent); }
.wf-mock-board > span:nth-child(2),
.wf-mock-board > span:nth-child(3){
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 11px);
}

/* form: a label, a field, a submit */
.wf-mock-form{ grid-template-rows: 0.8fr 1.2fr 1fr; }
.wf-mock-form > span:nth-child(1){ width: 46%; }
.wf-mock-form > span:nth-child(2){
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.wf-mock-form > span:nth-child(3){ width: 42%; background: var(--accent-solid); }

/* tool: one input and one action, which is the whole grader */
.wf-mock-tool{ grid-template-rows: 0.7fr 1.4fr 0.9fr; }
.wf-mock-tool > span:nth-child(1){ width: 56%; background: var(--accent); }
.wf-mock-tool > span:nth-child(2){
  background: var(--bg);
  border: 1px dashed var(--accent);
}
.wf-mock-tool > span:nth-child(3){ width: 34%; background: var(--accent-solid); }

/* map: a staircase — this page, drawn as itself */
.wf-mock-map > span:nth-child(1){ width: 74%; }
.wf-mock-map > span:nth-child(2){ width: 56%; margin-left: 18%; }
.wf-mock-map > span:nth-child(3){ width: 38%; margin-left: 36%; }
.wf-mock-map > span{ background: var(--accent); opacity: 0.55; }

/* ---- branch captions ----
   The tree has three kinds of branch and saying so in one line each is most of
   the educational value of the page. */
.wf-branch-note{
  margin: 6px 0 2px;
  font-size: 13px;
  color: var(--muted);
  max-width: 54ch;
}
.wf-children .wf-branch-note{ padding-left: 2px; }

@media (max-width: 640px){
  .wf{
    --wf-indent: 20px;
    --wf-card-h: 54px;
    padding: 20px 14px 24px;
    background-size: 18px 18px;
  }
  .wf-card{ max-width: none; gap: 11px; padding: 9px 12px; }
  .wf-label{ font-size: 17px; }
  .wf-mock{ width: 40px; height: 29px; }
  .wf-root-card .wf-mock{ width: 44px; height: 32px; }
  .wf-legend{ gap: 8px 18px; padding: 12px 14px; }
  /* The tag doubles the height of the card it sits in at this width. The
     accented edge already says "you are here" on its own. */
  .wf-here-tag{ display: none; }
}