@charset "UTF-8";
/* The Well Stocked Home, Charcoal and Rose (31 Oct 2026), a 1950s kitchen. Charcoal buttons, dusty rose house, butter, damson.
   The token is still called --blue for history: it now holds the charcoal button colour.
   No red anywhere. Status is always a word, a shape and a colour together. */
@font-face{font-family:"Young Serif";src:url(fonts/young-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --chalk:#FAF6F3;--white:#FFFFFF;--range:#1F242C;--muted:#5E6268;--line:#E8DEDB;
  --blue:#3B3640;--blue-deep:#2B272F;--on-blue:#FFFFFF;--stripe:var(--a-soft);--butter:#F0D77A;--on-butter:#1F242C;--damson:#7A3B5E;--ok:#3B3640;--band:var(--a-band);
  --rose:var(--a);--rose-deep:var(--a-deep);--rose-soft:var(--a-soft);
  --shade:0 1px 0 rgba(31,36,44,.06),0 10px 30px -18px rgba(31,36,44,.35);
  --mix:30%;
  --display:"Young Serif",Georgia,serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --mix:16%;--chalk:#1A1719;--white:#262226;--range:#F1ECEC;--muted:#B5ABAE;--line:#3A3337;
  --blue:#EBDDE0;--blue-deep:#D3C2C6;--on-blue:#1A1719;--stripe:var(--a-d-soft);--butter:#F0D77A;--on-butter:#1A1719;--damson:#D29AB8;--ok:#EBDDE0;--band:var(--a-d-band);
  --rose:var(--a-d);--rose-deep:var(--a-d-deep);--rose-soft:var(--a-d-soft);--shade:none;color-scheme:dark}}
:root[data-theme="dark"]{
  --mix:16%;--chalk:#1A1719;--white:#262226;--range:#F1ECEC;--muted:#B5ABAE;--line:#3A3337;
  --blue:#EBDDE0;--blue-deep:#D3C2C6;--on-blue:#1A1719;--stripe:var(--a-d-soft);--butter:#F0D77A;--on-butter:#1A1719;--damson:#D29AB8;--ok:#EBDDE0;--band:var(--a-d-band);
  --rose:var(--a-d);--rose-deep:var(--a-d-deep);--rose-soft:var(--a-d-soft);--shade:none;color-scheme:dark}
/* Power cut: pure black saves battery on OLED phones. Slightly dimmer text for a dark room. */
:root[data-theme="powercut"]{
  --mix:16%;--chalk:#000000;--white:#121012;--range:#D8D3D4;--muted:#A39A9D;--line:#2A2628;
  --blue:#D6C7CA;--blue-deep:#BCAAAE;--on-blue:#000000;--stripe:var(--a-p-soft);--butter:#E2C866;--on-butter:#000000;--damson:#D29AB8;--ok:#D6C7CA;--band:var(--a-p-band);
  --rose:var(--a-p);--rose-deep:var(--a-p-deep);--rose-soft:var(--a-p-soft);--shade:none;color-scheme:dark}

/* House colour, chosen in Settings. Rose is the default; the others keep the same 1950s look.
   Each sets the light, dark and power cut shades, and a filter so the kitchen icons follow. */
:root{--a:#9C5A68;--a-deep:#7E4552;--a-soft:#F3E1E3;--a-band:#B9727F;--a-d:#D9A0AC;--a-d-deep:#C48593;--a-d-soft:#3D2C31;--a-d-band:#B9727F;--a-p:#C48A96;--a-p-deep:#A8707C;--a-p-soft:#2A1E22;--a-p-band:#6E3F49;--icon-filter:none}
:root[data-accent="blue"]{--a:#2F5590;--a-deep:#24467A;--a-soft:#DCE5F1;--a-band:#2F5590;--a-d:#8FB0E3;--a-d-deep:#6E93CC;--a-d-soft:#26364D;--a-d-band:#4C6FA8;--a-p:#8FB0E3;--a-p-deep:#6E93CC;--a-p-soft:#1C2A3E;--a-p-band:#34507E;--icon-filter:hue-rotate(-132deg) saturate(2.2)}
:root[data-accent="heather"]{--a:#5E4E73;--a-deep:#4A3D5C;--a-soft:#ECE6F0;--a-band:#7D6B94;--a-d:#B9A8D0;--a-d-deep:#9F8CBA;--a-d-soft:#322B3D;--a-d-band:#7D6B94;--a-p:#A797BE;--a-p-deep:#8D7DA6;--a-p-soft:#211C29;--a-p-band:#4A3D5C;--icon-filter:hue-rotate(-80deg) saturate(1.3)}
:root[data-accent="charcoal"]{--a:#4A4650;--a-deep:#37343C;--a-soft:#EFEBE4;--a-band:#4A4650;--a-d:#C9C4CC;--a-d-deep:#ADA7B1;--a-d-soft:#2E2B30;--a-d-band:#6A6570;--a-p:#B8B2BB;--a-p-deep:#9C969F;--a-p-soft:#1E1C1F;--a-p-band:#3A373D;--icon-filter:grayscale(1) brightness(.85)}
main img{filter:var(--icon-filter)}
.accents{display:flex;flex-wrap:wrap;gap:10px}
.accents button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--range);font-weight:700;font-size:15px}
.accents button[aria-pressed="true"]{border-color:var(--range);box-shadow:inset 0 0 0 1.5px var(--range)}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--range);font:400 17px/1.5 var(--body);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,p{margin:0}
h1{font:400 clamp(30px,7vw,44px)/1.1 var(--display);letter-spacing:-.01em}
h1:focus{outline:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--blue);color:var(--on-blue);padding:10px 14px;border-radius:8px;z-index:9;font-weight:700}
.skip:focus{top:12px}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lede{color:var(--muted);margin-top:8px;max-width:34em}

/* The banded stripe, as on an enamel bowl rim. */
.band{height:16px;flex-shrink:0;background:repeating-linear-gradient(to bottom,var(--band) 0 5px,var(--chalk) 5px 8px)}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;max-width:1080px;width:100%;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--range);font:400 19px/1.1 var(--display)}
.mark{color:var(--blue)}
.mark-window{fill:var(--butter)}
.top-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.save{font-size:13px;color:var(--muted)}
.modes{display:flex;border:1.5px solid var(--line);border-radius:999px;padding:2px;background:var(--white)}
.modes button{border:0;background:none;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;color:var(--muted);min-height:32px}
.modes button[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:8px 16px 40px}
.opening{padding:40px 16px;color:var(--muted)}
.foot{border-top:1px solid var(--line);padding:18px 16px 28px;text-align:center;font-size:14px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:14px}
.foot-modes{display:flex;align-items:center;gap:10px;font-weight:700}

.page{display:flex;flex-direction:column;gap:18px}
.page-head{padding-top:6px}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;border:2px solid var(--blue);background:var(--blue);color:var(--on-blue);font-weight:700;font-size:16px;align-self:flex-start;transition:background .15s,transform .15s}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn:active{transform:translateY(1px)}
.btn--quiet{background:transparent;color:var(--blue)}
.btn--quiet:hover{background:var(--stripe);border-color:var(--blue)}
.chip{border:1.5px solid var(--blue);background:var(--white);color:var(--blue);border-radius:999px;padding:4px 13px;min-height:44px;font-size:15px;font-weight:700}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
.link{border:0;background:none;padding:6px 0;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;min-height:44px}
.link--small{font-size:14px;min-height:36px}

/* ---------- The house drawing ---------- */
.stage{position:relative;overflow:hidden;margin:0 -16px;padding:14px 16px 8px}
.house{position:relative;width:100%;max-width:560px;margin:0 auto;transition:transform .38s var(--ease),opacity .32s var(--ease);will-change:transform}
.house.zoom-in{transform:scale(2.8);opacity:0}
.house.zoom-held{transform:scale(2.8);opacity:0;transition:none}

.roof-wrap{position:relative;margin:0 -5%;aspect-ratio:560/176;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}
.roof{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,var(--blue) 0 6px,var(--chalk) 6px 10px,transparent 10px),
  repeating-linear-gradient(to bottom,var(--blue) 0 15px,var(--blue-deep) 15px 17px);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.chimney{position:absolute;z-index:0;right:23%;top:6%;width:6.5%;height:42%;background:var(--blue-deep);border-top:7px solid var(--range)}
.loft{position:relative;z-index:2;width:40%;display:grid}
.house--bungalow .roof-wrap{aspect-ratio:560/112}
.house--other .roof-wrap{aspect-ratio:560/84}
.house--other .roof{clip-path:ellipse(50% 100% at 50% 100%)}

.walls{display:grid;gap:8px;padding:8px;background:var(--stripe);border:3px solid var(--blue);border-top:0}
.floor{display:grid;gap:8px}
.floor + .floor{padding-top:8px;border-top:2px dashed color-mix(in srgb,var(--blue) 35%,transparent)}
.house--flat .walls{border-top:3px solid var(--blue)}
.block-top,.block-bottom{display:flex;gap:10px;padding:10px 12px;margin:0 12px;background:color-mix(in srgb,var(--line) 55%,var(--chalk));border:2px solid var(--line)}
.block-top{border-bottom:0;border-radius:6px 6px 0 0}
.block-bottom{border-top:0}
.block-top i,.block-bottom i{flex:1;height:20px;border-radius:3px;background:var(--white);border:2px solid var(--line)}

/* Gingham at ground level: the tablecloth the house sits on. */
.ground{height:14px;margin:0 -5%;background-color:var(--white);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--blue) 40%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--blue) 40%,transparent) 50%,transparent 50%);
  background-size:14px 14px}
.outside{display:grid;gap:8px;margin-top:10px}

.room{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;min-height:96px;padding:10px;text-align:left;
  background:var(--white);border:2px solid var(--blue);border-radius:10px;
  box-shadow:inset 0 0 0 3px var(--white),inset 0 0 0 4.5px var(--stripe),var(--shade);
  transition:background .2s,transform .2s var(--ease)}
.room:hover{background:var(--stripe);transform:translateY(-2px)}
.room.is-entering{background:var(--stripe)}
.room-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;width:100%}
.room-top b{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
.room-top img{flex-shrink:0;width:36px;height:36px}
.room--outside{border-style:dashed;background:var(--chalk);box-shadow:none;min-height:80px}
.loft .room{min-height:60px;flex-direction:row;align-items:center}
.loft .room .badge{display:none}

.badge{font-size:12px;font-weight:700;line-height:1.25;padding:3px 8px;border-radius:10px}
.badge--fine{background:var(--stripe);color:var(--ok)}
.badge--look{background:var(--butter);color:var(--on-butter)}
.badge--empty{border:1.5px dashed var(--muted);color:var(--muted)}

@media (max-width:420px){
  .walls{padding:6px;gap:6px}.floor,.outside{gap:6px}
  .room{padding:8px;min-height:88px}
  .room-top{flex-direction:column-reverse;gap:4px}
  .room-top img{width:30px;height:30px}
  .room-top b{font-size:14px}
  .loft .room-top{flex-direction:row}
  .badge{font-size:11px;padding:2px 6px}
}

/* Plan card */
.plan-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shade);
  background-image:repeating-linear-gradient(to bottom,var(--band) 0 3px,transparent 3px 5px);background-size:100% 8px;background-repeat:no-repeat;padding-top:22px}
.plan-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.plan-pick span{font-weight:700;margin-right:4px}
.plan-line b{color:var(--range)}
.loose{border:2px dashed var(--line);border-radius:12px;padding:14px 16px}
.loose h2{font:700 15px var(--body)}
.loose ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 14px}
.house-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Inside a room ---------- */
.page--room.arrive{animation:arrive .4s var(--ease)}
@keyframes arrive{from{opacity:0;transform:scale(.97)}}
.back{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;min-height:44px;color:var(--blue);font-weight:700;align-self:flex-start}
.chev{width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-left:4px}
.room-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.room-art{flex-shrink:0;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:var(--stripe);border:3px solid var(--blue);box-shadow:inset 0 0 0 5px var(--white)}
.room-art img{width:76px;height:76px}
@media (max-width:420px){.room-art{width:84px;height:84px}.room-art img{width:54px;height:54px}}
.room-count{font-size:16px}
.empty{background:var(--white);border:2px dashed var(--line);border-radius:14px;padding:22px 18px}
.empty p:first-child{font:400 22px/1.2 var(--display);margin-bottom:6px}

.shelf{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px 16px 6px;box-shadow:var(--shade)}
.shelf h2{font:700 13px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:10px 0 8px;display:flex;align-items:center;gap:10px}
.shelf h2::after{content:"";flex:1;height:5px;background:repeating-linear-gradient(to bottom,var(--stripe) 0 2px,transparent 2px 3px)}
.shelf ul{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.item-main{display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:0;text-align:left;min-height:44px}
.item-main b{font-size:17px}
.item-main:hover b{text-decoration:underline;text-underline-offset:3px}
.item-detail{font-size:15px;color:var(--muted)}
.item-why{font-size:14px;color:var(--damson);font-weight:700}
.item-side{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.item-side:empty{display:none}
.used{border:1.5px solid var(--line);background:var(--chalk);border-radius:999px;padding:3px 12px;min-height:34px;font-size:14px;font-weight:700}
.used:hover{border-color:var(--blue)}
.chip--also{min-height:34px;font-size:14px;border-color:transparent;background:var(--stripe)}

.pill{font-size:14px;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap;margin-top:2px}
.pill--fine{background:var(--stripe);color:var(--ok)}
.pill--soon{background:var(--butter);color:var(--on-butter)}
.pill--check{border:2px solid var(--damson);color:var(--damson);padding:2px 10px}
.pill--short{border:2px solid var(--blue);color:var(--blue);padding:2px 10px}
.pill--none{border:2px dashed var(--muted);color:var(--muted);padding:2px 10px}

.doors h2{font:700 13px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.doors div{display:flex;flex-wrap:wrap;gap:8px}
.door-to{display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 14px 6px 8px;background:var(--white);border:1.5px solid var(--line);border-radius:10px;font-weight:700;color:var(--range);text-align:left;white-space:normal;max-width:100%}
.door-to:hover{border-color:var(--blue)}
.door-to img{width:30px;height:30px;flex:none}

/* ---------- Sheets ---------- */
.sheet{border:0;padding:0;width:100%;max-width:620px;max-height:92vh;margin:auto auto 0;border-radius:18px 18px 0 0;background:var(--white);color:var(--range);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.sheet[open]{animation:rise .3s var(--ease)}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.sheet::backdrop{background:rgba(22,27,34,.5)}
@media (min-width:700px){.sheet{margin:auto;border-radius:18px}}
.sheet-form{display:flex;flex-direction:column;max-height:92vh}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,var(--band) 0 3px,transparent 3px 5px) top/100% 8px no-repeat;padding-top:24px}
.sheet-head h2{font:400 24px/1.2 var(--display)}
.close{border:0;background:var(--chalk);width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1}
.sheet-body{overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.sheet-body h3{font:700 15px var(--body);margin-top:6px}
.sheet-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:12px 20px 20px;border-top:1px solid var(--line)}
.sheet-actions .btn{align-self:auto}
.form-error{margin:0 20px;color:var(--damson);font-weight:700}
.form-error:empty{display:none}
.field{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.field-label{font-weight:700;font-size:15px}
.field-hint{font-size:14px;color:var(--muted)}
.field input,.field select{min-height:48px;border:2px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--chalk);width:100%}
.field input:focus,.field select:focus{border-color:var(--blue);outline:none;background:var(--white)}
.field input:disabled{opacity:.5}
.pair,.batch-line{display:flex;gap:12px;flex-wrap:wrap}
.pair>.field,.batch-line>.field{flex:1 1 180px}
.batch,.room-row{border:1.5px solid var(--line);border-radius:12px;padding:12px;margin:0;display:flex;flex-direction:column;gap:10px}
.batches,.room-rows{display:flex;flex-direction:column;gap:10px}
.readback{font-size:15px;font-weight:700;color:var(--ok)}
.readback[data-ok="no"]{color:var(--damson)}
.readback:empty{display:none}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--blue)}
.room-row.is-removed{opacity:.45;border-style:dashed}
.room-row.is-removed .field{pointer-events:none}

/* ---------- Getting started ---------- */
.page--setup{padding-top:16px}
.home-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;text-align:left;background:var(--white);border:2px solid var(--line);border-radius:14px;min-height:150px;box-shadow:var(--shade);transition:border-color .15s,transform .2s var(--ease)}
.home-choice:hover{border-color:var(--blue);transform:translateY(-2px)}
.home-choice b{font:400 20px/1.2 var(--display);margin-top:auto}
.home-choice span:last-child{font-size:14px;color:var(--muted)}
.mini{position:relative;width:74px;height:58px;margin-bottom:10px}
.mini i{position:absolute;display:block}
.mini i:nth-child(1){left:6px;right:6px;bottom:0;height:30px;background:var(--stripe);border:2.5px solid var(--blue);border-top:0}
.mini i:nth-child(2){left:0;right:0;top:4px;height:26px;background:var(--blue);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mini i:nth-child(3){left:31px;bottom:0;width:12px;height:16px;background:var(--butter);border:2px solid var(--blue);border-bottom:0}
.home-choice--flat .mini i:nth-child(1){left:14px;right:14px;height:56px;border-top:2.5px solid var(--blue);background:repeating-linear-gradient(to bottom,var(--stripe) 0 12px,var(--blue) 12px 14px)}
.home-choice--flat .mini i:nth-child(2){display:none}
.home-choice--flat .mini i:nth-child(3){left:31px;bottom:16px;height:12px;border-bottom:2px solid var(--blue)}
.home-choice--bungalow .mini i:nth-child(1){height:26px;left:0;right:0}
.home-choice--bungalow .mini i:nth-child(2){top:16px;height:16px;left:-6px;right:-6px}
.home-choice--other .mini i:nth-child(1){height:34px;border-radius:16px 16px 4px 4px;border-top:2.5px solid var(--blue)}
.home-choice--other .mini i:nth-child(2){display:none}
.home-choice--other .mini i:nth-child(3){bottom:4px;left:14px;width:16px;height:12px;border-bottom:2px solid var(--blue)}

@media (min-width:900px){
  main{padding-top:16px}
  .page--house{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px 32px;align-items:start;max-width:none}
  main:has(.page--house){max-width:1080px}
  .page--house .page-head,.page--house .stage,.page--house .views{grid-column:1}
  .page--house .views{grid-row:2}
  .page--house .stage{grid-row:3 / span 5}
  .page--house>*:not(.page-head):not(.stage):not(.views){grid-column:2}
  .page--house .plan-card{grid-row:2 / span 2}
  .page--house .page-head{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Colour by room and group ----------
   Each kind of room takes a soft tint from the palette, like a set of enamel tins:
   butter for the warm rooms, sloe (a pale damson) for sleeping, stripe blue for water rooms. */
:root{
  --tint-butter:color-mix(in srgb,var(--butter) var(--mix),var(--white));
  --tint-sloe:color-mix(in srgb,var(--damson) calc(var(--mix) * .55),var(--white));
  --tint-stripe:color-mix(in srgb,var(--stripe) 85%,var(--white));
  --tint-chalk:var(--white);
}
.walls{background:color-mix(in srgb,var(--stripe) 55%,var(--chalk))}
.tint--kitchen,.tint--living{--tile:var(--tint-butter);--rim:var(--butter)}
.tint--bedroom,.tint--loft{--tile:var(--tint-sloe);--rim:color-mix(in srgb,var(--damson) 35%,var(--white))}
.tint--bathroom,.tint--utility{--tile:var(--tint-stripe);--rim:var(--stripe)}
.tint--hall,.tint--cupboard,.tint--other{--tile:var(--white);--rim:var(--stripe)}
.room[class*="tint--"]:not(.room--outside){background:var(--tile);box-shadow:inset 0 0 0 3px var(--tile),inset 0 0 0 4.5px var(--rim),var(--shade)}
.room[class*="tint--"]:not(.room--outside):hover{background:color-mix(in srgb,var(--tile) 70%,var(--stripe))}
.room-art[class*="tint--"]{background:var(--tile);box-shadow:inset 0 0 0 5px var(--white)}
.chimney{background:var(--damson);border-top-color:var(--range)}
.roof{background:
  linear-gradient(to top,var(--blue) 0 6px,var(--butter) 6px 10px,transparent 10px),
  repeating-linear-gradient(to bottom,var(--blue) 0 15px,var(--blue-deep) 15px 17px)}
.plan-card{background-image:repeating-linear-gradient(to bottom,var(--butter) 0 3px,transparent 3px 5px)}
.mark-window{fill:var(--butter)}

/* Group marks: a small enamel dot in the group's colour beside each shelf heading. */
.shelf h2::before{content:"";width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--dot,var(--blue));box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--dot,var(--blue))}
.shelf--food{--dot:var(--butter)}.shelf--warmth{--dot:var(--damson)}.shelf--water,.shelf--hygiene{--dot:var(--blue)}
.shelf--light{--dot:var(--butter)}.shelf--communication{--dot:var(--blue-deep)}.shelf--health{--dot:var(--damson)}
.shelf--pets{--dot:color-mix(in srgb,var(--butter) 60%,var(--damson))}.shelf--baby{--dot:color-mix(in srgb,var(--damson) 45%,var(--white))}
.shelf--information,.shelf--other{--dot:var(--muted)}

/* Header tabs */
.tabs{display:flex;gap:4px;order:3;width:100%}
.tabs[hidden]{display:none}
.tabs a{flex:1;text-align:center;text-decoration:none;font-weight:700;color:var(--muted);padding:10px 12px;border-radius:10px 10px 0 0;border-bottom:3px solid var(--line)}
.tabs a[aria-current="true"]{color:var(--range);border-bottom-color:var(--butter);background:var(--tint-butter)}
@media (min-width:700px){.tabs{order:0;width:auto}.tabs a{flex:none;border-radius:999px;border:0;padding:8px 16px}.tabs a[aria-current="true"]{background:var(--tint-butter);box-shadow:inset 0 0 0 2px var(--butter)}}

/* The counter: pick a thing, then just say how many. */
.counter{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.counter[hidden]{display:none}
.counter input{width:96px;min-height:56px;text-align:center;font:400 28px var(--display);border:2px solid var(--line);border-radius:12px;background:var(--chalk)}
.counter input:focus{border-color:var(--blue);outline:none}
.step{width:56px;height:56px;border-radius:50%;border:2px solid var(--blue);background:var(--tint-butter);color:var(--range);font-size:28px;line-height:1;font-weight:700}
.step:hover{background:var(--butter)}
.count-word{font-weight:700;color:var(--muted)}
.own{display:flex;flex-direction:column;gap:14px;padding:12px;border-radius:12px;background:var(--tint-stripe)}
.own[hidden]{display:none}
.more{border:1.5px solid var(--line);border-radius:12px;padding:0 12px}
.more[open]{padding-bottom:12px}
.more summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;color:var(--blue)}
.more>*+*{margin-top:10px}
.batches.single .batch{border:0;padding:0}
.batches.single .batch .batch-line:first-of-type .field:first-child,.batches.single .batch>.link{display:none}
.field select optgroup{font-weight:700}

/* Totals */
.filter-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.filter-bar .field{flex:0 1 320px}
.filter-count{color:var(--muted);padding-bottom:12px}
.totals{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.totals thead th{font-size:13px;color:var(--muted);text-align:left;font-weight:700;padding:4px 0 8px}
.totals tbody th,.totals td{border-top:1px solid var(--line);padding:12px 8px 12px 0;vertical-align:top;text-align:left}
.totals tbody th{font-weight:400}
.totals .num{text-align:right;white-space:nowrap;padding-right:16px}
.totals .num b{font:400 22px/1.1 var(--display);display:block}
.of{display:block;font-size:13px;color:var(--muted)}
.where{font-size:15px;color:var(--muted);min-width:0}
.item-link{border:0;background:none;padding:0;font-weight:700;font-size:17px;text-align:left;display:block;margin-bottom:6px;color:var(--range)}
.item-link:hover{text-decoration:underline;text-underline-offset:3px}
.totals .pill{display:inline-block;font-size:13px}
@media (max-width:480px){.totals thead th:last-child,.totals td.where{display:none}}
@media (min-width:481px){.where-inline{display:none!important}}
.where-inline{margin-top:6px}

/* ---------- The pop-up house (see DESIGN.md) ----------
   A pop-up book on the kitchen table: the sky page stands behind, the gingham page lies in front,
   and the house stands at the fold. Simple and power cut drop all of this for a flat outline. */
.views{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shut-front{font-size:15px;min-height:38px;padding:0 4px}
@media (min-width:560px){.shut-front{margin-left:auto}}
.book{position:relative}
.book--popup{padding:30px 12px 0}
.sky{position:absolute;inset:0 0 40px;border-radius:18px 18px 4px 4px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(to bottom,var(--sky-top),var(--sky-low));transition:background .6s}
.time--day{--sky-top:var(--stripe);--sky-low:var(--white)}
.time--dawn{--sky-top:var(--stripe);--sky-low:color-mix(in srgb,var(--butter) 55%,var(--white))}
.time--dusk{--sky-top:color-mix(in srgb,var(--damson) 45%,var(--stripe));--sky-low:color-mix(in srgb,var(--butter) 60%,var(--white))}
.time--evening{--sky-top:#3A2C3E;--sky-low:color-mix(in srgb,var(--damson) 55%,#3A2C3E)}
.time--night{--sky-top:#1C1620;--sky-low:#3A2C3E}
.sun,.moon{position:absolute;top:18px;right:9%;width:44px;height:44px;border-radius:50%}
.sun{background:var(--butter);box-shadow:0 0 0 8px color-mix(in srgb,var(--butter) 30%,transparent)}
.time--dawn .sun,.time--dusk .sun{top:auto;bottom:22%;right:auto;left:8%}
.moon{background:transparent;box-shadow:-11px 7px 0 0 #F3EDD6}
.cloud{position:absolute;height:16px;border-radius:999px;background:color-mix(in srgb,var(--white) 85%,transparent)}
.cloud::before{content:"";position:absolute;left:22%;bottom:5px;width:46%;height:22px;border-radius:50%;background:inherit}
.cloud--a{top:26px;left:8%;width:70px}
.cloud--b{top:58px;left:62%;width:52px}
.time--evening .cloud,.time--night .cloud{opacity:.12}

/* The house folds up from the page, then stands slightly tilted so it has depth. */
.popup{position:relative;z-index:1;transform-origin:50% 100%;transform:perspective(1400px) rotateX(4deg);transition:transform .9s cubic-bezier(.3,1.25,.5,1)}
.is-folding .popup{animation:fold-up 1s cubic-bezier(.3,1.2,.5,1) both}
@keyframes fold-up{from{transform:perspective(1400px) rotateX(82deg)}}
.book--popup .house{filter:drop-shadow(0 14px 10px rgba(31,36,44,.22))}
.book--popup .walls{background:
  repeating-linear-gradient(90deg,transparent 0 22px,color-mix(in srgb,var(--white) 45%,transparent) 22px 24px),var(--stripe)}

/* The front: two panels hinged at each side. */
.shell{position:relative;perspective:1100px}
.front{position:absolute;inset:0;z-index:3;pointer-events:none}
.leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.45,0,.2,1)}
.leaf--left{left:0;transform-origin:0 50%}
.leaf--right{right:0;transform-origin:100% 50%}
.book:not(.is-shut) .leaf--left{transform:rotateY(-112deg)}
.book:not(.is-shut) .leaf--right{transform:rotateY(112deg)}
.leaf-face,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.leaf-face{background:var(--white);border:3px solid var(--blue);border-top:0}
.leaf--left .leaf-face{border-right:1.5px solid color-mix(in srgb,var(--blue) 50%,transparent)}
.leaf--right .leaf-face{border-left:1.5px solid color-mix(in srgb,var(--blue) 50%,transparent)}
/* Wallpaper on the inside of each panel. */
.leaf-back{transform:rotateY(180deg);border:3px solid var(--blue);border-top:0;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--damson) 45%,transparent) 0 3px,transparent 4px) 0 0/18px 18px,
  repeating-linear-gradient(90deg,var(--tint-sloe) 0 9px,var(--white) 9px 18px)}
.leaf-art{position:absolute;top:0;bottom:0;width:200%}
.leaf--right .leaf-art{left:-100%}
.front-art{position:absolute;inset:0;display:flex;flex-direction:column}
.front-row{flex:1;display:grid;padding:0 8px}
.front-row + .front-row{border-top:4px solid var(--stripe)}
.front-cell{display:flex;align-items:center;justify-content:space-evenly;padding:8px 4px}
.win{position:relative;display:block;width:min(42px,42%);aspect-ratio:4/5;border:3px solid var(--blue);border-radius:6px 6px 2px 2px;
  background:linear-gradient(135deg,var(--sky-top) 0 45%,var(--sky-low) 45% 60%,var(--sky-top) 60%);box-shadow:0 5px 0 -1px var(--blue)}
.sash::before,.sash::after{content:"";position:absolute;background:var(--blue)}
.sash::before{left:calc(50% - 1.5px);top:0;bottom:0;width:3px}
.sash::after{top:calc(45% - 1.5px);left:0;right:0;height:3px}
.win--lit{background:var(--butter);box-shadow:0 5px 0 -1px var(--blue),0 0 22px 4px color-mix(in srgb,var(--butter) 55%,transparent)}
.win--drawn{background:linear-gradient(90deg,var(--damson) 0 46%,var(--range) 46% 54%,var(--damson) 54%)}
.door{position:relative;display:block;align-self:stretch;margin-top:auto;width:min(40px,48%);min-height:62%;margin-bottom:-8px;background:var(--damson);border:3px solid var(--blue);border-bottom:0;border-radius:20px 20px 0 0}
.knocker{position:absolute;left:calc(50% - 5px);top:42%;width:10px;height:10px;border-radius:50%;background:var(--butter)}
.opener{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);min-height:50px;padding:0 22px;border-radius:999px;border:2px solid var(--blue);
  background:var(--butter);color:var(--on-butter);font-weight:700;font-size:16px;box-shadow:0 8px 20px -8px rgba(31,36,44,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.is-shut:not(.is-folding) .opener{opacity:1;pointer-events:auto}

/* Chimney smoke in the colder months. */
.smoke{position:absolute;left:50%;bottom:100%}
.smoke i{position:absolute;left:-8px;bottom:4px;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--muted) 30%,transparent);opacity:0;animation:puff 7s linear infinite}
.smoke i:nth-child(2){animation-delay:2.3s}.smoke i:nth-child(3){animation-delay:4.6s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.9}100%{opacity:0;transform:translate(22px,-64px) scale(2.2)}}

/* The tablecloth page, lying flat in front of the house. */
.tablecloth{position:relative;z-index:2;margin:0 -12px;padding:16px 12px 18px;border-radius:0 0 18px 18px;transform-origin:50% 0;transform:perspective(900px) rotateX(-14deg);
  background-color:var(--white);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--blue) 28%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--blue) 28%,transparent) 50%,transparent 50%);
  background-size:22px 22px;border:1px solid var(--line);border-top:3px solid var(--blue)}
.tablecloth:empty{padding:10px 0}
.tablecloth .outside{margin:0}
.book--popup .room--outside{background:var(--white);box-shadow:0 6px 0 -2px color-mix(in srgb,var(--blue) 30%,transparent)}

/* Simple, for the installed app: the same house as an outline. */
.book--simple .walls,.book--powercut .walls{background:transparent}
.book--simple .room,.book--powercut .room{box-shadow:none!important;border-width:1.5px}
.book--simple .tablecloth,.book--powercut .tablecloth{transform:none;background:none;border:0;border-top:2px solid var(--blue);border-radius:0;margin:0;padding:10px 0 0}
.book--simple .roof,.book--powercut .roof{opacity:.85}

/* Power cut: dark, with a torch beam that rests on the torch and follows a finger. */
@property --bx{syntax:"<length>";inherits:true;initial-value:0px}
@property --by{syntax:"<length>";inherits:true;initial-value:0px}
.stage--powercut{position:relative;touch-action:pan-y}
.beam{position:absolute;inset:0;z-index:6;pointer-events:none;transition:--bx .25s,--by .25s;
  background:radial-gradient(circle at var(--bx) var(--by),color-mix(in srgb,var(--butter) 12%,transparent) 0 70px,transparent 120px),
  radial-gradient(circle at var(--bx) var(--by),transparent 0 80px,rgba(0,0,0,.8) 170px)}

/* From above: one floor at a time. */
.above{display:flex;flex-direction:column;gap:14px}
.levels{display:flex;gap:8px;flex-wrap:wrap}
.slab-stack{perspective:1200px;padding:6px 6px 20px}
.slab{display:grid;gap:10px;padding:10px;border:5px solid var(--blue);border-radius:6px;transform-origin:50% 0;transform:rotateX(26deg);
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--butter) 18%,var(--white)) 0 18px,color-mix(in srgb,var(--butter) 32%,var(--white)) 18px 19px);
  animation:slab-in .45s var(--ease)}
.slab-stack--1 .slab{box-shadow:0 12px 0 -3px color-mix(in srgb,var(--blue) 45%,var(--chalk))}
.slab-stack--2 .slab{box-shadow:0 12px 0 -3px color-mix(in srgb,var(--blue) 45%,var(--chalk)),0 24px 0 -6px color-mix(in srgb,var(--blue) 25%,var(--chalk))}
.slab-stack--3 .slab{box-shadow:0 12px 0 -3px color-mix(in srgb,var(--blue) 45%,var(--chalk)),0 24px 0 -6px color-mix(in srgb,var(--blue) 25%,var(--chalk)),0 36px 0 -9px color-mix(in srgb,var(--blue) 14%,var(--chalk))}
.slab .floor{gap:10px}
.slab .room{min-height:118px;border-width:3px;border-radius:3px}
.slab .room::after{content:"";position:absolute;bottom:-3px;left:22%;width:30%;height:3px;background:inherit}
.slab--out{border-style:dashed;background-color:var(--white);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--blue) 22%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--blue) 22%,transparent) 50%,transparent 50%);background-size:22px 22px}
@keyframes slab-in{from{opacity:0;transform:translateY(-26px) rotateX(40deg)}}

/* Stepping into a room: the tin lid lifts off and the shelves come out. */
.room-art{position:relative}
.lid{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;border:3px solid var(--blue-deep);
  background:radial-gradient(circle,var(--butter) 0 9px,var(--blue-deep) 10px 12px,var(--blue) 13px 58%,var(--blue-deep) 59% 61%,var(--blue) 62%)}
.page--room.arrive .lid{animation:lid-off .85s .05s cubic-bezier(.4,0,.3,1) both}
@keyframes lid-off{0%{opacity:1;transform:none}30%{opacity:1;transform:translateY(-12px) rotate(-5deg)}100%{opacity:0;transform:translate(60px,-80px) rotate(-40deg) scale(.85)}}
.page--room.arrive .shelf{animation:shelf-out .5s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * .08s)}
@keyframes shelf-out{from{opacity:0;transform:translateY(-22px)}}

/* Getting started: a little street. */
.street{border-radius:18px;overflow:hidden;border:1px solid var(--line);padding:22px 8px 0;background:linear-gradient(to bottom,var(--stripe),var(--white))}
.street-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.lot{display:flex;flex-direction:column;align-items:stretch;gap:2px;background:none;border:0;padding:0 0 12px;text-align:center;color:var(--range);border-radius:12px 12px 0 0;transition:transform .25s var(--ease),opacity .2s,background .2s}
.lot-art{display:block;padding:0 6px}
.lot-art svg{display:block;width:100%;max-width:130px;margin:0 auto;transition:transform .3s var(--ease)}
.lot-art::after{content:"";display:block;height:12px;margin:0 -6px 8px;
  background-color:var(--white);background-image:linear-gradient(90deg,color-mix(in srgb,var(--blue) 35%,transparent) 50%,transparent 50%),linear-gradient(color-mix(in srgb,var(--blue) 35%,transparent) 50%,transparent 50%);background-size:12px 12px}
.lot b{font:400 16px/1.2 var(--display);padding:0 2px}
.lot-sub{font-size:12px;color:var(--muted);line-height:1.3;padding:0 4px}
.lot:hover .lot-art svg{transform:translateY(-4px)}
.lot[aria-pressed="true"]{background:color-mix(in srgb,var(--butter) 40%,transparent)}
.lot[aria-pressed="true"] .lot-art svg{transform:translateY(-8px) scale(1.04)}
.has-choice .lot[aria-pressed="false"]{opacity:.55}
.s-wall{fill:var(--white);stroke:var(--blue);stroke-width:3}
.s-roof{fill:var(--blue)}
.s-chim{fill:var(--blue-deep)}
.s-win{fill:var(--stripe);stroke:var(--blue);stroke-width:2.5}
.s-door{fill:var(--damson);stroke:var(--blue);stroke-width:2}
.lot--flat .s-door{fill:var(--butter)}
.lot--other .s-door{fill:var(--stripe)}
.s-line{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.s-wheel{fill:var(--range)}
.move-in[hidden]{display:none}
.move-in{display:flex;flex-direction:column;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shade);animation:arrive .35s var(--ease)}
@media (max-width:420px){.lot b{font-size:14px}.lot-sub{font-size:11px}.lot-art{padding:0 3px}}

/* Who lives here, Get ready, Numbers */
.page--people .shelf,.page--ready .shelf,.page--numbers .shelf{margin-bottom:18px;padding-bottom:16px}
.who{list-style:none;margin:0 0 12px;padding:0}
.who-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;text-align:left;padding:12px 4px;border:0;border-top:1px solid var(--line);font:inherit;cursor:pointer;color:var(--range);background:none}
.who-row b{font-size:1.05rem}
.who-row .muted{flex-basis:100%}
.checks--stack{flex-direction:column;align-items:stretch}
.checks--stack .check{border-radius:12px}
.notice{background:var(--tint-butter);border-left:5px solid var(--butter);padding:12px 14px;border-radius:8px;margin:0 0 16px}
.suggests{list-style:none;margin:0;padding:0}
.suggest{display:grid;grid-template-columns:1fr;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.suggest p{margin:4px 0 0}
.suggest--done{opacity:.72}
.suggest-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (min-width:700px){.suggest{grid-template-columns:1fr auto;align-items:start}}
.btn--small{min-height:44px;padding:8px 16px;font-size:.95rem}
.numbers{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.number{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.number>span{display:flex;flex-direction:column;gap:2px}
.number-dial{flex:none;min-width:7.5em;font:700 1.15rem var(--body);color:var(--blue);text-decoration:none;padding:8px 10px;border:2px solid var(--blue);border-radius:10px;text-align:center}
.numbers--small .number{border:0;border-top:1px solid var(--line);border-radius:0;padding:10px 0}
.field--inline{max-width:22rem;margin-bottom:16px}
.move-in .form-error{margin:0 0 12px}
@media (max-width:699px){.tabs{flex-wrap:wrap}.tabs a{flex:1 1 30%;padding:8px 6px;font-size:.92rem}}
@media (max-width:420px){.number{flex-direction:column;align-items:flex-start}}
main{overflow-x:clip}

/* Health lock and emergency card */
.code{font:700 1.4rem/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;background:var(--tint-butter);border:2px dashed var(--butter);border-radius:10px;padding:12px;text-align:center;word-break:break-word}
.question{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.other-ways{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
.card{border:2px solid var(--blue)}
.card-list{list-style:none;margin:0;padding:0}
.card-list li{padding:12px 0;border-top:1px solid var(--line)}
.card-list p{margin:4px 0 0}
.card-alert{font-weight:700;color:var(--damson)}
.section-title{font:700 13px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
textarea{width:100%;font:inherit;padding:10px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);color:var(--range)}
.print-only{display:none}
@media print{body:has(.print-only)>*:not(.print-only){display:none!important}.no-print,.tabs,.site-foot,footer{display:none!important}.print-only{display:block!important;padding:24px;color:#000}.print-only .code{border:2px dashed #000;background:none}}

.who-row b,.card-list b,.suggest b,.item-main b,.totals th,.room-top b,.sheet-head h2,.page-head h1{overflow-wrap:anywhere}
.card-alert,.card-list p,.who-row span,.suggest p,.item-detail,.item-why{overflow-wrap:anywhere}
.score{margin-top:10px}
.coming h3{margin:14px 0 4px;font-size:1rem}
.coming-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.coming-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card, transparent)}
.coming-list li>div:first-child{min-width:0;overflow-wrap:anywhere}
.coming-list p{margin:2px 0 0}
.coming-list .coming--past{border-style:dashed;border-width:2px}
.coming-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.shopping{list-style:none;padding:0;display:grid;gap:8px}
.shopping li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.coming-list .btn,.shopping .btn{white-space:nowrap;flex-shrink:0}
.powercut-list summary{cursor:pointer;padding:4px 0;font-size:1.05rem}
.powercut-list h3{margin:14px 0 6px;font-size:1rem}
.tick-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tick-list label{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.tick-list input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--blue)}
.tick-list input:checked+*, .tick-list label:has(input:checked){color:var(--muted)}
.safe-plan{margin:8px 0 0;display:grid;gap:2px}
.safe-plan dt{font-weight:700;font-size:.9rem;margin-top:6px}
.safe-plan dd{margin:0;overflow-wrap:anywhere}
.help-steps{padding-left:1.4em;display:grid;gap:12px;margin:16px 0}
.help-steps li::marker{font-weight:700;color:var(--blue)}
.help-steps p{margin:2px 0 0}
.foot-help{margin:12px 0 0}
@media (min-width:600px){.stage{margin:0;border-radius:16px}}
.update-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:14px;background:var(--white);color:var(--range);border:2px solid var(--blue);box-shadow:0 6px 20px rgba(0,0,0,.18);max-width:560px;margin:0 auto}
@media print{.update-bar{display:none}}
/* Health conditions: chosen ones show as tags that can be taken off. */
.tags{list-style:none;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags:empty{display:none}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--white);border:1.5px solid var(--line);font-size:15px;overflow-wrap:anywhere}
.tag-x{border:0;background:none;color:var(--range);font-size:20px;line-height:1;width:32px;height:32px;border-radius:999px;cursor:pointer}
.tag-x:hover,.tag-x:focus-visible{background:var(--line)}
.tag-add{display:flex;gap:8px;align-items:center}
.tag-add input{flex:1;min-width:0}
.pack-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.pack-row input{width:5.5em}
.pack-row select{width:auto}
.from-backup{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* Welcome: three short screens. */
.page--welcome{max-width:520px;margin:0 auto;min-height:70vh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:8px}
.welcome-top{align-self:stretch;display:flex;justify-content:space-between;min-height:44px;align-items:center}
.welcome-top .link{min-height:44px;padding:0 6px}
.welcome-top > .link:last-child{margin-left:auto}
.welcome-card{display:flex;flex-direction:column;align-items:center;gap:10px;touch-action:pan-y;user-select:none}
.welcome-art{width:min(300px,78vw);aspect-ratio:4/3;border-radius:28px;background:var(--stripe);display:grid;place-items:center;padding:14px}
.welcome-art svg{width:100%;height:100%}
.welcome-title{font-family:var(--display);font-size:clamp(28px,7vw,38px);line-height:1.15;margin:8px 0 0;outline:none}
.welcome-line{font-size:19px;max-width:30ch;margin:0}
.welcome-dots{display:flex;gap:8px}
.welcome-dots span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.welcome-dots span.on{background:var(--blue);width:26px;border-radius:6px}
.welcome-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto;padding-bottom:12px;width:100%}
.btn--big{min-height:56px;font-size:19px;width:min(340px,100%)}
.welcome-in{animation:welcome-in .35s var(--ease)}
@keyframes welcome-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.welcome-in{animation:none}}
.w-sun{fill:var(--butter)}
.w-glow{fill:var(--butter)}
.w-ground{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.w-tin{fill:var(--white);stroke:var(--blue);stroke-width:3}
.w-band{stroke:var(--damson);stroke-width:4}
.w-torch,.w-torch-head{fill:var(--blue);stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.w-beam{fill:var(--butter);opacity:.75}
.w-bottle{fill:var(--white);stroke:var(--blue);stroke-width:3}
.w-cap{fill:var(--damson)}
.w-phone{fill:var(--blue)}
.w-screen{fill:var(--white)}
.w-bar{fill:var(--line)}
.w-cross{stroke:var(--damson);stroke-width:5;stroke-linecap:round}
.w-tick-bg{fill:var(--butter)}
.w-tick{fill:none;stroke:var(--on-butter);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* How ready is our home? */
.ready-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:16px;margin:4px 0 18px;box-shadow:var(--shade)}
.ring{position:relative;flex:0 0 auto;width:128px;height:128px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--stripe);stroke-width:14}
.ring-fill{fill:none;stroke:var(--blue);stroke-width:14;stroke-linecap:round;animation:ring-fill 1s var(--ease) both}
.ring--full .ring-fill{stroke:var(--butter)}
.ring-home{fill:var(--blue);transform:rotate(90deg);transform-origin:64px 64px}
@keyframes ring-fill{from{stroke-dashoffset:var(--from)}}
@media (prefers-reduced-motion:reduce){.ring-fill{animation:none}}
.ring-num{position:relative;font-family:var(--display);font-size:38px;line-height:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.ring-num small{font-family:var(--body);font-size:14px;color:var(--muted);margin-top:4px}
.ready-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.ready-text h2{font-family:var(--display);font-size:22px;line-height:1.2;margin:0}
.ready-text p{margin:0}
.btn--next{min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;line-height:1.2;padding:8px 16px}
.ready-chips{display:flex;flex-wrap:wrap;gap:8px;grid-column:2}
.chip--link{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;padding:0 14px}
@media (max-width:520px){.ready-card{align-items:flex-start;gap:12px;padding:14px}.ring{width:84px;height:84px}.ring-num{font-size:28px}.ring-num small{font-size:12px;margin-top:2px}.ready-card h2{font-size:20px}.ready-chips{grid-column:1 / -1}.ready-chips .chip--link{padding-inline:12px}}
.gear{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--blue)}
.gear:hover,.gear:focus-visible{background:var(--stripe)}
.settings-modes .foot-modes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}
.settings-modes .modes button{min-height:44px;padding:0 14px}
.settings-links{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.settings-links a{display:inline-flex;min-height:44px;align-items:center}

/* Charcoal and rose: the house, its rooms, the logo and the ring are dusty rose; buttons stay charcoal. */
.house,.popup,.slab-stack,.street,.lot-art,.welcome-art{--blue:var(--rose);--blue-deep:var(--rose-deep);--stripe:var(--rose-soft)}
.mark{color:var(--rose)}
.ring-fill{stroke:var(--rose)}

/* ---------- 1950s kitchen touches (31 Oct 2026) ----------
   Scalloped roof tiles, a starburst sun, little atomic sparkles, striped awnings over the windows,
   a candy-stripe wall and a diner check tablecloth. All CSS, so it works offline. */
.roof{background:
  linear-gradient(to top,var(--blue-deep) 0 6px,var(--chalk) 6px 10px,transparent 10px),
  radial-gradient(circle at 50% 100%,transparent 0 9px,var(--blue-deep) 9px 11px,transparent 11.5px) 0 0/22px 13px,
  radial-gradient(circle at 50% 100%,transparent 0 9px,var(--blue-deep) 9px 11px,transparent 11.5px) 11px 6.5px/22px 13px,
  var(--blue)}
.sun{width:52px;height:52px;box-shadow:none;background:
  radial-gradient(circle,var(--butter) 0 15px,transparent 15.5px),
  repeating-conic-gradient(var(--butter) 0 7deg,transparent 7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 0 25px,transparent 26px);mask:radial-gradient(circle,#000 0 25px,transparent 26px)}
.spark{position:absolute;width:20px;height:20px;background:var(--rose);opacity:.55;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.spark--a{top:20px;left:34%}
.spark--b{top:62px;left:22%;width:14px;height:14px}
.spark--c{top:44px;left:72%;width:12px;height:12px;opacity:.4}
.time--evening .spark,.time--night .spark{background:#F3EDD6;opacity:.8}
.book--popup .walls{background:repeating-linear-gradient(90deg,var(--rose-soft) 0 12px,var(--white) 12px 24px)}
.win{overflow:visible}
.win::before{content:"";position:absolute;left:-16%;right:-16%;top:-12px;height:10px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 5px,var(--white) 5px 10px);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% 5px no-repeat,radial-gradient(circle at 50% 0,#000 4.5px,transparent 5px) 0 5px/10px 5px repeat-x;
  mask:linear-gradient(#000,#000) 0 0/100% 5px no-repeat,radial-gradient(circle at 50% 0,#000 4.5px,transparent 5px) 0 5px/10px 5px repeat-x}
.tablecloth,.ground{background-color:var(--white);background-image:
  conic-gradient(color-mix(in srgb,var(--range) 82%,transparent) 25%,transparent 0 50%,color-mix(in srgb,var(--range) 82%,transparent) 0 75%,transparent 0)}
.tablecloth{background-size:24px 24px}
.ground{background-size:14px 14px}
.book--simple .tablecloth,.book--powercut .tablecloth{background:none}
.book--simple .spark,.book--powercut .spark{display:none}
@media (prefers-reduced-motion:no-preference){.spark--a{animation:twinkle 4s ease-in-out infinite}.spark--c{animation:twinkle 5s 1.5s ease-in-out infinite}}
@keyframes twinkle{50%{opacity:.15;transform:scale(.7)}}

/* ---------- Home screen: three sections (31 Oct 2026) ---------- */
.page--home{display:flex;flex-direction:column;gap:18px}
.house-link{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--range);
  background:var(--white);border:2px solid var(--rose);box-shadow:inset 0 0 0 3px var(--white),inset 0 0 0 4.5px var(--rose-soft),var(--shade)}
.house-link span{display:flex;flex-direction:column}
.house-link b{font:400 20px/1.2 var(--display)}
.house-link:hover{background:var(--rose-soft)}
.dash-grid{display:grid;gap:18px}
@media (min-width:900px){.dash-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:'sos plan' 'family plan';align-items:start}.dash--plan{grid-area:plan}.dash--sos{grid-area:sos}.dash--family{grid-area:family}}
a.btn{text-decoration:none}
.dash{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 18px 18px;box-shadow:var(--shade);display:flex;flex-direction:column;gap:12px;
  background-image:repeating-linear-gradient(to bottom,var(--band) 0 3px,transparent 3px 5px);background-size:100% 8px;background-repeat:no-repeat}
.dash h2{font:400 24px/1.2 var(--display);margin:0}
.dash h3{font:700 16px var(--body);margin:6px 0 0}
.dash p{margin:0}
.dash-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dial-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dial{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;padding:8px;border-radius:14px;text-decoration:none;text-align:center;
  background:var(--rose-soft);color:var(--range);border:2px solid var(--rose)}
.dial b{font:400 22px/1 var(--display)}
.dial span{font-size:13px;line-height:1.2}
.dial--999{background:var(--range);color:var(--chalk);border-color:var(--range)}
.alerts{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.tallies{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tally-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tally-bar{height:14px;border-radius:999px;background:var(--rose-soft);overflow:hidden;margin:6px 0 4px;border:1.5px solid color-mix(in srgb,var(--rose) 40%,transparent)}
.tally-bar i{display:block;height:100%;border-radius:999px;background:repeating-linear-gradient(90deg,var(--rose) 0 10px,var(--rose-deep) 10px 12px);transition:width .6s var(--ease)}
.tally--done .tally-bar i{background:var(--butter)}
@media (prefers-reduced-motion:reduce){.tally-bar i{transition:none}}
.family{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.member{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;min-height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--chalk);color:var(--range);text-align:center}
.member:hover{border-color:var(--rose)}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:400 24px var(--display);color:var(--white);background:var(--rose);box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--rose-soft)}
.member--pet .avatar{background:var(--butter);color:var(--on-butter)}
.page--about{display:flex;flex-direction:column;gap:18px}
.page--about ul{margin:0;padding-left:20px}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;cursor:pointer;min-height:32px;display:flex;align-items:center}
.faq details p{margin:6px 0 0}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:4px}
.back-link::before,.welcome-back::before{content:"\2190";margin-right:6px}
.sorted summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.sorted .tallies{margin-top:8px}

/* ===== Homely home screen (Nadia chose "E: Arches and colour blocks", 31 Oct 2026) =====
   The house sits in an arch; three colour-block cards overlap its foot: emergency, plan, family.
   Warm paper colours, soft paper shadows. Power cut mode drops all of it back to plain. */
:root{--oat:#F3ECE3;--plaster:#EBCFC6;--biscuit:#DDBB98;--clay:#C99A86;--heather:#6E6680;--on-block:#FFFFFF;
  --paper-shade:0 2px 0 rgba(60,40,30,.08),0 14px 24px -14px rgba(60,40,30,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--oat:#231E21;--plaster:#4A3439;--biscuit:#5A4636;--clay:#6E4E44;--heather:#B9A8D0;--on-block:#1A1719;--paper-shade:none}}
:root[data-theme="dark"]{--oat:#231E21;--plaster:#4A3439;--biscuit:#5A4636;--clay:#6E4E44;--heather:#B9A8D0;--on-block:#1A1719;--paper-shade:none}
.page--homely{gap:0}
.hhero{display:grid;gap:22px;align-items:end;padding-top:4px}
@media (min-width:860px){.hhero{grid-template-columns:1.05fr 1fr;align-items:center}}
.hhero-words{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.hhero h1{font-size:clamp(34px,7.5vw,56px);line-height:1.04}
.hhero .lede{margin:0 0 6px}
.harch{width:100%;max-width:400px;justify-self:center;aspect-ratio:400/440;border-radius:999px 999px 20px 20px;overflow:hidden;box-shadow:var(--paper-shade)}
.harch svg{display:block;width:100%;height:100%}
@media (max-width:859px){.harch{max-width:300px}}
.ah-sky{fill:var(--rose-soft)}.ah-sun{fill:var(--butter)}.ah-hill1{fill:var(--biscuit)}.ah-hill2{fill:var(--clay)}
.ah-wall{fill:var(--white)}.ah-roof{fill:var(--rose)}.ah-roof-d{fill:var(--rose-deep)}.ah-chim{fill:var(--damson)}
.ah-win{fill:var(--butter)}.ah-bar{stroke:var(--white);stroke-width:4;fill:none}.ah-door{fill:var(--damson)}
.ah-trunk{stroke:var(--rose-deep);stroke-width:9}.ah-tree{fill:var(--rose-deep)}.ah-ground{fill:var(--chalk)}
.ah-wall,.ah-roof,.ah-win,.ah-door,.ah-tree,.ah-sun,.ah-hill1,.ah-hill2{filter:drop-shadow(0 2px 2px rgba(60,40,30,.22))}
.hblocks{display:grid;gap:16px;margin-top:-34px;position:relative;z-index:1}
@media (min-width:860px){.hblocks{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-48px}}
.hblock{border-radius:28px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--paper-shade);color:var(--on-block)}
.hblock h2{font:400 26px/1.15 var(--display);margin:0}
.hblock p{margin:0}
.hblock a,.hblock .linkish{color:inherit}
.hblock--sos{background:var(--rose)}
.hblock--plan{background:var(--plaster);color:var(--range)}
.hblock--family{background:var(--heather)}
.hblock-kick{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.halerts{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:2px;font-size:15px}
.hdials{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hdial{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;border-radius:16px;background:var(--white);color:var(--range)!important;text-decoration:none;text-align:center;padding:6px}
.hdial b{font:400 26px/1 var(--display)}.hdial span{font-size:12.5px;line-height:1.2;margin-top:3px}
.hdial--999{background:var(--butter);color:var(--on-butter)!important}
.hblock-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-weight:700;font-size:15px}
.hblock-links a,.linkish{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:2px}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer}
.hring-row{display:flex;align-items:center;gap:14px}
.hring svg{width:72px;height:72px;display:block}
.hring-back{fill:none;stroke:var(--white);stroke-width:9}
.hring-fill{fill:none;stroke:var(--rose-deep);stroke-width:9;stroke-linecap:round}
.hbig{font:400 28px/1 var(--display)}
.hnext{font-size:15px}
.hfaces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hface{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:4px 14px 4px 4px;border-radius:999px;border:0;background:rgba(255,255,255,.16);color:inherit;font-weight:700;text-align:left}
.hface:hover{background:rgba(255,255,255,.28)}
.hface small{display:block;font-weight:400;font-size:12.5px;opacity:.9}
.hface-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--heather);font:400 19px var(--display);flex:none}
.hface--pet .hface-dot{background:var(--butter);color:var(--on-butter)}
.hget{display:grid;gap:26px;align-items:start;margin-top:44px}
@media (min-width:860px){.hget{grid-template-columns:.75fr 1.25fr;align-items:center}}
.hget-art{aspect-ratio:1;max-width:340px;width:100%;justify-self:center;border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;background:var(--oat);display:grid;place-items:center}
.hget-shelf{display:grid;grid-template-columns:repeat(3,auto);gap:8px;align-items:end;padding-bottom:10px;border-bottom:10px solid var(--clay);border-radius:2px}
.hget-shelf img{width:72px;height:72px}
@media (max-width:859px){.hget-art{display:none}}
.hget-main{display:flex;flex-direction:column;gap:12px}
.hget h2{font:400 32px/1.1 var(--display);margin:0}
.htiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.htile{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;border-radius:22px;border:0;background:var(--oat);color:var(--range);text-align:center;font-size:15px;line-height:1.25}
.htile:hover{background:var(--rose-soft)}
.htile-pic img{width:56px;height:56px;display:block}
.htile--none .htile-pic img{opacity:.45}
.htile-note{font-size:13px;font-weight:700;color:var(--rose-deep);margin-top:auto}
.htile--done .htile-note{color:var(--muted)}
.htile-bar{width:70%;height:6px;border-radius:3px;background:var(--white);overflow:hidden}.htile-bar i{display:block;height:100%;background:var(--rose)}
.hget .sorted .htiles{margin-top:8px}
/* Power cut: plain, high contrast, no pictures, no shadows. */
:root[data-theme="powercut"] .harch,:root[data-theme="powercut"] .hget-art,:root[data-theme="powercut"] .htile-pic{display:none}
:root[data-theme="powercut"] .hblocks{margin-top:16px}
:root[data-theme="powercut"] .hblock{background:var(--white);color:var(--range);border:1.5px solid var(--line);box-shadow:none}
:root[data-theme="powercut"] .hface{background:var(--chalk)}
:root[data-theme="powercut"] .hface-dot{background:var(--line);color:var(--range)}
:root[data-theme="powercut"] .htile{background:var(--white);border:1.5px solid var(--line)}
:root[data-theme="powercut"] .hdial{border:1.5px solid var(--line)}

/* Phone: the main tabs become a bar along the bottom, like a phone app. */
.tab-ico,.tab-short{display:none}
@media (max-width:699px){
  body:has(.tabs:not([hidden])){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;flex-wrap:nowrap!important;gap:0;background:var(--white);border-top:1px solid var(--line);padding:4px 2px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px -12px rgba(31,36,44,.3)}
  .tabs a{flex:1 1 0!important;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0!important;border:0!important;border-radius:0;background:none!important;font-size:11.5px!important;line-height:1.1;min-height:52px}
  .tabs a[aria-current="true"]{color:var(--rose-deep)}
  .tab-ico{display:block;width:44px;height:28px;padding:2px 10px;border-radius:14px}
  .tabs a[aria-current="true"] .tab-ico{background:var(--rose-soft)}
  .tab-long{display:none}.tab-short{display:inline}
  .tabs a:not(:has(.tab-short)) .tab-long{display:inline}
}
@media print{.tabs{display:none!important}}
@media (min-width:860px){main:has(.page--homely){max-width:1120px}}
@media (min-width:700px){.tabs a[aria-current="true"]{background:var(--blue);color:var(--on-blue);box-shadow:none}}

/* ===== The homely look on the other pages (31 Oct 2026) =====
   Each page head gets a small arch with its own kitchenware picture, like the house arch on Home.
   Lists sit on soft paper sheets with serif headings and a colour-block tab instead of a dot. */
.page--ready .page-head,.page--people .page-head,.page--numbers .page-head,.page--totals .page-head,.page--shopping .page-head{
  position:relative;padding:22px 128px 22px 22px;border-radius:28px;background:var(--oat);min-height:150px;display:flex;flex-direction:column;justify-content:center}
.page--ready .page-head::after,.page--people .page-head::after,.page--numbers .page-head::after,.page--totals .page-head::after,.page--shopping .page-head::after{
  content:"";position:absolute;right:18px;bottom:0;width:96px;height:118px;border-radius:999px 999px 0 0;background:var(--rose-soft)}
.page--ready .page-head::before,.page--people .page-head::before,.page--numbers .page-head::before,.page--totals .page-head::before,.page--shopping .page-head::before{
  content:"";position:absolute;right:26px;bottom:14px;width:80px;height:80px;z-index:1;background:var(--pic) center/contain no-repeat;filter:var(--icon-filter)}
.page--ready{--pic:url(img/storage-box.png)}.page--people{--pic:url(img/hot-water-bottle.png)}.page--numbers{--pic:url(img/radio.png)}.page--totals{--pic:url(img/canister.png)}.page--shopping{--pic:url(img/condiments.png)}
.page-head .eyebrow{color:var(--rose-deep)}
@media (max-width:520px){
  .page--ready .page-head,.page--people .page-head,.page--numbers .page-head,.page--totals .page-head,.page--shopping .page-head{padding:18px 18px 18px;min-height:0}
  .page--ready .page-head::after,.page--people .page-head::after,.page--numbers .page-head::after,.page--totals .page-head::after,.page--shopping .page-head::after{display:none}
  .page--ready .page-head::before,.page--people .page-head::before,.page--numbers .page-head::before,.page--totals .page-head::before,.page--shopping .page-head::before{right:14px;top:14px;bottom:auto;width:48px;height:48px}
  .page-head h1{padding-right:56px}
}
.shelf{border:0;border-radius:26px;padding:8px 20px 12px;box-shadow:var(--paper-shade,var(--shade))}
.shelf h2{font:400 22px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--range);padding:14px 0 8px;gap:12px}
.shelf h2::after{display:none}
.shelf h2::before{width:14px;height:26px;border-radius:7px;box-shadow:none;background:var(--dot,var(--rose))}
.shelf ul>li{border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.card{border:0;background:var(--plaster)}
.card .card-list li{border-top-color:color-mix(in srgb,var(--range) 12%,transparent)}
.card h2::before{--dot:var(--rose-deep)}
details.shelf>summary{font:400 20px/1.2 var(--display);min-height:52px;display:flex;align-items:center;cursor:pointer}
/* Power cut keeps every page plain. */
:root[data-theme="powercut"] .page-head{background:none!important;padding:6px 0!important;min-height:0!important}
:root[data-theme="powercut"] .page-head::before,:root[data-theme="powercut"] .page-head::after{display:none!important}
:root[data-theme="powercut"] .shelf{border:1.5px solid var(--line);box-shadow:none}
:root[data-theme="powercut"] .card{background:var(--white);border:2px solid var(--range)}
details.shelf>summary{list-style:none;justify-content:space-between;gap:12px}
details.shelf>summary::-webkit-details-marker{display:none}
details.shelf>summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose-deep);font:700 22px/1 var(--body)}
details.shelf[open]>summary::after{content:"\2212"}
.section-title{font:400 26px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--range);margin-top:10px}
.numbers:not(.numbers--small){grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.numbers:not(.numbers--small) .number{border:0;border-radius:22px;background:var(--oat);padding:14px 16px;align-items:flex-start}
.numbers:not(.numbers--small) .number-dial{border:0;background:var(--white);color:var(--range);font:400 1.3rem var(--display);border-radius:14px;padding:10px 12px;box-shadow:var(--paper-shade,none)}
.numbers:not(.numbers--small) .number:first-child .number-dial{background:var(--butter);color:var(--on-butter)}
:root[data-theme="powercut"] .numbers .number{background:var(--white);border:1.5px solid var(--line)}
:root[data-theme="powercut"] .numbers .number-dial{border:2px solid var(--range);box-shadow:none}
@media (max-width:520px){.numbers:not(.numbers--small) .number{flex-direction:column;gap:8px}}
.ready-card{border:0;border-radius:26px;background:var(--plaster);box-shadow:var(--paper-shade,var(--shade))}
.plan-card{border:0;border-radius:26px;background:var(--oat);background-image:none;box-shadow:none}
:root[data-theme="powercut"] .ready-card,:root[data-theme="powercut"] .plan-card{background:var(--white);border:1.5px solid var(--line);box-shadow:none}
/* Welcome screens in the homely look: the first screen shows the house in its arch, the others sit on oat. */
.page--welcome .welcome-art{background:var(--oat);border-radius:28px}
.page--welcome .welcome-art--arch{width:min(260px,64vw);aspect-ratio:400/440;padding:0;border-radius:999px 999px 20px 20px;overflow:hidden;background:var(--rose-soft);box-shadow:var(--paper-shade,none)}
.page--welcome .welcome-art--arch svg{display:block}
.welcome-dots span.on{background:var(--rose)}
:root[data-theme="powercut"] .page--welcome .welcome-art{display:none}
.page--welcome .welcome-art--arch .ah-ground{fill:var(--clay)}
.page--setup .page-head{background:var(--oat);border-radius:28px;padding:22px}
.page--setup .page-head .eyebrow{color:var(--rose-deep)}
.page--setup .street{border:0;border-radius:28px 28px 22px 22px;box-shadow:var(--paper-shade,none)}
:root[data-theme="powercut"] .page--setup .page-head{background:none;padding:6px 0}