/* The portal. Loads after site.css and reuses its tokens, buttons, fields and dialogs.
   A dashboard, built for a phone first: the tabs sit under the thumb, every list line opens in
   place, and one colour always means one thing.
   Order: tokens, page, sign-in, header and tabs, small parts, Home, lines, Calendar, Hours, the rest, motion. */

.portal {
  --bg: #f6efe4; --card: #fffdf9; --soft: 0 1px 2px rgb(59 40 28 / .06), 0 10px 24px -16px rgb(59 40 28 / .3);
  --k: #b9ae9f; --kt: var(--st-na);
  background: var(--bg) radial-gradient(60rem 30rem at 0 0, rgb(217 173 60 / .16), transparent 70%) no-repeat;
}
/* What each colour stands for: --k is the strong mark (a bar, a dot), --kt the tint behind a word. */
[data-kind="visit"] { --k: #63a44c; --kt: var(--st-open); }
[data-kind="wait"] { --k: #d9a520; --kt: var(--st-part); }
[data-kind="block"] { --k: #8f73cc; --kt: var(--st-booked); }
[data-kind="closed"] { --k: #d6594d; --kt: var(--st-closed); }
[data-kind="gone"], [data-kind="off"] { --k: #b9ae9f; --kt: var(--st-na); }
[data-kind="now"] { --k: var(--ink); --kt: var(--ink); }

html:has(.portal) { scroll-padding-block: 84px 120px; }   /* the tab bar never hides what the keyboard lands on */
.portal__wrap { max-width: 1160px; padding-block: calc(16px + env(safe-area-inset-top)) calc(128px + env(safe-area-inset-bottom)); }
/* Opened from the home screen (portal.js adds is-app), the phone softens whatever sits right
   under its status bar: start a little lower. */
.is-app .portal__wrap { padding-top: calc(36px + env(safe-area-inset-top)); }
.portal h2 { font-size: 22px; }
.portal h3 { font-size: 19px; }
.muted { color: var(--ink-soft); font-size: 15px; }
.stack { display: grid; gap: 10px; }
#panel { display: grid; gap: 14px; }
#panel:focus { outline: none; }
.narrow { display: grid; gap: 12px; width: 100%; max-width: 720px; margin-inline: auto; }
.ic { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ic { width: 18px; height: 18px; margin: 0 6px 0 -4px; stroke-width: 2.4; }

/* sign-in */
.signin { display: grid; gap: 16px; justify-items: stretch; max-width: 420px; margin: clamp(24px, 8vh, 80px) auto 0; padding: 28px; border: 0; border-radius: 26px; box-shadow: var(--lift); }
.signin .logo { justify-self: center; }
.signin__title { font: 700 30px/1.1 var(--display); letter-spacing: -.03em; text-align: center; }

/* header */
.top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.top .logo { width: 44px; height: 44px; }
.top__id { flex: 1; min-width: 0; }
.top__title { font: 700 clamp(20px, 5.4vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.top .muted { font-size: 14px; }
.top .btn { min-height: 44px; padding: 6px 14px; }

/* tabs: a dark bar under the thumb on a phone, a floating bar at the top on a wide screen.
   On a phone it is shaped like the phone's own tab bar: a full pill that follows the curve of
   the screen's corners and sits just above the home bar, also when the portal is opened from
   the home screen (--tab-b is how far it floats off the bottom edge). */
.portal { --tab-b: max(12px, calc(env(safe-area-inset-bottom) - 10px)); }
.tabs { position: fixed; z-index: 12; inset: auto max(26px, env(safe-area-inset-right)) var(--tab-b) max(26px, env(safe-area-inset-left)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 5px; border-radius: 36px; background: rgb(59 40 28 / .94); box-shadow: 0 14px 34px -10px rgb(59 40 28 / .55); }
.tabs button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 31px; background: none; color: rgb(255 253 249 / .78); font: 700 11.5px/1.1 var(--body); cursor: pointer; transition: color .25s ease; }
.tabs button:hover { color: var(--milk); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button:focus-visible { outline: 3px solid var(--milk); outline-offset: -3px; }
.tabs__ink { position: absolute; left: 0; top: 0; border-radius: 31px; background: var(--honey); pointer-events: none; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--honey); color: var(--ink); font: 700 12.5px/1 var(--body); font-variant-numeric: tabular-nums; }
.count--soft { background: var(--st-na); }
.tabs .count { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 19px; height: 19px; background: #e2574a; color: #fff; box-shadow: 0 0 0 2px var(--ink); font-size: 11.5px; }
h2 .count, summary .count { margin-left: 8px; vertical-align: 3px; }
@media (min-width: 900px) {
  .portal__wrap { padding-bottom: 96px; }
  .portal { --tab-b: 0px; }
  .tabs { position: sticky; inset: 14px auto auto; display: flex; gap: 2px; width: fit-content; margin: 0 auto 8px; border-radius: var(--r-pill); }
  .tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); font-size: 15px; }
  .tabs__ink { border-radius: var(--r-pill); }
  .tabs .count { position: static; box-shadow: none; }
}

/* the message at the foot of the screen, and the waiting bar beside it */
.dock { position: fixed; z-index: 13; left: 50%; bottom: calc(var(--tab-b) + 78px); display: grid; gap: 8px; width: min(100% - 24px, 460px); translate: -50% 0; pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock .note { margin: 0; box-shadow: var(--lift); cursor: pointer; }
.dock .note:focus-visible { outline-offset: 2px; }
.dock .wait { max-width: none; margin: 0; padding: 36px 14px 12px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--lift); }
.dock .wait__fly { inset: 12px 31px auto; }
@media (min-width: 900px) { .dock { bottom: 24px; } }

/* small parts */
.h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; }
.h:first-child { margin-top: 0; }
.portal .card { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--card); box-shadow: var(--soft); }
.portal .card.tint--yellow { background: var(--yellow); }
.empty { display: grid; gap: 14px; padding: 22px 18px; border: 1.5px dashed rgb(59 40 28 / .22); border-radius: 18px; color: var(--ink-soft); text-align: center; }
.calm { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--green); font-weight: 600; }
.calm .ic { stroke-width: 2.4; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.when { font: 700 18px/1.3 var(--display); letter-spacing: -.02em; }
.who { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); background: var(--st-na); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
[data-s="0"] { --s: #e58aa6; }
[data-s="1"] { --s: #6a9fd0; }
[data-s="2"] { --s: #7db266; }
[data-s="3"] { --s: #d9ad3c; }
.who[data-s="0"] { background: var(--pink); }
.who[data-s="1"] { background: var(--blue); }
.who[data-s="2"] { background: var(--green); }
.who[data-s="3"] { background: var(--yellow); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; background: var(--kt); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.tag[data-kind="now"] { color: var(--milk); }
.tag[data-kind="now"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-soft); }
.key li { display: inline-flex; align-items: center; gap: 6px; }
.key i, .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.dots { display: flex; justify-content: center; gap: 3px; min-height: 7px; }
.dots i { width: 7px; height: 7px; }
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; gap: 2px 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 620px) { .facts > div { grid-template-columns: 140px 1fr; } }
.review-body { white-space: pre-line; overflow-wrap: anywhere; }
.plain-list { display: grid; gap: 4px; padding-left: 18px; list-style: disc; }

/* a part that opens in place */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.fold[data-open] { grid-template-rows: 1fr; }
.fold__in { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s .5s; }
.fold[data-open] > .fold__in { visibility: visible; opacity: 1; transition: opacity .4s ease .1s, visibility 0s; }
.fold__pad { display: grid; gap: 12px; padding-top: 12px; }
.ic--chev { color: var(--ink-soft); transition: rotate .45s var(--ease); }
[aria-expanded="true"] > .ic--chev, details[open] > summary .ic--chev { rotate: 180deg; }

/* the sitter switch */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgb(59 40 28 / .08); }
.seg button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
.seg button[data-s]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--s); }
.seg button:hover:not([aria-pressed="true"]) { background: rgb(59 40 28 / .08); }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: var(--soft); }

/* ---------- Home ---------- */

.home { display: grid; gap: 22px; }
.home__side, .home__main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.home__side > section { display: grid; gap: 12px; }
.queue:focus { outline: none; }
@media (min-width: 1000px) {
  .home { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "tiles tiles" "main side"; gap: 28px 32px; }
  .tiles { grid-area: tiles; }
  .home__main { grid-area: main; }
  .home__side { grid-area: side; position: sticky; top: 84px; align-self: start; }
}

/* the three numbers at the top */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 16px; border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--soft); color: var(--ink); font: inherit; text-align: left; overflow: hidden; isolation: isolate; }
button.tile { cursor: pointer; transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
button.tile:active { scale: .98; }
.tile::before, .req::before, .quick__b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(217 173 60 / .3), transparent 65%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.tile__label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.tile__big { font: 700 clamp(28px, 7.5vw, 40px)/1.05 var(--display); letter-spacing: -.04em; }
.tile__num { font-variant-numeric: tabular-nums; }
.tile__sub { font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }
.tile[data-tone="next"] { grid-column: 1 / -1; padding: 20px; background: var(--ink); color: var(--milk); }
.tile[data-tone="next"] .tile__label, .tile[data-tone="next"] .tile__sub { color: rgb(255 253 249 / .8); }
.tile[data-tone="next"]::after { content: ""; position: absolute; z-index: -2; right: -70px; top: -90px; width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(217 173 60 / .55), transparent); }
.tile[data-tone="wait"] { background: var(--yellow); }
.bars { display: flex; align-items: end; gap: 5px; margin-top: 10px; }
.bars > span { display: grid; justify-items: center; gap: 3px; flex: 1; max-width: 16px; font: 700 10px/1 var(--body); color: var(--ink-soft); }
.bars i { width: 100%; height: 40px; border-radius: 4px; background: var(--ink); transform-origin: bottom; scale: 1 var(--h, .06); }
.bars i.is-none { background: rgb(59 40 28 / .18); }
.bars i.is-today { background: var(--honey); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (min-width: 760px) {
  .tiles { grid-template-columns: 1.5fr 1fr 1.25fr; gap: 14px; }
  .tile { padding: 22px; }
  .tile[data-tone="next"] { grid-column: auto; padding: 22px; }
  .tile[data-tone="week"] { grid-template-columns: 1fr auto; column-gap: 16px; }
  .tile[data-tone="week"] > :not(.bars) { grid-column: 1; }
  .bars { grid-column: 2; grid-row: 1 / span 3; align-self: end; gap: 6px; margin: 0; }
  .bars > span { flex: none; width: 12px; }
  .bars i { height: 58px; }
}

/* the quick things */
.quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.quick__b { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 92px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--soft); color: var(--ink); font: 700 14px/1.2 var(--body); cursor: pointer; overflow: hidden; isolation: isolate; transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.quick__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--yellow); transition: rotate .5s var(--spring), scale .5s var(--spring); }
.quick__b.is-main .quick__ic { background: var(--honey); }
.quick__b:active { scale: .97; }

/* a request waiting for an answer */
.req { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: #fff8e6; box-shadow: inset 0 0 0 1.5px var(--honey), var(--soft); overflow: hidden; isolation: isolate; }
.req:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.req__top { display: flex; align-items: center; gap: 14px; }
.req__id { display: grid; gap: 3px; min-width: 0; }
.req__when { font-weight: 600; }
.leaf { flex: none; display: grid; justify-items: center; width: 58px; padding-bottom: 5px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1.5px var(--ink); overflow: hidden; font: 700 11.5px/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.leaf span:first-child { width: 100%; padding: 3px 0; background: var(--ink); color: var(--milk); text-align: center; }
.leaf b { font: 700 24px/1.15 var(--display); letter-spacing: -.03em; }
.leaf span:last-child { color: var(--ink-soft); }
.req .btn-row { gap: 8px 10px; }

/* the next seven days */
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.strip__d { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 72px; padding: 6px 0; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--soft); color: var(--ink); font: 600 12px/1.1 var(--body); cursor: pointer; transition: background-color .25s ease, color .25s ease, translate .3s var(--ease); }
.strip__d b { font: 700 20px/1.1 var(--display); letter-spacing: -.03em; }
.strip__d.is-today { box-shadow: inset 0 0 0 2px var(--honey), var(--soft); }
.strip__d[aria-pressed="true"] { background: var(--ink); color: var(--milk); box-shadow: none; }
.strip__d[aria-pressed="true"] .dots i { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px rgb(255 253 249 / .5); }
@media (min-width: 620px) { .strip { gap: 8px; } .strip__d { font-size: 13px; } }

/* ---------- a line: a visit, a blocked time, a closed day, a family ---------- */

.dayg { display: grid; gap: 8px; }
.dayg__h { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.dayg__h b { font-size: 18px; }
.dayg__h span { font: 600 14px/1 var(--body); letter-spacing: 0; color: var(--ink-soft); }
.row { position: relative; padding: 0 14px 0 19px; border-radius: 16px; background: var(--card); box-shadow: var(--soft); overflow: hidden; }
.row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--k); transform-origin: left; transition: scale .35s var(--ease); }
.row--plain { padding-left: 14px; }
.row--plain::before { content: none; }
.row__main { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 11px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.row__main { cursor: pointer; }
button.row__main:focus-visible { outline-offset: 4px; border-radius: 8px; }
.row--plain .row__main { grid-template-columns: auto minmax(0, 1fr) auto; }
.row__time { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.row__time b { font-size: 15px; line-height: 1.25; }
.row__time span { font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
.row__body { display: grid; gap: 4px; min-width: 0; }
.row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.row__title { font: 700 16.5px/1.25 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.row__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.row .fold__pad { padding: 0 0 16px; }
.face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--pink); font: 700 18px/1 var(--display); }
.more { justify-self: start; }
.past { margin-top: 10px; }
.past summary { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font: 700 18px/1.2 var(--display); letter-spacing: -.02em; list-style: none; cursor: pointer; }
.past summary::-webkit-details-marker { display: none; }
.past summary .ic { margin-left: auto; }
.past .stack { padding-top: 6px; }
.search input { min-height: 52px; border: 0; border-radius: 16px; box-shadow: var(--soft); }

/* ---------- Calendar ---------- */

.split { display: grid; gap: 22px; }
.split__a, .split__b { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__a { position: sticky; top: 84px; }
  .split--even .split__a { position: static; }
}
.portal .cal { padding: 16px; border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--soft); }
.portal .cal .key { margin-top: 14px; }
.portal .pday { display: grid; align-content: center; gap: 4px; background: var(--bg); }
.portal .pday.is-today .dots { padding: 0; border: 0; }
.pday.is-today { box-shadow: inset 0 0 0 2px var(--honey); }
.pday.is-past { opacity: .5; }
.pday[data-rest="off"] { background: none; color: rgb(59 40 28 / .5); font-weight: 500; }
.pday[data-rest="closed"] { background: repeating-linear-gradient(135deg, var(--st-closed) 0 5px, #f7cdc8 5px 10px); }
.portal .pday[aria-pressed="true"] { background: var(--ink); color: var(--milk); box-shadow: none; opacity: 1; }
.pday[aria-pressed="true"] .dots i { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px rgb(255 253 249 / .5); }
.key i[data-kind="off"] { background: none; box-shadow: inset 0 0 0 1.5px var(--k); }
.key i[data-kind="closed"] { border-radius: 3px; }
@media (min-width: 620px) { .portal .day { aspect-ratio: auto; height: 62px; } }
.shifts { display: grid; gap: 6px; }
.shifts li { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- Hours ---------- */

.hrow { display: grid; grid-template-columns: 92px 1fr 104px; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.hrow:first-child { border-top: 0; padding-top: 0; }
.hbar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--st-na); overflow: hidden; }
.hbar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: var(--r-pill); background: var(--honey); transform-origin: left; translate: calc(var(--a, 0) * 100%) 0; scale: var(--w, 0) 1; transition: translate .5s var(--ease), scale .5s var(--ease), opacity .3s ease; }
.hrow.is-shut .hbar i { opacity: 0; }
.times { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.times input[type="time"], .inline input, .inline select { min-height: 46px; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: var(--r-input); background: var(--milk); color: var(--ink); font-size: 16px; }
.times input:disabled, .inline input:disabled { border-color: var(--line); color: var(--ink-soft); background: var(--st-na); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 600; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__t { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--r-pill); background: var(--st-open); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .25s ease; }
.switch__t::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); translate: 18px 0; transition: translate .4s var(--spring); }
.switch input:checked + .switch__t { background: var(--st-closed); }
.switch input:checked + .switch__t::after { translate: 0 0; }
.switch input:focus-visible + .switch__t { outline: 3px solid var(--ink); outline-offset: 3px; }
.hours__save { padding-top: 14px; border-top: 1px solid var(--line); }
.unsaved { font-size: 14px; font-weight: 700; color: var(--bad); opacity: 0; transition: opacity .3s ease; }
.hours.is-dirty .unsaved { opacity: 1; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }

/* A portal popup on a phone: start and end sit side by side, and the buttons stay in reach at
   the foot of the popup however long the form is. */
#portal-dialog .form__row:has(input[type="time"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#portal-dialog .sheet__in > .btn-row { position: sticky; bottom: 0; z-index: 1; margin: 0 -6px -10px; padding: 14px 6px 10px; background: linear-gradient(rgb(255 253 249 / 0), var(--milk) 26%); }
.times input[type="time"] { flex: 1 1 108px; }

#portal-dialog-title:focus { outline: none; }

/* the children inside the edit popup */
.kids { display: grid; gap: 12px; }
.kids:empty { display: none; }
.kid { display: grid; gap: 12px; margin: 0; padding: 14px; border: 0; border-radius: 16px; background: var(--bg); }
.kid legend { float: left; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; font: 700 16px/1.2 var(--display); }
.kid legend + * { clear: both; }

/* closed days and the small add forms */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 0 0 14px; border-radius: var(--r-pill); background: var(--st-closed); font-size: 15px; font-weight: 600; }
.chip:not(:has(button)) { padding-right: 14px; }
.chip button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.chip button:hover { background: rgb(59 40 28 / .12); }
.inline { display: grid; gap: 12px; align-items: end; }
.inline .field input, .inline .field select { width: 100%; }
@media (min-width: 620px) { .inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* ---------- motion: hover answers, and the arrival of a screen ---------- */

@media (hover: hover) {
  button.tile:hover, .quick__b:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgb(59 40 28 / .06), 0 22px 36px -18px rgb(59 40 28 / .45); }
  .tile:hover::before, .req:hover::before, .quick__b:hover::before { opacity: 1; }
  .quick__b:hover .quick__ic { rotate: -8deg; scale: 1.1; }
  .quick__b.is-main:hover .quick__ic { rotate: 90deg; }
  .row:has(button.row__main:hover)::before { scale: 1.7 1; }
  .strip__d:hover:not([aria-pressed="true"]) { translate: 0 -3px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes p-grow { from { scale: 1 0; } }
  @keyframes p-drift { 50% { translate: -40px 30px; scale: 1.15; } }
  @keyframes p-ping { 0% { box-shadow: 0 0 0 0 rgb(217 173 60 / .8); } 100% { box-shadow: 0 0 0 9px rgb(217 173 60 / 0); } }
  @keyframes p-in { from { opacity: 0; translate: 0 22px; scale: .98; } }

  .tabs__ink { transition: translate .55s var(--spring), width .4s var(--ease), height .4s var(--ease); }
  .count.is-new { animation: hc-press .5s var(--spring); }
  .tile[data-tone="next"]::after { animation: p-drift 14s ease-in-out infinite; }
  .tag[data-kind="now"]::before { animation: p-ping 1.6s ease-out infinite; }
  .strip__d[aria-pressed="true"], .seg button[aria-pressed="true"] { animation: hc-press .4s var(--spring); }

  .signin { animation: p-in .8s var(--ease) backwards; }
  .signin .logo { animation: hc-pop .9s var(--spring) .15s backwards, hc-float 7s ease-in-out 1.2s infinite; }
  #app:not([hidden]) .top { animation: hc-fade .6s ease backwards; }
  #app:not([hidden]) .tabs { animation: p-in .7s var(--ease) .1s backwards; }

  /* a screen shown for the first time: its parts come in one after another */
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > * { animation: p-in .7s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 55ms + var(--late, 0ms)); }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(2) { --n: 1; }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(3) { --n: 2; }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(4) { --n: 3; }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(5) { --n: 4; }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(6) { --n: 5; }
  .is-arriving :is(.tiles, .home__side, .home__main, .split__a, .split__b, .narrow) > :nth-child(n + 7) { --n: 6; }
  .is-arriving :is(.home__side, .split__b) { --late: 120ms; }
  .is-arriving .home__main { --late: 200ms; }
  .is-arriving .bars i { animation: p-grow .9s var(--spring) backwards; animation-delay: calc(.35s + var(--i, 0) * 55ms); }
  .is-arriving .strip__d { animation: p-in .6s var(--ease) backwards; }
  .is-arriving .strip__d:nth-child(2) { animation-delay: 40ms; } .is-arriving .strip__d:nth-child(3) { animation-delay: 80ms; }
  .is-arriving .strip__d:nth-child(4) { animation-delay: 120ms; } .is-arriving .strip__d:nth-child(5) { animation-delay: 160ms; }
  .is-arriving .strip__d:nth-child(6) { animation-delay: 200ms; } .is-arriving .strip__d:nth-child(7) { animation-delay: 240ms; }
}