/* ===========================================================================
   Design v2. Mike, 2026-11-02.
   ---------------------------------------------------------------------------
   Loaded only when the build flag DESIGN_V2 is on (site/config.py), which is
   staging only until Mike says "deploy". Every rule here sits under body.v2,
   so with the flag off nothing in this file applies.

   Same colours, fonts, buttons and tags as ds.css. No radius, no shadow, no
   gradient. What it adds: the 1180px container, the white panel, the ink
   panel, the numbers strip, the eyebrow, the section heading, the table,
   select and search styles, two tags, and the three-column ink footer.
   The specification is Mike's instruction of 2 November; the mockups in
   docs/design_v2/ show the intent.
   =========================================================================== */

body.v2 {
  --v2-max: 1180px;
  --v2-pad: 32px;
  --v2-white: #ffffff;
  --v2-hair: #d9d8d2;
  --v2-ink: #15171a;
  --v2-ground: #f3f2ee;
  --v2-pine: #1f5a3a;
  --v2-muted: #5d615c;
  --v2-body: #33363a;
  --v2-ink-muted: #a9ada6;
  --v2-ink-figure: #8fd1ad;
  --v2-measure: 760px;
  background: var(--v2-ground);
}
/* A phone keeps a 20px side gutter: 32px a side leaves 256px of a 320px screen. */
@media (max-width: 480px) { body.v2 { --v2-pad: 20px; } }

/* -- container ------------------------------------------------------------- */
body.v2 .wrap { max-width: var(--v2-max); padding-left: var(--v2-pad); padding-right: var(--v2-pad); box-sizing: border-box; }
/* Prose keeps a reading measure inside the wide container. */
body.v2 .v2-prose p, body.v2 .v2-prose li, body.v2 .v2-measure { max-width: var(--v2-measure); }

/* -- header: the same content, inside the wider container; links wrap ----- */
body.v2 .site-head { background: var(--v2-ground); }

/* -- panels ---------------------------------------------------------------- */
body.v2 .panel { background: var(--v2-white); border: 1px solid var(--v2-hair); border-radius: 0; box-shadow: none; }
body.v2 .panel-pad { padding: 24px 26px; }
body.v2 .panel-ink { background: var(--v2-ink); color: var(--v2-ground); border: 1px solid var(--v2-ink); }
body.v2 .panel-ink .muted, body.v2 .panel-ink .v2-muted { color: var(--v2-ink-muted); }
body.v2 .panel-ink .figure { color: var(--v2-ink-figure); }
body.v2 .panel-ink a { color: var(--v2-ground); }
body.v2 .panel-accent { border: 2px solid var(--v2-pine); }
body.v2 .panel-tint { background: #eceae4; border: 1px solid var(--v2-hair); }
/* A table never clips: it scrolls inside its panel on a phone. */
body.v2 .panel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- numbers strip ---------------------------------------------------------- */
body.v2 .v2-strip { display: grid; grid-template-columns: repeat(var(--cells, 3), minmax(0, 1fr)); background: var(--v2-white); border: 1px solid var(--v2-hair); }
body.v2 .v2-strip > .cell { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--v2-hair); min-width: 0; }
body.v2 .v2-strip > .cell:first-child { border-left: 0; }
body.v2 .v2-strip .figure { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.03em; line-height: 0.9; color: var(--v2-pine); font-size: 44px; overflow-wrap: anywhere; }
body.v2 .v2-strip.v2-strip-home .figure { font-size: 72px; }
body.v2 .v2-strip .foot { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--v2-muted); }
@media (max-width: 760px) {
  body.v2 .v2-strip { grid-template-columns: minmax(0, 1fr); }
  body.v2 .v2-strip > .cell { border-left: 0; border-top: 1px solid var(--v2-hair); }
  body.v2 .v2-strip > .cell:first-child { border-top: 0; }
  body.v2 .v2-strip.v2-strip-home .figure { font-size: 56px; }
}

/* -- type ------------------------------------------------------------------- */
body.v2 .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); margin: 0; }
body.v2 .v2-h1 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(40px, 5vw, 62px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
body.v2 .v2-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0; }
body.v2 .pine { color: var(--v2-pine); }
body.v2 .v2-muted { color: var(--v2-muted); }

/* -- tags: two additions ---------------------------------------------------- */
body.v2 .tag-subscribers { background: var(--v2-ink); color: var(--v2-ground); border: 1px solid var(--v2-ink); }
body.v2 .tag-sample { background: transparent; color: var(--v2-pine); border: 1px solid var(--v2-pine); }

/* -- tables ----------------------------------------------------------------- */
body.v2 .table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-muted); border-bottom: 1px solid var(--v2-ink); font-weight: 500; }
body.v2 .table td { padding: 14px 12px; border-bottom: 1px solid var(--v2-hair); }
body.v2 .table tbody tr:last-child td { border-bottom: 0; }
body.v2 .panel .table th:first-child, body.v2 .panel .table td:first-child { padding-left: 18px; }
body.v2 .panel .table th:last-child, body.v2 .panel .table td:last-child { padding-right: 18px; }
body.v2 .table .v2-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.15; }
body.v2 .table td.num, body.v2 .table th.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
body.v2 .table a.firm, body.v2 a.firm { text-decoration: underline; text-decoration-color: var(--v2-pine); text-underline-offset: 3px; }

/* -- selects and search inputs ------------------------------------------- */
body.v2 select.input, body.v2 input.input[type="search"], body.v2 .v2-select select, body.v2 .v2-search input {
  font-family: var(--font-mono); font-size: 13px; min-height: 44px; border: 1px solid var(--v2-ink); border-radius: 0; background: var(--v2-white);
}
body.v2 .v2-field { display: flex; flex-direction: column; gap: 6px; }
body.v2 .v2-field > label, body.v2 .v2-field > .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); }

/* -- footer: ink, three columns -------------------------------------------- */
body.v2 .site-foot-v2 { background: var(--v2-ink); color: var(--v2-ground); margin-top: 56px; }
body.v2 .site-foot-v2 .foot-cols { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
body.v2 .site-foot-v2 .foot-col { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--v2-ink-muted); min-width: 0; }
body.v2 .site-foot-v2 .foot-brand { font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--v2-ground); }
body.v2 .site-foot-v2 a { color: var(--v2-ground); }
body.v2 .site-foot-v2 .foot-links { gap: 6px; }
body.v2 .site-foot-v2 .notes-form { margin-top: 0; grid-template-columns: minmax(0, 1fr) auto; align-content: start; color: var(--v2-ink-muted); }
body.v2 .site-foot-v2 .notes-form label { color: var(--v2-ink-muted); }
body.v2 .site-foot-v2 .notes-form input[type="email"] { background: var(--v2-white); border-color: var(--v2-white); color: var(--v2-ink); min-height: 40px; }
body.v2 .site-foot-v2 .notes-form .btn { color: var(--v2-ground); border-color: var(--v2-ground); background: transparent; }
body.v2 .site-foot-v2 .notes-form .btn:hover { background: var(--v2-ground); color: var(--v2-ink); }
@media (max-width: 760px) {
  body.v2 .site-foot-v2 .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.v2 .site-foot-v2 .notes-form { grid-template-columns: minmax(0, 1fr); }
}

/* -- Pricing, increment 2 -------------------------------------------------- */
body.v2 .v2-band { border-bottom: 1px solid var(--v2-hair); }
body.v2 .v2-band-white { background: var(--v2-white); border-top: 1px solid var(--v2-hair); }
body.v2 .v2-hero { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
body.v2 .pricing-v2 .v2-h1 { font-size: 50px; max-width: 900px; }
@media (max-width: 899px) { body.v2 .pricing-v2 .v2-h1 { font-size: 40px; } }
body.v2 .v2-lead { margin: 0; font-size: 19px; line-height: 1.4; color: var(--v2-body); max-width: 900px; }
body.v2 .v2-tags { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
body.v2 .v2-plans { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px; padding-top: 14px; }
body.v2 .v2-plan { padding: 16px 22px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.v2 .v2-plan-paid { border: 2px solid var(--v2-ink); grid-row: 1 / span 2; }
body.v2 .v2-plans .pricing-free { align-self: start; }
body.v2 .v2-plans-brief .pricing-teams, body.v2 .v2-plans-brief .v2-brief { grid-row: auto; }
body.v2 .v2-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; }
body.v2 .v2-price { font-family: var(--font-heading); font-weight: 600; font-size: 44px; letter-spacing: -0.03em; line-height: 0.9; }
body.v2 .v2-unit { font-family: var(--font-mono); font-size: 13px; color: var(--v2-muted); }
body.v2 .v2-sub { font-size: 16px; color: var(--v2-pine); margin-bottom: 6px; }
body.v2 .v2-promise { font-size: 15px; line-height: 1.35; color: var(--v2-pine); border-left: 2px solid var(--v2-pine); padding-left: 9px; margin-bottom: 10px; }
body.v2 .v2-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
body.v2 .v2-feats { border-top: 1px solid var(--v2-hair); padding-top: 10px; gap: 5px; }
body.v2 .v2-feat { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--v2-body); }
/* The one icon the design allows: a 16px pine check mark. */
body.v2 .v2-feat::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a3a' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body.v2 .v2-feat-head { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.2; margin: 10px 0 8px; }
body.v2 .v2-feats .v2-feat-head { margin-top: 0; }
body.v2 .v2-places { font-size: 15px; margin-top: 6px; }
body.v2 .pricing-free .v2-feats { margin-bottom: 14px; }
body.v2 .v2-brief { padding: 24px; gap: 10px; }
body.v2 .v2-brief-name { font-family: var(--font-heading); font-weight: 600; font-size: 28px; }
body.v2 .v2-brief-text { margin: 0; font-size: 15px; line-height: 1.55; color: #d4d6d1; }
body.v2 .v2-brief-small { margin: 0; font-family: var(--font-mono); font-size: 12px; }
body.v2 .v2-btn-light { align-self: flex-start; background: var(--v2-ground); color: var(--v2-ink); border-color: var(--v2-ground); }
body.v2 .v2-aud { font-size: 17px; margin: 22px 0 6px; color: var(--v2-muted); }
body.v2 .v2-aud-small { font-size: 16px; margin: 0 0 28px; color: var(--v2-body); }
body.v2 .v2-guarantee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
body.v2 .v2-guarantee .cell { display: flex; flex-direction: column; gap: 8px; }
body.v2 .v2-guarantee p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v2-body); }
body.v2 .v2-big { font-family: var(--font-heading); font-weight: 600; font-size: 48px; letter-spacing: -0.03em; line-height: 0.9; }
body.v2 .v2-cell-head { font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
body.v2 .v2-section { padding-top: 48px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
body.v2 .v2-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--v2-ink); }
body.v2 .v2-faq .item { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--v2-hair); }
body.v2 .v2-faq .item:nth-child(2n) { padding: 20px 0 20px 24px; }
body.v2 .v2-faq h3 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin: 0 0 6px; }
body.v2 .v2-faq p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v2-body); }
body.v2 .v2-closing { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 48px; padding-bottom: 48px; }
body.v2 .v2-closing p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--v2-body); }
@media (min-width: 900px) {
  body.v2 .pricing-v2 .pricing-list-paid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  body.v2 .pricing-v2 .pricing-col-founding { margin-top: 0; }
  body.v2 .pricing-v2 .pricing-col { gap: 5px; }
}
@media (max-width: 899px) {
  body.v2 .v2-plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body.v2 .v2-plan-paid { grid-row: auto; }
  body.v2 .v2-guarantee { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.v2 .v2-faq { grid-template-columns: minmax(0, 1fr); }
  body.v2 .v2-faq .item, body.v2 .v2-faq .item:nth-child(2n) { padding: 18px 0; }
}

/* -- Browse, type-of-work pages and Renewals, increment 3 ------------------ */
body.v2 .v2-tail { color: var(--v2-pine); }
body.v2 .v5-head h1 { font-size: clamp(34px, 3.6vw, 50px); }
body.v2 .v5-sub { font-family: var(--font-mono); font-size: 12px; color: var(--v2-muted); }
@media (min-width: 761px) {
  /* The heading row: the title left, the two selects at its right end with a
     label above each; then the search box and Download CSV on their own row. */
  body.v2 .v5-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 14px 16px; }
  body.v2 .v5-head > .v5-head-l { grid-column: 1; grid-row: 1; }
  body.v2 .v5-head > .v5-sel { grid-row: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  body.v2 .v5-head > .v5-sel .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); }
  body.v2 .v5-head h1 { white-space: normal; font-size: 40px; line-height: 1.02; }
  body.v2 .v5-head > .v5-head-l { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  body.v2 .v5-head > .qbox { grid-row: 2; grid-column: 1 / span 2; margin-left: 0; min-height: 44px; max-width: none; border: 1px solid var(--v2-ink); background: var(--v2-white); }
  body.v2 .v5-head > .v5-go, body.v2 .v5-head > noscript { grid-row: 2; }
  body.v2 .v5-head > #csv-download { grid-row: 2; grid-column: 3; justify-self: end; min-height: 44px; margin-top: 0; }
  body.v2 .v5-head.has-csv::after { display: none; }
}
/* The tabs row: a 1px ink rule under it, the counts in mono. */
body.v2 .v5-tabrow { border-bottom: 1px solid var(--v2-ink); margin-top: 18px; }
/* The list in a white panel. */
body.v2 .v5-th, body.v2 .v5-rows { background: var(--v2-white); border: 1px solid var(--v2-hair); }
body.v2 .v5-th { border-bottom: 1px solid var(--v2-ink); padding: 10px 18px; margin-top: 18px; }
body.v2 .v5-rows { border-top: 0; }
body.v2 .v5-row { padding: 14px 18px; border-bottom: 1px solid var(--v2-hair); }
body.v2 .v5-rows .v5-row:last-child { border-bottom: 0; }
body.v2 .v5-title { font-size: 19px; }
body.v2 .v5-stage b.st-planning, body.v2 .v5-stage b.st-tender { color: var(--v2-pine); }
body.v2 .v5-sup { text-decoration-color: var(--v2-pine); text-underline-offset: 3px; }
body.v2 .c-ends { grid-area: ends; text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
body.v2 .c-ends i { display: block; font-style: normal; color: var(--v2-muted); font-size: 11px; }
@media (min-width: 761px) {
  body.v2 .v5-row, body.v2 .v5-th { grid-template-columns: 110px minmax(0, 1fr) 180px 160px 110px 130px; gap: 0 16px; }
  body.v2 .v5-row { grid-template-areas: "stage main  cat supp val ends"
                                         "stage buyer cat supp val ends"; row-gap: 6px; }
  body.v2 .v5-row .c-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 760px) {
  body.v2 .v5-th { display: none; }
  body.v2 .v5-rows { border-top: 1px solid var(--v2-hair); margin-top: 14px; }
  body.v2 .v5-row { grid-template-areas: "stage val" "main main" "buyer buyer" "supp supp" "cat cat" "ends ends"; }
  body.v2 .c-ends { text-align: left; }
  body.v2 .c-ends i { display: inline; margin-left: 6px; }
}
/* The pager line, then the key in three columns with a hairline above. */
body.v2 .v5-pager { font-family: var(--font-mono); font-size: 13px; }
body.v2 .v5-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; border-top: 1px solid var(--v2-hair); padding-top: 18px; }
body.v2 .v5-key dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); margin-top: 10px; }
body.v2 .v5-key dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--v2-body); }
body.v2 .v5-key > dt, body.v2 .v5-key > dd { grid-column: auto; }
@media (max-width: 760px) { body.v2 .v5-key { grid-template-columns: minmax(0, 1fr); } }

/* Every list select, Design v2: a visible mono label above a 44px box with a
   1px ink border. The old box was the label; under v2 the select is the box. */
@media (min-width: 761px) {
  body.v2 .v5-sel:not(.v5-order) { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; border: 0; padding: 0; background: none; min-height: 0; }
  body.v2 .v5-sel:not(.v5-order) .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); }
  body.v2 .v5-sel:not(.v5-order)::after { top: auto; bottom: 19px; margin-top: 0; right: 14px; }
  body.v2 .v5-sel:not(.v5-order) select { min-height: 44px; border: 1px solid var(--v2-ink); background: var(--v2-white); font-family: var(--font-mono); font-size: 13px; padding: 0 34px 0 12px; max-width: none; width: 230px; }
}
/* The existing boxes are white panels under v2. */
body.v2 .blueprint { background: var(--v2-white); border-color: var(--v2-hair); }
body.v2 .qbox { min-height: 44px; border: 1px solid var(--v2-ink); background: var(--v2-white); align-self: end; }
body.v2 .qbox.is-locked { background: var(--v2-white); }
/* Tables sit in a white panel. One already inside a panel keeps no second border. */
body.v2 main .table { background: var(--v2-white); border: 1px solid var(--v2-hair); }
body.v2 main .table th:first-child, body.v2 main .table td:first-child { padding-left: 18px; }
body.v2 main .table th:last-child, body.v2 main .table td:last-child { padding-right: 18px; }
body.v2 main .panel .table { border: 0; }
/* Page headings, Design v2: 50px to 62px on a desktop. */
body.v2 .page-head h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1; }
@media (max-width: 760px) {
  body.v2 main .table { border-left: 0; border-right: 0; }
}
/* The Download CSV button is a 44px box like the fields beside it, so the
   row's tops line up (tools/test_renewals_filters and test_csv_export). */
body.v2 #csv-download { min-height: 44px; }
/* The heading row keeps one height in every view, so the search row and the
   CSV button sit at the same place with or without the two selects. */
@media (min-width: 761px) { body.v2 .v5-head { grid-template-rows: minmax(68px, auto) auto; } }

/* Claude's findings of 3 November, increment 3. The Search button is joined
   to the search box: the box's right edge and the button's left edge meet. */
@media (min-width: 761px) {
  body.v2 .v5-head > .qbox { grid-column: 1; }
  body.v2 .v5-head > .v2-search-btn { grid-row: 2; grid-column: 2; justify-self: start; min-height: 44px; margin-left: -17px; border-left: 0; }
}

/* -- The contract page, increment 4 ------------------------------------------ */
/* The key facts panel: the cells of queries' strip (the gate decides each one)
   as a numbers strip, the figures in Barlow Condensed, then the buttons. */
body.v2 .decision-strip { background: var(--v2-white); border: 1px solid var(--v2-hair); padding: 0; display: block; }
body.v2 .decision-strip .strip-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 0; }
body.v2 .decision-strip .strip-cell { padding: 20px 22px; border-left: 1px solid var(--v2-hair); min-width: 0; }
body.v2 .decision-strip .strip-cell:first-child { border-left: 0; }
body.v2 .decision-strip .strip-cell dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted); }
body.v2 .decision-strip .strip-cell dd { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; margin: 8px 0 0; color: var(--v2-ink); overflow-wrap: anywhere; }
body.v2 .decision-strip .strip-cell:first-child dd { font-size: 40px; color: var(--v2-pine); }
body.v2 .decision-strip .strip-cell dd [data-rel-date], body.v2 .decision-strip .strip-cell dd .rel { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--v2-muted); margin-top: 6px; }
body.v2 .decision-strip .strip-actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--v2-hair); margin: 0; }
/* The history strip, three cells, the current stage tinted. */
body.v2 .v2-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--v2-white); border: 1px solid var(--v2-hair); margin: 18px 0 6px; }
body.v2 .v2-history .cell { padding: 16px 20px; border-left: 1px solid var(--v2-hair); display: flex; flex-direction: column; gap: 6px; }
body.v2 .v2-history .cell:first-child { border-left: 0; }
body.v2 .v2-history .cell.is-now { background: #eaf1ec; }
body.v2 .v2-history-state { font-family: var(--font-mono); font-size: 13px; }
body.v2 .v2-history-state.muted { color: var(--v2-muted); }
body.v2 .v2-history-note { margin: 0 0 26px; }
/* The main column's blocks and the sidebar's facts in white panels. */
body.v2 .record-grid section.recent, body.v2 .record-grid .buyer-text { background: var(--v2-white); border: 1px solid var(--v2-hair); padding: 18px 22px; }
body.v2 .record-grid aside > dl { background: var(--v2-white); border: 1px solid var(--v2-hair); border-top: 1px solid var(--v2-ink); padding: 4px 18px; margin: 0; }
@media (max-width: 760px) {
  body.v2 .decision-strip .strip-cell { border-left: 0; border-top: 1px solid var(--v2-hair); }
  body.v2 .decision-strip .strip-cell:first-child { border-top: 0; }
  body.v2 .decision-strip .strip-actions { flex-direction: column; }
  body.v2 .v2-history { grid-template-columns: minmax(0, 1fr); }
  body.v2 .v2-history .cell { border-left: 0; border-top: 1px solid var(--v2-hair); }
  body.v2 .v2-history .cell:first-child { border-top: 0; }
}
/* Under 600px the two buttons are the full width of the strip (Mike,
   2026-10-19, tools/check_contract_dates.py): the side padding moves from the
   cells and the buttons' row to the strip itself. */
@media (max-width: 599px) {
  body.v2 .decision-strip { padding: 0 20px 16px; }
  body.v2 .decision-strip .strip-cell { padding: 16px 0; }
  body.v2 .decision-strip .strip-actions { padding: 14px 0 0; }
}

/* -- Buyer and supplier pages, increment 5 ---------------------------------- */
body.v2 .v2-h3 { font-family: var(--font-heading); font-weight: 600; font-size: 24px; margin: 0 0 12px; }
body.v2 .v2-figure-locked { font-size: 24px !important; color: var(--v2-muted) !important; display: inline-flex; gap: 8px; align-items: center; }
body.v2 .v2-tint { background: #eceae4; }
body.v2 .v2-timeline { padding: 20px 22px; margin-top: 26px; }
body.v2 .v2-tl-rows { display: flex; flex-direction: column; }
body.v2 .v2-tl-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--v2-hair); }
body.v2 .v2-tl-row:last-child { border-bottom: 0; }
body.v2 .v2-tl-name { font-size: 14px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
body.v2 .v2-tl-name .foot { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--v2-muted); margin-top: 2px; }
body.v2 .v2-tl-track { position: relative; height: 14px; background: #f3f2ee; }
body.v2 .v2-tl-bar { position: absolute; top: 2px; height: 10px; background: var(--v2-pine); }
body.v2 .v2-tl-row.is-expected .v2-tl-bar { opacity: 0.5; }
body.v2 .v2-tl-row.is-ended .v2-tl-bar { background: #a9a8a1; opacity: 1; }
body.v2 .v2-tl-today { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px solid var(--v2-ink); }
body.v2 .v2-tl-axis .v2-tl-track { background: none; height: 18px; }
body.v2 .v2-tl-year { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--v2-muted); }
body.v2 .v2-caption { font-family: var(--font-mono); font-size: 12px; color: var(--v2-muted); margin: 10px 0 0; }
@media (max-width: 760px) {
  body.v2 .v2-tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  body.v2 .v2-tl-axis > div:first-child { display: none; }
}

/* -- Home, increment 6 -------------------------------------------------------- */
body.v2 .v2-band-top { border-top: 1px solid var(--v2-hair); }
body.v2 .v2-home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
body.v2 .v2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.v2 .home-v2 .v2-h1 { font-size: clamp(40px, 4.8vw, 62px); }
body.v2 .v2-body { font-size: 17px; line-height: 1.5; color: var(--v2-body); margin: 0; }
body.v2 .v2-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin: 0; font-size: 17px; }
body.v2 .v2-note { margin: 0; font-size: 15px; color: var(--v2-muted); }
body.v2 .v2-note .hero-brief::before { content: "·"; display: inline-block; margin: 0 0.5em; color: var(--v2-muted); }
body.v2 .home-v2 .hero-monday .notes-form { margin-top: 4px; }
body.v2 .v2-renew-panel { padding: 0; }
body.v2 .v2-renew-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--v2-ink); }
body.v2 .v2-renew-head > div { display: flex; flex-direction: column; gap: 2px; }
body.v2 .v2-renew-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
body.v2 .foot { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--v2-muted); }
body.v2 .v2-renew-rows { padding: 4px 20px 6px; display: flex; flex-direction: column; }
body.v2 .v2-renew-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; overflow-wrap: anywhere; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-hair); align-items: center; font-size: 14px; line-height: 1.35; color: var(--v2-ink); text-decoration: none; }
body.v2 .v2-renew-row:last-child { border-bottom: 0; }
body.v2 .v2-renew-row .num { font-family: var(--font-mono); font-size: 12px; text-align: right; }
body.v2 .v2-renew-row .bar { height: 9px; background: #e9e8e2; display: block; }
body.v2 .v2-renew-row .tag { justify-self: end; }
body.v2 .v2-renew-bands { padding: 0 20px 16px; }
body.v2 .v2-renew-caption { border: 1px solid var(--v2-hair); border-top: 0; background: var(--v2-ground); padding: 10px 20px; margin: 0; }
body.v2 .v2-sources { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 32px; padding-top: 16px; padding-bottom: 16px; }
body.v2 .v2-source { font-family: var(--font-heading); font-weight: 600; font-size: 19px; }
body.v2 .v2-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
body.v2 .v2-mono-link { font-family: var(--font-mono); font-size: 13px; text-decoration: underline; }
body.v2 .v2-strip-home .figure { text-decoration: none; }
body.v2 .v2-strip-home .cell { padding: 28px 26px; gap: 12px; }
body.v2 .v2-strip-home .tag { align-self: flex-start; }
body.v2 .v2-cell-text { font-size: 15px; line-height: 1.5; color: var(--v2-body); }
body.v2 .v2-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.v2 .v2-three .panel { display: flex; flex-direction: column; gap: 10px; }
body.v2 .v2-ruled > div { border-top: 1px solid var(--v2-ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
body.v2 .v2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 8px; align-items: start; }
body.v2 .v2-brief-panel { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
body.v2 .v2-brief-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.v2 .v2-brief-counts > div { display: flex; flex-direction: column; gap: 6px; }
body.v2 .v2-brief-counts .figure { font-family: var(--font-heading); font-weight: 600; font-size: 52px; line-height: 0.9; color: var(--v2-ink-figure); }
body.v2 .v2-brief-counts .muted { font-family: var(--font-mono); font-size: 12px; }
body.v2 .v2-rows-panel { padding: 0 18px; }
body.v2 .v2-winners { padding: 6px 20px; }
body.v2 .v2-winner { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-hair); }
body.v2 .v2-winner:last-child { border-bottom: 0; }
body.v2 .v2-winner .num { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 900px) {
  body.v2 .v2-home-hero, body.v2 .v2-two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.v2 .v2-three, body.v2 .v2-brief-counts { grid-template-columns: minmax(0, 1fr); }
  body.v2 .v2-home-hero { padding-top: 20px; }
}

/* -- Prose pages, the archive, account and login, increment 7 ---------------- */
/* The wide container, with a 760px reading measure for the prose. */
body.v2[data-page^="/terms/"] main p, body.v2[data-page^="/terms/"] main li,
body.v2[data-page^="/privacy/"] main p, body.v2[data-page^="/privacy/"] main li,
body.v2[data-page^="/how/"] main p, body.v2[data-page^="/how/"] main li,
body.v2[data-page^="/about/"] main p, body.v2[data-page^="/about/"] main li,
body.v2[data-page^="/research/"] main p, body.v2[data-page^="/research/"] main li,
body.v2[data-page^="/categories/"] main p, body.v2[data-page^="/categories/"] main li,
body.v2[data-page^="/monday/"] main p { max-width: var(--v2-measure); }
body.v2[data-page^="/categories/"] main .card, body.v2[data-page^="/how/"] main .qa,
body.v2[data-page^="/about/"] main .qa { background: var(--v2-white); border: 1px solid var(--v2-hair); padding: 18px 22px; }
/* The archive's list of issues, written at the edge, in a white panel. */
body.v2 [data-tc-monday-issues] { background: var(--v2-white); border: 1px solid var(--v2-hair); padding: 8px 20px; }
/* One centred panel for the pages a Function writes. */
body.v2 .v2-shell { padding-top: 40px; padding-bottom: 56px; }
body.v2 .v2-shell-panel { max-width: 560px; margin: 0 auto; padding: 28px; box-sizing: border-box; }
body.v2 .v2-shell-panel .btn { display: flex; width: 100%; box-sizing: border-box; justify-content: center; }
@media (max-width: 480px) { body.v2 .v2-shell-panel { padding: 20px; } }
/* A long address in prose wraps on a 320px screen (the ICO register link). */
body.v2 main p a, body.v2 main li a { overflow-wrap: anywhere; }
/* Claude's increment 4 findings of 3 November. Each key fact has a mono
   footnote; the basis follows the clock's words with " · " only when the
   words are there (with no script the span is empty). The title block may
   use 860px, so a contract title does not wrap at half the page. */
body.v2 .decision-strip .v2-foot { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--v2-muted); margin-top: 8px; letter-spacing: 0; }
body.v2 .decision-strip .v2-foot [data-rel-date]:not(:empty) + .v2-foot-basis::before { content: "\00a0\00b7\00a0"; }
body.v2 .decision-strip .strip-cell dd .row-meta { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--v2-muted); margin-top: 6px; }
body.v2 .record-h1 { max-width: 860px !important; }
body.v2 .decision-strip .strip-cell dd .v2-foot [data-rel-date] { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* Buyer and supplier strips on a phone: a 2 x 2 grid, so the contract list
   starts on the first screen. Claude, 2026-11-03, finding 6. */
@media (max-width: 760px) {
  body.v2 .v2-strip:not(.v2-strip-home) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v2 .v2-strip:not(.v2-strip-home) > .cell { padding: 14px 14px 12px; gap: 6px; border-top: 0; }
  body.v2 .v2-strip:not(.v2-strip-home) > .cell:nth-child(2n) { border-left: 1px solid var(--v2-hair); }
  body.v2 .v2-strip:not(.v2-strip-home) > .cell:nth-child(n+3) { border-top: 1px solid var(--v2-hair); }
  body.v2 .v2-strip:not(.v2-strip-home) .figure { font-size: 30px; }
}

/* Home, "The numbers": the first tile carries the long sentence, so it is
   wider, and every tile's tag sits at the foot, so no tile has an empty
   block under it. Claude, 2026-11-03, finding 7. */
body.v2 .v2-strip-balanced { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
body.v2 .v2-strip-balanced .tag { margin-top: auto; }
@media (max-width: 760px) {
  body.v2 .v2-strip-balanced { grid-template-columns: minmax(0, 1fr); }
}

/* PHONE TABLES, one pattern for every .table. Claude, 2026-11-03, item 10:
   at 390px the text sat on the panel edge, every cell drew its own rule, and
   ds.css's "padding: 0 !important" removed the v2 padding. Each record is now
   one padded block with one rule under it. The title leads it, unlabelled
   (ds.css), and every other value is a short "LABEL value" line. */
@media (max-width: 760px) {
  body.v2 main .table tr { padding: 14px 16px !important; gap: 5px; border-bottom: 1px solid var(--v2-hair); }
  body.v2 main .table tbody tr:last-child { border-bottom: 0; }
  body.v2 main .table td, body.v2 main .table td:first-child, body.v2 main .table td:last-child { padding: 0 !important; border: 0 !important; }
  body.v2 main .table td:empty { display: none; }
  body.v2 main .table td[data-label]:not(:empty)::before { display: inline; margin: 0 8px 0 0; }
  body.v2 main .table td[data-label="Contract"], body.v2 main .table td[data-label="Feature"],
  body.v2 main .table td[data-label="Firm"], body.v2 main .table td[data-label="Public body"],
  body.v2 main .table td[data-label="Type of work"], body.v2 main .table td[data-label="How you can win it"] {
    order: -1; font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.2; padding-bottom: 3px !important; }
  /* :not(:empty) here too, or ds.css's general label rule outranks this one
     and the title prints "CONTRACT" above itself. */
  body.v2 main .table td[data-label="Contract"]:not(:empty)::before, body.v2 main .table td[data-label="Feature"]:not(:empty)::before,
  body.v2 main .table td[data-label="Firm"]:not(:empty)::before, body.v2 main .table td[data-label="Public body"]:not(:empty)::before,
  body.v2 main .table td[data-label="Type of work"]:not(:empty)::before,
  body.v2 main .table td[data-label="How you can win it"]:not(:empty)::before { content: none; }
  /* The directories: one compact row per entry, the name then its counts on
     one line, as "CYBER CONTRACTS 96   SUPPLIERS 62". */
  body.v2 main .table-dir tr { flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; padding: 11px 16px !important; }
  body.v2 main .table-dir td { width: auto; }
  body.v2 main .table-dir td:first-child { flex-basis: 100%; padding-bottom: 0 !important; }
  body.v2 main .table-dir td:first-child > div { font-family: var(--font-body); font-weight: 400; font-size: 14px; }
}

/* Home, "Coming up for renewal". Claude, 2026-11-03, item 12: the three
   count pills on one row, and on a phone each row stacked (title, supplier,
   date), so no word breaks in the middle. The same rows lower on the page. */
body.v2 .v2-renew-bands { flex-wrap: nowrap; gap: 6px; }
body.v2 .v2-renew-bands .tag { white-space: nowrap; font-size: 10px; padding-left: 6px; padding-right: 6px; }
@media (max-width: 760px) {
  body.v2 .v2-renew-row { grid-template-columns: minmax(0, 1fr); gap: 3px; overflow-wrap: normal; }
  body.v2 .v2-renew-row .num { text-align: left; }
  body.v2 .v2-renew-row.is-locked { grid-template-columns: minmax(0, 1fr) auto; }
  body.v2 .v2-renew-bands { flex-wrap: wrap; }
}

/* Home, the source strip as an ink band, as the footer. Claude, 2026-11-03,
   item 13. On a phone the sources stack, centred, and the figures sit side by
   side. */
body.v2 .v2-band-ink { background: var(--v2-ink); color: var(--v2-ground); border-bottom: 0; }
body.v2 .v2-band-ink .v2-sources { justify-content: space-between; gap: 18px 40px; padding-top: 26px; padding-bottom: 26px; }
body.v2 .v2-sources-names { display: flex; flex-direction: column; gap: 8px; }
body.v2 .v2-band-ink .eyebrow { color: var(--v2-ink-muted, #b8b6ad); margin: 0; }
body.v2 .v2-source-row { display: flex; flex-wrap: wrap; gap: 6px 28px; }
body.v2 .v2-band-ink .v2-source { color: var(--v2-ground); font-size: 22px; }
body.v2 .v2-proof { display: flex; gap: 28px; margin: 0; align-items: baseline; }
body.v2 .v2-proof > span:not(.v2-proof-sep) { display: flex; flex-direction: column; gap: 4px; }
body.v2 .v2-proof-sep { display: none; }
body.v2 .v2-proof .figure { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 0.95; color: var(--v2-ground); letter-spacing: -0.02em; }
body.v2 .v2-band-ink .v2-proof .foot { color: var(--v2-ink-muted, #b8b6ad); font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 760px) {
  body.v2 .v2-band-ink .v2-sources { flex-direction: column; align-items: center; text-align: center; }
  body.v2 .v2-sources-names { align-items: center; }
  body.v2 .v2-source-row { flex-direction: column; align-items: center; gap: 2px; }
  body.v2 .v2-proof { justify-content: center; }
  body.v2 .v2-proof .figure { font-size: 32px; }
}

/* Buyer and supplier tables: the type of work as a tag under the title, in
   place of its own column. Claude, 2026-11-03, item 14. */
body.v2 .v2-types { margin-top: 6px; }
body.v2 .v2-types .tag { font-size: 10px; }