/* Square Town counting-house report. Static charts; shared fonts and themes. */
.stats-design {--moss:#4f7155; --slate:#567a97; --rose:#b86573; --brass:#a47b29; --muted:#736e65; --wash:#f5f6f1; --track:#eeeae2; --royal:#faf1dc; color:var(--text); font:16px/1.65 var(--serif)}
[data-theme=dark] .stats-design {--moss:#90b18b; --slate:#91b1cb; --rose:#dc96a2; --brass:#dcbb68; --muted:#b2aca2; --wash:#232823; --track:#323333; --royal:#302a21}
.stats-design p {margin:0}
.stats-design h2 {border:0; padding:0; margin:0; font:600 25px/1.25 var(--mono); letter-spacing:-1px}
.stats-design h3 {margin:0; font:600 17px/1.4 var(--mono)}
.stats-design .eyebrow {font:500 10px/1.5 var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:0 0 13px}
.stats-design .edition {display:flex; justify-content:space-between; gap:12px; padding:0 0 25px; border-bottom:1px solid var(--hair); font:11px/1.5 var(--mono); color:var(--muted)}
:where(.stats-design) .edition span:first-child {display:flex; align-items:center; gap:8px}
:where(.stats-design) .edition i {height:7px; width:7px; background:var(--moss); display:inline-block; border-radius:50%}
:where(.stats-design) .growth {display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:16px; padding:42px 0 38px}
:where(.stats-design) .population {font:500 clamp(52px,6vw,76px)/1.05 var(--mono); letter-spacing:-5px}
:where(.stats-design) .population span {display:block; font:500 14px/1.5 var(--mono); letter-spacing:0; margin-top:10px}
.stats-design .intro {font:italic 21px/1.5 var(--serif); margin:20px 0 30px; color:var(--text2)}
:where(.stats-design) .fill-heading {display:flex; justify-content:space-between; gap:8px; font:10px/1.5 var(--mono); margin-bottom:12px}
:where(.stats-design) .fill-heading b {font-weight:600; color:var(--moss)}
:where(.stats-design) .fill-heading span {color:var(--muted)}
:where(.stats-design) .occupancy {height:18px; background:var(--track); position:relative; border-radius:3px}
:where(.stats-design) .occupancy>div {height:100%; background:var(--moss); border-radius:3px; background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(2.5% - 2px),var(--panel) calc(2.5% - 2px),var(--panel) 2.5%)}
:where(.stats-design) .occupancy>i {position:absolute; top:-4px; height:26px; border-left:2px solid var(--brass)}
:where(.stats-design) .milestone {display:flex; align-items:center; gap:12px; margin-top:20px; font-size:13px; color:var(--muted)}
:where(.stats-design) .milestone strong {font-weight:600}
:where(.stats-design) .flag {background:var(--royal); color:var(--brass); width:30px; height:34px; display:grid; place-items:center; font-size:20px; border-radius:6px}
:where(.stats-design) .town-model {margin:-10px -25px 0 0; text-align:center}
:where(.stats-design) .town-model img {width:100%; max-height:420px; object-fit:contain; display:block}
:where(.stats-design) .town-model figcaption {font:italic 12px/1.5 var(--serif); color:var(--muted); margin-top:-2px}
:where(.stats-design) .metric-ribbon {display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:28px 0}
:where(.stats-design) .metric-ribbon>div {border-right:1px solid var(--hair); padding:0 24px; position:relative}
:where(.stats-design) .metric-ribbon>div:first-child {padding-left:0}
:where(.stats-design) .metric-ribbon>div:last-child {border:0}
:where(.stats-design) .metric-ribbon b {display:block; font:500 30px/1.2 var(--mono); letter-spacing:-1.5px; margin:8px 0 6px}
:where(.stats-design) .metric-ribbon>div>span:last-child {font:11px/1.5 var(--mono); color:var(--muted)}
:where(.stats-design) .metric-symbol {font:22px/1 var(--mono)}
:where(.stats-design) .blue {--chart:var(--slate)}
:where(.stats-design) .rose {--chart:var(--rose)}
:where(.stats-design) .metric-symbol.blue {color:var(--slate)}
:where(.stats-design) .metric-symbol.rose {color:var(--rose)}
:where(.stats-design) .gold {color:var(--brass)}
:where(.stats-design) .green {color:var(--moss)}
:where(.stats-design) .favourites {padding:48px 0}
:where(.stats-design) .section-heading {display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:30px}
:where(.stats-design) .section-heading>p {font:italic 15px/1.55 var(--serif); color:var(--muted)}
:where(.stats-design) .boards {display:grid; grid-template-columns:1fr 1fr; gap:48px}
:where(.stats-design) .board-heading {display:flex; justify-content:space-between; align-items:baseline; padding-bottom:15px; border-bottom:1px solid var(--hair); gap:10px}
:where(.stats-design) .board-heading>span {font:10px var(--mono); color:var(--muted)}
.stats-design .ranking {padding:0; margin:12px 0 0; list-style:none}
:where(.stats-design) .ranking li {display:flex; align-items:center; gap:12px; margin:0; padding:10px 0}
:where(.stats-design) .rank {font:10px var(--mono); color:var(--muted); width:18px}
:where(.stats-design) .rank-content {flex:1; min-width:0}
:where(.stats-design) .rank-label {display:flex; align-items:center; justify-content:space-between; gap:10px; font:12px var(--mono); margin-bottom:9px}
:where(.stats-design) .rank-label b {font-weight:500}
:where(.stats-design) .domain {display:flex; align-items:center; gap:9px; min-width:0; overflow-wrap:anywhere}
:where(.stats-design) .domain img {flex:none; border-radius:3px; width:16px; height:16px}
:where(.stats-design) .bar-track {height:5px; background:var(--track); border-radius:2px}
:where(.stats-design) .bar-track i {display:block; height:100%; background:var(--chart); border-radius:2px}
:where(.stats-design) .ranking li:first-child .rank {color:var(--chart); font-weight:600}
:where(.stats-design) .ranking li:first-child .rank-label {font-weight:600}
:where(.stats-design) .throne {display:grid; grid-template-columns:175px 1fr auto; align-items:center; gap:20px; background:var(--royal); border:1px solid color-mix(in srgb,var(--brass) 22%,transparent); border-radius:12px; padding:20px 26px 20px 14px; margin:4px -16px 48px}
:where(.stats-design) .throne>img {width:175px; height:175px; object-fit:contain}
.stats-design .throne h2 {font-size:21px; letter-spacing:-.6px}
.stats-design .throne p:not(.eyebrow) {font-size:14px; color:var(--text2); margin-top:12px}
.stats-design .throne .eyebrow {color:var(--brass); margin-bottom:9px}
:where(.stats-design) .throne-price {text-align:right; min-width:140px}
:where(.stats-design) .throne-price>span {font:9px var(--mono); color:var(--brass); border:1px solid color-mix(in srgb,var(--brass) 35%,transparent); border-radius:30px; padding:6px 8px}
:where(.stats-design) .throne-price b {display:block; font:500 39px/1.25 var(--mono); letter-spacing:-2px; margin:13px 0 2px}
:where(.stats-design) .throne-price small {font:10px var(--mono); color:var(--muted)}
:where(.stats-design) .town-details {display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:0 0 38px}
:where(.stats-design) .town-details h2 {font-size:21px; letter-spacing:-.5px}
.stats-design .section-intro {color:var(--muted); font-size:14px; margin-top:12px}
:where(.stats-design) .land-strip {display:flex; gap:3px; height:26px; margin:24px 0 14px; border-radius:4px; overflow:hidden}
:where(.stats-design) .land-strip>i:nth-child(1) {background:var(--moss)}
:where(.stats-design) .land-strip>i:nth-child(2) {background:var(--slate)}
:where(.stats-design) .land-strip>i:nth-child(3) {background:var(--brass)}
:where(.stats-design) .land-legend {margin:0}
:where(.stats-design) .land-legend>div {display:flex; justify-content:space-between; padding:8px 0; font:12px var(--mono); border-bottom:1px solid var(--hair)}
:where(.stats-design) .land-legend dd {margin:0}
:where(.stats-design) .land-legend dt {display:flex; align-items:center; gap:9px}
:where(.stats-design) .land-legend i {width:7px; height:7px; border-radius:1px}
:where(.stats-design) .green-dot {background:var(--moss)}
:where(.stats-design) .blue-dot {background:var(--slate)}
:where(.stats-design) .gold-dot {background:var(--brass)}
.stats-design .footnote {font:11px/1.65 var(--mono); color:var(--muted); margin-top:16px}
:where(.stats-design) .clown-values {display:flex; gap:42px; margin:22px 0 18px}
:where(.stats-design) .clown-values b {display:block; font:500 34px/1.3 var(--mono); letter-spacing:-1px}
:where(.stats-design) .clown-values span {font:11px/1.5 var(--mono); color:var(--muted)}
.stats-design .clown-report>p:not(.eyebrow) {font-size:14px; color:var(--text2)}
:where(.stats-design) .clown-note {display:flex; gap:12px; align-items:center; background:var(--wash); padding:14px 16px; border-radius:7px; margin-top:18px; font-size:12px}
:where(.stats-design) .clown-note>span {font-size:24px; color:var(--moss)}
:where(.stats-design) .activity {padding-top:36px; border-top:1px solid var(--hair)}
.stats-design .arrivals {list-style:none; padding:0; margin:20px 0 0}
:where(.stats-design) .arrivals li {display:flex; justify-content:space-between; gap:10px; padding:11px 0; margin:0; border-bottom:1px solid var(--hair); font:11px var(--mono)}
:where(.stats-design) .arrivals time {white-space:nowrap; font-size:9px; color:var(--muted)}
.stats-design .events {list-style:none; padding:0; margin:24px 0 0}
:where(.stats-design) .events li {position:relative; margin:0 0 0 4px; padding:0 0 22px 22px; border-left:1px solid var(--line)}
:where(.stats-design) .events li::before {content:''; position:absolute; left:-4px; top:5px; width:7px; height:7px; background:var(--brass); border:2px solid var(--panel); border-radius:50%}
:where(.stats-design) .events time {font:9px var(--mono); color:var(--muted)}
.stats-design .events p {font-size:13px; margin-top:4px}
:where(.stats-design) .data-note {border-top:1px solid var(--hair); padding-top:25px; color:var(--muted); font:12px/1.7 var(--serif)}
:where(.stats-design) .data-note>b {font:500 11px var(--mono); color:var(--text2)}
.stats-design .data-note p {margin-top:10px; max-width:none}
.stats-design .preview-note {font:9px var(--mono); color:var(--muted); margin-top:22px}
@media(max-width:1000px) {:where(.stats-design) .boards, :where(.stats-design) .town-details {gap:28px}
:where(.stats-design) .throne {grid-template-columns:135px 1fr; gap:14px}
:where(.stats-design) .throne>img {width:135px; height:150px; grid-row:span 2}
:where(.stats-design) .throne-price {grid-column:2; display:flex; align-items:center; gap:12px; text-align:left}
:where(.stats-design) .throne-price b {margin:0; font-size:28px}
:where(.stats-design) .throne-price>span {display:none}
:where(.stats-design) .metric-ribbon>div {padding:0 16px}
:where(.stats-design) .metric-ribbon b {font-size:25px}
:where(.stats-design) .board-heading {display:block}
:where(.stats-design) .board-heading>span {display:block; margin-top:5px}
}
@media(max-width:760px) {:where(.stats-design) .growth {grid-template-columns:1fr; padding-top:28px; gap:10px}
:where(.stats-design) .town-model {margin:0 auto; max-width:340px; width:100%}
:where(.stats-design) .growth-copy {max-width:100%}
:where(.stats-design) .population {font-size:64px}
:where(.stats-design) .metric-ribbon {grid-template-columns:1fr 1fr; row-gap:26px}
:where(.stats-design) .metric-ribbon>div:nth-child(3) {padding-left:0}
:where(.stats-design) .metric-ribbon>div:nth-child(2) {border:0}
:where(.stats-design) .section-heading {display:block}
:where(.stats-design) .section-heading>p {margin-top:12px}
:where(.stats-design) .section-heading>p br {display:none}
:where(.stats-design) .boards, :where(.stats-design) .town-details {grid-template-columns:1fr; gap:32px}
:where(.stats-design) .favourites {padding:34px 0}
:where(.stats-design) .board-heading {display:flex}
:where(.stats-design) .board-heading>span {margin:0}
.stats-design .edition {font-size:9px}
:where(.stats-design) .edition>span:last-child {max-width:95px; text-align:right}
:where(.stats-design) .throne {margin:0 0 34px; padding:18px; grid-template-columns:1fr; text-align:center}
:where(.stats-design) .throne>img {grid-row:auto; justify-self:center; width:150px; height:150px}
:where(.stats-design) .throne-price {grid-column:auto; justify-content:center}
:where(.stats-design) .throne h2 {font-size:20px}
:where(.stats-design) .throne p br {display:none}
:where(.stats-design) .throne-price small {font-size:11px}
:where(.stats-design) .town-details {padding-bottom:30px}
:where(.stats-design) .rank-label {font-size:11px}
:where(.stats-design) .arrivals li {font-size:10px}
:where(.stats-design) .activity {padding-top:28px}
.stats-design .intro {font-size:20px}
:where(.stats-design) .town-model img {max-height:330px}
}
.stats-design {scroll-margin-top:80px}
.stats-design .data-note {background:none; padding-bottom:0}

/* Live content can contain long domains, dates, and larger monetary values. */
.stats-design h2.population {font:500 clamp(52px, 6vw, 76px)/1.05 var(--mono); letter-spacing:-5px}
.stats-design .empty {padding:24px 0; color:var(--muted); font-size:14px}
.stats-design .data-note h2 {font:500 11px/1.6 var(--mono); color:var(--text2); letter-spacing:0}
.stats-design .domain > span, .stats-design .throne-owner {overflow-wrap:anywhere; min-width:0}
.stats-design .growth-copy, .stats-design .town-details > section, .stats-design .board, .stats-design .throne > div {min-width:0}
.stats-design .arrivals time {white-space:normal; flex:none; max-width:108px; text-align:right; line-height:1.5}
.stats-design .metric-ribbon b, .stats-design .clown-values b, .stats-design .throne-price b {overflow-wrap:anywhere}
.stats-design .throne {grid-template-columns:175px minmax(0, 1fr) minmax(140px, auto)}
@media(max-width:1000px) {
  .stats-design .throne {grid-template-columns:135px minmax(0, 1fr)}
}
@media(max-width:760px) {
  .stats-design h2.population {font-size:64px}
  .stats-design .throne {grid-template-columns:minmax(0, 1fr)}
  .stats-design .arrivals .domain {font-size:11px}
  .stats-design .arrivals time {max-width:90px}
}
@media(max-width:360px) {
  .stats-design .metric-ribbon b {font-size:21px; letter-spacing:-1px}
  .stats-design .fill-heading {font-size:9px}
  .stats-design .boards .board-heading {align-items:start; flex-wrap:wrap}
}
.stats-design h2.population-wide {font-size:clamp(38px, 5vw, 64px); letter-spacing:-2px}
.stats-design .clown-values span {display:block}
.stats-design .clown-values > div:first-child b {color:var(--rose)}
.stats-design .clown-values > div:last-child b {color:var(--moss)}

/* A final little plot of town, joined to the bottom of the page. */
.stats-invitation {
  --plot-ground:#e5e8d9; --plot-edge:#c5cbb9; --plot-line:#b4bea8; --plot-gold:#efbe2b;
  display:grid; grid-template-columns:145px minmax(0,1fr) auto; gap:28px; align-items:center;
  margin:36px -52px -52px; padding:30px 52px 32px; border-top:1px solid var(--line); border-radius:0 0 17px 17px;
  background:linear-gradient(110deg,#edf0e7,#f7f5ed 65%); color:#262923;
}
[data-theme=dark] .stats-invitation {
  --plot-ground:#353d33; --plot-edge:#22291f; --plot-line:#58654e; --plot-gold:#ffd84d;
  background:linear-gradient(110deg,#242d25,#252724 65%); color:#f3f1ed;
}
.invitation-plot {text-align:center}
.invitation-plot svg {display:block; width:145px; height:120px}
.invitation-plot > span {display:block; margin-top:5px; font:9px/1.5 var(--mono); color:var(--text2)}
.invitation-copy .invitation-eyebrow {font:500 9px/1.6 var(--mono); text-transform:uppercase; letter-spacing:1px; color:var(--text2); margin:0 0 10px}
.invitation-copy h2 {margin:0 0 12px; padding:0; border:0; font:600 23px/1.3 var(--mono); letter-spacing:-.7px; text-wrap:balance}
.invitation-copy > p:last-child {margin:0; font:italic 15px/1.6 var(--serif); color:var(--text2)}
.invitation-action a {display:flex; justify-content:center; align-items:center; gap:16px; padding:15px 18px; background:var(--plot-gold); color:#26231d; border-radius:8px; box-shadow:inset 0 -3px 0 #0002; text-decoration:none; white-space:nowrap; font:700 12px/1.4 var(--mono)}
.invitation-action a:hover {background:var(--plot-gold); filter:brightness(1.04)}
.invitation-action p {margin:10px 0 0; text-align:center; font:10px/1.5 var(--mono); color:var(--text2)}
@media(max-width:1000px) and (min-width:761px) {
  .stats-invitation {grid-template-columns:115px minmax(0,1fr); gap:16px 24px}
  .invitation-plot {grid-row:span 2}
  .invitation-plot svg {width:115px; height:auto}
  .invitation-action {grid-column:2; justify-self:start}
  .invitation-action p {text-align:left}
}
@media(max-width:760px) {
  .stats-invitation {grid-template-columns:minmax(0,1fr); gap:22px; margin:30px -20px -34px; padding:26px 24px 30px; border-radius:0 0 13px 13px; text-align:center}
  .invitation-plot {justify-self:center}
  .invitation-plot svg {width:130px; height:auto}
  .invitation-copy h2 {font-size:23px}
  .invitation-action a {white-space:normal}
}

/* ⏱ Time out for a spin: ride time, the car and the plane, and the last days as stacked columns.
   The two chart colours are the vehicles' own (red car, sky for the plane), validated as a pair for
   colour-blind readers in both themes; everything else wears the page's ink. */
.stats-design {--ride-car:#d0493b; --ride-plane:#2f7fc1}
[data-theme=dark] .stats-design {--ride-car:#e0604f; --ride-plane:#4a95d6}
.stats-design .sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:where(.stats-design) .rides {padding:8px 0 48px}
:where(.stats-design) .ride-story {display:grid; grid-template-columns:minmax(0, auto) minmax(0, 1fr); gap:36px; align-items:center; padding:6px 0 30px; border-bottom:1px solid var(--hair)}
.stats-design .ride-figure {display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font:500 14px/1.2 var(--mono); color:var(--muted)}
.stats-design .ride-figure b {font:500 clamp(46px,5.4vw,66px)/1 var(--mono); letter-spacing:-4px; color:var(--text)}
.stats-design .ride-figure span {margin-left:-4px}
.stats-design .ride-story h3 {font-size:19px; letter-spacing:-.4px}
.stats-design .ride-story p:not(.ride-figure) {font:italic 17px/1.55 var(--serif); color:var(--text2); margin-top:8px; max-width:52ch}
:where(.stats-design) .ride-cards {display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:26px 0 8px}
:where(.stats-design) .ride-card {display:grid; grid-template-columns:170px minmax(0, 1fr); gap:18px; align-items:center}
:where(.stats-design) .ride-card img {width:170px; height:160px; object-fit:contain}
.stats-design .ride-card .eyebrow {margin-bottom:6px}
.stats-design .ride-card h3 {font-size:15px}
:where(.stats-design) .ride-card b {display:block; font:500 32px/1.25 var(--mono); letter-spacing:-1.5px; margin:8px 0 4px; overflow-wrap:anywhere}
:where(.stats-design) .ride-card span {display:block; font:11px/1.5 var(--mono); color:var(--muted)}
:where(.stats-design) .ride-card.car .eyebrow::before, :where(.stats-design) .ride-card.plane .eyebrow::before {content:''; display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:0}
:where(.stats-design) .ride-card.car .eyebrow::before {background:var(--ride-car)}
:where(.stats-design) .ride-card.plane .eyebrow::before {background:var(--ride-plane)}
:where(.stats-design) .ride-chart {margin:22px 0 0}
:where(.stats-design) .ride-chart figcaption {display:flex; flex-wrap:wrap; gap:6px 18px; font:10px/1.5 var(--mono); color:var(--muted); margin-bottom:12px}
:where(.stats-design) .ride-chart figcaption i {display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:0}
:where(.stats-design) .ride-chart .car {background:var(--ride-car)}
:where(.stats-design) .ride-chart .plane {background:var(--ride-plane)}
:where(.stats-design) .ride-scale {margin-left:auto}
/* columns grow from the baseline: car first, the plane stacked on it past a 2px gap, the top end rounded */
:where(.stats-design) .ride-cols {display:grid; grid-template-columns:repeat(30, minmax(0, 1fr)); gap:3px; height:120px; border-bottom:1px solid var(--line); background:linear-gradient(var(--hair), var(--hair)) top / 100% 1px no-repeat}
:where(.stats-design) .ride-cols>div {display:flex; flex-direction:column-reverse; gap:2px; position:relative; cursor:default}
:where(.stats-design) .ride-cols i {display:block; flex:none; min-height:2px}
:where(.stats-design) .ride-cols>div>i:last-child {border-radius:4px 4px 0 0}
:where(.stats-design) .ride-cols>div:hover {background:color-mix(in srgb, var(--track) 70%, transparent)}
:where(.stats-design) .ride-cols>div:hover::after {content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2; pointer-events:none;
  font:10px/1.4 var(--mono); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:5px 8px; box-shadow:0 4px 14px rgba(0,0,0,.12)}
:where(.stats-design) .ride-cols>div:first-child:hover::after {left:0; transform:none}
:where(.stats-design) .ride-cols>div:last-child:hover::after {left:auto; right:0; transform:none}
:where(.stats-design) .ride-axis {display:flex; justify-content:space-between; font:9px/1.5 var(--mono); color:var(--muted); margin-top:6px}
@media(max-width:1000px) {:where(.stats-design) .ride-cards {gap:28px} :where(.stats-design) .ride-card {grid-template-columns:120px minmax(0, 1fr)} :where(.stats-design) .ride-card img {width:120px; height:116px}}
@media(max-width:760px) {:where(.stats-design) .ride-story {grid-template-columns:1fr; gap:14px}
  :where(.stats-design) .ride-cards {grid-template-columns:1fr; gap:20px}
  :where(.stats-design) .ride-cols {gap:3px}}