/* 20.10 the hundred-place house on the seat page (brand direction C, owner 19.10): the plan of a hundred places, the chosen place, the
   idle board. Lives in its own tab; seat-house.js fills it from /api/receipts?state=1. Paper and ink as the rest of the cabinet. */
@font-face{font-family:'House Display';src:url(fonts/bigshoulders.woff2) format('woff2');font-weight:500;font-display:swap}   /* the same file as Big Shoulders Display under its own name, so ch2-type.js does not recast the title */
#tab-house{--author:'Author','Display Fallback',system-ui,sans-serif;--line-a:#d7d2e5;--muted-a:#665e7b;--plan:#efedf6}
#tab-house > *{max-width:none}
#tab-house .house-copy{max-width:560px}
#tab-house .house-side{max-width:960px}
#tab-house .house-docket{margin:0 0 20px;font:400 16px/1.5 var(--author);max-width:40ch}
#tab-house .house-docket a{color:var(--ink)}
@media (min-width:1100px){html.ch2 body.cabinet #tab-house{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);column-gap:56px;align-items:start;padding-left:56px;padding-right:56px}#tab-house .house-copy{position:sticky;top:0}}
#tab-house .house-kicker{margin:0;font:500 16px/1.5 var(--author);color:var(--ink)}
html.ch2 body #tab-house h2.house-title{margin:6px 0 10px;font:500 clamp(44px,5vw,72px)/.95 'House Display','Display Fallback',sans-serif;letter-spacing:.015em;text-transform:none;color:var(--ink)}   /* above ch2-type.css, which recasts headings */
#tab-house .house-lede{margin:0 0 18px;font:400 18px/1.45 var(--author);max-width:46ch}
#tab-house .house-summary{display:flex;gap:20px;align-items:baseline;margin:0 0 20px}
#tab-house .house-num{font:500 44px/1 var(--author);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#tab-house .house-num .ghost{color:#b2a7d1}
#tab-house .house-summary p{margin:0;font:400 16px/1.4 var(--author)}
#tab-house .house-plan{background:var(--plan);border:1px solid var(--line-a);padding:20px}
#tab-house .planhead{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px;font:400 13px/1.5 var(--mono);letter-spacing:0}
#tab-house .plan{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
#tab-house .plan button{width:100%;display:flex;align-items:center;justify-content:center;height:43px;padding:0;border:1px solid #c6bed9;background:var(--white);color:#62547b;font:400 12px/1 var(--mono);letter-spacing:0;cursor:pointer;border-radius:0}
#tab-house .plan button.occupied{background:linear-gradient(to top,var(--ink) var(--fill,100%),#d9d3e8 var(--fill,100%));color:var(--ink);border-color:var(--ink)}   /* design part 2 (no. 5): the ink level is the share of today's cap spent; ink on paper below half, paper on ink above */
#tab-house .plan button .n{padding:1px 4px;border-radius:1px}
#tab-house .plan button.occupied .n{background:rgba(250,250,247,.92)}   /* the number sits on a chip of its own ground, so the fill boundary never crosses the glyphs (review) */
#tab-house .plan button.occupied.hi{color:var(--white)}
#tab-house .plan button.occupied.hi .n{background:var(--ink)}
#tab-house .plan button.idle{background:repeating-linear-gradient(135deg,rgba(24,11,81,.38) 0 3px,rgba(24,11,81,.14) 3px 6px);border-color:rgba(24,11,81,.55);color:var(--ink)}
#tab-house .plan button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
/* design part 3 (no. 7): the holder's own place. The light is a conic beam on a border mask that runs twice round in 2 s, once, then the
   place rests with a double rule. Reduced motion: no beam, the rule only */
@property --house-beam{syntax:'<angle>';inherits:false;initial-value:0deg}
#tab-house .plan button.own{position:relative;outline:3px double var(--ink);outline-offset:1px}
#tab-house .plan button.own[aria-pressed="true"]{outline:3px double var(--ink);outline-offset:1px;box-shadow:0 0 0 1px var(--white),0 0 0 3px var(--ink)}
#tab-house .plan button.own.lit::after{content:"";position:absolute;inset:-5px;pointer-events:none;border:2px solid transparent;background:conic-gradient(from var(--house-beam),transparent 0 286deg,var(--ink) 326deg,#f2eefb 352deg,transparent 360deg) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:house-beam 2s linear 1 forwards}
@keyframes house-beam{0%{--house-beam:0deg;opacity:1}85%{opacity:1}100%{--house-beam:720deg;opacity:0}}
#tab-house .house-own{margin:12px 0 0;font:500 15px/1.4 var(--author);color:var(--ink)}
@media (prefers-reduced-motion:reduce){#tab-house .plan button.own.lit::after{display:none}}
#tab-house .plan button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#tab-house .legend{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 0;font:400 13px/1.5 var(--author);color:var(--ink)}
#tab-house .legend i.k{display:inline-block;width:10px;height:10px;margin-right:6px;background:var(--ink);vertical-align:-1px;font-style:normal}
#tab-house .legend i.k{background:linear-gradient(to top,var(--ink) 55%,#d9d3e8 55%);border:1px solid var(--ink);box-sizing:border-box}
#tab-house .legend i.k.idle{background:repeating-linear-gradient(135deg,rgba(24,11,81,.38) 0 2px,rgba(24,11,81,.14) 2px 4px);border:1px solid rgba(24,11,81,.55)}
#tab-house .legend i.k.open{background:none;border:1px solid #8a7eaa;box-sizing:border-box}
#tab-house .showall{display:none;margin:14px 0 0;appearance:none;background:none;border:0;padding:0;font:400 16px/1.5 var(--author);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#tab-house .seat-detail{border-top:1px solid var(--line-a);margin-top:20px;padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
#tab-house .seat-detail h3{margin:0;font:500 26px/1.1 var(--author);letter-spacing:-.02em}
#tab-house .seat-detail .num{display:block;font:600 28px/1.1 var(--author);letter-spacing:-.03em;min-height:1.1em}
#tab-house .seat-detail number-flow{--number-flow-mask-height:.18em}
#tab-house .plan button[aria-pressed="true"]{view-transition-name:house-pick}
::view-transition-group(house-pick){animation-duration:.24s}
@media (prefers-reduced-motion:reduce){::view-transition-group(house-pick),::view-transition-old(house-pick),::view-transition-new(house-pick){animation:none!important}}
#tab-house .seat-detail p{margin:4px 0 0;font:400 16px/1.5 var(--author)}
#tab-house .seat-detail .note{grid-column:1/-1;margin:0;color:var(--muted-a);font-size:14px}
#tab-house .seat-detail .note a{color:var(--ink)}
#tab-house .house-fine{margin:12px 0 0;font:400 13px/1.5 var(--author);color:var(--muted-a)}
#tab-house details.idle-more{margin-top:22px;border-top:1px solid var(--line-a)}
#tab-house details.idle-more summary{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;padding:16px 0;cursor:pointer;list-style:none;font:500 20px/1.2 var(--author)}
#tab-house details.idle-more summary::-webkit-details-marker{display:none}
#tab-house details.idle-more summary>span:first-child::before{content:"+";display:inline-block;width:1.1em;color:var(--muted-a)}
#tab-house details.idle-more[open] summary>span:first-child::before{content:"\2013"}
#tab-house details.idle-more summary .n{font:400 16px/1.4 var(--author);color:var(--muted-a)}
#tab-house .idleboard table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0;font:400 16px/1.4 var(--author)}
#tab-house .idleboard td:first-child,#tab-house .idleboard td.r{font:400 16px/1.4 var(--mono);font-variant-numeric:tabular-nums}
#tab-house .idleboard col.c-seat{width:64px}#tab-house .idleboard col.c-n{width:18%}#tab-house .idleboard col.c-streak{width:16%}
#tab-house .idleboard th{font:500 16px/1.4 var(--author);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--ink-24);color:var(--ink-60)}
#tab-house .idleboard td{padding:9px 10px 9px 0;border-bottom:1px solid var(--ink-06);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-house .idleboard .r{text-align:right}
#tab-house .idleboard td.after{white-space:normal;color:var(--ink-60);line-height:1.4}
#tab-house .idleboard td.after b{color:var(--ink);font-weight:500}
#tab-house .idleboard tr.sk td{color:var(--ink-24)}
#tab-house .idleboard .irule{margin:12px 0 0;font:400 16px/1.45 var(--author);color:var(--ink-60);max-width:70ch}
#tab-house .idleboard .total{margin:10px 0 0;font:400 13px/1.5 var(--author);color:var(--muted-a)}
@media (max-width:860px){html.ch2 body.cabinet .pane > .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;grid-template-columns:none}html.ch2 body.cabinet .pane > .tabs button{flex:none}}   /* six tabs now: one scrolled row on a phone */
@media (max-width:700px){
 #tab-house .house-plan{padding:16px}
 #tab-house .plan{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
 #tab-house .plan button{height:48px}
 #tab-house .house-plan:not(.all) .plan li:nth-child(n+21){display:none}
 #tab-house .showall{display:inline-block}
 #tab-house .house-plan.all .showall{display:none}
 #tab-house .seat-detail{grid-template-columns:1fr}
 #tab-house .idleboard td{height:52px;padding-top:6px;padding-bottom:6px}
 #tab-house .idleboard table{table-layout:auto}
 #tab-house .idleboard colgroup{display:none}
 #tab-house .idleboard th:nth-child(3),#tab-house .idleboard td:nth-child(3),#tab-house .idleboard th:nth-child(4),#tab-house .idleboard td:nth-child(4){display:none}
 #tab-house .idleboard th:last-child,#tab-house .idleboard td:last-child{white-space:normal;padding-left:12px;min-width:120px}
 #tab-house .idleboard td{white-space:normal;height:auto}
}
/* on The house the seat rail steps aside: the plan is the page, as in the study; the rail returns with any other tab */
html.ch2 body.cabinet .cab:has(#tab-house:not([hidden])){grid-template-columns:minmax(0,1fr)}
html.ch2 body.cabinet .cab:has(#tab-house:not([hidden])) > aside.side{display:none}