/* Light is the default, deliberately — a document about public notices should look like
   paper unless the reader asks otherwise. The operating system's preference is not
   consulted; the header switch is, and its choice is remembered per browser. */
:root{
  color-scheme:light;
  --ground:#F3F5F1; --surface:#fff; --surface2:#FAFBF9;
  --ink:#16201C; --ink2:#3C4A44; --muted:#5D6B64; --faint:#8A968F;
  --line:#DCE3DB; --line2:#EDF1EA;
  --accent:#0E5F4E; --accent-soft:#DDEEE8; --accent-ink:#0A4B3E;
  --seal:#B23A2F; --amber:#8A6410; --amber-soft:#F8ECD6;
  /* The vibrant register. Green is the ledger — it marks what has been verified.
     Red is the notice board — it marks what is open, what is closing, and what to press. */
  --red:#C1352B; --red-ink:#93231B; --red-soft:#FBE6E2; --red-hot:#DC4a33;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1512; --surface:#151C19; --surface2:#1A221E;
  --ink:#E7EDE9; --ink2:#BCC8C2; --muted:#93A19A; --faint:#71807A;
  --line:#2A342F; --line2:#212A26;
  --accent:#4FBFA0; --accent-soft:#123028; --accent-ink:#8FD9C4;
  --seal:#E58274; --amber:#D6A854; --amber-soft:#2C2214;
  --red:#E86B52; --red-ink:#F49780; --red-soft:#3A1913; --red-hot:#F27A5D;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Zilla Slab",Georgia,serif;letter-spacing:-.01em;line-height:1.2}
h1{font-size:clamp(26px,4vw,38px);margin:6px 0 14px}
h2{font-size:20px;margin:34px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line2)}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
.sitehead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;
  /* 90, not 10. The search app's .tabbar is a flex item of .phone, and z-index applies to a
     flex item even at position:static - so its z-index:50 outranked the masthead's 10 and
     the app's tab row painted across the top of an open mega-menu panel. The masthead and
     anything hanging off it belong above every page's own chrome. */
  z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;flex-wrap:wrap}
/* The lockup: the mark, then the name on two lines with .com turned down the right
   edge, as the artwork sets it. */
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand:hover{text-decoration:none}
.bmark{flex:none;display:block}
.bword{display:flex;align-items:stretch;gap:3px;
  font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--red);text-transform:uppercase}
.blines{display:flex;flex-direction:column;justify-content:center}
.bword b{display:block;font-weight:800;font-size:16px;line-height:1.02;letter-spacing:-.01em}
.bword b+b{letter-spacing:-.035em}
.bword i{align-self:stretch;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  text-transform:lowercase;writing-mode:vertical-rl;text-orientation:mixed;opacity:.9;
  display:flex;align-items:center}
@media(max-width:420px){ .bword b{font-size:13.5px} .bword i{font-size:8px} }
.sitehead nav{display:flex;gap:16px;font-size:14px;font-weight:500}
.kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;
  margin-top:26px}
main.wrap{padding-top:4px;padding-bottom:40px}
.lede{background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;margin-bottom:8px}
.lede p+p{margin-top:9px}
.lede p{color:var(--ink2)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.statgrid div{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:11px 13px}
.statgrid span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.statgrid b{font-size:19px;font-family:"IBM Plex Mono",monospace;font-weight:600}
/* The tile for a figure the authority has not published. The dash is the value; the
   line under it says whose silence it is, in sentence case so it reads as a note and
   not as a second label. */
/* What the authority HAS published about the unit, on the tab where a reader lands.
   A scheme with no unit list used to open on one sentence saying there was nothing, which
   reads as an empty site rather than an honest one. */
.unitspec{border:1px solid var(--line2);border-radius:12px;background:var(--surface);
  padding:18px 20px;margin:10px 0 18px}
.unitspec h2{margin:0 0 8px;font-size:17px}
.unitspec .prov{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--muted);
  border-left:3px solid var(--line2);padding-left:11px}
.unitspec table.kv{width:100%;border-collapse:collapse}
.unitspec table.kv th{width:190px;text-align:left;vertical-align:top;font-weight:600;
  font-size:12.5px;color:var(--muted);padding:8px 12px 8px 0;border-top:1px solid var(--line2)}
.unitspec table.kv td{vertical-align:top;font-size:13.5px;line-height:1.5;padding:8px 0;
  border-top:1px solid var(--line2)}
.unitspec table.kv tr:first-child th,.unitspec table.kv tr:first-child td{border-top:0}
.unitspec .fine{margin:14px 0 0;font-size:12.5px;line-height:1.55}
@media(max-width:620px){ .unitspec table.kv th,.unitspec table.kv td{display:block;width:auto}
  .unitspec table.kv td{padding-top:0;border-top:0} }
/* The hero says how many properties are in the schemes that are open. The site also holds
   closed ones, and a reader who saw one number here and a bigger one in the menu had no way
   to know they were answers to different questions. Both, and which is which. */
.hero-scope{display:block;font-size:12.5px;opacity:.72;margin-top:3px;font-weight:400}
/* the card tile that carries words rather than a number */
.cardfoot .nd .v{font-size:12px;letter-spacing:0;white-space:nowrap}
.statgrid .sub{margin-top:4px;text-transform:none;letter-spacing:0;font-size:11.5px;line-height:1.35}
.statgrid.noinv b{font-size:16px;font-family:inherit;line-height:1.3}
.statgrid.noinv div:first-child b{font-size:22px}
/* The asset tables want the whole 1180px the scheme page opens up. Nothing else does: a
   two-column key/value ran its label to 34% of that and left the value stranded in the
   middle of a band of empty surface, which is what made the page read as stripes rather
   than as a document. Text-width, like the prose it sits among. */
table.kv{width:100%;max-width:760px;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line2);border-radius:10px;overflow:hidden}
table.kv th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;
  padding:9px 13px;width:230px;vertical-align:top;border-bottom:1px solid var(--line2)}
table.kv td{padding:9px 13px;font-size:14px;border-bottom:1px solid var(--line2);vertical-align:top}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:none}
.tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line2);border-radius:10px}
table.assets{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.assets th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
table.assets td{padding:8px 11px;border-bottom:1px solid var(--line2);vertical-align:top}
table.assets tr:last-child td{border-bottom:none}
.num{text-align:right;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
/* Money is set from the left, not the right. Right alignment lines up the last digit,
   which is the useful edge only when every value carries the same unit. These do not:
   "₹6.87 L" against "₹12.37 Cr" aligns the L with the r and leaves the rupee signs
   ragged, so the eye has no column to run down. Left-set, every value starts at the same
   pixel and the monospace face keeps the digits in line within a row. Area and quantity
   stay right - they are bare numbers of one magnitude, where the last digit is the edge
   that matters. */
th.num.money,td.num.money{text-align:left}
/* The merged place cell is the widest string in the table, so the browser handed it a third
   of the width and pushed every other column away from its own heading. Fixed, and the
   slack falls into the CTA column at the end where it does no harm. */
table.assets td.mrg{width:190px}
/* `table.assets th` beat a bare `th.num` on specificity, so every numeric header sat
   left while its column sat right. */
th.num,table.assets th.num{text-align:right}
/* A list of 1,224 rows is scrolled, and a column header that scrolls away with the first
   screen leaves every figure below it unlabelled. The head sticks under the site header
   (70px), which is the only thing above it. */
/* Sticky column headers need a scrollport of their own: inside a wrapper that only
   scrolls sideways they never stick, because the page is what is moving. So the long
   unit list gets its own vertical scroll box and its head sticks to the top of that. */
/* A row with nothing available is still worth showing - it is the answer to "what else is
   in this scheme" - but it should not compete with the rows that have stock. */
table.assets tr.dimrow td{color:var(--faint)}
table.assets tr.totrow td{border-top:2px solid var(--line);font-weight:600}
.tblwrap.tallscroll{max-height:min(70vh,720px);overflow:auto}
/* the roll-up across schemes on the authority and city pages: a scheme column wide enough
   that a scheme name is two lines, its method under it, and a named way down on each row */
table.assets.rollup{font-size:12.5px}
table.assets.rollup td.mrg{width:120px}
table.assets.rollup td.schc{min-width:150px;max-width:190px}
table.assets.rollup td.num,table.assets.rollup th.num{white-space:nowrap}
table.assets.rollup td:nth-child(4){width:1%}
/* a price range may wrap at its dash so the table fits the column; a single figure never
   breaks between the rupees and its unit */
table.assets.rollup td.money{white-space:normal;max-width:150px}
table.assets.rollup td.money .nb{white-space:nowrap}
table.assets.rollup td.schc i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
table.assets.rollup td.goc{white-space:nowrap}
table.assets.rollup a.rowgo{font-weight:600;color:var(--accent-ink);text-decoration:none;border-bottom:1px solid currentColor}
table.assets.rollup td.rate small.ru{font-size:10.5px;color:var(--muted);margin-left:2px}
.tblwrap.tallscroll thead th{position:sticky;top:0;z-index:3;background:var(--surface)}
.tchip{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);border-radius:4px;
  padding:1px 5px;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
ul.cards{list-style:none;display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
ul.cards a{display:flex;flex-direction:column;gap:3px;background:var(--surface);
  border:1px solid var(--line2);border-radius:11px;padding:13px 15px;color:var(--ink);height:100%}
ul.cards a:hover{border-color:var(--accent);text-decoration:none}
ul.cards b{font-size:14.5px;line-height:1.35}
ul.cards span{font-size:12px;color:var(--muted)}
ul.cards .hot{color:var(--seal);font-weight:600}
/* The breakdown under a count: what the properties actually are, at a size that does not
   compete with the number above it. */
.clsn{display:block;font-size:11px;color:var(--faint);margin-top:2px;line-height:1.4;
  font-family:"IBM Plex Mono",monospace;letter-spacing:0}
ul.cards .when{color:var(--faint)}
ul.inline{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
ul.inline a{background:var(--surface);border:1px solid var(--line2);border-radius:20px;
  padding:5px 13px;font-size:13px;display:inline-block}
ul.caveats,ul.docs{padding-left:19px;display:grid;gap:7px;font-size:14px;color:var(--ink2)}
ul.docs .dt{font-size:11px;color:var(--faint)}

/* ---- the documents tab: a shelf of first pages ----
   Sized so a phone gets two per row and a desktop four, with the page image at the real
   proportions of A4 so a scanned notice is not stretched. */
/* ---------- the plot table, one standard everywhere ----------
   A repeated cell is drawn once and spanned, the way the authority's own booklet does it,
   and the label sticks to the top of its span - a merged cell that has scrolled past its
   own top leaves every row under it belonging to nothing. */
table.assets td.mrg{background:var(--surface2);font-weight:600;vertical-align:top;padding:0;
  border-right:1px solid var(--line);border-left:1px solid var(--line)}
table.assets td.mrg .mv{position:sticky;top:6px;display:block;padding:9px 8px}
table.assets td.pno{font-weight:600;white-space:nowrap}
table.assets td.rate{color:var(--ink2)}
.docgh{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);margin:22px 0 2px;display:flex;align-items:center;gap:8px}
.docgh span{font-size:11px;letter-spacing:0;font-weight:600;color:var(--ink2);
  border:1px solid var(--line);border-radius:999px;padding:0 7px}
p.fine.dgn{margin:2px 0 0}
.docgrid{display:grid;gap:14px;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 4px}
.doccard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);
  transition:border-color .12s,box-shadow .12s,transform .12s}
.doccard:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(12,6,4,.10);transform:translateY(-1px)}
/* Three to a row means a card is a third of the page wide, and a full A4 page shape at
   that width is 400px of thumbnail before the title. The thumbnail is a recognition
   aid, not the document: it shows the top of the first page and stops. */
.dcshot{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;
  background:var(--surface2);border:1px solid var(--line)}
.dcshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dcnone{position:absolute;inset:0;display:grid;place-items:center;font:600 13px/1 inherit;
  letter-spacing:.08em;color:var(--faint)}
.dcb{display:grid;gap:3px;min-width:0}
.dcb b{font-size:12.5px;line-height:1.32;font-weight:600;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dcmeta{display:flex;gap:6px;align-items:center;min-width:0}
.dcmeta .dt{font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcmeta .dtag{flex:none}
.dcmeta .dtag{font:600 9.5px/1 inherit;letter-spacing:.07em;color:var(--accent);
  border:1px solid var(--accent);border-radius:3px;padding:2px 4px}
.dcsrc{font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:9px;padding:11px 20px;
  font-weight:600;font-size:14px}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.cta{margin:20px 0 4px}
.fine{font-size:12px;color:var(--faint);line-height:1.55;margin-top:9px}
.sitefoot{border-top:1px solid var(--line);background:var(--surface);margin-top:44px;padding:22px 0 34px}
.sitefoot p{font-size:13px;color:var(--muted)}
@media(max-width:560px){
  .sitehead{padding:10px 14px}.sitehead nav{gap:12px;font-size:13px}
  .wrap{padding:0 14px}
}



/* ============================================================
   Home page
   Structure borrowed from the portals Indian buyers already use — 99acres,
   Housing, Magicbricks: an image band with the headline over it, a search card
   straddling the fold, quick chips, then sectioned card rows. What changes is the
   content: authorities instead of brokers, deadlines instead of "premium living".
   ============================================================ */

/* ---------- hero ---------- */
.hero{position:relative;padding:54px 20px 0;
  background:linear-gradient(158deg,#7B1E12 0%,#A82D1D 38%,#C6402D 72%,#D9542F 100%)}
:root[data-theme="dark"] .hero{background:linear-gradient(158deg,#3A0E08 0%,#6B1D12 45%,#8C2B1B 100%)}
/* A saffron wash top-right and a deep pool bottom-left, so the band is not a flat fill. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 400px at 82% -12%,rgba(255,183,77,.30),transparent 62%),
             radial-gradient(680px 420px at 8% 108%,rgba(14,95,78,.42),transparent 60%)}
/* The tricolour, stated once and quietly, as a rule under the masthead. */
.hero::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#FF9933 0 33.3%,#ffffff 33.3% 66.6%,#138808 66.6% 100%);opacity:.85}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:300px;
  color:#fff;opacity:.17;pointer-events:none;
  /* The buildings fade upward into the band rather than ending on a hard line. */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
  mask-image:linear-gradient(180deg,transparent,#000 42%)}
.hero-in{position:relative;max-width:940px;margin:0 auto;text-align:center;padding-bottom:34px}
.hero-eyebrow{color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.hero-h{font-family:"Zilla Slab",Georgia,serif;color:#fff;font-size:clamp(27px,4vw,44px);
  font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0 0 10px;
  text-shadow:0 2px 18px rgba(60,10,0,.28)}
.hero-sub{font-family:"Zilla Slab",Georgia,serif;font-size:clamp(17px,2vw,22px);font-weight:500;
  color:#FFD9A8;margin:0 0 14px}
.hero-p{color:rgba(255,255,255,.80);font-size:13.5px;margin:0}

/* ---------- search card ---------- */
/* No overflow:hidden — the suggestion list hangs below the card and would be clipped by
   it. The tab row keeps its own corners instead. */
.searchcard{position:relative;max-width:940px;margin:0 auto;background:var(--surface);
  border-radius:14px;box-shadow:0 18px 50px rgba(70,14,4,.34);transform:translateY(26px)}
.sc-tabs{border-radius:14px 14px 0 0}
.sc-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line2);padding:0 8px}
.sc-tab{background:none;border:none;cursor:pointer;font:inherit;color:var(--muted);
  padding:15px 16px 13px;font-size:14.5px;font-weight:600;white-space:nowrap;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:6px}
.sc-tab i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--faint);
  background:var(--surface2);border-radius:20px;padding:1px 6px;font-family:"IBM Plex Mono",monospace}
.sc-tab.on{color:var(--red);border-bottom-color:var(--red)}
.sc-tab.on i{background:var(--red-soft);color:var(--red-ink)}
.sc-row{display:flex;align-items:stretch;gap:0;padding:9px}
.sc-scope{display:flex;align-items:center;border-right:1px solid var(--line2);padding-right:4px}
.sc-scope select{border:none;background:none;font:inherit;font-size:14px;color:var(--ink);
  padding:10px 10px 10px 12px;cursor:pointer;max-width:190px}
.sc-scope select:focus{outline:none}
.sc-q{flex:1;display:flex;align-items:center;gap:9px;padding:0 12px;min-width:0}
.sc-i{width:17px;height:17px;stroke:var(--faint);fill:none;stroke-width:1.8;flex:none}
.sc-q input{flex:1;border:none;background:none;font:inherit;font-size:14.5px;color:var(--ink);
  padding:12px 0;min-width:0}
.sc-q input:focus{outline:none}
.sc-go{background:var(--red);color:#fff;border:none;cursor:pointer;font:inherit;
  font-size:14.5px;font-weight:600;padding:12px 28px;border-radius:9px;flex:none;
  box-shadow:0 2px 10px rgba(198,64,45,.32)}
.sc-go:hover{background:var(--red-hot)}

.qchips{position:relative;max-width:940px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;
  padding:44px 0 24px;justify-content:center}
.qchip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.30);color:#fff;
  border-radius:22px;padding:6px 15px;font-size:13px;font-weight:500;backdrop-filter:blur(2px)}
.qchip:hover{background:rgba(255,255,255,.28);text-decoration:none}

/* ---------- header CTA ---------- */
.navbtn{background:var(--red);color:#fff!important;border-radius:8px;padding:7px 15px;font-weight:600;white-space:nowrap}
.navbtn:hover{background:var(--red-hot);text-decoration:none}

/* ---------- home sections ---------- */
body.home main.wrap{max-width:1120px}
.hsec{margin-top:34px}
.hsec:first-child{margin-top:26px}
.hsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hsec h2{margin:0 0 4px;padding:0;border:none;font-size:22px;position:relative;padding-left:13px}
.hsec h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  border-radius:3px;background:var(--red)}
.h2first{margin-top:0}
.secsub{font-size:13.5px;color:var(--muted);margin:0 0 14px;padding-left:13px;max-width:64ch}
.seeall{font-size:13px;font-weight:600;color:var(--red);white-space:nowrap;margin-bottom:16px}
.more{margin-top:12px;font-size:13.5px}

/* scheme cards */
.hcards{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.hcard{display:flex;flex-direction:column;gap:4px;background:var(--surface);
  border:1px solid var(--line2);border-radius:12px;padding:14px 16px;color:var(--ink);
  border-left:3px solid var(--red)}
.hcard:hover{border-color:var(--line);border-left-color:var(--red-hot);
  box-shadow:0 6px 18px rgba(20,10,5,.07);text-decoration:none}
.hc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hc-top b{font-size:14.5px;line-height:1.3}
.hc-top em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;white-space:nowrap;
  background:var(--surface2);border-radius:20px;padding:2px 8px}
.hc-top em.hot{color:#fff;background:var(--red)}
.hc-mid{font-size:12px;color:var(--accent);font-weight:500}
.hc-tags{font-size:12px;color:var(--muted)}
.hc-foot{font-size:11.5px;color:var(--faint);margin-top:2px}

/* property-type cards */
.tcards{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:18px 17px 16px;
  background:var(--surface);border:1px solid var(--line2);border-radius:13px;color:var(--ink)}
.tcard:hover{border-color:var(--red);text-decoration:none}
.tcard b{font-size:15.5px;font-family:"Zilla Slab",Georgia,serif}
.tcard span{font-size:12.5px;color:var(--muted)}
.tart{width:40px;height:40px;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round;margin-bottom:8px}

/* individual plots */
.acards{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line2);
  border-radius:13px;overflow:hidden;color:var(--ink)}
.acard:hover{border-color:var(--red);text-decoration:none;box-shadow:0 6px 18px rgba(20,10,5,.07)}
.ac-art{position:relative;display:flex;align-items:center;justify-content:center;height:84px;
  background:linear-gradient(150deg,var(--red-soft),var(--surface2))}
.ac-art .tart{width:44px;height:44px;margin:0;opacity:.85}
.ac-art i{position:absolute;left:10px;top:9px;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.ac-b{display:flex;flex-direction:column;gap:2px;padding:12px 14px 13px}
.ac-b b{font-size:14.5px;line-height:1.3}
.ac-sub{font-size:12px;color:var(--muted)}
.ac-nums{display:flex;gap:18px;margin:9px 0 8px}
.ac-nums i{display:block;font-style:normal;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.ac-nums b{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600}
.ac-foot{font-size:11.5px;color:var(--faint);border-top:1px solid var(--line2);padding-top:8px}
.ac-foot em{font-style:normal;color:var(--muted)}
.ac-foot em.hot{color:var(--red);font-weight:600}

/* authority cards */
.authcards{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.authcard{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line2);border-radius:13px;padding:14px 15px;color:var(--ink)}
.authcard:hover{border-color:var(--red);text-decoration:none;box-shadow:0 6px 18px rgba(20,10,5,.07)}
.seal{width:52px;height:52px;flex:none}
.seal .s-fill{fill:var(--red-soft)}
.seal .s-ring{fill:none;stroke:var(--red);stroke-width:1.3;opacity:.6}
.seal .s-tick{stroke:var(--red);stroke-width:1.6;opacity:.5}
.seal .s-txt{fill:var(--red-ink);font-family:"IBM Plex Mono",monospace;font-weight:600;
  letter-spacing:-.03em}
.au-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.au-b b{font-size:14px;line-height:1.3}
.au-sub{font-size:11.5px;color:var(--accent);font-weight:500}
.au-n{font-size:12px;color:var(--muted)}
.au-n em{font-style:normal;color:var(--red);font-weight:600}


/* ---------- authority groups ----------
   The authority is the heading and its schemes are the cards beneath it, so "RIICO runs
   two rounds" is visible rather than something the reader has to assemble from two
   separate lists. */
.agrp{margin-bottom:30px}
.agrp-h{display:flex;align-items:center;gap:13px;padding:11px 15px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--line2);border-radius:12px;color:var(--ink)}
.agrp-h:hover{border-color:var(--red);text-decoration:none}
.agrp-h .seal{width:44px;height:44px}
.ag-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ag-t b{font-family:"Zilla Slab",Georgia,serif;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.ag-full{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-n{margin-left:auto;font-size:12.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;
  white-space:nowrap}
.ag-go{display:flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;color:var(--red);
  white-space:nowrap}
.ag-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media(max-width:640px){
  .ag-full,.ag-go{display:none}
  /* The totals do not fit beside the name on a phone, so they take the line under it
     rather than running through it. */
  .agrp-h{gap:4px 10px;padding:10px 12px;flex-wrap:wrap}
  .agrp-h .seal{width:36px;height:36px}
  .ag-t{flex:1;min-width:0}
  .ag-t b{font-size:16px}
  .ag-n{margin-left:0;flex-basis:100%;font-size:11.5px}
}


/* ---------- instalment cards ----------
   The terms are the card. A reader deciding whether they can afford a plot needs the
   share, the count, the rate and the penalty in that order, and nothing between them. */
.instcards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.instcard{display:flex;flex-direction:column;gap:9px;background:var(--surface);
  border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:12px;
  padding:15px 17px 13px;color:var(--ink)}
.instcard:hover{border-color:var(--line);border-left-color:var(--accent);
  text-decoration:none;box-shadow:0 6px 18px rgba(20,10,5,.07)}
.ic-h{display:flex;flex-direction:column;gap:2px}
.ic-h b{font-family:"Zilla Slab",Georgia,serif;font-size:16px;line-height:1.25}
.ic-auth{font-size:12px;color:var(--muted)}
.ic-intro{font-size:12.5px;color:var(--accent-ink);font-weight:600;background:var(--accent-soft);
  border-radius:7px;padding:6px 10px}
.ic-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ic-l li{position:relative;padding-left:15px;font-size:13px;color:var(--ink2);line-height:1.5}
.ic-l li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.ic-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;flex-wrap:wrap}
.ic-f>span:first-child{white-space:nowrap}
.ic-f .go{display:flex;align-items:center;gap:3px;color:var(--red);font-weight:600;
  font-family:"IBM Plex Sans",system-ui,sans-serif}
.ic-f .go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* trust band */
.hsec.band{background:var(--surface);border:1px solid var(--line2);border-radius:14px;
  padding:22px 24px 24px}
.hsec.band h2{margin-bottom:16px}
.chk{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding-left:13px}
.chk b{display:block;font-size:13.5px;margin-bottom:4px}
.chk span{font-size:12.5px;color:var(--muted);line-height:1.55}

@media(max-width:560px){
  .hero{padding-top:34px}
  .skyline{height:190px;opacity:.15}
  .sc-tabs{padding:0 4px;scrollbar-width:none}
  .sc-tabs::-webkit-scrollbar{display:none}
  .sc-tab{padding:12px 9px;font-size:13px;white-space:nowrap}
  .sc-tab i{margin-left:4px}
  .sc-row{flex-wrap:wrap;gap:6px}
  .sc-scope{border-right:none;border-bottom:1px solid var(--line2);width:100%}
  .sc-scope select{max-width:none;width:100%}
  .sc-q{width:100%;padding:0 4px}
  .sc-go{width:100%}
  .qchips{padding-top:40px;justify-content:flex-start}
  .hsec-h{align-items:baseline}
  .seeall{margin-bottom:12px}
  .hsec.band{padding:18px 16px 20px}
  .chk{padding-left:0}
}

/* ---------- header filter menus ----------
   Four facets in the masthead, where a reader looks for them, rather than buried in a
   section further down the page. */
.hfilters{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;align-items:center}
/* display:flex on the class outranks the user agent's [hidden] rule, so the attribute
   would set hidden and nothing would happen. Say it here or the toggle is inert. */
.hfilters[hidden]{display:none}
.hmenu{position:relative}
.mbtn{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink2);
  padding:6px 11px;max-width:220px}
.mbtn:hover{border-color:var(--red);color:var(--red)}
.mbtn .mlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;flex:none;transition:transform .15s ease}
.hmenu.open .mbtn svg{transform:rotate(180deg)}
.hmenu.on .mbtn{border-color:var(--red);color:var(--red);background:var(--red-soft);font-weight:600}
.mpanel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 16px 40px rgba(20,10,5,.16);min-width:250px;max-width:340px;overflow:hidden}
.hmenu.open .mpanel{display:block}
.mscroll{max-height:min(58vh,420px);overflow-y:auto;padding:5px}
.mpanel button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);
  padding:8px 10px;border-radius:7px;line-height:1.35}
.mpanel button:hover{background:var(--surface2)}
.mpanel button[aria-selected="true"]{background:var(--red-soft);color:var(--red-ink);font-weight:600}
.mpanel button i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--faint);
  font-family:"IBM Plex Mono",monospace;flex:none}
/* The row is behind an explicit "Find specific" now, so nothing in it is hidden on a
   phone - a reader who opened the filters wants all of them. They wrap instead. */
@media(max-width:640px){ .hfilters{gap:5px} .hfilters .mbtn{font-size:12.5px;padding:6px 9px} }

/* ---------- elastic search suggestions ---------- */
.sc-q{position:relative}
.sugs{position:absolute;top:calc(100% + 6px);left:-12px;right:-12px;z-index:50;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px rgba(20,10,5,.20);overflow:hidden;padding:5px}
.sug{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;background:none;
  border:none;cursor:pointer;font:inherit;padding:9px 11px;border-radius:7px}
.sug:hover,.sug:focus-visible{background:var(--surface2)}
.sug b{font-size:13.5px;font-weight:600;color:var(--ink);flex:none;max-width:58%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug span{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sug i{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red-ink);background:var(--red-soft);border-radius:4px;padding:2px 6px;flex:none}

/* ---------- result tabs and summary ---------- */
/* The search card overhangs the hero by 26px, so the first row under it starts clear of
   the card rather than behind it. */
/* Three states of one thing, centred: a segmented control reads as a choice between
   three, where three underlined words read as decoration and got missed. */
/* One row: an empty first column, the strip centred in the second, the sort right-aligned
   in the third. The rule that used to sit under the summary sits here instead, above the
   strip, so it closes the hero rather than cutting the summary off from the list it
   describes. */
.rbar{margin-top:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;border-top:1px solid var(--line);padding-top:20px}
.rbar .rtabs{grid-column:2;justify-self:center}
.rbar #rchips{grid-column:3;justify-self:end;min-width:0}
.rbar .fbar{margin:0}
@media(max-width:820px){
  .rbar{grid-template-columns:1fr;justify-items:center;gap:10px}
  .rbar .rtabs,.rbar #rchips{grid-column:1;justify-self:center} }
.rtabs{display:inline-flex;gap:4px;padding:5px;background:var(--surface2);
  border:1px solid var(--line);border-radius:13px;max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;
  border-radius:9px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--muted);padding:9px 18px;white-space:nowrap}
.rtab .rt-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.rtab.t-live .rt-dot{background:var(--red)}
.rtab.t-upcoming .rt-dot{background:var(--amber)}
.rtab:hover:not(:disabled):not(.on){color:var(--ink);background:var(--surface)}
.rtab i{font-style:normal;font-size:11.5px;font-weight:600;font-family:"IBM Plex Mono",monospace;
  background:var(--surface);color:var(--faint);border-radius:20px;padding:1px 8px}
.rtab.on{background:var(--surface);border-color:var(--line);color:var(--ink);
  box-shadow:0 2px 6px rgba(20,10,5,.07)}
.rtab.t-live.on{color:var(--red)}
.rtab.on i{background:var(--red-soft);color:var(--red-ink)}
.rtab:disabled{opacity:.4;cursor:default}
/* A live dot should read as live. Reduced-motion readers get the colour without the pulse. */
@keyframes rtp{0%,100%{opacity:1}50%{opacity:.35}}
.rtab.t-live.on .rt-dot{animation:rtp 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rtab.t-live.on .rt-dot{animation:none}}
@media(max-width:480px){
  .rtabs{gap:2px;padding:4px}
  .rtab{padding:8px 10px;font-size:13px;gap:5px}
  .rtab i{font-size:10.5px;padding:1px 6px}
  .rtab .rt-dot{width:7px;height:7px}
}
/* Two ways in, one primary. "View all" is the button; "Find specific" is the same size
   but outlined, because narrowing is the second thought, not the first. */
.hcta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cta-main,.cta-alt{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:15px;
  font-weight:600;border-radius:10px;padding:11px 20px;white-space:nowrap;cursor:pointer;
  border:1px solid transparent}
.cta-main{background:var(--red);color:#fff}
.cta-main:hover{background:var(--red-hot);text-decoration:none}
.cta-alt{background:var(--surface);color:var(--ink);border-color:var(--line)}
.cta-alt:hover{border-color:var(--red);color:var(--red)}
.cta-main svg,.cta-alt svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;transition:transform .15s ease}
.cta-alt[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(max-width:480px){
  .hcta{gap:8px;width:100%}
  .cta-main,.cta-alt{flex:1;justify-content:center;padding:11px 12px;font-size:14px}
}
.rsum{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:4px 0 14px}
.rsum>b{font-size:14px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.rsum-f{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rchip{display:inline-flex;align-items:center;gap:6px;background:var(--red-soft);
  color:var(--red-ink);border:none;border-radius:20px;cursor:pointer;font:inherit;
  font-size:12px;font-weight:600;padding:4px 10px}
.rchip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.rchip:hover{background:var(--red);color:#fff}
.rclear{background:none;border:none;cursor:pointer;font:inherit;font-size:12px;
  font-weight:600;color:var(--muted);text-decoration:underline}
.rempty{font-size:13.5px;color:var(--muted);background:var(--surface2);
  border:1px dashed var(--line);border-radius:11px;padding:16px 18px}

/* a property-type card is now a filter, so it has a pressed state */
.tcard.on{border-color:var(--red);background:var(--red-soft)}
.tcard.on b{color:var(--red-ink)}
.tcard.off{opacity:.45;cursor:default}
button.tcard{cursor:pointer;text-align:left;font:inherit;width:100%}
.sc-tab:disabled{opacity:.4;cursor:default}
.ac-nums b.cls{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12.5px;font-weight:600}
.hcard .hc-top em.past{color:var(--faint)}

/* ---------- scheme page: plot table with its own filter rail ----------
   The same arrangement as the search app: filters pinned left, results right, applied on
   the click. A scheme with 332 plots is a catalogue, not a list, and reading it without
   filters is not reading it. */
/* A page carrying a rail plus a six-column table needs more than the reading measure the
   prose above it uses. */
@media(min-width:900px){ body:has(.spwrap) main.wrap{max-width:1180px} }
.spwrap{display:grid;grid-template-columns:1fr;gap:16px;margin-top:6px}
@media(min-width:900px){
  .spwrap{grid-template-columns:272px minmax(0,1fr);gap:22px;align-items:start}
    /* Below both strips, not under them. The rail used to sit 4px above the masthead's
     bottom edge and that was already wrong; with a tab strip and a chip row above it, a
     rail stuck at 70px spends the whole scroll hidden behind them. */
  .spwrap .frail{position:sticky;top:var(--t-rail,182px);
    max-height:calc(100vh - var(--t-rail,182px) - 20px);overflow-y:auto}
  /* A sticky box stops at the bottom of its grid area, and the area is only as tall as the
     table beside it. Filter the table down to four rows and the rail was shoved up off the
     screen. The results column keeps a screen's worth of height so the rail always has
     somewhere to stand. */
  .spwrap .fmain{min-height:calc(100vh - var(--t-rail,182px) - 20px)}
}
/* The rail is rebuilt on every click and its scroll position is restored deliberately;
   Chrome's own re-aiming of a changed scroll box only fights that. */
/* A scheme whose authority publishes no unit list has nothing to filter. The rail was
   still drawn, with every section empty - a control that does nothing, beside a table
   that has no rows. It takes its column back. */
.spwrap.norail .frail{display:none}
@media(min-width:900px){ .spwrap.norail{grid-template-columns:minmax(0,1fr)} }
.spwrap,.spwrap .fmain,.spwrap .frail{overflow-anchor:none}
.spwrap .fmain{min-width:0}
.frail{background:var(--surface);border:1px solid var(--line2);border-radius:13px;scrollbar-width:thin}
.fr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;border-bottom:1px solid var(--line2);position:sticky;top:0;
  background:var(--surface);z-index:2;border-radius:13px 13px 0 0}
.fr-head h3{font-size:15px;font-family:"Zilla Slab",Georgia,serif;margin:0;padding:0;border:none}
.fr-clear{background:none;border:none;cursor:pointer;font:inherit;font-size:12px;
  font-weight:600;color:var(--red);padding:0}
.fr-clear:hover{text-decoration:underline}
.frs{border-bottom:1px solid var(--line2)}
.frs:last-child{border-bottom:none}
.frs-h{display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);
  padding:12px 15px}
.frs-h .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.frs-h .chev{width:15px;height:15px;margin-left:auto;fill:none;stroke:var(--faint);
  stroke-width:2;stroke-linecap:round;transition:transform .16s ease}
.frs.open .frs-h .chev{transform:rotate(180deg)}
.frs-b{padding:0 15px 11px}
.opt{display:flex;align-items:center;gap:9px;padding:8px 0;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);
  border-bottom:1px solid var(--line2)}
.opt:last-child{border-bottom:none}
.opt .box{width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;flex:none;
  display:grid;place-items:center;color:#fff}
.opt .box svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt[aria-pressed="true"] .box{background:var(--red);border-color:var(--red)}
.opt[aria-pressed="true"] .box svg{opacity:1}
.opt .lbl{flex:1;min-width:0}
.opt .n{font-size:10.5px;color:var(--faint);font-family:"IBM Plex Mono",monospace}
.opt:disabled{opacity:.42;cursor:default}
.opt.lvl1{padding-left:16px;position:relative;font-size:12px}
.opt.lvl1 .lbl{color:var(--muted)}
.opt.lvl1::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line2)}
.kidn{margin-left:7px;font-size:10.5px;color:var(--faint);font-family:"IBM Plex Mono",monospace}
.showall{background:none;border:none;cursor:pointer;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--red);padding:7px 0 2px}
.showall:hover{text-decoration:underline}
.fnote{font-size:11px;color:var(--faint);line-height:1.5;padding:9px 0 0;
  border-top:1px dashed var(--line);margin-top:7px}
/* Folded, so a four-line explanation does not stretch the rail past the table it filters. */
.fnote-d{padding:7px 0 0}
.fnote-d>summary{cursor:pointer;list-style:none;font-size:11px;color:var(--muted);
  font-weight:600;display:flex;align-items:center;gap:5px;padding:2px 0}
.fnote-d>summary::-webkit-details-marker{display:none}
.fnote-d>summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;flex:none}
.fnote-d[open]>summary::after{transform:rotate(225deg);margin-top:2px}
.fnote-d>summary:hover{color:var(--ink2)}
.fnote-d>p{margin:6px 0 0;font-size:11px;line-height:1.55;color:var(--faint)}

/* One source line per panel. Set apart from the panel's own prose by a rule above it, so a
   reader can tell the citation from the transcription it is citing. */
/* ---------------- the place knowledge base ----------------
   Green is ours and the authority's. Amber is researched. The two never share a surface,
   because a reader has to be able to tell a transcribed figure from a sourced claim without
   reading a disclaimer to do it. */
.precs{border:1px solid var(--line2);border-radius:12px;overflow:hidden;margin:26px 0 0}
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--accent-soft)}
.phead b{font-family:"Zilla Slab",Georgia,serif;font-size:15px;color:var(--accent-ink)}
.phead span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink)}
.pbody{padding:14px;display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--surface)}
.pfield{display:flex;flex-direction:column;gap:3px}
.pfield>b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pfield>span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.pdocs{border-top:1px solid var(--line2);padding:12px 14px;background:var(--surface)}

.pgrowth{border:1px solid var(--line2);border-radius:12px;overflow:hidden;margin:22px 0 0}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--amber-soft)}
.ghead b{font-family:"Zilla Slab",Georgia,serif;font-size:15px;color:var(--amber)}
.ghead span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber)}
.pgrps{background:var(--surface)}
.pgrp{border-top:1px solid var(--line2);padding:13px 14px}
.pgrp:first-child{border-top:none}
.pglabel{display:flex;align-items:baseline;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.pglabel b{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.pglabel span{font-size:11.5px;color:var(--faint)}
.pgrows{display:grid;gap:9px}
.pgrow{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;align-items:baseline}
.pgrow>b{font-size:13px;font-weight:600;color:var(--ink)}
.pgrow>span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.pstat,.pag{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--muted);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;
  white-space:nowrap;margin-left:4px}
.psrc{font-family:"IBM Plex Mono",monospace;font-size:11px;margin-left:4px}
.pread{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);margin-left:6px}
/* A press figure is printed, and printed as what it is. The tag sits before the source
   link rather than after it, so the reader learns what class of fact it is before they
   read the outlet's name. */
.ppress{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-right:6px;
  color:var(--faint);white-space:nowrap}
.pfoot{margin:0;padding:11px 14px;border-top:1px solid var(--line2);background:var(--surface);
  font-size:12.5px;color:var(--muted);line-height:1.55}
@media(max-width:620px){ .pgrow{grid-template-columns:minmax(0,1fr);gap:2px} }

/* A row that ends in a price ends in nothing to press. Standard 2. */
td.ctac{white-space:normal}
.rowcta{display:inline-flex;align-items:center;gap:4px;background:var(--red-soft);
  color:var(--red-ink);border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:700;
  line-height:1.3;text-align:left}
.rowcta:hover{background:var(--red);color:#fff;text-decoration:none}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--accent-ink);
  margin-right:8px}

.srcline{margin:22px 0 0;padding-top:10px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--muted);line-height:1.55}
.srcline a{color:var(--accent-ink);font-weight:600}
.spsum{display:flex;align-items:baseline;gap:9px;padding:0 0 10px;flex-wrap:wrap}
.spsum b{font-size:14px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.spsum .of{font-size:12px;color:var(--muted)}
/* Pushed to the far end of the count line: the count is the fact, the sort is the control
   that changes it, and they belong on the same row rather than in a sheet. */
.sortsel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.sortsel select{font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:7px;padding:4px 8px;max-width:210px}
.sortsel select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:520px){ .sortsel{margin-left:0;width:100%} .sortsel select{flex:1;max-width:none} }
/* A reserved plot is a plot most readers cannot bid for, and that has to be visible while
   they are still reading the row - not only in a filter they may never open. Amber, the
   same register the site uses for "this constrains you". */
.rchip{display:inline-block;background:var(--amber-soft);color:var(--amber);border-radius:4px;
  padding:1px 5px;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap}
@media(prefers-reduced-motion:reduce){ .frs-h .chev{transition:none} }

/* ============================================================
   Header: mega-menus, theme switch, sign in
   ============================================================ */
.sitehead{gap:10px}
.meganav{display:flex;gap:2px;flex:1}
.megamenu{position:static}
.mmbtn{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);padding:9px 12px;
  border-radius:8px;border-bottom:2px solid transparent}
.mmbtn:hover,.megamenu.open .mmbtn{color:var(--red)}
.megamenu.open .mmbtn{border-bottom-color:var(--red)}
.mmbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;transition:transform .15s ease}
.megamenu.open .mmbtn svg{transform:rotate(180deg)}

/* Full-bleed under the masthead, the way both portals do it — the panel belongs to the
   header, not to the button that opened it. */
.mmpanel{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 22px 44px rgba(20,10,5,.16)}
.megamenu.open .mmpanel{display:block}
.mmgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:238px minmax(0,1fr)}
.mm-cats{border-right:1px solid var(--line2);background:var(--surface2);padding:10px 0;
  max-height:min(62vh,440px);overflow-y:auto}
.mm-cat{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:none;cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink2);
  padding:7px 16px;border-left:3px solid transparent}
.mm-cat span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The authority mark in the menu's left column. White, not var(--surface): these are drawn
   for a light page and several are black line art that vanish on the dark theme. */
.mm-cat .mm-catl{width:28px;height:28px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--line2);border-radius:7px;padding:2px}
.mm-cat .mm-catl-none{background:none;border-color:transparent}

/* ---------------- the authority mark on a card ----------------
   White, not var(--surface), for the reason the seal is: several of these marks are black
   line art drawn for a white page and vanish on the dark theme's surface. */
.alogo{width:44px;height:44px;object-fit:contain;flex:none;background:#fff;
  border:1px solid var(--line2);border-radius:9px;padding:2px;vertical-align:-12px}
/* The foot centres each column, so a chip taller than the value line lifts "Authority" out
   of line with "Assets" and "From" beside it. The label and value are stacked against the
   chip instead, which keeps the three labels on one baseline at any chip size - measured
   at 36px: all three tops at the same pixel. */
.cardfoot .afcol{display:flex;align-items:center;gap:8px}
.cardfoot .afcol>span{display:flex;flex-direction:column;gap:1px}
.cardfoot .afcol .alogo{vertical-align:0;width:36px;height:36px;border-radius:8px}
/* On the scheme page the mark sits in the kicker line, so it is sized to the caps there. */
.kicker .alogo.k{width:48px;height:48px;vertical-align:-16px;margin-right:10px}
.urow .ut b .alogo.u{width:38px;height:38px;vertical-align:-11px;margin-right:9px}
.cardauth{display:flex;align-items:center;gap:7px}
.mm-cat i{font-style:normal;font-size:10.5px;font-family:"IBM Plex Mono",monospace;color:var(--faint)}
.mm-cat svg{width:13px;height:13px;fill:none;stroke:var(--faint);stroke-width:2;
  stroke-linecap:round;opacity:0}
.mm-cat.on{background:var(--surface);color:var(--red);font-weight:600;border-left-color:var(--red)}
.mm-cat.on i{color:var(--red-ink)}
.mm-cat.on svg{opacity:1;stroke:var(--red)}
.mm-panes{padding:16px 20px 18px;max-height:min(62vh,440px);overflow-y:auto}
.mm-pane{display:none}
.mm-pane.on{display:block}
.mm-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.mm-head b{font-size:14px;font-family:"Zilla Slab",Georgia,serif;font-weight:600}
.mm-links{display:flex;align-items:baseline;gap:14px;flex:none}
/* Two links, and they are not equals: the first applies the filter, the second opens a
   page about the thing. The quieter one is the page. */
.mm-head a{font-size:12.5px;font-weight:600;color:var(--red);white-space:nowrap}
.mm-head a.quiet{color:var(--muted);font-weight:500}
.mm-head a.quiet:hover{color:var(--ink)}
.mm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px 22px}
.mm-row{display:flex;align-items:center;gap:9px;padding:8px 8px 8px 9px;border-radius:8px;
  color:var(--ink);font-size:13px;margin-left:-9px}
.mm-row:hover{background:var(--surface2);text-decoration:none}
.mmr-l{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.mmr-l span{font-size:11.5px;color:var(--muted)}
.mm-row i{font-style:normal;font-size:11px;font-family:"IBM Plex Mono",monospace;color:var(--faint)}
.mm-row em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);background:var(--surface2);
  border-radius:4px;padding:2px 6px;white-space:nowrap}
/* Open is green, the last day is amber, closed is history and has no colour to spend. */
.mm-row em.live{color:var(--accent-ink);background:var(--accent-soft)}
.mm-row em.today{color:var(--amber);background:var(--amber-soft)}
.mm-row em.past{color:var(--faint);background:none;border:1px solid var(--line2)}
.mm-grouph{display:flex;align-items:center;gap:8px;margin:16px 0 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mm-grouph:first-child{margin-top:2px}
.mm-grouph i{font-style:normal;font-weight:500;letter-spacing:0;
  font-family:"IBM Plex Mono",monospace;color:var(--faint)}
.mm-grouph::after{content:"";flex:1;height:1px;background:var(--line2)}
.mm-grouph.mm-open::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.mm-grouph.mm-past{color:var(--faint)}
/* Closed schemes stay reachable - the result and the winning bid are on their page - but
   they must not compete for the eye with the ones still open. */
.mm-list.mm-past .mm-row{opacity:.6}
.mm-list.mm-past .mm-row:hover{opacity:1}
.mm-note{font-size:12px;color:var(--faint);margin-top:10px}

.headright{display:flex;align-items:center;gap:9px}
.themesw{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--line);
  border-radius:8px;padding:2px}
.themesw button{display:grid;place-items:center;width:27px;height:23px;background:none;
  border:none;cursor:pointer;border-radius:6px;color:var(--muted)}
.themesw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.themesw button[aria-pressed="true"]{background:var(--surface);color:var(--red);
  box-shadow:0 1px 3px rgba(20,10,5,.10)}
.authbtn{background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink2);padding:7px 14px}
.authbtn:hover{border-color:var(--red);color:var(--red)}
.authbtn.in{border-color:var(--accent);color:var(--accent);
  font-family:"IBM Plex Mono",monospace;letter-spacing:-.02em}

/* ---------- sign-in dialog ---------- */
body.noscroll{overflow:hidden}
.authwrap{position:fixed;inset:0;z-index:200;background:rgba(12,6,4,.46);
  display:grid;place-items:center;padding:20px}
.authdlg{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;width:min(390px,100%);padding:26px 26px 22px;
  box-shadow:0 26px 70px rgba(20,10,5,.34)}
.authdlg h3{font-size:20px;font-family:"Zilla Slab",Georgia,serif;margin-bottom:6px}
.ad-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;
  place-items:center;background:none;border:none;cursor:pointer;border-radius:8px;color:var(--muted)}
.ad-x:hover{background:var(--surface2);color:var(--ink)}
.ad-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ad-sub{font-size:13px;color:var(--muted);margin-bottom:18px}
.ad-l{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:6px}
.ad-ph{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surface2)}
.ad-ph span{padding:0 11px;font-size:14px;color:var(--muted);border-right:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace}
.ad-ph input,.ad-otp{flex:1;border:none;background:none;font:inherit;font-size:16px;
  font-family:"IBM Plex Mono",monospace;color:var(--ink);padding:12px;width:100%;
  letter-spacing:.04em}
.ad-ph input:focus,.ad-otp:focus{outline:none}
.ad-otp{border:1px solid var(--line);border-radius:10px;background:var(--surface2);
  letter-spacing:.32em;text-align:center;font-size:19px}
.ad-demo{background:var(--amber-soft);border:1px dashed var(--amber);border-radius:9px;
  padding:9px 12px;font-size:13px;color:var(--amber);margin-bottom:16px}
.ad-demo b{font-family:"IBM Plex Mono",monospace;font-size:15px;letter-spacing:.14em}
.ad-err{color:var(--red);font-size:12.5px;margin-top:8px}
.authdlg .btn.wide{width:100%;margin-top:16px;background:var(--red);border:none;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;padding:12px}
.authdlg .btn.wide:hover{background:var(--red-hot)}
.ad-note{font-size:11.5px;color:var(--faint);line-height:1.55;margin-top:14px}
.ad-link{background:none;border:none;cursor:pointer;font:inherit;font-size:inherit;
  color:var(--red);text-decoration:underline;padding:0}
.ad-link.out{display:block;width:100%;text-align:center;margin-top:12px;font-size:12.5px;
  color:var(--muted)}

/* Below this the panel would be wider than the screen it opens over, and the search
   card's own type tabs already carry the same job. */
@media(max-width:1080px){
  .sitehead .meganav{display:none}
  .sitehead .brand{flex:1}
}
@media(max-width:560px){
  .headright .navbtn{display:none}
}

/* ---------- scheme card with its timeline ----------
   Lifted from the app so the same scheme reads the same way wherever it appears. A scheme
   is a set of dates before it is anything else, so the dates are the card. */
:root{--seal-soft:#F7E3E0}
:root[data-theme="dark"]{--seal-soft:#301916}
/* 330px meant one column on anything under 660 and two under 990 - on a laptop half-screen
   the cards stacked. The card carries no image, so it reads fine narrower. */
.schcards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
.schcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;color:var(--ink);
  transition:border-color .15s}
.schcard:hover{border-color:var(--red);text-decoration:none;box-shadow:0 6px 18px rgba(20,10,5,.07)}
.schcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.schcard.u-hot::before{background:var(--red)}
.schcard.u-warm::before{background:var(--amber)}
.schcard.u-live::before{background:var(--accent)}
.schcard .cardhead{padding:11px 13px 9px 16px}
.schcard .cardtop{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.schcard .cardtop b{font-size:14.5px;font-weight:600;line-height:1.28;flex:1;
  font-family:"Zilla Slab",Georgia,serif;text-wrap:balance}
.schcard .pill{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;white-space:nowrap;flex:none}
.p-new{background:var(--red-soft);color:var(--red-ink)}
.p-live{background:var(--accent-soft);color:var(--accent-ink)}
.p-reg{background:var(--amber-soft);color:var(--amber)}
.p-closed{background:var(--line2);color:var(--muted)}
.schcard .wcs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:0}
.schcard .wc{font-size:10px;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:5px;padding:2px 7px;white-space:nowrap}
/* Under a type filter the other types stay visible but stop competing for attention. */
.schcard .wc.dim{color:var(--faint);background:var(--surface2)}
.schcard .meta{display:block;font-size:11.5px;color:var(--muted);line-height:1.45}
.schcard .meta b{color:var(--ink2);font-weight:600}

.schcard .tlbox{display:block;padding:11px 13px 10px 16px;border-top:1px solid var(--line2);
  background:var(--surface2)}
/* The timeline is one component in two hosts: a scheme card and a closing-this-week row.
   Scoping every rule to .schcard left the row's copy as unstyled text - no grid, no dots,
   no mono figures - which is what "the timeline is not showing" looked like. */
.schcard .tl,.urow .tl{position:relative;display:grid}
.schcard .tl::before,.urow .tl::before{content:"";position:absolute;left:10%;right:10%;top:6px;height:2px;background:var(--line)}
.schcard .tl .fill,.urow .tl .fill{position:absolute;left:10%;top:6px;height:2px;background:var(--accent)}
.schcard .node,.urow .node{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;min-width:0}
.schcard .node .dot,.urow .node .dot{width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line);z-index:1}
.schcard .node.done .dot,.urow .node.done .dot{background:var(--accent);border-color:var(--accent)}
.schcard .node.now .dot,.urow .node.now .dot{border-color:var(--red);box-shadow:0 0 0 3.5px var(--red-soft)}
.schcard .node .lbl,.urow .node .lbl{font-size:8.5px;color:var(--muted);line-height:1.2}
.schcard .node .dt,.urow .node .dt{font-size:9.5px;color:var(--ink2);font-weight:600;
  font-family:"IBM Plex Mono",monospace}
.schcard .node.now .lbl,.schcard .node.now .dt,.urow .node.now .lbl,.urow .node.now .dt{color:var(--red)}
.schcard .node .miss,.urow .node .miss{color:var(--faint);font-style:italic;font-weight:400;
  font-family:"IBM Plex Sans",system-ui,sans-serif}
.schcard .cdline{display:flex;align-items:baseline;gap:7px;margin-top:11px;font-size:11.5px;
  font-weight:600;color:var(--red);line-height:1.35}
.schcard .cdline.cool{color:var(--muted);font-weight:500}
.schcard .cdline .big{font-family:"Zilla Slab",Georgia,serif;font-size:17px;line-height:1}

.schcard .cardfoot{display:flex;align-items:center;gap:13px;margin-top:auto;
  padding:8px 13px 9px 16px;border-top:1px solid var(--line2);font-size:10px;color:var(--muted)}
/* the authority is context for the scheme, not a figure - it reads at text weight */
.schcard .cardfoot b.af{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11.5px;
  font-weight:600;color:var(--ink2)}
.schcard .cardfoot>span{display:flex;flex-direction:column;gap:1px}
.schcard .cardfoot i{font-style:normal;letter-spacing:.03em}
.schcard .cardfoot b{font-size:12.5px;color:var(--ink);font-weight:600;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.schcard .go{margin-left:auto;flex-direction:row!important;align-items:center;gap:3px;
  color:var(--red);font-weight:600;font-size:11.5px}
.schcard .go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- scheme page: timeline, tabs, videos ---------- */
.schemetl{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:4px 0 16px}
.schemetl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.schemetl.u-hot::before{background:var(--red)}
.schemetl.u-warm::before{background:var(--amber)}
.schemetl.u-live::before{background:var(--accent)}
.schemetl .tlbox{display:block;padding:16px 18px 15px 21px;background:var(--surface)}
.schemetl .tl{position:relative;display:grid}
.schemetl .tl::before{content:"";position:absolute;left:10%;right:10%;top:6px;height:2px;background:var(--line)}
.schemetl .tl .fill{position:absolute;left:10%;top:6px;height:2px;background:var(--accent)}
.schemetl .node{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;min-width:0}
.schemetl .node .dot{width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line);z-index:1}
.schemetl .node.done .dot{background:var(--accent);border-color:var(--accent)}
.schemetl .node.now .dot{border-color:var(--red);box-shadow:0 0 0 3.5px var(--red-soft)}
.schemetl .node .lbl{font-size:9.5px;color:var(--muted);line-height:1.2}
.schemetl .node .dt{font-size:11px;color:var(--ink2);font-weight:600;
  font-family:"IBM Plex Mono",monospace}
.schemetl .node.now .lbl,.schemetl .node.now .dt{color:var(--red)}
.schemetl .node .miss{color:var(--faint);font-style:italic;font-weight:400;
  font-family:"IBM Plex Sans",system-ui,sans-serif}
.schemetl .cdline{display:flex;align-items:baseline;gap:8px;margin-top:13px;font-size:13px;
  font-weight:600;color:var(--red)}
.schemetl .cdline.cool{color:var(--muted);font-weight:500}
.schemetl .cdline .big{font-family:"Zilla Slab",Georgia,serif;font-size:20px;line-height:1}

/* The strip read as loose words floating on the page background, so a reader did not see
   it as the control that switches the whole page below it. It sits on the surface now,
   inside a rounded bar with its own edge, which is the same treatment every other control
   on the site gets. Sticky, because the panels below it are long enough that the reader
   loses the tabs entirely - the masthead is 74px, so it parks under that. */
.stabs{display:flex;flex-wrap:wrap;gap:0 4px;overflow-x:auto;scrollbar-width:none;
  margin:20px 0 18px;background:var(--surface);border:1px solid var(--line2);
  border-radius:11px;padding:0 14px;position:sticky;top:var(--t-stab,74px);z-index:8;
  box-shadow:0 1px 0 rgba(20,10,5,.03)}
.stabs::-webkit-scrollbar{display:none}
.stab-b{background:none;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--muted);padding:12px 2px 11px;margin-right:24px;white-space:nowrap;
  border-bottom:3px solid transparent}
.stab-b:hover{color:var(--ink2)}
.stab-b.on{color:var(--red);border-bottom-color:var(--red)}
h2[id]{scroll-margin-top:100px}
/* the authority map: a still image, never a tile request */
figure.authmap{margin:12px 0 18px;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--surface)}
figure.authmap img{display:block;width:100%;height:auto}
figure.authmap figcaption{font-size:12px;color:var(--muted);padding:8px 12px}
figure.authmap .maplinks{display:block;margin-top:4px}
/* the scheme overview: one line of highlights and, where the record flags one, one lead note */
p.hl{margin:6px 0 0;font-size:14px}
p.lead{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:14px}
table.assets.authopen i.schauth{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
figure.authmap .maplinks a{color:var(--accent-ink);font-weight:600}
/* Every panel stays in the markup — a crawler and a reader with JavaScript off get all
   five. Only the display changes. */
.stab{display:none}
.stab.on{display:block}
.stab h3{font-size:17px;margin:26px 0 10px}
.stab h3:first-child{margin-top:18px}
/* Prose in a panel runs the container's width, for the same reason the opening lines do:
   a measured paragraph sitting under a full-width table reads as a column of leftover
   text. Only .secsub keeps the narrow measure it already had, because it is a caption
   under a heading rather than a paragraph of the page. */

/* ---------------- the scheme page's opening lines ----------------
   Prose where four stat tiles used to repeat the timeline above and the table below. */
/* Full width, not a measure. The line above it - the also-called list - runs the whole
   container, and a 74ch paragraph under a full-width line reads as a narrow column of
   leftover text rather than as the page's opening sentence. Whatever a measure buys back
   in readability, it costs more in looking like a mistake. */
.schlede{margin:18px 0 0}
.schlede p{margin:0 0 9px;font-size:15.5px;line-height:1.62;color:var(--ink2)}
.schlede p:first-child{font-size:16.5px;color:var(--ink)}
.schlede b{color:var(--ink)}
.schlede .fine{font-size:13px;color:var(--muted);line-height:1.55}
.stab h4{font-size:14px;margin:16px 0 8px;color:var(--ink2)}
table.kv td .sub{display:block;font-size:12px;color:var(--muted);margin-top:3px}
table.assets td .sub{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}

ol.paysteps{list-style:none;counter-reset:p;display:grid;gap:9px}
ol.paysteps li{counter-increment:p;position:relative;padding:12px 15px 12px 46px;
  background:var(--surface);border:1px solid var(--line2);border-radius:11px}
ol.paysteps li::before{content:counter(p);position:absolute;left:14px;top:12px;
  width:21px;height:21px;border-radius:7px;background:var(--red-soft);color:var(--red-ink);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
  font-family:"IBM Plex Mono",monospace}
ol.paysteps b{display:block;font-size:13.5px;margin-bottom:3px}
ol.paysteps span{display:block;font-size:13px;color:var(--ink2)}
ol.paysteps em{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:4px}
ol.paysteps.plain li{padding-top:11px;padding-bottom:11px}

/* the row's way out — the bid is placed on the authority's portal, never here */
td.applyc{width:1%;white-space:nowrap;text-align:right}
.applybtn{display:inline-flex;align-items:center;gap:4px;background:var(--red-soft);
  color:var(--red-ink);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;
  /* The label names the authority, so it is a phrase rather than a word. It wraps inside
     the cell: capped at 170px with nowrap it was being cut mid-word - "Apply on GDA First
     Come First S" - which is worse than the bare "Apply" it replaced. */
  text-align:left;line-height:1.3;white-space:normal;max-width:190px}
.applyc{white-space:normal;min-width:130px}
.applybtn:hover{background:var(--red);color:#fff;text-decoration:none}
.applybtn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- the authority's own inventory status ----------
   Standard 8c. Printed as its own table beside our row count, never merged into it: one is
   the authority's whole inventory, the other is the unit numbers it has listed as vacant. */
/* ---------- the authority's own three figures ----------
   Total, vacant, booked, above the tabs, because a reader deciding whether to read the
   rest of the page is deciding on these. They were a seven-column table further down and
   the table said what the category rows already said. */
.sumstrip{display:flex;gap:10px;margin:16px 0 4px}
.sumstrip>div{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line2);
  border-radius:10px;padding:9px 11px}
.sumstrip span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em}
.sumstrip b{font-size:19px;font-variant-numeric:tabular-nums}
.sumstrip b.hot{color:var(--red)}
.sumstrip b em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}

/* ---------- the sections inside a tab ----------
   The ten panels did not shrink when the ten tabs became four; they became sections, one
   under the other, with a chip row that follows the reader down them. The chips are a
   scroll and not a second set of tabs: everything in the tab is painted, so a reader who
   ignores the chips still meets every section in order. */
.ssubs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:var(--t-ssub,124px);z-index:7;padding:9px 0 10px;margin:0 0 4px;
  /* Opaque, and it has to be: a transparent sticky strip lets the heading it is standing
     in front of show through it, which is what shipped and what this fixes. --bg is not a
     variable in this stylesheet; the declaration was silently dropped. */
  background:var(--ground);box-shadow:0 1px 0 var(--line2);
  -webkit-overflow-scrolling:touch}
.ssubs::-webkit-scrollbar{display:none}
.ssub{background:var(--surface);border:1px solid var(--line2);border-radius:999px;
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:6px 12px;white-space:nowrap}
.ssub.on{background:var(--red);border-color:var(--red);color:#fff}
.ssec{scroll-margin-top:130px}
.ssec+.ssec{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}

/* ---------- videos about a scheme ----------
   Two to a row on desktop and tablet, whatever the count: a single video widened to the
   full column plays at the size of a cinema and reads as the point of the page, which it is
   not. The track width is fixed, so one video sits at half the column rather than stretching
   across it, two fill the row, and a third simply wraps. */
.vidsec{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
.vidsec h2{margin-top:0;border-bottom:0;padding-bottom:0}
.vs-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.vs-h em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--muted);background:var(--surface2);border:1px solid var(--line2);
  border-radius:20px;padding:1px 9px}

.lgrp{margin-bottom:24px}
.lgrp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:8px;border-bottom:1px solid var(--line2);margin-bottom:13px}
.lgrp-h h3{font-size:17px;margin:0}
.lgrp-h .holds{font-size:12.5px;color:var(--muted)}
.lgrp-h .holds b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink2)}
.lgrp-h .seeall{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--red);
  white-space:nowrap;margin-bottom:0}

.vgrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
.vcard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line2);border-radius:13px;overflow:hidden}

/* The facade. Until the reader presses play this is one local image and a button, so a
   scheme page with six videos makes no third-party request and sets no third-party cookie
   before a price has been read. */
/* .vstage, not .stage. The search app's own shell has a div.stage wrapping the phone
   frame, and `.stage img{width:100%;height:100%}` from this block was matching every
   image inside it - every authority logo on every card was being blown up to 406px.
   A class name general enough to collide is a bug waiting for a second page. */
.vstage{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#0B100E;
  border:0;padding:0;cursor:pointer;overflow:hidden}
.vstage:hover{text-decoration:none}
.vstage img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
.vstage .poster{position:absolute;inset:0;background:linear-gradient(140deg,#123028,#0B100E 70%)}
.vstage .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:34px;border-radius:9px;background:var(--red);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.vstage .play svg{width:17px;height:17px;fill:#fff}
.vstage:hover .play{background:var(--red-hot)}
.vstage .host{position:absolute;left:9px;top:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);
  border-radius:4px;padding:2px 7px}
.vstage .dur{position:absolute;right:9px;bottom:9px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:#fff;background:rgba(0,0,0,.72);border-radius:4px;padding:1px 6px}
.vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vb{display:flex;flex-direction:column;gap:6px;padding:12px 14px 0;flex:1}
.vb h4{font-size:14.5px;line-height:1.35;margin:0}
.vtags{display:flex;gap:6px;flex-wrap:wrap}
.vtags span{font-size:11px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:20px;padding:2px 9px}
.vtags span.mono{font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface2);
  border:1px solid var(--line2)}
/* A video that quotes a closed date or a withdrawn price is labelled, not deleted: a
   reader who already watched it needs to be told it was out of date. */
.vtags span.old{color:var(--amber);background:var(--amber-soft)}
.vsum{font-size:12px;line-height:1.55;color:var(--faint)}

.vfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px 13px;
  margin-top:auto}
.vfoot .cta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--red);border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.vfoot .cta:hover{border-color:var(--red);background:var(--red-soft);text-decoration:none}
.vfoot .cta svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}

.vempty{background:var(--surface);border:1px dashed var(--line);border-radius:13px;
  padding:14px 16px;font-size:12.5px;color:var(--muted);line-height:1.6}
.vempty b{display:block;font-size:13.5px;color:var(--ink2);margin-bottom:2px}

/* fees: the small print sits under the box, not in it — a bid increment is not a fee */
.feenotes{margin-top:12px;display:grid;gap:7px}
.feenotes p{font-size:12.5px;color:var(--muted);line-height:1.55}
.feenotes b{color:var(--ink2);font-weight:600}
.payopts{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin-top:6px;align-items:start}
.payopt{background:var(--surface);border:1px solid var(--line2);border-radius:12px;
  padding:15px 17px}
/* The heading sat on the serif face at 14px over a list the browser was drawing at 16px,
   so the card's own title read smaller than its bullets and neither matched the section
   above. One size for the body, and the title one step up from it. */
.payopt b{display:block;font-size:14.5px;margin:0 0 10px;
  font-family:"Zilla Slab",Georgia,serif;color:var(--ink)}
.payopt ul{margin:0;font-size:14px;line-height:1.62;color:var(--ink2)}

/* ---------------- the bullet used across the scheme panels ----------------
   The browser's own list padding hangs the marker outside the text column, so a bullet sat
   to the left of the heading above it and past the page's own left margin. The dot is drawn
   inside the column instead, on the same left edge as every heading and paragraph near it. */
ul.tick{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:7px;
  font-size:14.5px;line-height:1.62;color:var(--ink2)}
ul.tick>li{position:relative;padding-left:18px}
ul.tick>li::before{content:"";position:absolute;left:3px;top:.66em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.75}
.payopt ul.tick{font-size:14px;max-width:none}
.stab h4{font-size:14px;margin:22px 0 10px;color:var(--ink2)}

/* applied-filter chips on a scheme page — the same row the master filter page shows */
.fchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.fchips-l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--red-soft);
  color:var(--red-ink);border:none;border-radius:20px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:600;padding:5px 11px}
.fchip i{font-style:normal;font-weight:500;opacity:.72;font-size:10px;letter-spacing:.03em;
  text-transform:uppercase}
.fchip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fchip:hover{background:var(--red);color:#fff}
.fchips-x{background:none;border:none;cursor:pointer;font:inherit;font-size:12px;
  font-weight:600;color:var(--muted);text-decoration:underline}

/* ---------- breadcrumbs, FAQs, footer nav ---------- */
.crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);padding:18px 0 2px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs i{font-style:normal;color:var(--line)}
.crumbs span[aria-current]{color:var(--ink2);font-weight:600}

.faqs{margin-top:34px}
details.faq{background:var(--surface);border:1px solid var(--line2);border-radius:11px;
  margin-bottom:8px;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:13px 42px 13px 16px;
  font-size:14.5px;font-weight:600;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:17px;top:19px;width:8px;height:8px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .16s ease}
details.faq[open] summary::after{transform:rotate(-135deg);top:22px}
details.faq[open] summary{color:var(--red)}
details.faq p{padding:0 16px 15px;font-size:13.5px;color:var(--ink2);line-height:1.65;
  max-width:72ch}
@media(prefers-reduced-motion:reduce){ details.faq summary::after{transition:none} }

.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 6px;font-size:13px}
.footnav a{color:var(--ink2)}
.footnav a:hover{color:var(--red)}
.alsoknown{margin:10px 0 0;font-size:13px;color:var(--ink2);line-height:1.6}
.alsoknown span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
  margin-right:6px}
.alsoknown b{font-weight:500;color:var(--ink)}
.footsoc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px;font-size:13px}
.footsoc-l{color:var(--ink2);margin-right:4px}
.footsoc a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink2);line-height:1}
.footsoc a svg{display:block}
.footsoc a:hover{color:var(--red);border-color:var(--red)}
@media(max-width:520px){.footsoc a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.footsoc a{padding:7px}}
ul.inline.big a{font-weight:500}

/* ---------- brand in the footer ---------- */
.footbrand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.footbrand b{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.02em;color:var(--red);text-transform:uppercase}
.footbrand b i{font-style:normal;text-transform:lowercase;font-size:11px;vertical-align:super;font-weight:600;opacity:.85}
.footbrand span{font-size:13px;color:var(--muted)}

/* ---------- what a page asks the reader to do next ----------
   One action, stated once, where the reader has just finished reading the numbers that
   would make them want it. Not a banner and not repeated down the page. */
.ctabox{background:var(--surface);border:1px solid var(--line2);border-radius:13px;
  padding:18px 18px 16px;margin:22px 0 8px}
.ctatitle{font-family:"Zilla Slab",Georgia,serif;font-size:19px;font-weight:600;
  margin:0 0 4px;line-height:1.3}
.ctasub{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.ctabox .hcta{justify-content:flex-start}
/* The unit note in a table head: this column is computed, and the head says so rather than
   a footnote three screens down. */
table.assets th .u{display:block;font-size:10px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);margin-top:2px}
/* The route to owning one, in the order the steps happen. */
ol.steps{margin:0 0 6px;padding-left:20px;max-width:70ch}
ol.steps li{margin-bottom:10px;line-height:1.6}
ol.steps b{font-weight:600}
/* Where to go next, grouped by the shape of the question rather than one flat pile. */
.relh{font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 7px;
  letter-spacing:.02em}

/* The second thing to do on a page: be told before the deadline. Quieter than the main
   action because it costs the reader a phone number, and honest about what it sends. */
.ctawa{margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line2);font-size:13px}
.ctawa a{font-weight:600;color:var(--seal)}
.ctawa span{display:block;color:var(--muted);font-size:12px;margin-top:3px;max-width:60ch}

/* ---- an announced scheme, before there is anything to list ----
   Deliberately not a stat grid full of zeroes: the honest thing to show is a sentence
   saying the authority has not published yet, and where the reader can check for
   themselves. */
.soonbox{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;
  background:var(--surface);padding:16px 18px;margin:16px 0}
.soonbox h2{font-size:16px;margin-bottom:6px}
.soonbox p{font-size:14px;color:var(--ink2);line-height:1.6;margin-bottom:8px}
.soonbox .fine{font-size:12.5px;color:var(--faint)}

/* The one line that has to appear on every page and be read by nobody. Quiet, centred,
   under the rule that already closes the footer. */
.copyline{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--faint);text-align:center}

/* "The authority has not said." Printed where a quantity would go, in the same slot and
   the same alignment, so a reader sees an answer rather than a blank - and never sees a
   number nobody published. */
.nodisc{font-size:11.5px;font-style:italic;color:var(--faint);white-space:nowrap;
  border-bottom:1px dotted var(--line);cursor:help}

/* A statement of what an authority has NOT published, in the reader's way rather than in a
   footnote, because it changes how every number under it should be read. */
.pubnote{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:9px;
  background:var(--amber-soft);padding:12px 14px;margin:14px 0;font-size:13.5px;
  line-height:1.6;color:var(--ink2)}
.pubnote b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}

/* A scheme that exists only in newspaper reports. Deliberately louder than the ordinary
   "announced" panel and deliberately red rather than amber: the risk here is not that a
   reader misses a date, it is that they take a reported plot size for a published one. */
.soonbox.reported{border-left-color:var(--red)}
.soonbox.reported h2{color:var(--red-ink)}
.soonbox .kv.reported{margin:12px 0 4px;width:100%;border-collapse:collapse}
.soonbox .kv.reported th{width:34%;text-align:left;font-weight:600;font-size:13px;
  color:var(--muted);padding:7px 10px 7px 0;vertical-align:top;border-bottom:1px solid var(--line2)}
.soonbox .kv.reported td{font-size:13.5px;color:var(--ink);padding:7px 0;
  border-bottom:1px solid var(--line2)}
.soonbox .srcs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.soonbox .srcs h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px}
.soonbox .srcs ul{list-style:none;display:grid;gap:6px}
.soonbox .srcs li{font-size:13px;line-height:1.5}
.soonbox .srcs li span{display:block;font-size:11.5px;color:var(--faint)}

/* ============================================================
   What changed - the strip, the What's new cards, the notice board.
   Three renderings of one list (home-render.js: strip, whatsnew, board).

   Colour is meaning, not decoration, and it is the same meaning as everywhere else here:
   --red is a deadline a reader can miss, --amber is the authority calling its own figures
   provisional, --line/--muted is housekeeping. Nothing in this block is ever green; none of
   it is good news, it is only news.
   ============================================================ */

/* C. the strip - one line above the tab bar */
.ustrip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:10px;padding:10px 14px;margin:14px 0 4px}
.ustrip.u-red{border-left-color:var(--red)}
.ustrip.u-amber{border-left-color:var(--amber)}
.ucnt{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;letter-spacing:.03em;
  background:var(--ground);color:var(--muted);border:1px solid var(--line);
  padding:3px 8px;border-radius:6px;flex:none;white-space:nowrap}
.ustrip.u-red .ucnt{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.ustrip.u-amber .ucnt{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.ulead{font-size:14px;color:var(--ink);min-width:0;flex:1 1 240px}
.ulead b{font-weight:700}
.ulink{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:500;
  color:var(--accent);white-space:nowrap;flex:none}
.ulink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* D. the What's new cards */
.newgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.newcard{background:var(--surface);border:1px solid var(--line2);border-radius:12px;
  padding:14px 15px;display:flex;flex-direction:column;gap:8px;
  border-top:3px solid var(--line)}
.newcard.n-red{border-top-color:var(--red)}
.newcard.n-amber{border-top-color:var(--amber)}
.newcard>time{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.newh{font-family:"Zilla Slab",Georgia,serif;font-size:16.5px;font-weight:600;line-height:1.28;
  color:var(--ink);margin:0}
.newd{font-size:13.5px;color:var(--ink2);margin:0}
.newsrc{font-size:12px;color:var(--faint);margin:0;margin-top:auto;padding-top:4px}
.newsrc a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.upill{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--ground);color:var(--muted);
  border:1px solid var(--line)}
.upill.p-red{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.upill.p-amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.udot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* E. the notice board - the vertical panel every authority site animates, with the motion
   taken out. Fixed height, the reader's own scrollbar, nothing to have to pause. */
.uboard{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  overflow:hidden;margin:12px 0}
.ubhead{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 15px;border-bottom:1px solid var(--line2);background:var(--surface2)}
.ubhead h3{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.ubhead a{font-size:12.5px}
.ublist{max-height:230px;overflow-y:auto;scrollbar-width:thin}
.ubitem{display:flex;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line2);
  align-items:baseline}
.ubitem:last-child{border-bottom:none}
.ubitem>time{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);
  flex:none;width:48px}
.ubb{font-size:13.6px;color:var(--ink);min-width:0}
.ubb b{font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-right:5px}
.ubb b.u-red-ink{color:var(--red-ink)}
.ubb b.u-amber-ink{color:var(--amber)}
.ubd{color:var(--muted);display:block;margin-top:3px;font-size:13px}

/* /updates/ - the full ledger the strip, the cards and every board link to */
.uday{margin:26px 0}
.udayhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:4px}
.udayhead h2{font-size:17px;margin:0;padding:0;border:none}
.udayhead span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.uentry{display:grid;grid-template-columns:14px 1fr;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line2);align-items:start}
.uentry:last-child{border-bottom:none}
/* ---------- filtering the change feed ----------
   The controls were written and never given a face: they rendered as browser default
   buttons in a row, which reads as broken rather than as a filter, so nobody used them.
   Two rows, each labelled with the question it answers - what changed, and where - because
   an unlabelled second row of chips looks like more of the first. The pressed chip is the
   only coloured one: a row where every chip is loud says nothing about which is on. */
.ufil{display:flex;flex-direction:column;gap:8px;margin:0 0 6px;
  padding:14px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ufrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.uflab{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;min-width:86px;flex:none}
.uchip{font:inherit;font-size:13px;line-height:1;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:none;color:var(--ink2);
  padding:7px 12px;border-radius:999px;cursor:pointer;transition:border-color .12s,color .12s}
.uchip span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint)}
.uchip:hover{border-color:var(--muted);color:var(--ink)}
.uchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--red);
  color:var(--red);font-weight:600}
.uchip[aria-pressed="true"] span{color:var(--red)}
.ufnote{font-size:12.5px;color:var(--faint);margin:10px 0 0}
.ufnone{font-size:14px;color:var(--ink2);margin:22px 0}
.ufnone button{font:inherit;font-size:14px;background:none;border:0;color:var(--red);
  text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:620px){ .uflab{min-width:0;width:100%} }
/* ---------- helpline and contacts ----------
   Two groups on a scheme page, the same grid on both, so the label, the value and the source
   line sit on one baseline whatever the row holds. */
.cgroup{border:1px solid var(--line);border-radius:11px;background:var(--surface);
  overflow:hidden;margin:14px 0 0;max-width:760px}
.cghead{padding:11px 15px;border-bottom:1px solid var(--line);background:var(--surface2);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cghead b{font-family:"Zilla Slab",Georgia,serif;font-size:15px}
.cghead span{font-size:12px;color:var(--faint)}
.crow{display:grid;gap:3px 16px;padding:12px 15px;border-bottom:1px solid var(--line);
  grid-template-columns:1fr;align-items:baseline}
@media(min-width:560px){ .crow{grid-template-columns:180px 1fr} }
.crow:last-child{border-bottom:0}
.crow .who b{display:block;font-size:14px}
.crow .who i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:1px}
.crow .val{font-family:"IBM Plex Mono",monospace;font-size:13.5px;line-height:1.6;min-width:0;
  overflow-wrap:anywhere}
.crow .val.addr{font-family:inherit;font-size:14px}
.crow .val a{color:var(--red);text-decoration:none}
.crow .val a:hover{text-decoration:underline}
.csrc{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);
  margin-top:4px}
.csrc a{color:var(--faint)}
.cnone{font-size:14px;color:var(--ink2);margin:14px 0 0;max-width:70ch}
/* ---------- the before-you-bid table ----------
   Heads were centred over left-aligned cells, so no column read as a column, and the Fee
   column - a dash on most authorities - collapsed to nothing and pushed its own heading into
   the next one. Left-aligned throughout, with a floor under each column. */
table.bidtbl th{text-align:left;vertical-align:bottom;white-space:nowrap}
table.bidtbl td{vertical-align:top}
table.bidtbl th:nth-child(1),table.bidtbl td:nth-child(1){min-width:190px}
table.bidtbl th:nth-child(2),table.bidtbl td:nth-child(2){min-width:104px}
table.bidtbl th:nth-child(3),table.bidtbl td:nth-child(3){min-width:240px}
table.bidtbl th:nth-child(4),table.bidtbl td:nth-child(4){min-width:96px}
table.bidtbl th:nth-child(5),table.bidtbl td:nth-child(5){min-width:118px}
.np{color:var(--faint);font-size:12.5px;white-space:nowrap}
/* ---------- links and documents ----------
   Nine two-word cards were nine objects pretending to be a list. Two columns: what it is,
   and the way out to it. No heading row - the section label above already says what these
   are, and a two-column table of names does not need its columns named. */
table.linktbl{width:100%;border-collapse:collapse;margin-top:8px}
table.linktbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);
  font-size:14px;vertical-align:baseline}
table.linktbl tr:last-child td{border-bottom:0}
table.linktbl td.lgo{text-align:right;padding-right:0;white-space:nowrap;width:1%}
table.linktbl td.lgo a{font-size:13px;color:var(--red);text-decoration:none;font-weight:500}
table.linktbl td.lgo a:hover{text-decoration:underline}
/* ---------- an office, and where it is ---------- */
.pgrow.office{display:grid;gap:12px 16px;align-items:start}
@media(min-width:620px){ .pgrow.office{grid-template-columns:1fr 196px} }
.pgrow.office .obody{display:block;min-width:0}
.omap{display:block}
.omap iframe{display:block;width:100%;aspect-ratio:4/3;max-width:100%;border:1px solid var(--line);
  border-radius:8px;background:var(--surface2)}
.omap a{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--red);text-decoration:none}
.omap a:hover{text-decoration:underline}
/* ---------- narrowing an authority's inventory ----------
   Three rows, each labelled with the question it answers, each link carrying the authority
   with it so the reader never loses the filter they arrived on. */
.anarrow{display:flex;flex-direction:column;gap:12px;margin:2px 0 6px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.anrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.anrow .uflab{min-width:104px;flex:none}
.anrow ul.inline{margin:0}
.anrow ul.inline li a i{font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--faint);margin-left:4px}
/* ---------- the glossary, beside the word ---------- */
.gq{font:inherit;font-size:9.5px;line-height:1;font-weight:700;font-family:"IBM Plex Sans",sans-serif;
  display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;padding:0;vertical-align:middle;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:none;color:var(--faint)}
.gq:hover{border-color:var(--red);color:var(--red)}
th .gq{opacity:.75}
.gqpan{position:absolute;z-index:200;width:min(320px,calc(100vw - 16px));
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:12px;padding:14px 15px 13px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.gqpan b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:16px;margin-bottom:5px;
  padding-right:18px}
.gqpan p{font-size:13px;line-height:1.55;color:var(--ink2);margin:0 0 9px}
.gqpan a{font-size:13px;color:var(--red)}
.gqx{position:absolute;top:8px;right:9px;font:inherit;font-size:17px;line-height:1;
  background:none;border:0;color:var(--faint);cursor:pointer;padding:2px 4px}
.gqx:hover{color:var(--ink)}
/* ---------- the two pages for somebody who has never done this ---------- */
/* A hub page whose sections cannot be linked to is a wall. The jump list is the table of
   contents and the anchors are the point: a reader is sent to the paragraph, not the page. */
.gjump{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gjump a{font-size:13px;color:var(--ink2);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;line-height:1}
.gjump a:hover{border-color:var(--red);color:var(--red)}
.gsec{margin-top:34px;scroll-margin-top:78px}
.gsec h2{margin:0 0 10px}
.gsec p{max-width:74ch;margin:0 0 12px}
.gsec ul.tick{margin:4px 0 14px;max-width:74ch}
.gsec ul.tick li{font-size:15px;color:var(--ink2)}
.gsec ul.tick li b{color:var(--ink)}
/* Nine steps, numbered by the list rather than by a typed-in number that can drift out of
   order the first time one is inserted. */
.steps{list-style:none;counter-reset:st;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;
  border-top:1px solid var(--line);scroll-margin-top:78px}
.step:last-child{border-bottom:1px solid var(--line)}
@media(min-width:820px){ .step{grid-template-columns:236px 1fr;gap:30px} }
.stepn{display:flex;flex-direction:column;gap:2px}
.stepn span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red)}
.stepn b{font-family:"Zilla Slab",Georgia,serif;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.stepb p{max-width:70ch;margin:0 0 10px;color:var(--ink2)}
.stepb p:last-child{margin-bottom:0}
.stepdo{font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.stepdo a{color:var(--red)}
/* What it costs to get this step wrong. Marked, because it is the half of the step people
   skip and the half that takes the money. */
.stepwarn{font-size:13.5px;color:var(--ink2);border-left:3px solid var(--amber);
  padding:2px 0 2px 12px;margin-top:12px;max-width:68ch}
/* ---------- the footer, as four questions ---------- */
.footcols{display:grid;gap:22px 28px;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0 4px}
@media(min-width:760px){ .footcols{grid-template-columns:repeat(4,minmax(0,1fr))} }
.footcols div{display:flex;flex-direction:column;gap:7px;min-width:0}
.footcols b{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin-bottom:2px}
.footcols a{font-size:13.5px;color:var(--ink2);text-decoration:none;line-height:1.3}
.footcols a:hover{color:var(--red);text-decoration:underline}
/* One sentence, and the rest a click away. */
.discl{font-size:13px;color:var(--ink2);margin:18px 0 0;line-height:1.55}
.discl b{color:var(--ink)}
.disclmore{font:inherit;font-size:12.5px;background:none;border:0;padding:0;margin-left:6px;
  color:var(--red);text-decoration:underline;cursor:pointer}
.disclfull{margin:8px 0 0}
.disclfull p{font-size:12.5px;color:var(--faint);line-height:1.6;margin:0;max-width:80ch}
/* The header button says what it gives, on two lines at desktop width. */
.authbtn i{display:block;font-style:normal;font-size:10px;font-weight:400;letter-spacing:.02em;
  opacity:.75;margin-top:1px;text-transform:none}
@media(max-width:860px){ .authbtn i{display:none} }
.umark{width:9px;height:9px;border-radius:2px;margin-top:8px;background:var(--muted)}
.umark.m-red{background:var(--red)}
.umark.m-amber{background:var(--amber)}
.ubody{min-width:0;display:flex;flex-direction:column;gap:5px}
.uhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.uauth{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.uentry h3{font-family:"Zilla Slab",Georgia,serif;font-size:17px;font-weight:600;
  line-height:1.28;margin:0;color:var(--ink)}
.udetail{font-size:14px;color:var(--ink2);margin:0}
.usrc{font-size:12.5px;color:var(--faint);margin:0}
.usrc a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* The footer's one line about what moved. It was a bordered block with a heading, a list of
   three and a link out - five rows of furniture for something a reader glances at. One row:
   the date, the newest headline, and where to see the rest. */
.footupd{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:10px 0;margin:14px 0 12px;font-size:13px;display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.footupd a{display:flex;gap:10px;align-items:baseline;min-width:0;color:var(--ink2);
  text-decoration:none}
.footupd a:hover span{color:var(--red);text-decoration:underline}
.footupd time{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);flex:none}
.footupd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footupd em{font-style:normal;font-size:12.5px;color:var(--red);flex:none}

/* the demand-survey panel: amber, because the authority calls its own figures tentative */
.soonbox.survey{border-left:4px solid var(--amber)}
.soonbox.survey h2{color:var(--amber)}

/* a demand survey on a scheme card: no count, no countdown, one sentence of warning */
.pill.p-survey{background:var(--amber-soft);color:var(--amber)}
.cardfoot.survey{display:block;padding:11px 14px}
.surveynote{display:block;font-size:12.5px;line-height:1.45;color:var(--amber);font-weight:500}

/* ============================================================
   Hero, the sign-up block, the filter and sort bar, and the countdown.
   ============================================================ */

/* the five reasons, under the hero stat line */
.hero-why{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:7px 0}
.hero-why li{font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.95);
  padding:0 13px;position:relative;white-space:nowrap}
.hero-why li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5)}
@media(max-width:520px){ .hero-why li{font-size:11.5px;padding:0 9px} }

/* the search button now leads, so it carries the magnifier that says where it goes */
.cta-main svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}

/* ---------------- sign-up ---------------- */
.signup{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;display:grid;gap:18px;grid-template-columns:1fr;
  border-top:3px solid var(--red)}
@media(min-width:780px){ .signup{grid-template-columns:1.15fr 1fr;gap:28px;padding:24px 26px} }
/* The block in the footer is a footer block. The same block placed on a scheme or a place
   page is the last thing the reader sees about that scheme or that place, so it gets the
   room of a section rather than the margins of a footer. */
.alertsec{margin-top:38px;scroll-margin-top:80px}
.alertsec .signup{padding:22px}
@media(min-width:780px){ .alertsec .signup{padding:26px 28px} }
/* Says which channel this is before the reader has decided whether to give a number. */
.su-on{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:#128c7e;background:rgba(37,211,102,.10);border:1px solid rgba(18,140,126,.35);
  border-radius:999px;padding:3px 9px}
.su-on svg{flex:none}
.su-copy h3{margin:0;padding:0;border:none;font-size:21px;letter-spacing:-.01em}
.su-copy{display:flex;flex-direction:column;gap:9px}
.su-copy h2{margin:0;padding:0;border:none;font-size:23px}
.su-copy p{color:var(--ink2)}
.ticks{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ticks li{position:relative;padding-left:24px;font-size:14px;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:4px;top:8px;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}
.su-form{display:flex;flex-direction:column;gap:9px;justify-content:center}
.su-step{display:flex;flex-direction:column;gap:9px}
.su-lab{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.su-row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;
  background:var(--surface2);overflow:hidden}
.su-cc{display:flex;align-items:center;padding:0 11px;font-family:"IBM Plex Mono",monospace;
  font-size:14px;color:var(--muted);border-right:1px solid var(--line);flex:none}
.su-row input{flex:1;min-width:0;border:0;background:none;padding:12px 13px;font:inherit;
  font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.su-row input:focus{outline:none}
.su-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.su-consent{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink2);
  cursor:pointer}
.su-consent input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--red)}
.su-go{display:inline-flex;align-items:center;justify-content:center;background:var(--red);
  color:#fff;border:0;border-radius:10px;padding:13px 18px;font:inherit;font-weight:700;
  font-size:15px;cursor:pointer;text-decoration:none}
.su-go:hover{background:var(--red-hot);text-decoration:none;color:#fff}
.su-go:disabled{opacity:.55;cursor:default}
.su-back{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer;padding:2px}
.su-fine{font-size:11.5px;color:var(--faint);line-height:1.5}
.su-err{font-size:13.5px;color:var(--red-ink);background:var(--red-soft);border-radius:8px;
  padding:9px 11px;margin:0}
.su-done{font-size:15px;color:var(--accent-ink);font-weight:600}
:root[data-theme="dark"] .su-done{color:var(--accent)}

/* ---------------- filter and sort bar ---------------- */
.fbar{display:flex;gap:10px;align-items:center;margin:12px 0 2px;flex-wrap:wrap}
.fchips{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.fchip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:500;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink2);white-space:nowrap;cursor:pointer}
.fchip i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.fchip:hover{border-color:var(--muted)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.fchip.on i{color:rgba(255,255,255,.75)}
:root[data-theme="dark"] .fchip.on{color:#08211B}
.fchip.pay{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.fchip.pay.on{background:var(--amber);color:#fff;border-color:var(--amber)}
.fchip.pay i{color:inherit;opacity:.7}
.fsort{position:relative;flex:none}
.sortbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;
  color:var(--muted);background:none;border:1px solid transparent;border-radius:8px;
  padding:6px 8px;cursor:pointer;white-space:nowrap}
.sortbtn b{color:var(--ink);font-weight:600}
.sortbtn:hover{border-color:var(--line)}
.sortbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.sortpanel{display:none;position:absolute;right:0;top:calc(100% + 5px);z-index:9;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.13);padding:5px;min-width:180px}
.fsort.open .sortpanel{display:block}
.sortpanel button{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;
  background:none;border:0;border-radius:7px;padding:9px 11px;color:var(--ink2);cursor:pointer}
.sortpanel button:hover{background:var(--ground)}
.sortpanel button[aria-selected="true"]{color:var(--accent);font-weight:600;background:var(--accent-soft)}

/* schemes first on the authority header */
.ag-sch{font-weight:700;color:var(--ink)}

/* ---------------- open schemes, by place ----------------
   Four sections instead of eighteen, and a card that says where it is before it says what
   it is called. */
.pband{margin:0 0 26px}
.pband-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.pband-h b{font-family:"Zilla Slab",Georgia,serif;font-size:20px;font-weight:700;line-height:1.2}
.pband-h em{font-style:normal;font-size:12px;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:2px 10px;background:var(--surface2)}
.pband-h .pb-n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* A scheme lifted into the closing-this-week strip must not vanish from the place a reader
   scrolled to. It is named here rather than repeated as a second card. */
.upnote{font-size:12.5px;color:var(--amber);background:var(--amber-soft);border-radius:8px;
  padding:7px 11px;margin:0 0 12px}
.upnote a{color:inherit;font-weight:600;text-decoration:underline}

/* a district holding more than one scheme, kept together */
.citybox{border:1px solid var(--line);border-radius:13px;background:var(--surface2);
  padding:12px 13px 13px;margin-bottom:12px}
.cityh{display:flex;align-items:baseline;gap:9px;margin:0 0 10px}
.cityh b{font-size:14px;font-weight:700}
.cityh span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint)}
.cityh::after{content:"";flex:1;height:1px;background:var(--line)}
.citybox .schcards{gap:10px}

/* ---------------- closing this week ---------------- */
.soonbox{background:var(--amber-soft);border:1px solid var(--amber);border-radius:12px;
  padding:13px 14px;margin:0 0 24px}
.soon-h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.soon-h b{font-family:"Zilla Slab",Georgia,serif;font-size:16px;color:var(--amber)}
.soon-h span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--amber);opacity:.85}
.urows{display:flex;flex-direction:column;border:1px solid var(--amber);border-radius:10px;
  overflow:hidden;background:var(--surface)}
.urow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 13px;
  align-items:center;padding:11px 14px;color:var(--ink);
  /* On the amber ground the faint rule disappeared and the rows read as one block. */
  border-top:1px solid var(--line)}
.urow:first-child{border-top:0}
.urow:hover{background:var(--surface2);text-decoration:none}
.urow .ub{grid-row:1/3;align-self:center}
.urow .ut{grid-column:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.urow .ut b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .uf{grid-row:1/3;grid-column:3;align-self:center;text-align:right;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.urow .uf i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);font-family:"IBM Plex Sans",sans-serif}
.urow .utl{grid-column:1/-1;margin-top:7px}
.urow .utl .tl::before,.urow .utl .tl .fill{top:4px}
.urow .utl .node .dot{width:9px;height:9px}
.bdg-today,.bdg-soon{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border-radius:5px;padding:3px 7px;white-space:nowrap}
.bdg-today{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
/* Amber, not green. This badge sits inside the amber closing strip and green now means one
   thing on this page - something has arrived - which it cannot mean while it is also on the
   badge for a scheme about to shut. Two colours, one job each: amber is a clock running
   down, green is news. */
.bdg-soon{background:var(--surface);color:var(--amber);border:1px solid var(--amber)}
.bdg-new{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border-radius:5px;padding:3px 7px;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent)}

/* ---------------- new this week ----------------
   The mirror of the closing strip, in the other colour and at the other end of the same
   idea: those are the schemes a reader can still act on and lose, these are the ones they
   have not seen yet. Same row, same timeline, same price on the right. */
.newbox{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;
  padding:13px 14px;margin:0 0 24px}
.new-h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.new-h b{font-family:"Zilla Slab",Georgia,serif;font-size:16px;color:var(--accent-ink)}
.new-h span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent-ink);opacity:.85}
.newbox .urows{border-color:var(--accent)}
.rtab.t-new .rt-dot{background:var(--accent)}
.rtab.t-new.on{color:var(--accent-ink)}
.rtab.t-new.on i{background:var(--accent-soft);color:var(--accent-ink)}
/* With the chips gone the row holds one control, and it belongs at the left edge with
   everything else rather than pushed to the right by an absent neighbour. */
.fbar:not(:has(.fchip)){justify-content:flex-start}
@media(max-width:560px){
  .urow{grid-template-columns:auto minmax(0,1fr)}
  .urow .uf{grid-row:3;grid-column:1/-1;text-align:left;margin-top:4px}
  .urow .uf i{display:inline;margin-right:5px}
  .pband-h .pb-n{margin-left:0;width:100%}
}

/* the district and its localities, first line of every card */
.schcard .place{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-ink);line-height:1.3;margin-bottom:4px}
.schcard .place span,.urow .place span{display:block;font-size:10.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted);margin-top:1px}
.urow .place{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.urow .place span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the allotment method, spelled out, and the launch flag */
.wc.allot{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
/* Green, with the rest of the news. It was red, from when red carried everything that
   wanted attention; red is now the notice board for what is closing, and this is the
   opposite of that. */
.wc.new{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-size:9.5px;
  border:1px solid var(--accent)}
.wc.soon{background:var(--surface);color:var(--amber);border:1px solid var(--amber);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:9.5px}

/* ---------------- authority logos ----------------
   A real mark drops into the same box the generated seal used, so nothing around it moves. */
.seal-img{object-fit:contain;border-radius:8px;padding:2px;
  /* white, not var(--surface): these marks are drawn for a light background and several
     are black line art. On the dark theme's surface they disappear entirely. */
  background:#fff}
.authmark{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.authmark img{width:120px;height:120px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:7px;flex:none}
.authmark span{display:flex;flex-direction:column;gap:2px;
  font-family:"Zilla Slab",Georgia,serif;font-size:19px;font-weight:700;line-height:1.2}
.authmark i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;
  font-weight:500;color:var(--faint);letter-spacing:.04em}
.logonote{margin-top:22px;padding-top:12px;border-top:1px solid var(--line2)}
/* the authority list: logo first, because a reader recognises the mark before the name */
ul.authcards a.authcard{flex-direction:row;align-items:center;gap:11px}
.authcard-l{width:72px;height:72px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:6px;flex:none}
.authcard-t{display:flex;flex-direction:column;gap:3px;min-width:0}
@media(max-width:520px){ .authmark img{width:88px;height:88px} .authmark span{font-size:16px} }

/* the instalments badge on a scheme card */
.wc.inst{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber);
  background:var(--amber-soft)}

/* ---------------- countdown as a sentence ---------------- */
.cdline{display:block;font-size:14px;color:var(--ink2);line-height:1.45}
.cdline b{font-weight:700;color:var(--red-ink);font-variant-numeric:tabular-nums}
.cdline .cd-on{display:block;font-size:12px;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.cdline.cool b{color:var(--muted)}

/* ---------------- a shorter card on a phone ----------------
   Eighteen schemes at a screen apiece is the whole complaint. The card keeps its timeline,
   which is why a reader trusts the deadline; what goes is the padding around it. */
@media(max-width:560px){
  .schcard{padding:12px 13px}
  .cardhead b{font-size:15.5px;line-height:1.25}
  .schcard .meta{font-size:12px}
  .schcard .tlbox{margin:8px 0 0}
  .schcard .tl .lbl{font-size:9.5px}
  .schcard .tl .dt{font-size:10.5px}
  .cdline{font-size:13px}
  .cardfoot{padding:9px 0 0}
  .cardfoot i{font-size:9.5px}
  .cardfoot b{font-size:14px}
  .schcards{gap:9px}
}

/* the WhatsApp button in direct mode, and the channel line */
.su-wa{background:#1FA855;gap:9px}
.su-wa:hover{background:#178f47}
.su-wa svg{width:19px;height:19px;fill:currentColor;stroke:none;flex:none}
.su-chan{font-size:13px;color:var(--muted);margin-top:2px}

/* `hidden` has to actually hide.

   The browser's own rule is [hidden]{display:none}, which is an attribute selector and
   therefore loses to any class that sets display - and .signup sets grid, .su-step sets
   flex. The result was a sign-up block that ignored its hidden attribute and rendered every
   step of the flow at once, on a site whose server cannot yet send a code: a form asking a
   stranger for a mobile number and throwing it away, which is the exact thing the mode
   switch exists to prevent. One rule, ahead of every layout class. */
[hidden]{display:none!important}

/* The search button is the second call to action in the hero, not the first: the search
   card above it already has a red Search. Two solid red buttons in one view is two primary
   actions, which is none. Outlined, it reads as the way through to the whole catalogue. */
.cta-main{background:transparent;color:var(--red);border:1.5px solid var(--red);font-weight:600}
.cta-main:hover{background:var(--red-soft);color:var(--red-ink);border-color:var(--red);
  text-decoration:none}

/* the sign-up, as it sits in the footer */
.sitefoot .signup{margin:6px 0 14px;padding:16px 17px;border-top-width:3px}
.sitefoot .signup h3{font-family:"Zilla Slab",Georgia,serif;font-size:19px;font-weight:600;
  margin:0;color:var(--ink)}
.su-two{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:420px){ .su-two{grid-template-columns:1fr 1.15fr} }
.su-two>input{border:1px solid var(--line);border-radius:10px;background:var(--surface2);
  padding:12px 13px;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.su-two>input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.su-two .su-row{margin:0}

/* The headline is written as two lines and has to stay two lines. Without this the browser
   balances around the <br> and can leave a stray word on its own above the break. */
.hero-h{text-wrap:pretty}
.hero-h br{display:block}

/* The header button opens the same sign-up block the footer holds, in a dialog. The block
   is moved here and moved back on close, so there is only ever one of it on the page. */
.sudlg{position:fixed;inset:0;z-index:60;background:rgba(12,18,15,.5);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.sudlg-in{position:relative;width:100%;max-width:600px;margin:auto}
.sudlg-in .signup{margin:0;box-shadow:0 18px 60px rgba(0,0,0,.28)}
.sudlg-x{position:absolute;top:-13px;right:-6px;z-index:1;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.sudlg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
body.noscroll{overflow:hidden}

/* the hero's own call to action */
.hero-cta{margin:14px 0 4px}
.hbtn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--red-ink);
  font-weight:700;font-size:15.5px;padding:13px 22px;border-radius:10px;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.16)}
.hbtn:hover{text-decoration:none;color:var(--red-ink);transform:translateY(-1px)}
.hbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){ .hbtn:hover{transform:none} }

/* the footer's one line, in place of a form */
.footsu{margin:14px 0;padding:12px 0;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.footsu a{font-weight:600;font-size:14.5px}
.footsu span{font-size:12.5px;color:var(--faint)}

/* the sign-up as a section at the foot of the home page */
#alerts .signup{margin:0}



/* ---------- units that have gone -------------------------------------------------
   Only the continuously-sold scheme has these: a GDA FCFS flat is vacant until somebody
   pays, and then it leaves the portal. The rows are quieter than the table above - they
   are context for a decision, not stock - except the badge and the date, which are the
   whole point of showing them.

   The struck price stays at full contrast on purpose. Greying it was tried first and read
   as "price unknown", which is the opposite of what the row says: the price is known, it
   is what this size went for, and it is the most useful number here. */
.gone{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.gone h3{font-family:"Zilla Slab",Georgia,serif;font-size:17px;font-weight:600;
  margin:0 0 4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.gone .gpulse{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--red);background:var(--red-soft);border-radius:999px;padding:2px 10px;
  white-space:nowrap}
.gonetbl tbody tr.gonerow td{color:var(--muted)}
.gonetbl td.pno{color:var(--ink2)}
.gonetbl td.money s,.gonetbl td.pno s{color:var(--ink2);text-decoration-thickness:1px;
  text-decoration-color:var(--red)}
.gonetbl .tchip{background:var(--line2);color:var(--muted)}
.gonetbl td.gst{white-space:nowrap}
.gbadge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-radius:4px;padding:2px 8px;
  background:var(--red-soft);color:var(--red-ink)}
.gbadge.hold{background:var(--amber-soft);color:var(--amber)}
.gonetbl td.gst i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);
  margin-top:3px}
.gonerow.ishold td{color:var(--ink2)}
.gonetbl .smonly{display:none}

/* The older movements, folded. They are a count first and a list only if asked for: a
   reader wants to know five went this week, not to scroll two hundred that went before
   they were looking. */
.goneold{margin-top:10px}
.goneold>summary{cursor:pointer;font-size:13px;color:var(--ink2);padding:7px 2px;
  list-style:none;display:flex;align-items:center;gap:7px}
.goneold>summary::-webkit-details-marker{display:none}
.goneold>summary::before{content:"";width:0;height:0;border:5px solid transparent;
  border-left-color:currentColor;transition:transform .15s}
.goneold[open]>summary::before{transform:rotate(90deg) translateX(-1px)}
.goneold>summary:hover{color:var(--ink)}
.goneold .tblwrap{margin-top:8px}

/* ---------- the same block on a phone ----------
   Not a table. Three narrower arrangements were tried first and each failed the same way:
   at 400px the row is wider than the screen, so something has to give, and whatever gave
   was the part that mattered. Dropping columns left the unit number clipped; pinning the
   status column to the right edge made it sit on top of the unit number, so the reader
   could see that a flat had gone and not which flat. A table that scrolls sideways cannot
   show a row's beginning and its verdict at the same time, and here they are the two
   halves of one sentence.

   So the row stops being a row: unit number and class on the first line, the price it was
   listed at under them, and the badge in its own corner. Nothing is dropped, nothing
   overlaps, and nothing needs scrolling. */
@media (max-width:700px){
  .gone .tblwrap{overflow:visible;background:none;border:0;border-radius:0}
  /* table.assets carries min-width:640px so the desktop table can scroll rather than
     crush. A stacked card has no columns to crush, and leaving it on pushed every card
     240px off the right of a 400px screen. */
  table.assets.gonetbl{display:block;width:100%;min-width:0}
  .gonetbl tbody{display:block;width:100%}
  .gonetbl thead{display:none}
  .gonetbl tbody tr.gonerow{display:grid;grid-template-columns:1fr auto;
    align-items:start;gap:2px 10px;padding:11px 12px;
    background:var(--surface);border:1px solid var(--line2);border-radius:9px;
    margin-bottom:7px}
  .gonetbl tbody tr.gonerow td{display:block;padding:0;border:0;text-align:left}
  /* Specificity, not source order: the display:block above is four selectors deep and beat
     a plain `.gonetbl td.smhide`, so the columns meant to drop on a phone came back. */
  .gonetbl tbody tr.gonerow td.smhide{display:none}
  /* The unit number leads, because it is what identifies the flat. Its cell comes second
     in the DOM - the table's column order is right for a desktop - so the rows are placed
     explicitly rather than left to source order. */
  .gonetbl tbody tr.gonerow td.pno{grid-column:1;grid-row:1;font-weight:700;font-size:15px;
    color:var(--ink);white-space:normal}
  .gonetbl tbody tr.gonerow td:not(.pno):not(.gst):not(.smhide){grid-column:1;grid-row:2;
    font-size:12.5px}
  .gonetbl .smonly{display:block;font-style:normal;font-weight:400;font-size:12.5px;
    color:var(--muted);margin-top:2px}
  .gonetbl tbody tr.gonerow td.gst{grid-column:2;grid-row:1/span 2;text-align:right;
    align-self:start;white-space:normal}
  .gonetbl td.gst i{font-size:11px}
  .gone h3{font-size:15.5px}
}

/* The multi-axis filter bar, as /schemes/ uses it. The one-axis version on an authority hub
   already fits; four rows of chips need the label column to line up or the rows read as
   four unrelated controls stacked by accident. */
.ufil{scroll-margin-top:80px}
.ufil .ufrow{align-items:baseline}
.ufil .uflab{flex:0 0 auto;min-width:62px}
/* A combination that would return nothing stays in place and stops being pressable. Removing
   it reflows the row under the cursor mid-click, and a chip reading 0 that still looks
   pressable is worse than either. */
.uchip.off,.uchip[disabled]{opacity:.42;cursor:default;border-style:dashed}
.uchip.off:hover,.uchip[disabled]:hover{border-color:var(--line);color:var(--ink2)}
.ufclear{margin:2px 0 0}
.ufclear button{font:inherit;font-size:12.5px;background:none;border:0;color:var(--red);
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .ufil .uflab{flex-basis:100%;min-width:0;margin-bottom:-2px}
  .ufil .ufrow{gap:6px}
  .uchip{font-size:12.5px;padding:6px 10px}
}

/* The folded tail of a long filter row. The "+N more" reads as a chip because it sits in a
   row of chips, but it is doing something different - opening the row, not filtering - so
   it never takes the pressed state. */
.uftail{display:contents}
.uchip.umore{border-style:dashed;color:var(--muted)}
.uchip.umore:hover{border-color:var(--red);color:var(--red)}

/* The block's own intro runs the width of the table under it, not .secsub's 64ch measure.
   64ch is right for a paragraph a reader reads in a column; here it left a four-line
   ragged block against a full-width table and read as a mistake. */
.gone .secsub,.gonesub{max-width:none;padding-left:0}
/* The place, carried inside the unit cell for the phone card. On a desktop it is a merged
   column of its own and this copy is hidden. */
.gonetbl .smonly b{display:block;font-weight:600;color:var(--ink2);margin-top:1px}

/* The booked table is as wide as the live one and scrolls inside its box the same way. The
   difference is what sits in the last column: the live table ends in an Apply button, which
   a reader can scroll to find, and this one ends in the verdict, which is the reason the
   row is on the page at all. So the status column is pinned to the right edge while the
   rest scrolls under it.
   Only above 700px: below that the row is a card, there is no horizontal scroll, and
   pinning put the badge on top of the unit number. */
@media (min-width:701px){
  .gonetbl thead th:last-child,
  .gonetbl tbody td.gst{position:sticky;right:0;z-index:2;background:var(--surface);
    box-shadow:-8px 0 8px -8px rgba(0,0,0,.16)}
  .gonetbl thead th:last-child{z-index:4;background:var(--surface2)}
}


/* ---------- the footer, shortened ----------
   Nine stacked blocks - brand, alert link, an updates list, four nav columns, a disclaimer,
   a social row, a correction line, a sign-up panel and a copyright - each with its own
   margin, made the footer the tallest thing on a short page. Nothing was removed that was
   not reachable in one click from something still there. What is left stacks as: the nav,
   one updates line, one row carrying the brand and the social links, the disclaimer, and
   the copyright with the alert link on it. */
.sitefoot{padding:18px 0 24px;margin-top:38px}
.footcols{gap:16px 26px;margin:0 0 2px}
.footcols div{gap:6px}
.footcols a{font-size:13px}
.footbar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;
  flex-wrap:wrap;margin:0}
.footbar .footbrand{margin:0;gap:8px}
.footbar .footbrand span{font-size:12.5px;color:var(--faint)}
.footbar .footsoc{margin:0}
.discl{margin:10px 0 0;max-width:92ch}
.copyline{margin-top:10px;padding-top:10px;display:flex;gap:14px;justify-content:center;
  flex-wrap:wrap;align-items:baseline}
.copyline a{color:var(--red)}
@media(max-width:620px){
  .footbar{align-items:flex-start}
  .footupd em{display:none}
}

/* An authority card that has something open says so on the card. The chip above it can
   filter to "Open now"; without this the reader then has to open each card to find which. */
.aopen{display:block;font-style:normal;font-size:12px;color:var(--red);margin-top:3px}

/* The home page's scheme card, wrapped so a filter has something to hide. The wrapper is
   the grid item, so it has to stretch like one - display:contents would make the card the
   item again and take [hidden] with it. */
.scard{display:flex;min-width:0}
.scard>*{flex:1 1 auto;min-width:0}
.scard[hidden]{display:none}

/* ---------- the map for one place ----------
   The same small frame the authority office rows use. One map pattern on the site: 196px,
   4:3, lazy, sitting beside the sentence that says what it is rather than filling the page
   with somebody else's tiles. The caption is not decoration - it is the difference between
   a coordinate an authority published and a search for a name, and it is the reason this
   block can exist at all on the 333 localities nobody has published a point for. */
.mapbox{display:grid;gap:12px 16px;align-items:start;border:1px solid var(--line);
  border-radius:8px;padding:13px 15px;margin:18px 0 20px;background:var(--surface)}
@media(min-width:620px){ .mapbox{grid-template-columns:1fr 196px} }
.mapbody{min-width:0}
.mapbody b{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;display:block}
.maptag{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-top:2px}
.mapbox.pinned .maptag{color:var(--muted)}
.mapcap{font-size:12.5px;color:var(--faint);line-height:1.6;margin:7px 0 0;max-width:70ch}

/* Several places in one scheme, side by side. GDA's FCFS scheme sells in three estates on
   opposite sides of Ghaziabad and the decision a reader is making is between them, so they
   are drawn as a row of cards rather than three full-width blocks stacked down the page:
   the map goes above the words, the name is the link to that place's own list, and the
   caption stays because it is what makes the pin honest. */
.mapgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  margin:16px 0 22px}
.mapgrid .mapbox{display:flex;flex-direction:column-reverse;gap:10px;margin:0}
@media(min-width:620px){ .mapgrid .mapbox{grid-template-columns:none} }
.mapgrid .omap iframe{aspect-ratio:16/10}
.mapcard .mapbody b a{color:var(--ink);text-decoration:none}
.mapcard .mapbody b a:hover{color:var(--red);text-decoration:underline}
.mapgrid .mapcap{font-size:12px;margin-top:5px}


/* ================= pages cut out of the authority's booklet =================
   Cards for the cuts (.dl-*) and for the layout drawings (.lay*). Both are appended
   below whatever a tab already carried; the drawings also have a tab of their own.
   Layout: a group is a column, not a row, so a group holding one card does not take a
   full row and leave two thirds of the width empty. */
/* A shelf of documents sizes itself to what is on it. A group holding one card sits
   beside the next group rather than taking a whole row to itself; a group holding three or
   more takes the full width and lays them out three to a row. Both failure modes were on
   this page in one afternoon: as columns, three cards were squeezed into a 330px track and
   came out 110px wide with the title cut to "The Signature buildings, photographe..."; as
   rows, three groups of one card each left two thirds of three rows empty. */
/* auto-FILL, not auto-fit. With one group on the page auto-fit collapses its empty tracks
   and hands that single group the whole 1140px, so the card inside it stretched to 1140
   and its 4/3 shot became an 855px-tall empty box with the word PDF in the middle of it -
   which is what the GDA scheme page has been showing. auto-fill keeps the tracks, so a
   lone group sits in a 310-380px column like every other one and the row simply ends. */
.docwrap,.dl-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
 gap:22px 26px;align-items:start}
/* And a belt for anywhere else a card lands in a track wider than it should be: nothing
   here is a hero image, it is a first page at 210x297. */
.doccard,.dl-card,.lay{max-width:360px}
.docgroup:has(>.docgrid>:nth-child(3)),.dl-grp:has(>.dl-grid>:nth-child(3)){grid-column:1/-1}
.docgroup,.dl-grp{min-width:0;break-inside:avoid}
.docgroup .docgh{margin-top:0}
.dl-blk{margin-top:34px;padding-top:26px;border-top:2px solid var(--line)}
.dl-blk h3{margin:0 0 8px}
.dl-note{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.6;max-width:72ch}
.dl-grp{margin:0 0 26px}
.dl-gh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 5px}
.dl-gh h4{font-size:15px;margin:0}
.dl-ct{font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);
 background:var(--surface2);color:var(--muted);padding:3px 6px;border-radius:3px}
.dl-gd{font-size:12.5px;color:var(--muted);margin:0 0 13px;max-width:68ch;line-height:1.55}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
/* one card wide inside a group that is itself a column; three across in a group that
   has earned the full width */
.dl-cols .dl-grid,.docwrap .docgrid{grid-template-columns:1fr}
/* A group of exactly two gets two tracks and lays its two cards side by side. Stacking
   them in one 360px column left two thirds of the row empty and read as a mistake - GDA's
   two signed lists, one above the other with the rest of the row white, is the case that
   proved it. Three or more still takes the full width; the rule for that comes after this
   one on purpose, because the last matching rule wins and the wider group should override
   the narrower. */
.dl-grp:has(>.dl-grid>:nth-child(2)),.docgroup:has(>.docgrid>:nth-child(2)){grid-column:span 2}
.dl-grp:has(>.dl-grid>:nth-child(2))>.dl-grid,
.docgroup:has(>.docgrid>:nth-child(2))>.docgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl-grp:has(>.dl-grid>:nth-child(3)),.docgroup:has(>.docgrid>:nth-child(3)){grid-column:1/-1}
.dl-grp:has(>.dl-grid>:nth-child(3))>.dl-grid,
.docgroup:has(>.docgrid>:nth-child(3))>.docgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-card,.lay{border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden;
 display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0;
 transition:border-color .12s,box-shadow .12s}
.dl-card:hover,.lay:hover,.dl-card:focus-visible,.lay:focus-visible{border-color:var(--accent);
 box-shadow:0 2px 14px -7px rgba(14,95,78,.5)}
.dl-shot{aspect-ratio:4/3;background:var(--surface2);border-bottom:1px solid var(--line2);
 overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.dl-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dl-shot:not(:has(img)){aspect-ratio:16/6;align-items:center}
.dl-none{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--faint)}
.dl-b{padding:10px 11px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
.dl-b .t{font-size:12.5px;line-height:1.35;font-weight:600}
.dl-m{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px}
.dl-t{font:500 9.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);
 border-radius:3px;padding:2px 6px;color:var(--muted);white-space:nowrap}
.dl-t.cat{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.dl-t.pg{background:var(--surface2)}
.dl-card.ext .dl-t.pg{border-style:dashed}
.dl-conf{border:1px solid var(--amber);background:var(--amber-soft);border-radius:6px;
 padding:14px 16px;margin:0 0 24px}
.dl-conf .lb2{font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
 text-transform:uppercase;color:var(--amber);margin:0 0 9px}
.dl-conf ul{margin:0;padding-left:19px;font-size:13.5px;line-height:1.7}
.dl-conf li span{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.dl-foot{font-size:12px;color:var(--faint);line-height:1.65;margin:20px 0 0;
 border-top:1px solid var(--line2);padding-top:14px;max-width:78ch}
.lfilter{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.lfilter .fchip{appearance:none;font:600 12px/1 inherit;border:1px solid var(--line);
 background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 14px;cursor:pointer}
.lfilter .fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lfilter .fchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fnone{font-size:13px;color:var(--faint);margin:0 0 18px}
.area{border-top:1px solid var(--line2);padding-top:20px;margin-top:24px;scroll-margin-top:70px}
.area:first-of-type{border-top:0;padding-top:0;margin-top:0}
.area[hidden]{display:none}
.ahead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 14px}
.ahead h4{font-size:17px;margin:0}
.an{font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--accent);
 color:var(--accent-ink);background:var(--accent-soft);border-radius:3px;padding:3px 6px}
.as{font-size:12.5px;color:var(--faint)}
.sublab{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
 text-transform:uppercase;color:var(--faint);margin:18px 0 10px;display:flex;gap:7px;align-items:center}
.sublab[hidden]{display:none}
.sublab span{border:1px solid var(--line);border-radius:3px;padding:2px 5px;letter-spacing:0}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:start}
.lay[hidden]{display:none}
.lshot{aspect-ratio:16/11;background:#fff;border-bottom:1px solid var(--line2);overflow:hidden;display:block}
.lshot img{width:100%;height:100%;object-fit:contain;display:block}
.lb{padding:11px 12px 12px;display:flex;flex-direction:column;gap:8px}
.lt{font-size:13px;line-height:1.35;font-weight:600}
.lu,.lm{display:flex;gap:4px;flex-wrap:wrap}
.lnote{font-size:11px;color:var(--faint);line-height:1.5}
.uc{font:600 9.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:3px;padding:2px 6px;
 border:1px solid var(--line);color:var(--muted)}
.uc.resi{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.uc.comm{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.uc.amen{background:var(--surface2)}
.uc.indu{border-color:var(--seal);color:var(--seal)}
.uc.unread{border-style:dashed}
.uc.clus,.uc.unit{background:var(--surface2);color:var(--faint)}
/* the chip in the plots table's colony cell */
.laylink{display:block;width:max-content;max-width:100%;margin-top:7px;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);
 border-radius:3px;padding:4px 7px;text-decoration:none;white-space:nowrap}
.laylink:hover{background:var(--accent);color:#fff}
.area.flash{animation:lpflash 1.6s ease}
@keyframes lpflash{0%,100%{background:transparent}18%{background:var(--accent-soft)}}
@media (prefers-reduced-motion:reduce){.area.flash{animation:none}}
/* the district strip: one cover sheet per colony, and the library counters */
.cstrip{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ccard .lshot{aspect-ratio:4/3}
.libstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;
 margin:18px 0 24px}
.libstat div{border:1px solid var(--line);border-radius:6px;background:var(--surface2);
 padding:15px 16px;text-align:center}
.libstat b{display:block;font:700 26px/1.15 inherit;color:var(--accent-ink);
 font-variant-numeric:tabular-nums}
.libstat span{font-size:11.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
h3 .an{margin-left:8px;vertical-align:middle}
/* ---------- three, two, one ----------
   Every grid of cards on this site lays out the same way: three to a row on a desktop, two
   on a tablet, one on a phone. auto-fill was deciding it by card width instead, which gave
   five thin columns on a wide screen on one page and a single card stranded in a row of
   empty tracks on another. A reader should not have to learn a new shape per section. */
@media (max-width:1000px){
 .lgrid,.dl-grid,.docgrid,.cstrip,
 .dl-grp:has(>.dl-grid>:nth-child(2))>.dl-grid,
 .docgroup:has(>.docgrid>:nth-child(2))>.docgrid,
 .dl-grp:has(>.dl-grid>:nth-child(3))>.dl-grid,
 .docgroup:has(>.docgrid>:nth-child(3))>.docgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
 .lgrid,.dl-grid,.docgrid,.bcards,.cstrip,.docwrap,.dl-cols,
 .dl-grp:has(>.dl-grid>:nth-child(2))>.dl-grid,
 .docgroup:has(>.docgrid>:nth-child(2))>.docgrid,
 .dl-grp:has(>.dl-grid>:nth-child(3))>.dl-grid,
 .docgroup:has(>.docgrid>:nth-child(3))>.docgrid{grid-template-columns:1fr;gap:12px}}

/* A card title is a name. Anything longer is the description's job, and the description is
   clamped so a long one cannot push the next card's title off the reader's line. */
.lt,.dl-b .t,.doccard b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
 overflow:hidden}
.lnote{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- a card per property ----------
   Used where an authority sells a handful of named buildings rather than numbered plots. */
/* Two, not three. A document card is a thumbnail and a name and reads fine at 270px;
   a property card is a table of eight figures and every row of it wrapped there. */
.bcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.bcard{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;
 display:flex;flex-direction:column;min-width:0}
.bshot{display:block;aspect-ratio:16/10;background:var(--surface2);overflow:hidden;
 border-bottom:1px solid var(--line2)}
.bshot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bb{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;min-width:0}
.bb h3{margin:0;font-size:15.5px;line-height:1.3}
.bloc{margin:0;font-size:12.5px;color:var(--muted)}
.bb .kv{margin:0;font-size:12.5px}
.bb .kv th{width:42%;font-weight:500;color:var(--muted);padding:4px 8px 4px 0;vertical-align:top;text-align:left}
.bb .kv td{padding:4px 0;vertical-align:top}
.bnear ul{margin:5px 0 0;padding-left:17px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.bnear .lb2{margin:0;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
 letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.bmap{margin:2px 0 0}
.bmap a{font:600 12px/1 inherit;color:var(--accent-ink);background:var(--accent-soft);
 border:1px solid var(--accent);border-radius:4px;padding:7px 10px;display:inline-block;
 text-decoration:none}
.bmap a:hover{background:var(--accent);color:#fff}
/* After the .bcards rule above, not before it: a media query earlier in the file loses to
   a plain rule later in it, and that is exactly how the phone ended up with two columns of
   property card at 181px each. */
@media (max-width:620px){.bcards{grid-template-columns:1fr;gap:14px}}

/* ---------- the tab strip on a phone ----------
   Four labels wrap to two lines at 352px and all four stay visible. The old ten scrolled
   sideways, and a control a reader has to drag to discover is a control most readers never
   discover. The section chips below them still scroll sideways - they are a shortcut to
   something already on the page, not the only way to it. */
@media (max-width:560px){
  .stabs{padding:0 10px;margin:14px 0 12px;border-radius:9px}
  .stab-b{font-size:13px;margin-right:14px;padding:9px 2px 8px}
  /* Two sticky strips eat half a phone screen. The tabs let go and the section chips
     take their place under the masthead, so what follows the reader down a long tab is
     the row that tells them where in it they are. */
  .stabs{position:static}
  .ssubs{top:var(--t-ssub,74px);padding:7px 0 9px}
  .ssub{font-size:12px;padding:5px 10px}
  .ssec+.ssec{margin-top:26px;padding-top:20px}
  .sumstrip{gap:6px}
  .sumstrip>div{padding:7px 8px}
  .sumstrip span{font-size:10px}
  .sumstrip b{font-size:16px}
}

/* ---------- the category rows as cards, at phone width ----------
   Same rows, same order, same filtered list as the table above them - the generator writes
   both and this picks. A nine-column table at 390px either scrolls sideways, which puts the
   price off screen, or shrinks the class until it cannot be read. */
.catcards{display:none}
@media (max-width:700px){
  .spwrap .tblwrap,.fmain>.tblwrap{display:none}
  .catcards{display:block}
}
.catleg{display:flex;align-items:center;gap:12px;margin:2px 0 12px;font-size:11.5px;
  color:var(--muted)}
.catleg span{display:flex;align-items:center;gap:5px}
.catleg i{width:14px;height:6px;border-radius:3px;display:block}
.catleg i.g{background:var(--accent-soft)}
.catleg i.r{background:var(--red)}
.catleg em{font-style:normal;color:var(--faint,var(--muted));opacity:.85}
.catgrp{margin:0 0 16px;background:var(--surface);border:1px solid var(--line2);
  border-radius:12px;overflow:hidden}
.catgrp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 13px;background:var(--surface2);border-bottom:1px solid var(--line2)}
.catgrp-h b{font-size:15px}
.catgrp-h em{font-style:normal;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.catrow{display:block;padding:11px 13px 13px;border-top:1px solid var(--line2)}
.catgrp .catrow:first-of-type{border-top:none}
.catrow .l1{display:flex;align-items:baseline;gap:7px}
.catrow .l1 b{font-size:15px}
.catrow .l1 .tchip{font-size:10px}
/* The price is the figure a reader is choosing on, so it is the dark one; the size and the
   rate under it are the check on that choice, not the choice. */
.catrow .l1 .pr{margin-left:auto;font-style:normal;font-weight:600;font-size:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.catrow .l2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.catrow .l2 em{font-style:normal;white-space:nowrap}
.catrow .l2 em.hot{color:var(--red);font-weight:600}
.catbar{display:block;height:6px;margin-top:9px;border-radius:4px;
  background:var(--accent-soft);overflow:hidden}
.catbar i{display:block;height:100%;background:var(--red)}
.catrow .applybtn{margin-top:10px}

/* ---------- the unit numbers, as a grid ----------
   Estate, then pocket or block, then the authority's own numbers. A reader who has chosen a
   type and a place wants to know which numbers are free; the priced list under this answers
   what one of them costs, which is a different question and is folded away. */
.ugrid{margin:2px 0 4px}
.ugrp{margin:0 0 14px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  background:var(--surface)}
.ugrp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 13px;background:var(--surface2);border-bottom:1px solid var(--line2)}
.ugrp-h b{font-size:15px}
.ugrp-h em{font-style:normal;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right}
.ublk{border-top:1px solid var(--line2)}
.ugrp .ublk:first-of-type{border-top:none}
.ublk>summary{display:grid;grid-template-columns:14px 1fr auto;gap:4px 9px;align-items:center;
  padding:10px 13px;cursor:pointer;list-style:none}
.ublk>summary::-webkit-details-marker{display:none}
.ublk .chev{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.2;
  transition:transform .15s}
.ublk[open]>summary .chev{transform:rotate(90deg)}
.ublk .nm{font-weight:600;font-size:14px}
.ublk .fr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ublk .meta{grid-column:2/4;font-size:11.5px;color:var(--faint,var(--muted))}
.ublk .meta i{font-style:normal;font-variant-numeric:tabular-nums}
.units{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 13px}
.unit{font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:4px 7px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.fulllist{margin-top:6px;border-top:1px solid var(--line)}
.fulllist>summary{display:flex;align-items:center;gap:8px;padding:13px 0 11px;cursor:pointer;
  list-style:none;font-size:13.5px;color:var(--ink2)}
.fulllist>summary::-webkit-details-marker{display:none}
.fulllist .chev{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.2;
  transition:transform .15s;flex:none}
.fulllist[open]>summary .chev{transform:rotate(90deg)}
@media (max-width:560px){
  .ugrp-h b{font-size:14px} .ugrp-h em{font-size:11px}
  .ublk>summary{padding:9px 11px} .units{padding:0 11px 11px;gap:4px}
  .unit{font-size:11px;padding:3px 6px}
}

/* ---------- the estate's traction in the table ----------
   What the card group heading says on a phone, said by the merged place cell on a table,
   and the row's own share in a column of its own. */
.assets td .locas{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;font-weight:400}
.assets td .locas i{display:block;font-style:normal;font-size:11px;color:var(--faint,var(--muted))}
td.availc{min-width:132px}
td.availc b{display:block;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
td.availc b.hot{color:var(--red)}
.abar{display:block;height:5px;margin-top:5px;border-radius:3px;
  background:var(--accent-soft);overflow:hidden}
.abar i{display:block;height:100%;background:var(--red)}