/* patchpanel — COLA registry
   Design intent: a public records office, not a startup landing page.
   Rules instead of shadows. Serif headings, grotesque body, tabular figures.
   Nothing rounded, nothing glowing, no gradients, no animation. High contrast.
   Two typefaces doing different jobs, the way printed reference works do. */

:root {
  --ink:        #14161a;   /* body text — near-black, not pure */
  --ink-2:      #3d434d;   /* secondary */
  --ink-3:      #6a707c;   /* captions */
  --rule:       #c8ccd4;   /* hairlines */
  --rule-2:     #e4e7ec;   /* light fills */
  --paper:      #ffffff;
  --paper-2:    #f6f7f9;   /* table stripe / panel */
  --gov:        #1a4480;   /* institutional navy */
  --gov-dark:   #10264a;
  --seal:       #7b2d26;   /* oxblood, used once */
  --focus:      #ffbf47;   /* GOV.UK-style focus yellow */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

/* ---- statutory top band ------------------------------------------------ */

body::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--gov);
  border-bottom: 1px solid var(--gov-dark);
}

/* ---- layout ------------------------------------------------------------ */

header, main, footer { max-width: 1020px; margin: 0 auto; padding: 0 32px; }

header { padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }

main { padding-top: 8px; }

section { padding: 56px 0; border-bottom: 1px solid var(--rule-2); }
section:last-child { border-bottom: 0; }

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.seal { width: 46px; height: 46px; color: var(--gov); flex: 0 0 auto; }
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-width: none;
}
.wordmark span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---- type -------------------------------------------------------------- */

h1 {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.006em;
  margin: 0 0 14px;
  max-width: 20ch;
}

h2 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  margin: 0 0 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 0 0 10px;
}

p { margin: 0 0 14px; max-width: 68ch; }

.lede { font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }
.lede strong { color: var(--ink); font-weight: 600; }

a { color: var(--gov); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gov-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  background: var(--focus);
  color: var(--ink);
  text-decoration: none;
}

code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-2);
       border: 1px solid var(--rule-2); padding: 1px 5px; }

ul, ol { max-width: 68ch; padding-left: 22px; }
li { margin-bottom: 7px; }

.muted { color: var(--ink-3); font-size: 14px; }

/* ---- headline figures -------------------------------------------------- */

.stat-row {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 22px 0 12px;
  border: 1px solid var(--rule);
  border-right: 0;
}
.stat {
  flex: 1 1 150px;
  padding: 13px 16px;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
}
.stat .n {
  display: block;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.stat .k {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  margin-top: 3px;
}

.prov {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}

/* ---- controls ---------------------------------------------------------- */

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }

input[type=search], select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: 0;
  padding: 7px 10px;
}
input[type=search] { flex: 1 1 260px; min-width: 200px; }
input[type=search]::placeholder { color: var(--ink-3); }

.count { font-size: 13px; color: var(--ink-3); font-family: var(--mono); }

/* ---- table ------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--rule); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--paper);
  background: var(--gov);
  padding: 9px 11px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

td {
  padding: 8px 11px;
  border-top: 1px solid var(--rule-2);
  vertical-align: top;
}

tbody tr:nth-child(even) td { background: var(--paper-2); }
tbody tr:hover td { background: #eef1f6; }

td:first-child { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ---- figures ----------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0;
         border: 1px solid var(--rule); border-left: 0; }
.card { padding: 16px 18px; border-left: 1px solid var(--rule); }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  position: relative;
  padding: 2px 0 6px;
}
.bar .lbl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .val { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* app.js emits <span class="fill wNN"> — 21 pre-declared widths, because the
   deployed CSP is style-src 'self' with no 'unsafe-inline' and blocks style="". */
.bar .fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: var(--gov);
  grid-column: 1 / -1;
}
.w0{width:0}      .w5{width:5%}    .w10{width:10%}  .w15{width:15%}
.w20{width:20%}   .w25{width:25%}  .w30{width:30%}  .w35{width:35%}
.w40{width:40%}   .w45{width:45%}  .w50{width:50%}  .w55{width:55%}
.w60{width:60%}   .w65{width:65%}  .w70{width:70%}  .w75{width:75%}
.w80{width:80%}   .w85{width:85%}  .w90{width:90%}  .w95{width:95%}
.w100{width:100%}

/* ---- tiers ------------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0;
         border: 1px solid var(--rule); border-left: 0; }
.tier { padding: 30px 28px; border-left: 1px solid var(--rule); }
.tier.paid {
  background: #fbf9f5;
  border-left: 3px solid var(--seal);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.flag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--paper);
  background: var(--seal);
  padding: 3px 9px;
  margin: 0 0 12px;
}
.tier.paid .price { color: var(--seal); }
.tier ul { padding-left: 18px; font-size: 15px; }

.price { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--paper);
  background: var(--gov);
  border: 1px solid var(--gov-dark);
  padding: 9px 18px;
}
.btn:hover { background: var(--gov-dark); color: var(--paper); }
.btn.buy { background: var(--seal); border-color: #5c211c; }
.btn.buy:hover { background: #5c211c; }

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

footer {
  padding-top: 22px; padding-bottom: 46px;
  margin-top: 8px;
  border-top: 2px solid var(--ink);
  font-size: 13px;
  color: var(--ink-3);
}
footer p { max-width: 78ch; }

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

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; }
  header, main, footer { padding-left: 16px; padding-right: 16px; }
  .stat-row { border-right: 1px solid var(--rule); }
  .stat { flex: 1 1 50%; border-bottom: 1px solid var(--rule); }
}

@media print {
  body::before { display: none; }
  a { color: var(--ink); }
  .controls, .btn { display: none; }
}

/* ---- notice ------------------------------------------------------------ */

.notice {
  border-left: 4px solid var(--seal);
  background: var(--paper-2);
  padding: 12px 16px;
  margin: 0 0 16px;
  max-width: 68ch;
}
.notice strong { color: var(--seal); }

/* the buy button is disabled while checkout is closed */
.btn[aria-disabled="true"] {
  background: var(--rule-2);
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
}


/* ---- purchase dock ----------------------------------------------------- */

body { padding-bottom: 78px; }

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 2px solid var(--gov);
  box-shadow: 0 -1px 0 var(--rule-2);
  z-index: 20;
}
.dock-in {
  max-width: 1020px;
  margin: 0 auto;
  padding: 13px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dock-t { margin: 0; font-size: 15px; max-width: none; }
.dock-t strong { font-family: var(--serif); font-size: 17px; }
.dock-t span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.dock-a { margin: 0; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.dock-p { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--seal); }

@media (max-width: 640px) {
  .dock-in { padding: 10px 16px; gap: 12px; }
  .dock-t span { display: none; }
  .dock-p { font-size: 20px; }
  body { padding-bottom: 68px; }
}
@media print { .dock { display: none; } body { padding-bottom: 0; } }