/* ── The family's shell, as design draws it ─────────────────────────────────────
   design's fifty-odd customer screens are one column in a phone frame: a back
   chevron, a small uppercase kicker and the title, then cards. No dark bar across
   the top, no tab bar across the bottom — the home page is the hub, and every deep
   screen has one way back. This sheet is loaded last on the portal and lays that
   shape over the classes the templates already use, so the page vocabulary
   (.portal-card, .eyebrow, .portal-primary …) stays and the composition changes.

   Sizes are design's own, read off the drawings at 402px: 26px title, 15px body,
   10px card kicker, 17px card title, 44px pill buttons, 32px card corners. */

body.portal-body{
  --po-kicker:rgba(41,44,35,.5);
  --po-link:var(--green-dark,#2F4F3A);
  --po-quiet:rgba(41,44,35,.62);
  --po-divider:color-mix(in srgb,var(--ink,#201E1D) 12%,transparent);
  --po-surface:var(--card-bg,#EBDDC5);
  --po-light:var(--neutral-100,#F9F4ED);
  /* The warning tone is the logo's brown, not the gold the theme calls "warning": the
     owner read the certificate reminder on 1c and 1f as orange (27 October). A reminder
     stands out by its border and its wash, in the palette the rest of the page uses. */
  --po-warn-100:color-mix(in srgb,var(--green,#805838) 11%,#fff);
  --po-warn-300:color-mix(in srgb,var(--green,#805838) 48%,#fff);
  --po-warn-700:var(--accent-800,#563C27);
  --po-ok-100:var(--accent-2-100,#EFFAE2);
  --po-ok-800:var(--accent-2-800,#3B472C);
  background:var(--paper,#F5EAD8);
  padding-bottom:0!important;
  font-size:15px;
}

/* The bar and the tab bar go. The home page's three buttons and the account avatar
   are the navigation design draws. */
.portal-bottom-nav{display:none!important}
.portal-header{display:none!important}
.portal-footer{display:none!important}
.skip-link{position:absolute;left:-999px}

/* One column, 402 wide in the drawings; a desktop gets the same column, centred. */
.portal-main{max-width:442px;margin:0 auto;padding:52px 20px 40px!important;
  display:flex;flex-direction:column;gap:16px}
.portal-main > *{max-width:none!important;margin-inline:0!important;width:100%;box-sizing:border-box}
@media (min-width:761px){.portal-main{padding-top:36px!important}}

/* ── The head of every deep screen ─────────────────────────────────────────── */
.portal-page-head{display:flex;align-items:center;gap:12px}
.portal-page-head > div{flex:1;min-width:0}
.portal-page-head .portal-back{flex:none;font-size:0;line-height:0;margin:0;color:rgba(41,44,35,.55);
  text-decoration:none;display:inline-block;width:22px}
.portal-page-head .portal-back::before{content:"\2039";font-size:22px;line-height:1}
.portal-page-head .eyebrow{display:block;margin:0;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--po-kicker);font-weight:400}
.portal-page-head h1{font-size:26px;line-height:1.15;margin:1px 0 0}
.portal-page-head p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--po-quiet)}
.portal-page-head .po-av{flex:none}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.portal-card{background:var(--po-surface);border:0;border-radius:32px;box-shadow:var(--shadow-sm);
  padding:15px 17px;display:flex;flex-direction:column;gap:8px}
.portal-card.po-light{background:var(--po-light)}
.portal-card.po-ok{background:var(--po-ok-100)}
.portal-card.po-ok .eyebrow,.portal-card.po-ok p{color:var(--po-ok-800)}
.portal-card.po-accent{background:var(--accent-100,#FFF3E9)}
.portal-card.po-accent .eyebrow,.portal-card.po-accent p{color:var(--accent-800,#563c27)}
.portal-card.po-warn{background:var(--po-warn-100);box-shadow:inset 0 0 0 1.5px var(--po-warn-300)}
.portal-card.po-warn p,.portal-card.po-warn .eyebrow{color:var(--po-warn-700)}
.portal-card.po-dark{background:var(--accent-800,#563c27);color:var(--paper,#F5EAD8);box-shadow:var(--shadow-md)}
.portal-card.po-dark h2,.portal-card.po-dark p,.portal-card.po-dark .eyebrow{color:inherit}
.portal-card.po-dashed{background:transparent;box-shadow:none;border:1px dashed rgba(41,44,35,.3)}
/* Everything the old shell padded to sit inside a 22px card gutter sits flush now:
   the card's own padding is the gutter and the flex gap is the rhythm. */
.portal-card > *{margin:0!important}
.portal-card > :where(p,ul,ol,dl,div,form,figure,table,fieldset,section,h2,h3,h4,small,span,a:not(.portal-primary):not(.portal-secondary)){
  padding-left:0!important;padding-right:0!important}
.portal-card > :where(p,ul,ol,dl,div,figure,table,fieldset,section,h2,h3,h4,small,span){padding-top:0!important;padding-bottom:0!important}
.portal-card-heading{padding:0;border:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.portal-card-heading > div{min-width:0;flex:1}
.portal-card .eyebrow,.po-kicker{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--po-link);font-weight:400;margin:0}
.portal-card h2,.po-title{font-family:var(--font-heading);font-weight:var(--heading-weight,400);font-size:17px;
  line-height:1.2;margin:0}
.portal-card h3{font-size:15px;margin:0}
.portal-card p{font-size:13.5px;line-height:1.5}
.portal-card .muted,.portal-note,.po-quiet{color:var(--po-quiet);font-size:12.5px;line-height:1.5}
.portal-note{margin:0;padding:0}
.portal-card strong{font-weight:600}
.portal-card figure{margin:0}
.portal-card img{max-width:100%;border-radius:16px;display:block}
.portal-card .portal-form{margin:0;gap:10px}

/* A card that is a link, and a card that is a row. */
a.portal-card{color:inherit;text-decoration:none}
.po-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.po-row > :first-child{min-width:0;flex:1}

/* ── Money as rows, not bullets ─────────────────────────────────────────────── */
.portal-card ul,.portal-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.portal-card ol.po-numbered{counter-reset:po}
.portal-card ol.po-numbered > li{display:flex;gap:10px;counter-increment:po;font-size:13.5px;line-height:1.45}
.portal-card ol.po-numbered > li::before{content:counter(po);flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--green,#805838);color:var(--paper,#F5EAD8);font-size:12px;display:grid;place-items:center}
.po-rows{display:flex;flex-direction:column;gap:0!important}
.po-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;
  line-height:1.4;padding:6px 0;border-bottom:1px solid var(--po-divider)}
.po-rows li:last-child{border-bottom:0}
.po-rows li > span:first-child{min-width:0;flex:1}
.po-rows li strong,.po-rows li > span:last-child{flex:none;font-weight:600;text-align:right}
.po-rows li.po-total{font-size:15px;padding-top:8px}
.po-rows li.po-total strong{font-size:16px}
.po-rows li.po-was{color:var(--po-quiet)}
.po-rows li.po-was strong{font-weight:400;text-decoration:line-through}
.po-rows li .po-quiet{font-weight:400;font-size:12.5px}
.po-ticks li{display:flex;gap:8px;font-size:13.5px;line-height:1.45}
.po-ticks li::before{content:"\2713";flex:none;color:var(--po-link);font-size:13px;line-height:1.5}
.po-dots li{display:flex;gap:8px;font-size:13px;line-height:1.45}
.po-dots li::before{content:"\00b7";flex:none;font-weight:700}

/* ── Buttons: pills, full width, the heading face ───────────────────────────── */
.portal-primary,.portal-secondary,.button-like,.po-ghost,.portal-text-button{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;
  min-height:44px;padding:10px 16px;border-radius:999px;font-family:var(--font-heading);
  font-weight:var(--heading-weight,400);font-size:14px;line-height:1.2;text-decoration:none;cursor:pointer;
  border:1px solid transparent;margin:0}
.portal-primary{background:var(--green,#805838);color:var(--paper,#F5EAD8)}
.portal-primary:hover{background:var(--accent-600,#997151)}
.portal-secondary{background:transparent;color:var(--ink,#201E1D);border-color:var(--po-divider)}
.portal-secondary:hover{background:color-mix(in srgb,var(--ink,#201E1D) 7%,transparent)}
.po-ghost,.portal-text-button{background:none;color:var(--po-link);min-height:40px;font-size:14px}
.po-ghost:hover,.portal-text-button:hover{background:color-mix(in srgb,var(--po-link) 10%,transparent)}
.po-inline{display:flex;gap:8px}
.po-inline > *{flex:1;width:auto}
.po-inline .po-fit{flex:none;width:auto;padding-inline:18px}
.po-stack{display:flex;flex-direction:column;gap:8px}
.po-stack form{margin:0}
.portal-onward{margin:0;display:flex;flex-direction:column;gap:8px;font-weight:400}
.portal-onward a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px;
  border:1px solid var(--po-divider);color:var(--ink,#201E1D);text-decoration:none;font-family:var(--font-heading);font-size:14px}
.portal-onward a + a{border-color:transparent;color:var(--po-link)}
.po-small{width:auto;min-height:36px;padding:7px 14px;font-size:13px;align-self:flex-start}

/* ── Tags, chips, avatars ───────────────────────────────────────────────────── */
.po-tag,.rc-light,.sq-standing,.wl-place,.eligibility,.vaccination-pill,.status-dot{
  display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:12px;
  background:var(--po-light);color:var(--neutral-800,#474239);text-transform:none;font-weight:400;margin:0}
.po-tag.tag-ok,.sq-answered,.rc-green{background:var(--po-ok-100);color:var(--po-ok-800)}
.po-tag.tag-warn,.sq-with-us{background:var(--po-warn-100);color:var(--po-warn-700)}
.rc-orange{background:var(--po-warn-100);color:var(--po-warn-700)}
.rc-red{background:color-mix(in srgb,var(--error,#B04A33) 14%,#fff);color:var(--error,#B04A33)}
.portal-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.portal-chip,.po-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:var(--po-surface);color:var(--ink,#201E1D);text-decoration:none;font-size:14px;font-weight:600}
.portal-chip.on,.po-chip.on{background:var(--green,#805838);color:var(--paper,#F5EAD8)}
.po-chip .po-av{width:28px;height:28px;font-size:11px;margin-left:-8px}
.po-chip.on .po-av{background:rgba(255,255,255,.28)}
.po-av,.portal-dog-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-600,#997151);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:600;flex:none;overflow:hidden;margin:0}
.po-av img{width:100%;height:100%;object-fit:cover;border-radius:0}
.po-av.po-av-2{background:var(--accent-2-400,#ACC095)}
.po-av.po-av-n{background:var(--neutral-400,#BFB6A8)}
.po-av.po-av-lg{width:42px;height:42px}
.po-dog{display:flex;align-items:center;gap:11px}
.po-dog > div{flex:1;min-width:0}
.po-dog b{display:block;font-size:14.5px;font-weight:600}
.po-dog small{display:block;font-size:12.5px;color:var(--po-quiet)}
.po-dog a{font-size:12.5px;color:var(--po-link);flex:none}

/* ── Choices: tiles, ticks and the segmented control ────────────────────────── */
.large-check,.po-tile{position:relative;display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:20px;
  background:var(--po-surface);cursor:pointer;border:0;align-items:stretch;margin:0}
.large-check input,.po-tile input,.po-seg input,.po-check input,.check-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.large-check:has(input:checked),.po-tile:has(input:checked){background:var(--accent-100,#FFF3E9);
  box-shadow:inset 0 0 0 1.5px var(--green,#805838)}
.large-check:has(input:focus-visible),.po-tile:has(input:focus-visible){outline:2px solid var(--green,#805838);outline-offset:2px}
.large-check > span{flex:1;min-width:0}
.po-tile-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15.5px;font-weight:600}
.po-tile-head b{flex:none;font-weight:600}
.po-tile small,.large-check small{display:block;font-size:12.5px;line-height:1.45;color:var(--po-quiet);margin:0}
.po-choices{display:flex;flex-direction:column;gap:5px}
.po-choices-label{font-size:13.5px;color:var(--po-quiet);display:flex;justify-content:space-between}
.po-check{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;
  background:var(--po-light);cursor:pointer;font-size:14.5px;margin:0}
.po-check::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(41,44,35,.3);
  background:#fff;box-sizing:border-box}
.po-check:has(input:checked){background:var(--accent-100,#FFF3E9)}
.po-check:has(input:checked)::before{background:var(--accent-800,#563c27);border-color:var(--accent-800,#563c27);
  color:#fff;content:"\2713";display:grid;place-items:center;font-size:12px}
.po-check > span{flex:1;min-width:0}
.po-check b{flex:none;font-weight:600}
.po-check.is-off{opacity:.45;cursor:not-allowed}
.po-seg{display:inline-flex;overflow:hidden;border:1px solid var(--po-divider);border-radius:16px;margin:0;padding:0}
.po-seg label{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;cursor:pointer;margin:0}
.po-seg label + label{border-left:1px solid var(--po-divider)}
.po-seg label:has(input:checked){background:var(--green,#805838);color:var(--paper,#F5EAD8)}
.po-seg.po-grow{display:flex}
.po-seg.po-grow label{flex:1;justify-content:center}
.po-slots{display:flex;flex-wrap:wrap;gap:6px}
.po-slots label{position:relative;flex:1 0 28%;display:flex;justify-content:center;padding:8px 6px;border-radius:999px;
  background:var(--po-surface);font-size:14px;font-weight:400;cursor:pointer;margin:0}
.po-slots label:has(input:checked){background:var(--accent-800,#563c27);color:var(--paper,#F5EAD8)}
.po-slots label.is-off{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.check-row{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px;
  background:var(--po-light);font-size:13px;line-height:1.45;margin:0;cursor:pointer}
.check-row::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;border:1.5px solid rgba(41,44,35,.3);
  background:#fff;box-sizing:border-box}
.check-row:has(input:checked)::before{background:var(--accent-800,#563c27);border-color:var(--accent-800,#563c27);
  content:"\2713";color:#fff;display:grid;place-items:center;font-size:11px}
.check-row:has(input:checked){background:var(--accent-100,#FFF3E9)}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.portal-form{display:flex;flex-direction:column;gap:16px;margin:0}
.portal-form label,.po-field label{display:block;font-size:12px;font-weight:400;line-height:1.55;color:rgba(41,44,35,.7);margin:0}
.portal-form label small{display:block;font-size:12px;color:var(--po-quiet);margin-top:4px}
.portal-form input:not([type=checkbox]):not([type=radio]),.portal-form select,.portal-form textarea,.po-input{
  display:block;width:100%;box-sizing:border-box;min-height:38px;margin-top:5px;padding:6px 14px;font:inherit;font-size:14px;font-weight:400;
  color:var(--ink,#201E1D);background:var(--po-surface);border:1px solid var(--po-divider);border-radius:16px}
.portal-form textarea{min-height:76px;line-height:1.45}
.portal-form input:focus-visible,.portal-form textarea:focus-visible{border-color:var(--green,#805838);outline:0}
.portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.form-divider{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-800,#563c27);
  border:0;padding:0;margin:0;font-weight:400}
.portal-alert{padding:12px 16px;border-radius:20px;margin:0;font-size:13.5px;line-height:1.45}
.portal-alert.success{background:var(--po-ok-100);color:var(--po-ok-800)}
.portal-alert.error{background:color-mix(in srgb,var(--error,#B04A33) 12%,#fff);color:var(--error,#B04A33)}
.portal-alert.info{background:var(--po-light);color:var(--ink,#201E1D)}
.po-composer{display:flex;gap:8px;align-items:center}
.po-composer input{flex:1;min-width:0;margin:0;min-height:44px;border-radius:999px}
.po-composer button{width:auto;flex:none;padding-inline:18px}

/* ── Chat, as bubbles ───────────────────────────────────────────────────────── */
.po-chat{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.po-day{align-self:center;font-size:12px;color:rgba(41,44,35,.45)}
.po-msg{align-self:flex-start;max-width:82%;display:flex;flex-direction:column;gap:5px}
.po-msg.mine{align-self:flex-end;align-items:flex-end}
.po-bubble{padding:13px 16px;border-radius:22px 22px 22px 6px;background:var(--po-surface);box-shadow:var(--shadow-sm);
  font-size:14.5px;line-height:1.5;margin:0}
.po-msg.mine .po-bubble{border-radius:22px 22px 6px 22px;background:var(--accent-800,#563c27);color:var(--paper,#F5EAD8);box-shadow:none}
.po-msg small{padding:0 4px;font-size:11.5px;color:var(--po-kicker)}
.po-bubble img{border-radius:16px}
.po-changed{align-self:stretch;max-width:none}

/* ── The sign-up header and its four bars ───────────────────────────────────── */
.po-brand{display:flex;align-items:center;gap:11px}
.po-brand img,.po-brand span.po-mark{width:46px;height:34px;object-fit:contain;display:grid;place-items:center;font-weight:700}
.po-brand b{display:block;font-family:var(--font-heading);font-weight:400;font-size:16px;line-height:1.2}
.po-brand small{display:block;font-size:11.5px;color:var(--po-kicker)}
.po-progress{display:flex;gap:6px;margin:0}
.po-progress span{flex:1;height:5px;border-radius:999px;background:var(--neutral-300,#DBD3C6)}
.po-progress span.on{background:var(--accent-500,#B98E6D)}
.portal-signup{display:flex;flex-direction:column;gap:16px}
.portal-signup h1{font-size:30px;line-height:1.08;margin:5px 0 0}
.signup-step{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--po-kicker);margin:0}
.signup-blurb{margin:0;font-size:14px;line-height:1.5;color:var(--po-quiet)}
.login-switch{margin:0;text-align:center;font-size:13px;color:var(--po-quiet)}
.signup-note{background:var(--po-surface);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.signup-note h2{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--po-link);margin:0;font-family:var(--font-body)}
.signup-note p{margin:0;font-size:13.5px;line-height:1.45}
.po-slot-day{display:flex;flex-direction:column;gap:8px}
.po-slot-day .po-row h4{margin:0;font-size:15px}
.po-slot-day .po-row span{font-size:12.5px;color:var(--po-quiet)}

/* ── The calendar on Book a day ─────────────────────────────────────────────── */
.po-cal-head{display:flex;align-items:center;justify-content:space-between}
.po-cal-head h4{margin:0;font-size:19px}
.po-cal-head div{display:flex;gap:6px}
.po-cal-head a{width:34px;height:34px;border-radius:50%;border:1px solid var(--po-divider);display:grid;place-items:center;
  color:var(--ink,#201E1D);text-decoration:none;font-size:18px}
.po-cal-days,.po-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;justify-items:center}
.po-cal-days span{font-size:11px;color:rgba(41,44,35,.45)}
.po-cell{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  cursor:pointer;margin:0;color:var(--ink,#201E1D)}
.po-cell input{position:absolute;opacity:0;width:1px;height:1px}
.po-cell .dot{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--accent-2-500,#8DA075)}
.po-cell.is-out{color:rgba(41,44,35,.25);cursor:default}
.po-cell.is-past{color:var(--neutral-400,#BFB6A8);cursor:default}
.po-cell.is-full{color:var(--neutral-400,#BFB6A8)}
.po-cell:has(input:checked){background:var(--green,#805838);color:var(--paper,#F5EAD8)}
.po-cell:has(input:checked) .dot{background:var(--paper,#F5EAD8)}
.po-legend{display:flex;gap:14px;font-size:11.5px;color:var(--po-quiet)}
.po-legend span{display:inline-flex;align-items:center;gap:5px}
.po-legend .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2-500,#8DA075)}
.po-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0 6px;background:var(--paper,#F5EAD8);border-top:1px solid var(--po-divider)}
.po-bar .portal-primary{width:auto;flex:none;padding-inline:22px}
.po-bar small{display:block;font-size:11.5px;color:var(--po-kicker);text-transform:uppercase;letter-spacing:.08em}
.po-bar b{font-size:22px;font-family:var(--font-heading);font-weight:400}
.po-week{display:flex;gap:6px}
.po-week label,.po-week div{position:relative;flex:1;text-align:center;padding:8px 0;border-radius:16px;background:var(--po-light);font-size:12px;margin:0;cursor:pointer}
.po-week label b,.po-week div b{display:block;font-size:16px;font-weight:600}
.po-week label:has(input:checked),.po-week div.on{background:var(--green,#805838);color:var(--paper,#F5EAD8)}
.po-week input{position:absolute;opacity:0;width:1px;height:1px}

/* ── The home page ──────────────────────────────────────────────────────────── */
.po-home-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.po-home-head > div{min-width:0}
.po-home-head small{display:block;font-size:13px;color:var(--po-kicker)}
.po-home-head h1{font-size:26px;margin:2px 0 0;line-height:1.15}
.po-photo-card{padding:0!important;overflow:hidden;border-radius:26px;box-shadow:var(--shadow-md);gap:0}
.po-photo{height:176px;background:var(--neutral-300,#DBD3C6);display:grid;place-items:center;font-size:12px;color:rgba(41,44,35,.45)}
.po-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
.po-photo-body{padding:16px 17px!important;display:flex;flex-direction:column;gap:10px}
.po-say{font-family:var(--font-heading);font-size:19px;line-height:1.25}
.po-tags{display:flex;gap:7px;flex-wrap:wrap}
.po-section{display:flex;flex-direction:column;gap:8px}
.po-section-head{display:flex;justify-content:space-between;align-items:baseline}
.po-section-head h4{margin:0;font-size:18px;line-height:1.12;font-family:var(--font-heading);font-weight:400}
.po-section-head a{font-size:12.5px;color:var(--po-link)}
.dogrow,.po-dogrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;background:var(--po-light);
  color:inherit;text-decoration:none;margin:0}
.po-dogrow > div:nth-child(2){flex:1;min-width:0}
.po-dogrow b{display:block;font-size:14px;font-weight:600}
.po-dogrow small{display:block;font-size:12.5px;color:var(--po-quiet)}
.po-dogrow > span:last-child{color:var(--po-kicker);font-size:18px}
.po-date{flex:none;width:42px;text-align:center;line-height:1.1}
.po-date small{display:block;font-size:10px;letter-spacing:.06em;color:var(--po-kicker)}
.po-date b{display:block;font-size:18px;font-weight:600}
.po-dog-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Rules from the old sheet that fought the shape above. */
.customer-home-hero,.portal-grid.two,.portal-dog-grid{display:flex;flex-direction:column;gap:16px}
.home-section-heading p{display:none}
.portal-detail-list{padding:0;margin:0}
.portal-detail-list div{grid-template-columns:110px 1fr;padding:8px 0;font-size:13.5px}
.portal-booking-list .portal-booking-row{padding:10px 0}
.rc-strip ol{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}
.rc-strip li{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.rc-strip small{font-size:11px;color:var(--po-quiet)}
.rc-dot{display:block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.rc-dot.rc-green{background:#5D8A3F}.rc-dot.rc-orange{background:#B8821F}.rc-dot.rc-red{background:#B04A33}
.rc-tags{flex-direction:row!important;flex-wrap:wrap;gap:7px!important}
.rc-tags li{font-size:11.5px;padding:3px 10px;border-radius:12px;background:var(--po-light)}
.po-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.po-photos figure{margin:0}
.po-photos img{width:100%;height:110px;object-fit:cover;border-radius:16px;background:var(--neutral-300,#DBD3C6)}
.po-photos figcaption{font-size:11.5px;color:var(--po-quiet);margin-top:3px}
.po-bars{display:flex;flex-direction:column;gap:6px}
.po-bars > div{display:flex;align-items:center;gap:10px;font-size:13px}
.po-bars > div > span:first-child{width:84px;flex:none}
.po-bars i{flex:1;height:8px;border-radius:999px;background:var(--po-light);display:block;overflow:hidden}
.po-bars i b{display:block;height:100%;background:var(--accent-2-500,#8DA075)}

/* The line above a title that is not a kicker: "Off The Bone · usually replies within
   an hour" is a sentence, not a label. */
.portal-page-head small{display:block;font-size:12.5px;color:var(--po-quiet)}
.po-signup-head{display:flex;align-items:center;gap:11px}
.po-signup-head .portal-back{flex:none;font-size:22px;line-height:1;color:rgba(41,44,35,.55);text-decoration:none}
.po-signup-head .po-progress{flex:1}
.portal-signup > div:not(.po-brand):not(.po-signup-head){display:flex;flex-direction:column;gap:6px}
.po-input{display:block;width:100%;box-sizing:border-box;min-height:76px;padding:8px 14px;font:inherit;font-size:14px;
  border:1px solid var(--po-divider);border-radius:16px;background:#fff}
.po-inline form{flex:none}
.po-inline form .po-fit{width:auto}
.portal-form.po-composer{flex-direction:row;align-items:center}
.po-section ul,ul.po-rows,ol.po-rows{list-style:none;margin:0;padding:0}
.po-bar{margin-top:8px}
.po-cal-head a[aria-disabled]{pointer-events:none}
[hidden]{display:none!important}
.po-slots input{position:absolute;opacity:0;width:1px;height:1px}
.po-bar{position:static;border-top:0;padding:4px 0 0}

/* ── Batch #25: the family board's second sitting ───────────────────────────── */
/* 1a · the total as a card, the extras folded, the week sentence under the rows. */
.po-bar.po-bar-card{background:var(--po-light);border-radius:24px;padding:14px 18px;box-shadow:var(--shadow-sm);margin-top:0}
.po-bar.po-bar-card small{margin-bottom:2px}
.po-weeks{font-size:13px;line-height:1.45;color:var(--po-link)}
.po-cell.is-full{text-decoration:line-through}
.po-cell{font-weight:600}
.po-cell.is-out,.po-cell.is-past{font-weight:400}
.po-fold{display:flex;flex-direction:column;gap:12px}
.po-fold > summary{list-style:none;cursor:pointer;font-size:14px;color:var(--po-link);font-family:var(--font-heading)}
.po-fold > summary::-webkit-details-marker{display:none}
.po-fold > summary::after{content:"\203A";margin-left:6px;display:inline-block;transition:transform .15s}
.po-fold[open] > summary::after{transform:rotate(90deg)}
.po-fold.po-fold-button > summary{display:flex}
.po-fold.po-fold-button > summary::after{content:none}
details.portal-card.po-fold > summary{color:inherit;font-family:inherit}
.po-fold.po-fold-line{gap:8px;padding:0 4px}
.po-fold.po-fold-line > summary{display:flex;justify-content:space-between;align-items:center;color:inherit;font-family:inherit}
.po-fold.po-fold-line > summary::after{content:none}
.po-fold.po-fold-line blockquote{margin:0;padding-left:12px;border-left:2px solid rgba(41,44,35,.18)}
details.portal-card.po-fold > summary::after{content:none}
.po-link{font-size:13.5px;color:var(--po-link);text-decoration:none;font-family:var(--font-heading);cursor:pointer}
/* 1b · treats as tiles with a circle, the action word in the accent, a centred note. */
.po-treat{gap:8px;padding:14px;background:var(--po-ok-100)}
.po-treat.po-treat-2{background:var(--po-surface)}
.po-treat-mark{width:40px;height:40px;border-radius:50%;background:rgba(41,44,35,.12)}
.po-treat.po-treat-2 .po-treat-mark{background:rgba(41,44,35,.16)}
.po-treat:has(input:checked) .po-treat-mark{background:var(--green,#805838)}
.po-treat-name{font-size:15.5px;font-weight:600;line-height:1.25}
.po-dogrow > span.po-act:last-child{color:var(--po-link);font-size:13.5px;font-family:var(--font-heading)}
.po-centred{text-align:center;font-size:14px;line-height:1.5;padding:0 24px;color:var(--ink,#201E1D)}
/* 1f · the head with the big avatar, the people on the list. */
.po-dog-head{display:flex;align-items:center;gap:16px}
.po-dog-head > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.po-dog-head h1{font-size:26px;line-height:1.1;margin:0}
.po-dog-head p{margin:0;font-size:14px;color:var(--po-quiet)}
.po-av.po-av-xl{width:76px;height:76px;font-size:28px}
.po-tag.po-tag-light{background:#fff}
.po-people{gap:12px!important}
.po-people li{display:flex;align-items:center;gap:12px;font-size:14.5px}
.po-people .po-av{width:36px;height:36px;font-size:12px}
.po-notes{font-size:15px;line-height:1.5}
.portal-card .dog-certificates li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--po-divider)}
.portal-card .dog-certificates li span{display:block;font-size:12px;color:var(--po-quiet)}
.cert-mark{display:inline-flex;align-items:center;font-size:11px;padding:3px 10px;border-radius:12px;background:var(--po-light);white-space:nowrap;height:fit-content}
.cert-mark.cert-not-accepted{background:var(--po-warn-100);color:var(--po-warn-700)}
.detail-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.detail-list div{display:grid;grid-template-columns:110px 1fr;padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--po-divider)}
.detail-list dt{color:var(--po-quiet)}.detail-list dd{margin:0;font-weight:600}
.dog-photo-block{display:flex;flex-direction:column;gap:8px}
/* 7b · the light as a dot beside its word, the grade as a chip, the sentence large. */
.po-photo-tall{height:210px;background:linear-gradient(180deg,#F2E1D3,#F6D9CE)}
.po-light-row{display:flex;align-items:center;gap:12px}
.po-light-row > div{flex:1;min-width:0}
.po-light-row b{display:block;font-size:15.5px;font-weight:600}
.po-light-row small{display:block;font-size:12.5px;color:var(--po-quiet);line-height:1.35}
.po-light-dot{flex:none;width:26px;height:26px;border-radius:50%;background:var(--neutral-400,#BFB6A8)}
.po-light-dot.rc-green{background:#5D8A3F}.po-light-dot.rc-orange{background:#B8821F}.po-light-dot.rc-red{background:#B04A33}
.po-light-dot.po-light-big{width:40px;height:40px}
.po-light-word{font-size:20px!important;font-family:var(--font-heading);font-weight:400!important}
.po-dogrow .po-light-dot{width:14px;height:14px}
.portal-card.po-dashed h2{font-size:17px}
/* 7c · every box on the card, ticked or not; behaviour and toileting side by side. */
.po-boxes{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 12px!important}
.po-boxes li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:rgba(41,44,35,.42)}
.po-boxes li::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(41,44,35,.22);box-sizing:border-box}
.po-boxes li.on{color:var(--ink,#201E1D)}
.po-boxes li.on::before{content:"\2713";background:var(--accent-800,#563c27);border-color:var(--accent-800,#563c27);color:#fff;
  display:grid;place-items:center;font-size:12px}
.rc-big{font-size:34px;line-height:1;font-family:var(--font-heading);font-weight:400}
.rc-word{font-size:20px;line-height:1.1;font-family:var(--font-heading);font-weight:400}
.po-dog-grid > .portal-card{gap:4px}
.po-pager{display:flex;align-items:center;justify-content:space-between;gap:8px}
.po-pager .po-small{align-self:auto}

/* ── Batch #32: the family board's self-review ──────────────────────────────── */
/* The dark card with a tick in the kicker, and a green one for "booked" and "cleared". */
.portal-card.po-dark .eyebrow{color:rgba(245,234,216,.75)}
.portal-card.po-dark small,.portal-card.po-dark .po-quiet{color:rgba(245,234,216,.7)}
.portal-card.po-dark.po-dark-green{background:#3B472C}
.po-tick{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:50%;
  background:rgba(255,255,255,.22);vertical-align:-3px;font-style:normal}
.po-tick::before{content:"\2713";font-size:10px;color:#fff}
.portal-card .po-h1,.portal-card h1{font-family:var(--font-heading);font-weight:var(--heading-weight,400);font-size:23px;line-height:1.15;margin:0}
.portal-card.po-dark .po-h1,.portal-card.po-dark h1{color:inherit}
.portal-card.po-dark .portal-secondary{color:inherit;border-color:rgba(255,255,255,.35)}
.portal-card.po-dark .portal-secondary:hover{background:rgba(255,255,255,.1)}
.po-tag.po-tag-dark{background:rgba(255,255,255,.16);color:inherit}
.po-amount{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.po-amount b{font-size:34px;font-weight:400;line-height:1}
.po-amount span{font-size:14px;color:rgba(245,234,216,.8)}
.po-rule-above{padding-top:10px!important;border-top:1px solid rgba(255,255,255,.18)}
.po-card-brand{display:flex;align-items:center;gap:12px;min-width:0}
.po-card-icon{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);position:relative}
.po-card-icon::before{content:"";position:absolute;left:11px;top:14px;width:18px;height:12px;border:1.5px solid #fff;border-radius:3px}
.po-card-icon::after{content:"";position:absolute;left:11px;top:18px;width:18px;height:2px;background:#fff}

/* Rows as light cards inside a card: the week's Mondays, the charges, the sessions. */
.po-rows.po-rows-cards{gap:6px!important}
.po-rows.po-rows-cards li{background:var(--po-light);border-radius:16px;padding:10px 14px;border-bottom:0;align-items:center}
.po-rows.po-rows-cards li > span:first-child strong{display:block}
.po-rows.po-rows-cards li > span:first-child small{display:block;font-size:12.5px}
.po-rows.po-rows-cards li > span:last-child small{display:block;font-weight:400;font-size:11.5px}
.po-rows.po-rows-cards li.po-shaded{background:transparent;box-shadow:inset 0 0 0 1px var(--po-divider)}
.po-rows.po-rows-cards li.po-outlined{box-shadow:inset 0 0 0 1.5px var(--green,#805838)}
.portal-card.po-thin{padding:12px 16px;border-radius:20px;background:var(--po-light);box-shadow:none;font-size:14.5px}
.portal-card.po-plain{background:transparent;box-shadow:none;padding:0}
.po-eyebrow-ink{color:var(--ink,#201E1D)!important}

/* The session tiles: theirs green, the others quiet. */
.po-session-tile{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:20px;background:var(--po-light)}
.po-session-tile.is-theirs{background:var(--po-ok-100);box-shadow:inset 0 0 0 1.5px var(--accent-2-500,#8DA075)}
.po-session-tile.is-off{opacity:.62}
.po-session-tile b{font-family:var(--font-heading);font-weight:400;font-size:20px;line-height:1}
.po-session-tile .po-row b{flex:none}
.po-session-tile .po-session-aud{flex:1;font-size:13.5px;color:var(--po-quiet)}
.po-session-tile > span,.po-session-tile > small{font-size:13px;color:var(--po-quiet)}
.po-session-tile .pg-why{margin:0;font-size:12.5px;line-height:1.45;color:var(--po-quiet)}

/* Quick replies and the round send. */
.po-quick .po-chip{font-weight:400;font-size:13.5px;background:var(--po-light);border:1px solid var(--po-divider);cursor:pointer;font-family:inherit}
.po-composer button.po-round{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--accent-800,#563c27);font-size:18px}

/* A chip that is a tick box: the tuckshop, the things to know about a dog. */
.po-chip.po-chip-pick{position:relative;cursor:pointer;font-weight:400;font-size:13.5px;background:var(--po-light);border:1px solid var(--po-divider)}
.po-chip.po-chip-pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.po-chip.po-chip-pick:has(input:checked){background:var(--accent-800,#563c27);color:var(--paper,#F5EAD8);border-color:transparent}
.po-chip.po-chip-pick:has(input:focus-visible){outline:2px solid var(--green,#805838);outline-offset:2px}
.po-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.po-three .po-tile{padding:10px 12px}
.po-three .po-tile-head{font-size:14px}
.po-field > label:first-child{display:block;font-size:12px;color:rgba(41,44,35,.7);margin:0 0 5px}
.po-field-label{display:block;font-size:12px;color:rgba(41,44,35,.7)}
.po-field-label input{display:block;width:100%;box-sizing:border-box;min-height:38px;margin-top:5px;padding:6px 14px;font:inherit;font-size:14px;
  color:var(--ink,#201E1D);background:var(--po-surface);border:1px solid var(--po-divider);border-radius:16px}
.portal-form .po-seg label{display:inline-flex;font-size:13px;color:inherit}
.portal-form .po-seg label input{position:absolute;opacity:0;width:1px;height:1px}

/* The round day toggles and the ladder rows on standing days. */
.po-slots.po-days label{flex:0 0 auto;width:54px;height:54px;padding:0;border-radius:50%;align-items:center;font-weight:600;font-size:13px}
.po-slots.po-days label:has(input:checked){background:var(--accent-800,#563c27)}
.po-ladder{display:flex;flex-direction:column;gap:6px}
.po-ladder > div{background:var(--po-light);border-radius:16px;padding:10px 14px;font-size:14px}
.po-ladder > div small{display:block;font-size:12.5px}
.po-ladder > div.is-current{background:var(--accent-100,#FFF3E9);box-shadow:inset 0 0 0 1.5px var(--green,#805838)}

/* db2's week rows: the range, the reason under it, the amount at the right. */
.check-row .po-week-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.check-row .po-week-body em{font-style:normal;font-size:12.5px;color:var(--po-quiet)}
.check-row .po-minus{flex:none;font-weight:600;font-size:14.5px}
.check-row.is-disabled{opacity:.5}
.po-total-line{font-family:var(--font-heading);font-size:18px}

/* ac1's rows as toggles. */
.portal-card.portal-pref-row{flex-direction:row;align-items:center;gap:14px;padding:14px 17px;border-radius:24px}
.portal-card.portal-pref-row > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.portal-card.portal-pref-row strong{font-size:15.5px;font-weight:600}
.portal-card.portal-pref-row span{font-size:13px;color:var(--po-quiet);line-height:1.45}
.portal-card.portal-pref-row .portal-always-on{flex:none;background:transparent;color:var(--po-quiet);font-size:13px;padding:0}
.po-switch{position:relative;flex:none;width:44px;height:26px;min-width:0;min-height:0;border-radius:999px;background:var(--neutral-300,#DBD3C6);
  transition:background .15s;cursor:pointer;display:block}
.po-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.po-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.po-switch:has(input:checked){background:var(--green,#805838)}
.po-switch:has(input:checked)::after{left:21px}
.po-switch:has(input:focus-visible){outline:2px solid var(--green,#805838);outline-offset:2px}
.portal-card .portal-held > div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--po-divider);font-size:14px}
.portal-card .portal-held dt{color:var(--po-quiet)}.portal-card .portal-held dd{margin:0;font-weight:600;text-align:right}
.portal-card ul.po-dots li{font-size:14px}

/* 25d as a page: three tiles across, the actions as a pair. */
.statement-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.statement-totals > div{display:flex;flex-direction:column;gap:2px;background:var(--po-light);border-radius:18px;padding:12px 14px}
.statement-totals > div:last-child{background:var(--accent-100,#FFF3E9)}
.statement-totals span{order:-1;font-size:12.5px;color:var(--po-quiet)}
.statement-totals b{font-size:24px;font-family:var(--font-heading);font-weight:400;line-height:1.1}
.statement-actions{align-items:center}
.statement-actions form{flex:1}
.statement-table th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--po-quiet);font-weight:400}

/* in1 and of1 centred. */
.po-door-centred{text-align:center;align-items:center}
.po-door-centred .portal-door-mark{margin:0 auto;background:var(--accent-2-500,#8DA075)}
.po-door-centred h1{font-size:26px}
.po-door-centred .portal-card{text-align:left}
.po-head-centred{justify-content:center;text-align:center;padding-top:20px}
.po-offline-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--po-light);margin:0 auto 10px;color:var(--po-quiet)}
.portal-card.po-row{flex-direction:row;align-items:center}
.portal-card.po-row .portal-note{flex:1}
.pg-line{font-size:14px;line-height:1.5}
/* Corrections from the first capture of batch #32. */
.portal-card > .po-session-tile{padding:12px 14px!important}
.po-rows.po-rows-cards li > span:first-child strong{text-align:left}
.po-rows.po-rows-cards li > span:last-child{max-width:46%}
.portal-form .po-slots.po-days label{display:flex;align-items:center;justify-content:center;color:inherit;font-size:13px;margin:0}
.po-slots.po-days label:has(input:checked){color:var(--paper,#F5EAD8)}
.po-centred.po-quiet{color:var(--po-quiet);font-size:12.5px}
.portal-card .po-tile{background:var(--po-light)}
.portal-card .po-tile:has(input:checked){background:var(--accent-100,#FFF3E9)}
.portal-card > .po-tile{padding:12px 14px!important}
.po-tile.is-off{opacity:.5;cursor:not-allowed}
.po-bars i b{min-width:6px}
.po-ticks li{display:block;position:relative;padding-left:20px}
.po-ticks li::before{position:absolute;left:0;top:0}

/* ── Batch #33 · 26a, ls1 and 12e ───────────────────────────────────────── */
.po-card-step h1{font-size:30px;line-height:1.08;margin:5px 0 0}
.po-held-by{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.po-lock{display:inline-block;width:10px;height:12px;border:1.5px solid currentColor;border-radius:3px;position:relative}
.po-lock::before{content:"";position:absolute;left:1px;top:-6px;width:5px;height:6px;border:1.5px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.po-squares-fields{margin:10px 0 8px;padding:12px;border:1.5px dashed rgba(41,44,35,.3);border-radius:16px;display:flex;flex-direction:column;gap:8px}
.po-squares-fields > small{font-size:11.5px;color:rgba(41,44,35,.6)}
.po-squares-fields .portal-form{display:flex;flex-direction:column;gap:8px}
.po-square-box{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:var(--paper,#F5EAD8);border:1px solid rgba(41,44,35,.14);font-size:14px;color:rgba(41,44,35,.5)}
.po-square-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.po-square-box .po-card-icon{width:22px;height:15px;border-radius:3px;background:rgba(41,44,35,.2)}
.po-check-consent{margin:2px 0}
.po-price-card .po-row{padding:6px 0}
.po-price-card .po-row span{font-size:13px;opacity:.85}
.po-struck{text-decoration:line-through;opacity:.7;font-weight:500}
.po-price-card .po-amount{font-size:24px;font-weight:600}
.po-price-card .po-rule-above{border-top:1px solid rgba(255,255,255,.2);padding-top:10px;margin:6px 0 0;font-size:13.5px}
.portal-card.po-outlined{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(41,44,35,.18)}
.po-kv{display:flex;flex-direction:column;margin:10px 0}
.po-kv > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(41,44,35,.1);font-size:13.5px}
.po-kv > div:first-child{border-top:0}
.po-kv span{color:rgba(41,44,35,.62)}
.po-centred.button-like{text-align:center}
.po-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-800,#563c27);color:var(--paper,#F5EAD8);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.portal-page-head .po-avatar{margin-left:auto}
.po-offer-card{display:flex;flex-direction:column;gap:10px}
.po-live{display:inline-flex;align-items:center;gap:7px}
.po-live i{width:8px;height:8px;border-radius:50%;background:var(--accent-300,#F3CBAD);display:inline-block}
.po-offer-card .po-h1{font-size:26px;line-height:1.1;margin:0;font-weight:500}
.po-offer-card p{margin:0;opacity:.9}
.po-countdown{display:flex;align-items:baseline;gap:8px;padding:6px 0 2px}
.po-countdown strong{font-size:30px;font-weight:600;line-height:1}
.po-countdown span{font-size:13px;opacity:.85}
.po-offer-card .portal-primary{background:var(--paper,#F5EAD8);color:var(--accent-800,#563c27)}
.po-offer-card .po-ghost{color:inherit;opacity:.9}
.po-wait-row{margin-bottom:8px}
.po-wait-row .po-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-500,#B98E6D);flex:none}
.po-wait-row > div{flex:1;min-width:0}
.po-wait-row .po-quiet{font-size:12.5px}
.po-chevron{font-size:20px;color:rgba(41,44,35,.4)}
.po-check-consent span{font-weight:400}

/* ── Batch #34 · the second self-review's family notes ─────────────────── */
.po-when{display:block;font-size:13px;margin-bottom:2px}
.po-lead{margin:0 0 4px;font-size:15.5px;line-height:1.5;padding:0 12px;text-align:center}
.portal-card.po-outlined-accent{box-shadow:inset 0 0 0 1.5px var(--accent-500,#B98E6D)}
.portal-card.po-outlined-sage{box-shadow:inset 0 0 0 1.5px var(--accent-2-500,#8DA075)}
.portal-card > label.po-check{display:flex}
.po-check-consent{background:var(--po-light,#EBDDC5)}
.po-offer-card .portal-primary{background:var(--accent-300,#F3CBAD);color:var(--accent-800,#563c27)}
.po-squares-fields{background:var(--accent-100,#FFF3E9);border-color:var(--accent-300,#F3CBAD)}
.po-squares-fields > .eyebrow{margin:0 0 2px}
.po-door-family .portal-door-mark{width:62px;height:62px;border-radius:22px}
.po-door-family h1{font-size:30px}
.po-door-family .portal-form,.po-door-family .portal-card{text-align:left}
.po-door-family .portal-form label{text-align:left}
.po-door-family .portal-door-new{border-top:0;padding-top:0;margin-top:4px}
.po-door-family .portal-door-new p{color:inherit;margin:0 0 10px}
.po-session-others{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}
.po-session-tile.is-off{opacity:.55;pointer-events:none}
.po-session-tile.is-off b{font-size:14px}
.po-dots li > span{flex:1;min-width:0}

/* batch #41 — the standing differs on the family board: the add-photo circle (10b), the
   certificate drop card (10c), the details card (dg1), the glance strip as bars (7d),
   the statement's foot (25d). */
.po-name-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:end}
.po-add-photo{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--po-divider);background:var(--po-light);font-size:11px;line-height:1.2;text-align:center;color:var(--po-quiet);cursor:pointer;margin:0 0 2px}
.po-add-photo input{position:absolute;opacity:0;width:1px;height:1px}
.po-add-photo span{display:block}
.po-add-photo span.is-picked{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center}
.po-drop{display:block;border:1.5px dashed var(--po-divider);border-radius:22px;padding:18px 16px;background:var(--po-light);cursor:pointer;margin:0}
.po-drop input{position:absolute;opacity:0;width:1px;height:1px}
.po-drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.po-drop-empty strong{font-size:15px}
.po-drop-empty small{font-size:12.5px;color:var(--po-quiet);line-height:1.45}
.po-drop-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--paper,#F5EAD8);font-size:20px;color:var(--green,#805838)}
.po-drop-choose{display:inline-flex;margin-top:6px;width:auto;padding:8px 18px}
.po-drop-picked{display:flex;flex-direction:column;gap:12px}
.po-drop-head{display:flex;align-items:center;gap:12px}
.po-drop-name{flex:1;min-width:0}
.po-drop-name strong{display:block;font-size:14.5px;word-break:break-word}
.po-drop-name small{display:block;font-size:12.5px;color:var(--po-quiet)}
.po-drop-preview{display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:16px;background:var(--po-divider);color:var(--po-quiet);font-size:13px;overflow:hidden}
.po-drop-preview img{max-width:100%;max-height:320px;display:block}
.po-drop-preview em{font-style:normal}
.po-details-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.po-details-head > div{flex:1;min-width:0}
.po-details-head b{display:block;font-size:16px}
.po-details-head small{display:block;font-size:13px;color:var(--po-quiet)}
.po-details .detail-list{margin-bottom:12px}
.po-block-link{display:flex;justify-content:center;text-align:center;text-decoration:none;margin:0 0 12px}
.rc-strip li{min-width:26px}
.rc-dot{width:22px;height:44px;border-radius:10px;border:0}
.portal-card.statement-foot{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;text-align:left}
.statement-foot > div{align-items:flex-start}
.statement-foot > div{display:flex;flex-direction:column;gap:2px}
.statement-foot b{font-size:14.5px}
.statement-foot span{font-size:12.5px;color:var(--po-quiet)}
.statement-foot strong{font-size:24px;font-family:var(--font-heading);font-weight:400}

/* Batch #43: db3's undo is one quiet line under Back to your week. */
.po-undo{display:flex;justify-content:center;margin-top:4px}
.po-undo .po-ghost{font:inherit;font-size:14px;border:0;cursor:pointer}
/* batch #46: a date said in words in front of the native field (clean_ui.js). */
.o-date-wrap{position:relative;display:block}
.o-date-wrap>.o-date-field{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.o-date-wrap>.o-date-said{position:relative;text-align:left;cursor:pointer}
.o-date-wrap>.o-date-said.is-empty{color:var(--po-quiet)}
/* db5: a row with only its words (a day we are shut has no tag) is both the first and
   the last span, and the last span's right-alignment pushed "we are closed" to the edge. */
.po-rows li > span:only-child{flex:1;text-align:left;font-weight:400;max-width:none}
/* of1: this week's days stacked - the day, then what and who. Side by side the day
   wrapped to two lines and the dogs' names were cut off after the first. */
#offline-bookings li{display:block}
#offline-bookings li span{white-space:normal;overflow:visible}
/* sp1: the form's labels are bold, and a tile and an extra are labels - so the line
   under each wash and every extra's name came out bold. design sets them regular. */
.portal-form .po-tile small,.po-tile small{font-weight:400}
.portal-form .po-check > span,.po-check > span{font-weight:400}
/* 24b: the agree row - a light card, a sentence at reading size, "full terms" underlined. */
.po-check.po-agree{background:var(--po-light);padding:14px 16px;font-size:14px;line-height:1.45;align-items:flex-start}
.po-check.po-agree::before{margin-top:1px}
.po-check.po-agree a{font-weight:700;text-decoration:underline;color:var(--accent-800,#563c27)}
.po-rows.po-rows-cards li > span:only-child{max-width:none}
/* A check row inside a portal form: the form's own "label{display:block}" outranked
   .po-check and the box drawn by ::before collapsed to nothing. */
.portal-form .po-check{display:flex;color:inherit}
.portal-form .po-check.po-agree{font-size:14px}

/* ── Batch #55: the type pass ────────────────────────────────────────────────
   design's portal buttons are 15px, 16px on the sign-up steps; its quiet lines in a
   card are 12.5px; the door's tagline 13.5px with room between the lines. */
.portal-primary,.button-like{font-size:16px}
.portal-secondary,.po-ghost{font-size:14px}
.portal-card p.po-quiet{font-size:12.5px}
.portal-door-tagline{font-size:13.5px;line-height:1.5}
.portal-signup .portal-primary,.po-card-step .portal-primary{min-height:50px}


/* ── Batch #57: the second type pass, the portal ──────────────────────────────
   A census with the drawing on its own page (the first pass had measured the build
   twice on every staff screen) found one thing under most of the portal's differences:
   the build never set a line-height on the portal body, so every line without a rule
   of its own sat at the browser's normal (about 1.2) where design's base is 1.55. The
   rest is a handful of components a half-size or a weight away from the drawing. */
body.portal-body{line-height:1.55}
.portal-main h1,.portal-main h2,.portal-main h3,.portal-main .po-h1{line-height:1.12}
.portal-page-head h1{line-height:1.12}
.rule-head h2{line-height:1.55}
/* Buttons: 14px in the cards, 16px only on the sign-up steps (10a–10d, 24b). */
.portal-primary,.button-like{font-size:14px}
.portal-signup .portal-primary,.po-card-step .portal-primary{font-size:16px}
/* Tags are regular weight on the drawing, at the body's leading. */
.portal-main .po-tag{font-weight:400;line-height:1.55}
.po-quick .po-chip{font-size:13px;line-height:1.55}
.po-seg label{font-weight:400}
.po-fold > summary.po-link{font-weight:400}
/* Rows and lists. */
.po-rows li{font-size:14px;line-height:1.55}
.po-dogrow b{font-size:14.5px}
.po-bars > div{font-size:13.5px}
.po-people li .po-quiet{font-size:14px}
.po-light .po-row > .po-quiet{font-size:13.5px}
.po-price-card .po-row > span{font-size:13.5px}
.po-choices-label > span:last-child{font-size:12.5px}
.po-light-row small{line-height:1.55}
.portal-card ol.po-numbered > li strong{font-weight:700}
.po-notes strong{font-weight:700}
.portal-card .portal-held > div{font-size:13.5px}
.portal-consequences li,.po-dots li{font-size:13px;line-height:1.55}
.portal-card.portal-pref-row strong{font-size:15px}
.portal-card.portal-pref-row .portal-always-on{font-size:12px;font-weight:600}
/* The sign-up door. */
.login-switch{font-size:13.5px}
.login-switch a{font-weight:600}
.check-row.signup-terms{font-size:13px}
.signup-terms a{font-weight:600}
.po-check.po-agree{font-size:13.5px}
.po-check.po-agree a{font-weight:600}
/* The statement's table head is design's table head everywhere: 11px, bold. */
.statement-table th{font-size:11px;font-weight:700;line-height:1.55}
/* The tuckshop tile's name is a card title on the drawing: the heading face, regular. */
.po-treat-name{font-family:var(--font-heading);font-weight:var(--heading-weight,400);font-size:15px;line-height:1.2}

/* ── Batch #73 · the owner's portal notes of 27 October ─────────────────────── */
/* 1a: the bookable cells are labels, and .portal-form label made them display:block — so
   their numbers sat at the top of the circle while the other cells were centred. */
.portal-form .po-cal label.po-cell,.po-cal .po-cell{display:grid;place-items:center;font-size:14px;line-height:1;margin:0;padding:0;color:var(--ink,#201E1D)}
.portal-form .po-cal label.po-cell.is-full{color:var(--neutral-400,#BFB6A8)}
.portal-form .po-cal label.po-cell:has(input:checked){color:var(--paper,#F5EAD8)}
/* ls3, db3: the tick and the heading as two things side by side, so a second line of
   heading does not run under the tick. */
.portal-card .po-h1:has(.po-tick){display:flex;align-items:flex-start;gap:10px}
.portal-card .po-h1 .po-tick{margin:5px 0 0}
.portal-card .po-h1 > span{min-width:0}
/* db1: a line a dog when the dogs are on different days. */
.po-lines{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.po-lines li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;line-height:1.4}
.po-lines li strong{flex:none;font-weight:600}
/* ls2: a row a dog in the picker. */
.po-dog-days{display:grid;gap:6px;padding:8px 0}
.po-dog-days + .po-dog-days{border-top:1px solid var(--po-divider,rgba(41,44,35,.1))}
.po-dog-name{font-weight:600;font-size:14px}
.po-rows li em{font-style:normal;color:var(--po-quiet)}
.po-ladder-rates{margin-top:12px;border-top:1px solid var(--po-divider,rgba(41,44,35,.1));padding-top:8px}
.po-ladder-rates .po-row{padding:7px 14px;font-size:13px}
.po-ladder-rates .po-row.is-current{font-weight:600}
/* The box and the dot are out of the flow, so the digit is the only thing the cell lays
   out — otherwise the two of them took grid rows of their own and pushed the digit up. */
.po-cal .po-cell{grid-template-rows:100%;grid-template-columns:100%}
.po-cal .po-cell > input,.po-cal .po-cell > .dot{position:absolute !important}
.po-cal .po-cell > .dot{left:50%;transform:translateX(-50%);bottom:5px}

/* ── Batch #75 · the owner's portal notes, second group ───────────────────── */
/* 7b, 7c: the photo sat over the caption. The frame is a grid whose one row was auto,
   so the picture's percentage height fell back to its natural size and ran past the
   frame. One row the height of the frame, and the frame clips. */
.po-photo{grid-template-rows:100%;grid-template-columns:100%;overflow:hidden}
.po-photo img{min-height:0;max-height:100%}
/* 7d: what the bars mean, said beside them. */
.po-bars > div > small{flex:none;font-size:12px;color:var(--po-quiet);min-width:86px;text-align:right}
.po-bars > div{align-items:center;gap:10px}
/* 7c: the one-line summary as its own block between the photo and the strip. */
.rc-inaline{padding:10px 0 12px;border-top:1px solid var(--po-divider,rgba(41,44,35,.1));border-bottom:1px solid var(--po-divider,rgba(41,44,35,.1));display:grid;gap:4px}
.rc-inaline .po-say{margin:0;font-size:17px;line-height:1.3}
/* 10b: the words in the add-photo circle centred on it; the size tiles' words centred too. */
.po-add-photo span{display:block;width:100%;text-align:center;line-height:1.15}
.po-three .po-tile,.portal-form .po-three label.po-tile{display:flex;flex-direction:column;align-items:center;text-align:center}
.po-three .po-tile small{text-align:center}

/* Batch #77 — the owner's board pass of 27 October, part one. */
/* db1, db3, ls2: a closed fold kept its flex gap for the content it was not showing, so
   the words sat high in the pill. Closed, there is nothing to leave a gap for. */
details.po-fold:not([open]){gap:0}
details.po-fold > summary.po-row{align-items:center;min-height:21px}
/* 7c: the two buttons under the card stack, so neither wraps off-centre on a phone. */
.portal-primary,.portal-secondary,.button-like,.po-ghost{text-align:center}
.rc-actions{flex-direction:column}
.rc-actions > *{width:100%}
/* 1a: a day the weekly payment already covers says so where the money would be. */
.po-rows li strong small{font-size:12px;font-weight:400;color:var(--po-muted,#6E5D4E);font-family:var(--font-body,inherit)}
/* 1c, 10e, 10i: the family's inbox as its own row, not a word beside the dogs' heading. */
.po-msgrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--po-surface);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;margin:0 0 12px}
.po-msgrow .po-av{flex:none}
.po-msgrow > div{flex:1;min-width:0;display:grid;gap:2px}
.po-msgrow b{font-family:var(--font-heading);font-weight:400;font-size:16px}
.po-msgrow small{color:var(--po-muted,#6E5D4E);font-size:12.5px}
.po-msgrow .po-count{flex:none;min-width:22px;height:22px;border-radius:11px;background:var(--green,#2F4F3A);color:var(--paper,#F5EAD8);font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}

/* Batch #78 — the owner's board pass, part two: the palette leftovers and the alignment notes. */
/* 10b: the form's label rule gave the add-photo circle a block layout with the hidden input
   in flow above the words, so they sat high. The circle is a flex box and nothing else. */
.portal-form label.po-add-photo{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:0;padding:0;line-height:1.15}
.portal-form label.po-add-photo input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
/* 16c: a button and a link in the same row of chips, the same height each. */
.po-quick .po-chip{min-height:38px;line-height:1.2;padding:8px 14px;font:inherit;font-size:13.5px}
/* of1: a card after a card breathes. */
.po-offline .portal-card + .portal-card{margin-top:12px}
/* lg1: the sign-up button centred in its card. */
.po-door-new .portal-secondary.po-small{margin:0 auto;display:inline-flex;width:auto;padding-inline:22px}
.po-door-new{text-align:center}
.po-door-new p{text-align:left}
/* ac2: the bereavement line is in a dashed card now, and the rule that gave it a top
   border drew a line through the card. */
.portal-card.po-dashed .portal-bereavement{border-top:0;padding-top:0;margin:0}
/* 1b: the unticked day tiles were white on a tinted card; a lighter wash of the same tint. */
.po-slots.po-days label:not(:has(input:checked)){background:color-mix(in srgb,var(--po-surface) 70%,#fff)}

/* Batch #80 — the owner's board pass, part four: the layout reworks. */
/* 1c: the certificate is a line of text in the flow, as design draws it. */
.po-cert-line{margin:4px 2px 6px;font-size:14.5px;line-height:1.5}
.po-cert-line strong{font-weight:600}
.po-cert-line a{color:var(--po-link);font-weight:500;white-space:nowrap}
.po-home-actions{margin-top:4px}
/* pg1: a session that is not theirs stays readable; it is told apart by tone, not by fading. */
.po-session-tile.is-off{opacity:1;pointer-events:none;background:color-mix(in srgb,var(--po-surface) 55%,#fff)}
.po-session-tile.is-off b{font-size:20px;color:var(--po-quiet)}
.po-session-tile.is-off .po-session-aud{color:var(--po-quiet)}
.pg-when h4,.pg-day h4{font-size:16px}
.pg-when{margin-top:4px}
/* pg2: the ticket - a tinted head band on the receipt, roomier rows, the treats two across. */
.pg-ticket{padding-top:0!important;overflow:hidden}
.pg-ticket-head{margin:0 -17px 6px;padding:14px 17px 12px;background:color-mix(in srgb,var(--po-surface) 70%,#fff);border-bottom:1px solid var(--po-divider,rgba(41,44,35,.1))}
.pg-bill li{padding:11px 0}
.pg-treats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-treats .po-chip{justify-content:center}
/* 26a: the card icon is one shape; the consent tick is the brand's brown; the skip line is a link. */
.po-square-box .po-card-icon::before,.po-square-box .po-card-icon::after{display:none;content:none}
.po-square-box span{color:var(--ink,#201E1D);font-variant-numeric:tabular-nums}
.po-square-box:has(span:only-child){color:var(--ink,#201E1D)}
.po-check-consent input{accent-color:var(--green,#805838);width:20px;height:20px;flex:none}
.po-check-consent{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px}
.po-card-step ~ .po-stack .po-link{text-decoration:underline}
.portal-primary:disabled{opacity:.55;cursor:default}
/* Batch #88 · the owner's family-board pass of 31 October. One rhythm between the
   bubbles on a family page: the page's own 16px gap between any two blocks, the margins the
   blocks carried on their own gone, and 16px under a form that wraps them, and
   a section's head 12px from its cards. (ls2: the rate rows take the ladder's padding
   again, so the copy sits inside the pill rather than on its edge.) */
.portal-main > *{margin-top:0;margin-bottom:0}
.portal-main > form > :not([type=hidden]) + :not([type=hidden]){margin-top:16px}
.portal-main > form > *{margin-bottom:0}
.portal-main > .po-cert-line{margin:0 2px}
.po-section,.po-stack{gap:12px}
.po-offline .portal-card + .portal-card{margin-top:16px}

/* Batch #90 · the owner's second family-board pass of 31 October. */
/* 10i — the tick and "Met & assessed" on one line, at one height. */
.portal-card .eyebrow:has(.po-tick){display:inline-flex;align-items:center;gap:7px}
.portal-card .eyebrow .po-tick{margin:0;vertical-align:middle}
/* ls2 — one rhythm inside "What it costs": the summary rows, the rate rows and the
   note each 12px apart, the rate rows padded like any ladder row. */
.po-ladder-rates{margin-top:12px;padding-top:12px;gap:8px}
.po-ladder-rates .po-row{padding:10px 14px;font-size:13.5px}
.po-ladder-rates + .muted{margin-top:12px!important;line-height:1.55}
/* of1 — the offline page keeps the portal's 16px between every bubble, including the
   two that hold the saved data, and the lines in a bubble sit 10px apart. */
.po-offline{display:flex;flex-direction:column;gap:16px}
.po-offline > #offline-content{display:contents}
.po-offline .portal-card + .portal-card{margin-top:0}
.po-offline .po-dots{display:flex;flex-direction:column;gap:8px}
.po-offline .po-dots li{font-size:14px;line-height:1.5}
/* pg2 — the dog's line in the ticket is a line, not a card of its own; the tuckshop
   pills are one height and as wide as their words. */
.pg-ticket-head{background:transparent;margin:0 0 6px;padding:0 0 12px}
.pg-treats{display:flex;flex-wrap:wrap;gap:8px}
.pg-treats .po-chip{white-space:nowrap;min-height:40px;padding:8px 16px;align-items:center}
/* wl1 — the offer's copy breathes; "Leave this one" is a pill at the foot of its bubble. */
.po-offer-terms p{line-height:1.6}
.po-offer-terms p + p{margin-top:10px!important}
.po-offer-terms .po-inline{margin-top:14px!important}
.po-wait-leave{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 16px;
  border-radius:999px;border:1px solid var(--po-divider);background:var(--po-light);color:var(--ink,#201E1D);
  font-family:var(--font-heading);font-size:13px;line-height:1.2;width:auto;cursor:pointer;margin-top:4px}
.po-wait-leave:hover{background:color-mix(in srgb,var(--ink,#201E1D) 7%,transparent)}

/* Batch #91 · the owner's third family pass of 31 October. */
/* ls2 — "Each week" sits centred between its lines, and the first rate pill stands
   12px clear of the line above it (the card strips a child's own padding-top). */
.po-rows li.po-total{padding:9px 0 8px}
.po-ladder-rates{margin-top:0;padding-top:0}
.po-ladder-rates > .po-row:first-child{margin-top:12px}
/* pg2 — the ticket keeps its padding at the top, so the dog's line sits inside the
   bubble, and the line is as far from the rows below as the rows are from each other. */
.pg-ticket{padding-top:15px!important}
.pg-ticket-head{margin:0;padding:0 0 11px}
/* wl1 — the offer's copy sits in from the top of the bubble; the two buttons are a
   pill and a word beside it, not two islands. */
.portal-card.po-offer-terms{padding:20px 17px 18px}
.po-offer-terms > .po-row{margin-bottom:2px!important}
.po-offer-terms .po-inline{margin-top:10px!important;gap:2px}
.po-offer-terms .po-ghost.po-fit{padding-inline:14px;min-height:40px}
/* The family's green cards take the warm tint the staff side now uses (10c, 10i, 1b, 1c,
   db1, db4): the suggested session, the add-on picked, the "worth knowing" card. */
.portal-card.po-ok{background:var(--accent-100,#FFF3E9)}
.portal-card.po-ok .eyebrow,.portal-card.po-ok p{color:var(--accent-800,#563c27)}
.po-session-tile.is-theirs{background:var(--accent-100,#FFF3E9);box-shadow:inset 0 0 0 1.5px var(--accent-600,#997151)}
.po-treat{background:var(--accent-100,#FFF3E9)}
/* pg4 — the suggestion's outline is the brown, not the green. */
.portal-card.po-outlined-sage{box-shadow:inset 0 0 0 1.5px var(--accent-600,#997151)}

/* Batch #95 — the owner's 3 November family notes */
.po-photo-body .po-row > .po-tag:first-child{flex:0 0 auto} /* 1c: the "In 8:17am" pill sized to its text */
.portal-form-grid > label,.portal-form-grid input{min-width:0;max-width:100%}
.portal-form-grid input[type=date]{width:100%;box-sizing:border-box} /* 10c: the date fields no longer push the page wide */
.po-halves > *,.po-halves > form{flex:1 1 0;min-width:0}
.po-halves > form > *{width:100%}
.po-halves .portal-secondary{text-align:center;justify-content:center}
.po-rows[data-priced] > li > span,.po-rows[data-priced] > li > strong,.po-rows[data-priced] > li em{font-size:15px;color:var(--ink,#201E1D);font-style:normal} /* ls2: one size for the lines */
.po-rows[data-priced] > li.po-total strong{font-size:15px}
.pg-bill li{padding:11px 0;display:flex;justify-content:space-between;align-items:center} /* pg2: the ticket's rows one rhythm */
.pg-ticket-head{padding-bottom:11px}
.po-offer-terms .po-row{margin-bottom:12px;align-items:flex-start} /* wl1 */
.po-offer-terms .po-row h2{margin-top:6px}
.po-offer-terms p{margin:0 0 10px}
.po-wait-leave{width:100%}
.portal-card.statement-foot{align-items:flex-start} /* 25d */
.statement-foot > div{display:flex;flex-direction:column;gap:4px}
.statement-foot > div > span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--po-quiet)}
.statement-foot > div > strong{font-size:24px;font-family:var(--font-heading);font-weight:400;line-height:1.1}
.statement-foot > div > small{font-size:12.5px;color:var(--po-quiet)}
.statement-foot-right{text-align:right;align-items:flex-end}
.statement-actions form{flex:1 1 0}

/* The credit build — 26b, 1b */
.po-credit .po-credit-figure{font-size:26px;font-family:var(--font-heading);font-weight:400}
.po-credit p{margin:6px 0 0}
/* 10c: the hidden file input no longer sits off the page's right edge */
.po-drop{position:relative;overflow:hidden}
.po-drop input{left:0;top:0;width:1px!important;height:1px!important;max-width:1px}

/* ── The portal on a laptop (batch #101, 3 November) ─────────────────────────
   One 442-wide column at every size left a laptop two-thirds empty: "squished into a
   phone column", the owner said. Above 960px the same cards, unchanged, flow into two
   columns of that width: the page head spans both, and everything else reads down the
   left column and on to the right. A card never splits across the gap. The door, the
   sign-up steps and a conversation stay one column, because a form is filled top to
   bottom and a chat is read in order. */
@media (min-width: 960px) {
  .portal-main { max-width: 964px; display: block; columns: 2; column-gap: 32px; column-fill: balance;
    padding: 36px 24px 48px !important; }
  .portal-main > * { break-inside: avoid; margin-bottom: 16px !important; }
  .portal-main > .portal-page-head, .portal-main > .po-home-head, .portal-main > .portal-alert,
  .portal-main > .page-message, .portal-main > h1, .portal-main > h2 { column-span: all; break-inside: auto; }
  .portal-main > .po-section, .portal-main > .po-stack, .portal-main > .portal-signup { break-inside: auto; display: block; }
  .portal-main > .po-section > *, .portal-main > .po-stack > *, .portal-main > .portal-signup > * { break-inside: avoid; margin-bottom: 12px; }
  .portal-main > .po-section > .po-section-head, .portal-main > .po-section-head { break-after: avoid; }
  /* A form is a run of cards too: the subscription page is one form from the day
     pickers to the button, and a laptop should not hold it to one column. */
  .portal-main > form { display: block; break-inside: auto; }
  .portal-main > form > * { break-inside: avoid; margin-bottom: 16px; }
  .portal-main .po-legend { break-before: avoid; }
  /* The calendar is four siblings (month head, day names, the grid, the legend) and a
     list of playgroup slots is one stack: neither reads split across the gap. */
  .portal-main .po-cal-head, .portal-main .po-cal-days { break-after: avoid; }
  .portal-main .po-cal { break-before: avoid; break-inside: avoid; }
  .portal-main > div.po-stack { break-inside: avoid; }
  .po-bar { position: static; }
  .portal-main:has(> .portal-door), .portal-main:has(> .portal-signup), .portal-main:has(.po-chat) { columns: 1; max-width: 600px; }
  .portal-main:has(> .portal-door) { max-width: 460px; }
}

/* The dog's details form inside "Edit his details" (3 November). */
.dog-details-form { margin-bottom: 16px; }
.po-radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.po-radios legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--po-muted, #6b6259); width: 100%; }
.po-radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.po-radios input { width: auto; margin: 0; }

/* The account page (3 November): its two-column grid sat inside the phone column, so
   the name fields were forty pixels wide on a laptop. One column in the phone column;
   on a laptop the page takes the full width and the three cards flow in two. */
.portal-main > .account-grid { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) {
  .portal-main:has(> .account-grid) { columns: 1; }
  .portal-main > .account-grid { display: block; columns: 2; column-gap: 32px; }
  .portal-main > .account-grid > * { break-inside: avoid; margin-bottom: 16px; }
}

/* The date-in-words button borrows .po-input, whose 76px floor is for a textarea; a
   date is one line (the owner, 3 November: "the pick a date bubble is huge"). */
.o-date-wrap > .o-date-said.po-input { min-height: 44px; }