/* Calsetti, in the apolyo style: deep blue space with fibers of light, an action circle in the middle
   and the circles that belong to it packed round it. The search pill along the top, the family assistant
   along the bottom. Forms open in sheets over the circles. */

:root {
  --bg-deep: #010420;
  --bg-mid: #030c3a;
  --bg-glow: #07185e;
  --ink: #eaf3ff;
  --muted: #8ea6cf;
  --faint: #5d76a3;
  --line: rgba(120, 190, 255, 0.18);
  --line-strong: rgba(120, 190, 255, 0.34);
  --glass: rgba(14, 30, 86, 0.72);
  --cyan: #6fd4ff;
  --blue: #3f7dff;
  --gold: #f2c45a;
  --danger: #ff7a85;
  --pill: #152a4f;
  --ease: cubic-bezier(.2, .85, .25, 1);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(ellipse 85% 75% at 60% 45%, var(--bg-glow) 0%, var(--bg-mid) 42%, var(--bg-deep) 100%) fixed, var(--bg-deep);
  color: var(--ink);
  font: 500 15px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
svg { width: 20px; height: 20px; flex: none; }
svg.flat { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; }
[hidden] { display: none !important; }
.is-bare .topbar, .is-welcome .topbar { display: none; }

/* ---------- Top bar: Back, and the navy search pill with the account circle at its end ---------- */
.topbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 0; }
.back {
  position: fixed; z-index: 31; top: calc(20px + env(safe-area-inset-top)); left: 16px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.82); color: #000;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.08);
}
.back svg { width: 26px; height: 26px; }
.back svg path { stroke: currentColor; stroke-width: 6; }
.search {
  position: fixed; z-index: 31; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; height: 56px;
  display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 28px; background: #152a4f;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: left .25s var(--ease);
}
.has-back .search { left: 70px; }   /* room for Back */
/* on wide screens the pill is a calm, centred bar rather than running edge to edge */
@media (min-width: 900px) { .search, .has-back .search { left: 50%; right: auto; width: 640px; transform: translateX(-50%); } }
.search > svg { width: 24px; height: 24px; color: #fff; }
.search__home { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 2px; border-radius: 50%; color: #fff; }
.search__home svg { width: 24px; height: 24px; }
.search__home:hover { background: rgba(255, 255, 255, 0.1); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font-size: 17px; outline: none; -webkit-user-select: text; user-select: text; }
.search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.search input::-webkit-search-cancel-button { filter: invert(1); }
.search__mic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.search__mic svg { width: 24px; height: 24px; }
.search__mic:hover { background: rgba(255, 255, 255, 0.1); }
.account {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff;
}
.account svg { width: 24px; height: 24px; }
.account:hover { background: rgba(255, 255, 255, 0.1); }
.is-listening { color: #ff8a98 !important; animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { opacity: .45; } }

/* ---------- The circles ---------- */
/* #labels is the page's native scroller; everything that scrolls (the action circle, the circles, the
   fibers) lives inside it, in #world, which is scaled by --ps on screens bigger than a phone. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
input, textarea { -webkit-user-select: text; user-select: text; }
.labels {
  position: fixed; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.labels::-webkit-scrollbar { display: none; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.spacer { width: 1px; pointer-events: none; }
.is-bare .labels { display: none; }
.bare:empty { display: none; }
#flow { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }

/* The action circle: the centre's picture, in the middle of the first screenful */
/* Styled like every other circle: glass with a thin outline, its content in white; no glow of its own */
.action-circle {
  position: absolute; z-index: 2; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: rgba(63, 125, 255, 0.07); border: 1px solid rgba(120, 190, 255, 0.22);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.action__art { display: grid; place-items: center; width: 100%; height: 100%; font-size: 64px; color: #fff; }
.action__art > .art { width: 100%; height: 100%; }
.action-circle .date-face { font-size: 76px; margin-top: -16px; }
.action-circle .date-face__wx { font-size: 14px; bottom: 14px; }
/* The home screen's date: a tear-off calendar page */
.cal-page { position: relative; display: grid; grid-template-rows: 40px 1fr auto; grid-template-columns: minmax(0, 1fr); width: 118px; min-width: 118px; height: 138px; margin-top: -8px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(160, 210, 255, 0.4); }   /* see-through, the fibers showing behind it */
.cal-page__month { border-radius: 15px 15px 0 0; background: rgba(63, 125, 255, 0.28); border-bottom: 1px solid rgba(160, 210, 255, 0.3); color: #fff; font-size: 20px; font-weight: 800; line-height: 30px; padding-top: 4px;
  letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.cal-page__day { display: grid; place-items: center; padding-top: 2px; color: #fff; text-shadow: 0 2px 12px rgba(3, 12, 58, 0.6); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.cal-num { display: inline-flex; }
.cal-page__foot { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0; padding: 0 5px 7px; }
.cal-arrow { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.1); }
.action-circle .art .cal-arrow svg { width: 11px; height: 11px; }   /* not the big date's icon size */
.action-circle .art .cal-arrow svg path { stroke: currentColor; stroke-width: 10; }
.cal-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.cal-arrow:active { transform: scale(.9); }
.cal-page__weekday { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; text-align: center; font-size: 9px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: rgba(230, 243, 255, 0.85); }
.member-face { display: grid; justify-items: center; line-height: 1; gap: 12px; margin-top: 14px; }
.member-face small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.action-circle:active { filter: brightness(1.15); }
/* On a person's screens the centre takes their color too */
.action-circle.is-plain { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.action-circle.is-tinted { background: color-mix(in srgb, var(--c) 80%, #0a1c5b); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* "Back to today": a small circle under the centre's name. It and the ‹ › sit above the name's wide box, so taps reach them */
.day-today {
  position: absolute; z-index: 5; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 2px;
  width: 58px; height: 58px; border-radius: 50%; color: #fff; line-height: 1;
  background: rgba(63, 125, 255, 0.12); border: 1px solid rgba(120, 190, 255, 0.35); box-shadow: 0 0 16px rgba(63, 125, 255, 0.35);
}
.day-today b { font-size: 20px; font-weight: 700; }
.day-today small { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(230, 243, 255, 0.8); }
.day-today:hover { background: rgba(63, 125, 255, 0.28); }
.day-today:active { transform: translate(-50%, -50%) scale(.96); }
.day-arrow {
  position: absolute; z-index: 5; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: rgba(63, 125, 255, 0.12); border: 1px solid rgba(120, 190, 255, 0.22);
}
.day-arrow svg { width: 16px; height: 16px; }
.day-arrow svg path { stroke: currentColor; stroke-width: 8; }
.day-arrow:hover { background: rgba(63, 125, 255, 0.28); }
.day-arrow:active { transform: translate(-50%, -50%) scale(.92); }

/* A picture made from a color: the light falls from the top left */
.art {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff;
  background: transparent;
}
.art svg.flat { color: #fff !important; width: 1em; height: 1em; }
.art svg:not(.flat) { width: .9em; height: .9em; }
.letter { font-weight: 600; letter-spacing: -0.02em; }
.count { font-weight: 300; font-size: .62em; letter-spacing: -0.03em; }

/* Every circle: positioned by the frame loop, never by CSS transitions */
.node {
  position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 2px;
  border-radius: 50%; text-align: center; color: #fff; cursor: pointer; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.node:active { filter: brightness(1.2); }
.node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.node.is-leaving { pointer-events: none; }
.node.is-carried { z-index: 6; filter: brightness(1.25); }

/* The centre: its name under the action circle */
.node.is-center { z-index: 3; width: 220px; border-radius: 0; display: grid; place-content: start center; gap: 3px; padding: 0; cursor: pointer; }
.node.is-center .node__name { font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.node.is-center .node__meta { font-size: 12px; color: var(--muted); white-space: normal; }

/* Glass: somewhere to go. No fill, a hairline, the name inside */
.node.look-glass, .node.look-counted { border: 1px solid rgba(120, 190, 255, 0.18); background: rgba(63, 125, 255, 0.12); padding: 10px; }
.node__name { font-size: 13px; font-weight: 500; line-height: 1.2; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.node__meta { font-size: 10.5px; font-weight: 500; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node__icon { font-size: 22px; line-height: 1; margin-bottom: 2px; color: #fff; }
.node__icon svg { width: 1em; height: 1em; }
.node svg.flat { color: #fff !important; }

/* White: something to read or do */
.node.look-pale { background: #fff; color: #111; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); padding: 12px; }
.node.look-pale .node__name { color: #111; }
.node.look-pale .node__meta { color: #667; }
.node.look-pale .node__icon { font-size: 26px; margin-bottom: 0; }
.node.look-pale svg.flat { color: #1c4f9c !important; }
.node.look-pale .node__icon svg:not(.flat) { color: #1c4f9c; }
.node__fact { font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #557; }
/* ticked: the circle dims to a quarter, its name and tick in white */
.node.look-pale.is-done { background: rgba(255, 255, 255, 0.25); box-shadow: none; }
.node.look-pale.is-done .node__name, .node.look-pale.is-done .node__meta { color: #fff; }
.node.look-pale.is-done .node__check { background: rgba(255, 255, 255, 0.25); color: #fff; box-shadow: none; }
.node.is-empty .node__name { color: var(--muted); }
.node.look-pale.is-done .node__name { text-decoration: line-through; }

/* Numbered: a number over a name */
.node__count { display: flex; align-items: baseline; font-size: 20px; font-weight: 700; line-height: 1; color: #fff; }
.node__unit { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(230, 243, 255, 0.8); }
.node.look-counted .node__name { font-size: 11px; }
.odo { display: inline-block; height: 1em; overflow: hidden; }
.odo__strip { display: grid; transform: translateY(0); }
.odo__strip > span { height: 1em; line-height: 1; }
.odo__strip.is-rolled { transform: translateY(calc(var(--n) * -1em)); transition: transform .9s cubic-bezier(.2, .85, .25, 1); }
/* rolling down: start at the old (higher) number at the bottom of the strip and slide down to the new one */
.odo__strip.is-down { transform: translateY(calc(var(--n) * -1em)); }
.odo__strip.is-down.is-rolled { transform: translateY(0); }
.odo__sym { line-height: 1; }
.node.is-today .node__name { color: var(--cyan); }
.node.is-full { border-color: rgba(111, 212, 255, 0.6); }

/* Each person in their own color: the glass tinted with it, an outline and a soft glow in it */
/* family members: solid, in their color, with no border */
.node.look-icon.is-member {
  background: color-mix(in srgb, var(--c) 80%, #0a1c5b);
  border-color: transparent;
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 40%, transparent);
}

/* A birthday: the person's circle glows gold on the day */
.node.is-birthday { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(242, 196, 90, 0.55); }
.node.is-birthday .node__below .node__meta { color: var(--gold); }

/* The month: small date circles. Past ones dim, today ringed in white, the open day in cyan, a dot for plans */
.node.is-small { padding: 4px; gap: 0; }
.node.is-small .node__count { font-size: 18px; }
.node.is-small .node__name { font-size: 9.5px; color: var(--muted); }
.node.is-past { border-color: rgba(120, 190, 255, 0.05); }
.node.is-past > * { opacity: .38; }
.node.is-small.is-today { background: rgba(63, 125, 255, 0.35); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(111, 212, 255, 0.5); }
.node.is-small.is-today .node__name { color: #fff; }
.node.is-sel { box-shadow: 0 0 0 2px var(--cyan); }
/* The weekday letters over a calendar grid, and who's busy on each day */
.node.look-head { background: none; border: 0; box-shadow: none; padding: 0; pointer-events: none; }
.node.look-head .node__name { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.node__dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 3px; }
.node__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.node.has-events::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.node.is-past.has-events::after { opacity: .4; }
.month-face { font-size: .62em !important; font-weight: 300; letter-spacing: -0.02em; }

/* Named below: the picture fills the circle, the name sits underneath */
.node.look-under { padding: 0; border: 1px solid rgba(120, 190, 255, 0.18); background: rgba(63, 125, 255, 0.12); }
.node__art { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; font-size: 34px; }
.node__art .art { width: 100%; height: 100%; }
.node__below { position: absolute; top: calc(100% + 6px); left: -11px; right: -11px; display: grid; justify-items: center; gap: 1px; text-align: center; }
.node__below .node__name { font-size: 12px; color: var(--ink); -webkit-line-clamp: 2; }

/* An action: a white icon in an 80px circle, a one-line name below */
.node.look-icon { border: 1px solid rgba(120, 190, 255, 0.18); background: rgba(63, 125, 255, 0.12); }
.node.look-icon .node__icon { font-size: 27px; margin: 0; }
.node.look-icon .node__below .node__name, .node.look-counted .node__below .node__name { font-size: 13.5px; }
/* a kind's color (a person's screen): a soft wash and a ring of it */
.node.has-tint { background: color-mix(in srgb, var(--t) 18%, transparent); border-color: color-mix(in srgb, var(--t) 65%, transparent); }
.node.has-tint .node__meta { color: color-mix(in srgb, var(--t) 70%, #ffffff); }
.node.look-icon.is-done { background: var(--c); border-color: transparent; }
.node.look-icon.is-ready { box-shadow: 0 0 0 1.5px var(--gold), 0 0 24px rgba(242, 196, 90, 0.4); }
.node.look-icon.is-editing { border-style: dashed; border-color: rgba(255, 255, 255, 0.6); }
.node__check {
  position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: #0a1f5c; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.node__check svg { width: 14px; height: 14px; }

/* The colored hubs on the start screen keep their own colors */
.node.is-color { border: 0; background: radial-gradient(circle at 35% 28%, hsl(var(--hue) 80% 62%), hsl(var(--hue) 72% 44%) 70%); }
.node.is-color .node__meta { color: rgba(255, 255, 255, 0.8); }

/* The day in the action circle */
.date-face { display: grid; justify-items: center; line-height: 1; gap: .06em; }
.date-face b { font-weight: 300; font-size: 1em; letter-spacing: -0.04em; }
.date-face small { font-size: .15em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(230, 243, 255, 0.75); }
.date-face__wx { position: absolute; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: rgba(230, 243, 255, 0.85); }
.date-face__wx svg.flat { width: 1.4em; height: 1.4em; color: #fff !important; }

/* Bigger screens: a few sizes come out the same on screen after the layer is scaled */
.is-phone-chosen .node.is-center .node__meta { font-size: calc(13px / var(--ps)); }

/* ---------- Settings: a panel over the circles ---------- */
.panel { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: end; }
.panel__scrim { position: absolute; inset: 0; background: rgba(1, 4, 32, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.panel__sheet {
  position: relative; width: min(520px, 100%); height: 100%; overflow-y: auto; padding: 0 22px 40px;
  background: linear-gradient(180deg, #071447, #030c3a); border-left: 1px solid var(--line); animation: slide .35s var(--ease);
}
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.panel__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 0 12px; background: #071447; }
.panel__head h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.panel__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.group { margin-top: 26px; }
.group__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.settings__note { margin: 0 0 14px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.5; }
.circles--members { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 16px 10px; margin-top: 18px; }
.mem { display: grid; justify-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.mem em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: -4px; }
.mem small { font-size: 11px; color: var(--cyan); font-weight: 600; margin-top: -3px; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 600; }
.avatar--lg { width: 66px; height: 66px; font-size: 24px; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 50%, transparent); }
.avatar--add { background: transparent; color: var(--cyan); border: 1.5px dashed var(--line-strong); box-shadow: none; }
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 2px; text-align: left; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.row__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(63, 125, 255, 0.16); color: var(--cyan); font-size: 18px; }
.row__icon svg { width: 18px; height: 18px; }
.row__icon svg.flat { color: var(--cyan) !important; }
.sheet:focus { outline: none; }
.row__text { flex: 1; min-width: 0; font-weight: 500; }
.row__text small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.row__meta { color: var(--muted); font-size: 13px; }
.row--danger { color: var(--danger); }
/* Profile photos: they fill the circle edge to edge */
.face { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar, .who__circle { overflow: hidden; }
.node.look-icon.is-member.has-photo { border: 0; background: transparent; }   /* a photo is the whole circle, with no ring */
.node.has-photo .node__icon { position: absolute; inset: 0; display: block; }
.node.has-photo .node__icon .face { width: 100%; height: 100%; }
.photo-face { position: relative; display: block; width: 100%; height: 100%; }
.photo-face small { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 0 28px; text-align: center; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(3, 12, 58, 0.8)); line-height: 1; }
.photo-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photo-pick__preview { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--c); color: #fff; font-size: 24px; font-weight: 600; }
.photo-pick label.btn { cursor: pointer; }

.sheet__error { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 122, 133, 0.14); border: 1px solid rgba(255, 122, 133, 0.35);
  color: #ffd2d7; font-size: 14px; line-height: 1.45; }

/* The next event to start: lit up in blue */
.node.is-next { background: rgba(63, 125, 255, 0.55); border-color: #8fd0ff; box-shadow: 0 0 0 1px rgba(143, 208, 255, 0.5), 0 0 26px rgba(63, 125, 255, 0.75); }
.node.is-next .node__meta { color: #fff; }

.group__sub { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: #fff; }
/* Add tasks: "Not on the list?" under the choices */
.pick-new { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.pick-new .btn svg { width: 16px; height: 16px; }
/* ones they already have: a tick, faded, so they don't look like new picks */
.choice input:checked:disabled + span { background: transparent; border-style: dashed; color: var(--muted); cursor: default; }
.choice input:checked:disabled + span svg { width: 14px; height: 14px; }

/* Settings → Tasks: each person's tasks fold away under their name */
.task-group { border-bottom: 1px solid var(--line); }
.task-group summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; }
.task-group summary::-webkit-details-marker { display: none; }
.task-group summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 22px; transition: transform .2s; }
.task-group[open] summary::after { transform: rotate(90deg); }
.task-group__name { font-weight: 600; }
.task-group summary small { color: var(--muted); font-size: 13px; }
.task-group .rows { margin: 0 0 10px 46px; border-top: 0; }
.task-group .row { min-height: 52px; }
.row--danger .row__icon { background: rgba(255, 122, 133, 0.14); color: var(--danger); }
.seg { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.seg button { height: 32px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.is-on { background: var(--blue); color: #fff; }
.link-box { display: flex; gap: 8px; }
.link-box__url { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 14px; outline: none; }
.link-name { display: grid; gap: 10px; justify-items: start; margin: 18px 0 16px; }
.link-name .field { width: 100%; }
.link-name__row { display: flex; align-items: center; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.link-name__row:focus-within { border-color: var(--cyan); }
.link-name__row input { flex: 1; min-width: 0; height: 100%; border: 0 !important; padding: 0 !important; background: transparent !important; font-size: 16px; outline: none; }
.link-name__pre, .link-name__code { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform .15s, background .2s; }
.btn:active { transform: scale(.97); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px rgba(63, 125, 255, 0.35); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }
.btn--danger { color: var(--danger); border: 1px solid rgba(255, 122, 133, 0.35); }

/* ---------- Sheets (forms) ---------- */
.sheet-dlg {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0; overflow: auto;
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #0a1a58, #050f40); color: var(--ink);
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
}
.sheet-dlg::backdrop { background: rgba(1, 4, 32, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-dlg[open] { animation: sheet-up .4s var(--ease); }
@keyframes sheet-up { from { transform: translateY(30%); opacity: 0; } }
.sheet { padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); }
.sheet__grab { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--line-strong); }
.sheet__title { margin: 6px 0 18px; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.sheet__body { display: grid; gap: 18px; }
.sheet__text { margin: 0; font-size: 16px; font-weight: 400; }
.sheet__text--quiet { font-size: 14px; color: var(--muted); margin-top: -8px; }
.sheet__actions { display: flex; gap: 8px; margin-top: 26px; }
.sheet__spacer { flex: 1; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.field input:not([type=radio]):not([type=checkbox]) {
  height: 48px; width: 100%; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 16px; outline: none;
}
.field textarea {
  width: 100%; min-height: 96px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.05); font: inherit; font-size: 16px; line-height: 1.45;
  color: inherit; outline: none; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { border-color: var(--cyan); }
.field input[type=date]::-webkit-calendar-picker-indicator, .field input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-opt { cursor: pointer; }
.icon-opt input, .who__opt input, .choice input, .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.icon-opt > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; background: rgba(255, 255, 255, 0.04); }
.icon-opt svg.flat { color: #dbeeff !important; }
.icon-opt__none { font-size: 11px !important; font-weight: 600; color: var(--muted); border: 1px dashed var(--line-strong); background: transparent !important; }
.icon-opt input:checked + span { background: rgba(63, 125, 255, 0.35); box-shadow: 0 0 0 1.5px var(--cyan); }
.icon-opt input:focus-visible + span, .choice input:focus-visible + span, .swatch input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.who { display: flex; flex-wrap: wrap; gap: 14px; }
.who__opt { display: grid; justify-items: center; gap: 5px; cursor: pointer; }
.who__circle { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); font-size: 19px; transition: all .25s var(--ease); }
.who__opt input:checked + .who__circle { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.who__opt small { font-size: 12px; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice span { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; cursor: pointer; }
.choice span svg.flat { color: #dbeeff !important; }
.choice input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch span { display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--c); cursor: pointer; }
.swatch input:checked + span { box-shadow: 0 0 0 3px #050f40, 0 0 0 5px #fff; }
.quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.quick__pick { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; white-space: nowrap; }
.quick__pick svg.flat { color: #dbeeff !important; }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__track { position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); flex: none; transition: background .25s; }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.toggle input:checked + .toggle__track { background: var(--blue); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Welcome (the bare address) and an unknown link ---------- */
.welcome { display: grid; justify-items: center; gap: 14px; max-width: 420px; margin: 0 auto; padding: 14vh 20px 40px; text-align: center; }
.welcome__mark { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; font-size: 48px; background: radial-gradient(circle at 32% 26%, #4d8fe0, #0b2a7a 55%, #04103f); box-shadow: 0 0 60px rgba(63, 125, 255, 0.5); }
.welcome__mark svg.flat { color: #e6f3ff !important; }
.welcome__title { margin: 6px 0 0; font-weight: 600; font-size: 32px; letter-spacing: -0.03em; }
.welcome__text { margin: 0; color: var(--muted); font-weight: 400; line-height: 1.5; }

/* ---------- Sleep ---------- */
.sleep { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 32px; background: #000416; color: #cfe0ff; cursor: pointer; animation: fade 1.2s ease; }
@keyframes fade { from { opacity: 0; } }
.sleep__clock { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: min(76vw, 400px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.15), 0 0 80px rgba(63, 125, 255, 0.15); }
.sleep__orbit { position: absolute; inset: 0; animation: tick 60s linear infinite; animation-delay: calc(var(--s) * -1s); }
.sleep__orbit i { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
@keyframes tick { to { transform: rotate(360deg); } }
.sleep__moon { font-size: 32px; }
.sleep__time { font-weight: 300; font-size: clamp(54px, 15vw, 96px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sleep__date { color: rgba(207, 224, 255, 0.55); }
.sleep__hint { margin: 0; color: rgba(207, 224, 255, 0.35); font-size: 13px; }

/* ---------- Feedback ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100vw - 40px);
  padding: 12px 20px; border-radius: 999px; background: #fff; color: #0b1530; font-weight: 600; font-size: 14px;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: all .35s var(--ease); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast.has-action { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; pointer-events: auto; }
.toast__action { height: 32px; padding: 0 14px; border-radius: 999px; background: #3f7dff; color: #fff; font-weight: 700; font-size: 13px; }
.burst { position: fixed; z-index: 70; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px currentColor; }
.float {
  position: fixed; z-index: 70; transform: translateX(-50%); pointer-events: none;
  color: #0b1530; background: var(--gold); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 13px;
  animation: float-up 1.2s var(--ease) forwards;
}
@keyframes float-up { to { transform: translate(-50%, -44px); opacity: 0; } }

@media (min-width: 600px) {
  .sheet-dlg { max-width: 560px; margin: auto auto 0; }   /* still from the bottom, just not the full width */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Calendar views: Day, Week, Month, Year (opened from the home screen's calendar page) ---------- */
.calview { position: fixed; z-index: 28; inset: calc(84px + env(safe-area-inset-top)) 0 0 0; overflow-y: auto; padding: 0 max(16px, calc((100vw - 1180px) / 2)) 40px;
  background: transparent; color: #fff; }
.cv-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 8px; }
.cv-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.cv-seg button { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(230, 243, 255, 0.75); }
.cv-seg button.is-on { background: #3f7dff; color: #fff; }
.cv-close { position: absolute; right: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.08); }
.cv-close svg { width: 18px; height: 18px; }
.cv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; }
.cv-title { margin: 0; font-size: clamp(22px, 4vw, 40px); font-weight: 300; letter-spacing: -0.02em; }
.cv-nav { display: flex; gap: 6px; }
.cv-nav button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; font-size: 14px; }
.cv-nav button svg { width: 16px; height: 16px; }
.cv-nav button svg path { stroke: currentColor; stroke-width: 8; }
.cv-empty, .cv-none { color: var(--muted); }
.cv-empty { text-align: center; margin-top: 18px; }

/* an event or trip as a small colored chip */
.cv-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; margin-top: 3px; padding: 3px 7px; border-radius: 7px; text-align: left;
  font-size: 12px; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--c, #3f7dff) 30%, transparent); border-left: 3px solid var(--c, #3f7dff); }
.cv-chip b { font-weight: 700; flex: none; }
.cv-chip svg.flat { width: 13px; height: 13px; flex: none; color: #fff !important; }
.cv-chip--trip { --c: #cfa65a; }
.cv-chip.is-past, .cv-event.is-past { opacity: .5; }

/* Day: a timeline */
.cv-allday { display: grid; gap: 4px; margin-bottom: 10px; }
.cv-timeline { position: relative; }
.cv-hour { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(120, 190, 255, 0.12); }
.cv-hour span { position: absolute; top: -8px; left: 0; width: 54px; font-size: 11px; color: var(--muted); text-align: right; }
.cv-now { position: absolute; left: 58px; right: 0; border-top: 2px solid #6fd4ff; }
.cv-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #6fd4ff; }
.cv-event { position: absolute; display: grid; align-content: start; gap: 2px; padding: 6px 8px; border-radius: 10px; text-align: left; overflow: hidden; color: #fff;
  background: color-mix(in srgb, var(--c) 34%, #0a1c5b); border-left: 4px solid var(--c); }
.cv-event b { font-size: 13px; font-weight: 600; }
.cv-event small { font-size: 11px; color: rgba(230, 243, 255, 0.8); }

/* Week: seven columns */
.cv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cv-weekday { min-height: 220px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.cv-weekday.is-today { background: rgba(63, 125, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(111, 212, 255, 0.5); }
.cv-weekday__head { display: grid; justify-items: start; margin-bottom: 6px; color: #fff; }
.cv-weekday__head span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cv-weekday__head b { font-size: 22px; font-weight: 300; }
.cv-weekday.is-past-day .cv-weekday__head b { color: var(--muted); }
@media (max-width: 700px) { .cv-week { grid-template-columns: 1fr; } .cv-weekday { min-height: 0; } .cv-weekday__head { display: flex; gap: 8px; align-items: baseline; } }

/* Month and Year: grids, Monday first */
.cv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cv-head { padding: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cv-grid--month { gap: 4px; }
.cv-cell { min-height: 104px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); min-width: 0; }
.cv-cell.is-out { opacity: .35; }
.cv-cell__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 600; color: #fff; }
.cv-cell.is-today .cv-cell__num { background: #3f7dff; }
.cv-more { margin-top: 3px; font-size: 11px; color: var(--muted); }
@media (max-width: 700px) { .cv-cell { min-height: 64px; padding: 3px; } .cv-chip { font-size: 10px; padding: 2px 4px; } .cv-chip b { display: none; } }
.cv-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
@media (max-width: 1000px) { .cv-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cv-year { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
.cv-mini__name { margin-bottom: 10px; font-size: 20px; font-weight: 500; color: #6fb6ff; }
.cv-d { display: grid; place-items: center; height: 30px; font-size: 13px; color: #fff; position: relative; }
.cv-d.is-out { color: rgba(230, 243, 255, 0.25); }
.cv-d.is-past-day { color: rgba(230, 243, 255, 0.6); }
.cv-d.is-busy { font-weight: 700; }
.cv-d.is-busy::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: #6fd4ff; }
.cv-d.is-today { width: 30px; justify-self: center; border-radius: 50%; background: #3f7dff; font-weight: 700; color: #fff; }
.cv-switch { position: fixed; z-index: 29; top: calc(80px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); }
.cv-switch .cv-seg { background: rgba(10, 28, 91, 0.92); }
.has-calview .cv-switch { display: none; }
@media (max-width: 420px) { .cv-seg button { padding: 0 11px; font-size: 13px; } }

/* a person's photo fills the big circle edge to edge: no color around it */
.action-circle:has(.photo-face) { background: transparent; border-color: transparent; }
/* the view switch matches the search bar: the same width and height, a home button at its left */
.cv-seg { box-sizing: border-box; display: flex; align-items: center; gap: 2px; height: 56px; padding: 6px; border-radius: 28px; width: min(640px, calc(100vw - 32px)); }
.calview .cv-seg { width: min(640px, calc(100% - 52px)); }
.cv-seg button { flex: 1; height: 44px; padding: 0 6px; border-radius: 22px; }
.cv-seg .cv-home { flex: none; display: grid; place-items: center; width: 44px; padding: 0; }
.cv-seg .cv-home svg { width: 22px; height: 22px; }
.cv-switch { top: calc(78px + env(safe-area-inset-top)); }
/* on narrow screens the switch and the close button sit side by side rather than overlapping */
@media (max-width: 760px) {
  .calview .cv-top { justify-content: flex-start; }
  .calview .cv-close { position: static; flex: none; }
}
/* behind the calendar views: the app's deep blue, the same as the spiral's */
.cv-flow { position: fixed; z-index: 27; inset: calc(84px + env(safe-area-inset-top)) 0 0 0; width: 100%; height: calc(100% - 84px - env(safe-area-inset-top)); pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 60% 45%, var(--bg-glow) 0%, var(--bg-mid) 42%, var(--bg-deep) 100%); }
.calview .cv-cell, .calview .cv-weekday { background: rgba(10, 28, 91, 0.45); }
.calview .cv-cell.is-out { background: rgba(10, 28, 91, 0.2); }
/* Day view: events can be dragged to move them, and stretched by their bottom edge */
.cv-event.can-move { cursor: grab; touch-action: none; }
.cv-event.is-dragging { cursor: grabbing; z-index: 3; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); filter: brightness(1.15); }
.cv-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; cursor: ns-resize; }
.cv-resize::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); opacity: 0; transition: opacity .15s; }
.cv-event:hover .cv-resize::after, .cv-event.is-dragging .cv-resize::after { opacity: 1; }
@media (hover: none) { .cv-resize { height: 18px; } .cv-resize::after { opacity: .7; } }
/* the calendar views in the main screen's style: glass cells with a thin outline, the search bar's navy for the
   switch, today ringed in white like on the spiral. Back (top left) leaves them, so there's no close button. */
.calview .cv-seg, .cv-switch .cv-seg { background: var(--pill); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.18); }
.calview .cv-seg { width: min(640px, 100%); }
.calview .cv-top { justify-content: center; }
.calview .cv-cell, .calview .cv-weekday { background: rgba(63, 125, 255, 0.12); border: 1px solid rgba(120, 190, 255, 0.18); }
.calview .cv-cell.is-out { background: rgba(63, 125, 255, 0.05); border-color: rgba(120, 190, 255, 0.08); }
.calview .cv-weekday.is-today { background: rgba(63, 125, 255, 0.22); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(111, 212, 255, 0.5); border-color: transparent; }
.calview .cv-cell.is-today .cv-cell__num, .calview .cv-d.is-today { background: rgba(63, 125, 255, 0.35); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(111, 212, 255, 0.5); }
.calview .cv-nav button { background: rgba(63, 125, 255, 0.12); border: 1px solid rgba(120, 190, 255, 0.22); }
.calview .cv-nav button:hover { background: rgba(63, 125, 255, 0.28); }
.calview .cv-event { background: color-mix(in srgb, var(--c) 30%, rgba(10, 28, 91, 0.6)); }
/* the home screen's calendar is a circle like everything else: the month across its top, the date in the middle,
   the weekday and its ‹ › along the bottom */
.cal-page { width: 168px; min-width: 168px; height: 168px; margin-top: 0; border-radius: 50%; overflow: hidden; grid-template-rows: 50px 1fr auto; }
.cal-page__month { border-radius: 0; padding-top: 16px; line-height: 26px; font-size: 18px; }
.cal-page__day { font-size: 58px; padding-top: 0; }
.cal-page__foot { padding: 0 30px 20px; }
/* the calendar views open out of the calendar circle and close back into it */
.calview.is-entering, .cv-flow.is-entering { animation: cv-in .55s var(--ease) both; }
.calview.is-leaving, .cv-flow.is-leaving { animation: cv-out .38s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
.calview.is-entering .cv-bar, .calview.is-entering .cv-body { animation: cv-rise .5s .12s var(--ease) both; }
@keyframes cv-in {
  from { clip-path: circle(84px at var(--ox, 50%) var(--oy, 30%)); opacity: .5; }
  to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 30%)); opacity: 1; }
}
@keyframes cv-out {
  from { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 30%)); opacity: 1; }
  to { clip-path: circle(84px at var(--ox, 50%) var(--oy, 30%)); opacity: 0; }
}
@keyframes cv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .calview, .cv-flow, .calview * { animation: none !important; } }
/* one bar: on the calendar screens the view switch sits exactly where the search bar is, and the search bar steps aside */
.has-calbar .search { visibility: hidden; }
.cv-switch, .has-calview .cv-switch { display: block; position: fixed; z-index: 32; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; transform: none; max-width: none; }
.cv-switch[hidden] { display: none !important; }
.has-back .cv-switch { left: 70px; }
.cv-switch .cv-seg, .calview .cv-seg { width: 100%; }
@media (min-width: 900px) { .cv-switch, .has-back .cv-switch, .has-calview .cv-switch { left: 50%; right: auto; width: 640px; transform: translateX(-50%); } }
.calview .cv-bar { margin-top: 18px; }
/* a person's big circle: a see-through wash of their color (the small circles stay solid), still with no border */
.action-circle.is-tinted { background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }   /* see-through, like the calendar circle */

/* ---------- Settings, Scandinavian: warm paper, soft charcoal, hairlines, muted slate and sage ---------- */
.panel {
  --ink: #2e2c29; --muted: #7a746b; --faint: #b3ada4; --line: #e8e2d8; --line-strong: #d9d2c6;
  --cyan: #5b7a8c; --blue: #5b7a8c; --danger: #b5574b; --n-paper: #f5f5f5; --n-card: #ffffff; --n-sage: #8a9a7b;
  color: var(--ink); color-scheme: light;
}
.panel__scrim { background: rgba(10, 14, 30, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.panel__sheet { background: var(--n-paper); border-left: 0; padding: 0 30px 56px; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25); }
.panel__head { background: var(--n-paper); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel__head h2 { font-weight: 200; font-size: 34px; letter-spacing: -0.01em; color: var(--ink); }
.panel__close { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.panel__close:hover { background: #efeae2; }
.panel .group { margin-top: 38px; }
.panel .group__title { font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--muted); margin-bottom: 16px; }
.panel .group__sub { color: var(--ink); font-weight: 500; font-size: 14px; margin-top: 24px; }
.panel .settings__note { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* rows as quiet cards on the paper */
.panel .rows { border-top: 0; background: var(--n-card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.panel .row { border-bottom: 1px solid var(--line); padding: 12px 16px; min-height: 58px; }
.panel .rows > .row:last-child { border-bottom: 0; }
.panel .row:hover { background: #fbf9f6; }
.panel .row__icon { width: 36px; height: 36px; background: #f1ede6; color: var(--ink); }
.panel .row__icon svg.flat { color: var(--ink) !important; }
.panel .row__text { font-weight: 400; color: var(--ink); }
.panel .row--danger, .panel .row--danger .row__text { color: var(--danger); }
.panel .row--danger .row__icon { background: #f6e9e6; color: var(--danger); }

/* the family */
.panel .circles--members { gap: 20px 12px; }
.panel .mem { font-weight: 500; color: var(--ink); }
.panel .mem em { color: var(--muted); font-weight: 400; }
.panel .mem small { color: var(--cyan); font-weight: 500; }
.panel .avatar--lg { box-shadow: none; }
.panel .avatar--add { border-color: var(--line-strong); color: var(--muted); background: transparent; }

/* inputs, choices and buttons */
.panel .field > span { color: var(--muted); font-weight: 500; letter-spacing: .14em; }
.panel .field input:not([type=radio]):not([type=checkbox]), .panel .field textarea, .panel .link-box__url, .panel .link-name__row { background: var(--n-card); border-color: var(--line-strong); color: var(--ink); }
.panel .field input:focus, .panel .link-name__row:focus-within { border-color: var(--cyan); }
.panel .seg { border-color: var(--line-strong); background: #ece7df; }
.panel .seg button { color: var(--muted); font-weight: 500; }
.panel .seg button.is-on { background: var(--n-card); color: var(--ink); box-shadow: 0 1px 3px rgba(46, 44, 41, 0.12); }
.panel .btn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.panel .btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.panel .btn--ghost:hover { background: #efeae2; }

/* who does what */
.panel .task-group { border-bottom-color: var(--line); }
.panel .task-group summary small, .panel .task-group summary::after { color: var(--muted); }
.panel .task-group .rows { margin-left: 46px; }
.panel .link-box { margin: 14px 0; }
.panel .group > .field + .link-box { margin-top: 16px; }
.panel .link-box + .rows, .panel .seg + .rows, .panel .settings__note + .rows { margin-top: 4px; }
.panel .choice span { background: var(--n-card); border-color: var(--line-strong); color: var(--ink); }
.panel .choice input:checked + span { background: var(--cyan); border-color: var(--cyan); color: #fff; }
/* the home screen's calendar circle: see-through glass, like the other circles */
.cal-page { background: rgba(63, 125, 255, 0.12); border: 1px solid rgba(120, 190, 255, 0.3); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.cal-page__month { background: rgba(63, 125, 255, 0.22); }

/* ---------- Pop-ups never scroll sideways (iPhone: date and time boxes have a minimum width of their own) ---------- */
.sheet-dlg, .panel__sheet, .calview { overflow-x: hidden; overscroll-behavior: contain; }
.sheet, .sheet__body, .sheet__body > *, .field, .field-row > *, .panel__body, .panel .group { min-width: 0; max-width: 100%; }
.field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field input:not([type=radio]):not([type=checkbox]) { min-width: 0; max-width: 100%; display: block; }
.field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; text-align: left; }
.field input::-webkit-date-and-time-value { text-align: left; }
.icon-pick, .who, .choices, .swatches { min-width: 0; max-width: 100%; }
.choice span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the form's title stays in view while it scrolls */
.sheet__title { position: sticky; top: -10px; z-index: 2; margin: 0 -22px 14px; padding: 10px 22px 10px; background: #0a1a58; }
/* the calendar bar's house and gear match the search bar's exactly */
.cv-seg .cv-home { width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.cv-seg .cv-home svg { width: 24px; height: 24px; }
.cv-seg .cv-home:hover { background: rgba(255, 255, 255, 0.1); }
/* Weather: a big rolling temperature, the icon and high / low under it */
.node__deg { font-weight: 300; margin-left: 1px; }
.node[data-key="weather"] .node__count { font-size: 26px; }
.node__sub { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 9px; font-weight: 500; color: rgba(230, 243, 255, 0.85); white-space: nowrap; }
.node__sub svg.flat { width: 12px; height: 12px; color: #fff !important; }
/* the temperature sits centred; its degree sign hangs off the top right, outside the centring */
.node[data-key="weather"] .node__count { position: relative; }
.node__deg { position: absolute; left: 100%; top: -0.05em; margin-left: 1px; font-size: .6em; line-height: 1; }
/* the welcome photo: a warm sunset tone shows while it loads, so the circle never flashes empty */
.photo-face:has(img[src="/welcome.jpg"]) { background: radial-gradient(circle at 55% 30%, #fff1d6, #e2b46a 55%, #8a6a2e); border-radius: 50%; }
/* "are you sure?" sheets */
.confirm { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 6px 0 2px; }
.confirm__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(63, 125, 255, 0.16); box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.25), 0 0 30px rgba(63, 125, 255, 0.3); color: var(--cyan); }
.confirm__icon svg { width: 28px; height: 28px; }
.confirm__icon svg.flat { color: var(--cyan) !important; }
.confirm--danger .confirm__icon { background: rgba(255, 122, 133, 0.14); box-shadow: 0 0 0 1px rgba(255, 122, 133, 0.35), 0 0 30px rgba(255, 122, 133, 0.25); color: var(--danger); }
.confirm .sheet__text { max-width: 420px; color: rgba(230, 243, 255, 0.85); line-height: 1.55; }
.btn--danger-solid { background: #e5546a; color: #fff; box-shadow: 0 6px 20px rgba(229, 84, 106, 0.35); }
.sheet:has(.confirm) .sheet__title { text-align: center; }
/* a person's big circle holds their name, age and the day */
.member-face { gap: 6px; margin-top: 4px; }
.member-face .letter { font-size: 64px; line-height: 1; }
.member-face__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #fff; line-height: 1.1; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-face small { margin-top: 2px; }
.photo-face__facts { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 4px; padding: 34px 16px 30px; background: linear-gradient(transparent, rgba(3, 12, 58, 0.85)); }
.photo-face__facts small { position: static; padding: 0; background: none; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.member-face, .photo-face__facts { max-width: 100%; }
.member-face small, .photo-face__facts small { white-space: nowrap; }
.member-face small + small { margin-top: -2px; }
.member-face__day, .photo-face__facts .member-face__day { letter-spacing: .08em; opacity: .75; }
.member-face .letter { font-size: 56px; }
.photo-face__facts { padding: 30px 16px 26px; gap: 3px; }
/* the age, smaller than the day under it */
.member-face small:not(.member-face__day), .photo-face__facts small:not(.member-face__day) { font-size: 8px; letter-spacing: .16em; }
/* date and time boxes (iPhone draws their text at the top once its own styling is off): centred vertically */
.field input[type=date], .field input[type=time] { line-height: 46px; padding-top: 0; padding-bottom: 0; }
.field input::-webkit-date-and-time-value { line-height: 46px; margin: 0; min-height: 46px; display: flex; align-items: center; }
.field input::-webkit-datetime-edit { padding: 0; line-height: 46px; }
.sheet__text { white-space: pre-line; }
/* any temperature (home or a trip's destination): the number centred, the degree sign beside it, big */
.node__count:has(.node__deg) { position: relative; font-size: 26px; }
/* the centre circle stays out of sight until it's been put in the middle */
.action-circle:not(.is-placed) { visibility: hidden; }
/* temperatures: the digits set close together, the degree sign tucked in */
.node__count:has(.node__deg) { letter-spacing: -0.05em; }
.node__count:has(.node__deg) .odo + .odo { margin-left: -0.06em; }
.node__count:has(.node__deg) .node__deg { margin-left: 0; left: calc(100% - 0.05em); }

/* A member's photo fills the big circle: solid, with no tint or border round it */
.action-circle.is-tinted:has(.photo-face) { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Black, from the middle of the color wheel: true black with a light ring, so it stands out from the night sky */
.node.look-icon.is-member.is-black:not(.has-photo) { background: #000; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 0 22px rgba(255, 255, 255, 0.12); }
.action-circle.is-tinted.is-black:not(:has(.photo-face)) { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.45); }
.swatch input[value="#000000"] + span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.swatch input[value="#000000"]:checked + span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 3px #050f40, 0 0 0 5px #fff; }
/* the ten colors on a phone: two even rows of five */
@media (max-width: 560px) { .swatches { display: grid; grid-template-columns: repeat(5, 38px); justify-content: space-between; row-gap: 14px; } }

/* ---------- Popups (forms, questions, info): white smoke, with Settings' quiet charcoal and hairlines ---------- */
.sheet-dlg {
  --ink: #2e2c29; --muted: #6f6a63; --faint: #a9a49c; --line: #e3e0db; --line-strong: #d3cfc8;
  --cyan: #5b7a8c; --blue: #3f6fd8; --danger: #b5574b;
  background: #f5f5f5; color: var(--ink); color-scheme: light;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.35);
}
.sheet-dlg .sheet__title { color: var(--ink); background: #f5f5f5; }
.sheet-dlg .field > span { color: var(--muted); }
.sheet-dlg .field input:not([type=radio]):not([type=checkbox]), .sheet-dlg .field textarea { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.sheet-dlg .field input:focus, .sheet-dlg .field textarea:focus { border-color: var(--blue); }
.sheet-dlg .field input[type=date]::-webkit-calendar-picker-indicator, .sheet-dlg .field input[type=time]::-webkit-calendar-picker-indicator { filter: none; }
.sheet-dlg .icon-opt > span { background: #fff; border: 1px solid var(--line); }
.sheet-dlg .icon-opt svg.flat, .sheet-dlg .choice span svg.flat, .sheet-dlg .quick__pick svg.flat { color: var(--ink) !important; }
.sheet-dlg .icon-opt input:checked + span { background: #e3ebfb; border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.sheet-dlg .choice span, .sheet-dlg .quick__pick { background: #fff; color: var(--ink); }
.sheet-dlg .choice input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.sheet-dlg .choice input:checked + span svg.flat { color: #fff !important; }
.sheet-dlg .who__circle { background: #fff; }
.sheet-dlg .swatch input:checked + span { box-shadow: 0 0 0 3px #f5f5f5, 0 0 0 5px var(--ink); }
.sheet-dlg .swatch input[value="#000000"] + span { box-shadow: none; }
.sheet-dlg .swatch input[value="#000000"]:checked + span { box-shadow: 0 0 0 3px #f5f5f5, 0 0 0 5px var(--ink); }
.sheet-dlg .toggle__track { background: #d9d6d0; }
.sheet-dlg .toggle input:checked + .toggle__track { background: var(--blue); }
.sheet-dlg .btn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.sheet-dlg .btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.sheet-dlg .btn--ghost:hover { background: #ecebe8; }
.sheet-dlg .btn--danger { border-color: rgba(181, 87, 75, 0.35); }
.sheet-dlg .btn--danger-solid { box-shadow: none; }
.sheet-dlg .confirm .sheet__text, .sheet-dlg .group__sub { color: var(--ink); }
.sheet-dlg .confirm__icon { background: #e7edf1; box-shadow: none; color: var(--cyan); }
.sheet-dlg .confirm--danger .confirm__icon { background: #f6e9e6; color: var(--danger); }
.sheet-dlg .seg { border-color: var(--line-strong); background: #ebeae7; }
.sheet-dlg .seg button { color: var(--muted); }
.sheet-dlg .seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(46, 44, 41, 0.12); }
/* buttons and choice chips in popups: no borders, white on the white smoke */
.sheet-dlg .choice span, .sheet-dlg .quick__pick, .sheet-dlg .btn, .sheet-dlg .icon-opt > span { border: 0; }
.sheet-dlg .btn--danger { background: #fff; }
.sheet__body > [data-resend] { justify-self: start; margin-top: -6px; }

/* ---------- Month: extremely minimal. No boxes; one hairline above each week, light numbers, events as plain text ---------- */
.calview .cv-grid--month { gap: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.calview .cv-grid--month .cv-head { padding: 0 0 10px 2px; text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: rgba(230, 243, 255, 0.45); }
.calview .cv-grid--month .cv-cell { min-height: 112px; padding: 8px 6px 8px 2px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: none; }
.calview .cv-grid--month .cv-cell.is-out { opacity: 1; background: none; }
.calview .cv-grid--month .cv-cell.is-out > * { opacity: .25; }
.calview .cv-grid--month .cv-cell__num { width: auto; height: 30px; min-width: 30px; padding: 0 2px; place-items: center start; border-radius: 999px; font-size: 20px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: rgba(230, 243, 255, 0.9); background: none; box-shadow: none; }
.calview .cv-grid--month .cv-cell.is-today .cv-cell__num { place-items: center; padding: 0; width: 30px; margin-left: -4px; background: #3f7dff; color: #fff; font-weight: 300; box-shadow: none; }
.calview .cv-grid--month .cv-chip { gap: 6px; margin-top: 4px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 11.5px; font-weight: 400; color: rgba(230, 243, 255, 0.9); }
.calview .cv-grid--month .cv-chip::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c, #3f7dff); }
.calview .cv-grid--month .cv-chip b { order: 2; font-weight: 400; color: rgba(230, 243, 255, 0.45); }
.calview .cv-grid--month .cv-chip svg.flat { display: none; }
.calview .cv-grid--month .cv-chip.is-past { opacity: .4; }
.calview .cv-grid--month .cv-more { margin-top: 4px; padding-left: 11px; font-size: 11px; color: rgba(230, 243, 255, 0.45); }
/* on a phone: just a row of dots under each date (tap the day for the details) */
@media (max-width: 700px) {
  .calview .cv-grid--month .cv-cell { min-height: 62px; padding: 6px 2px; }
  .calview .cv-grid--month .cv-cell__num { height: 26px; min-width: 26px; font-size: 17px; }
  .calview .cv-grid--month .cv-cell.is-today .cv-cell__num { width: 26px; margin-left: -3px; }
  .calview .cv-grid--month .cv-chip { display: inline-flex; width: auto; margin: 6px 3px 0 1px; font-size: 0; gap: 0; }
  .calview .cv-grid--month .cv-chip b { display: none; }
  .calview .cv-grid--month .cv-chip::before { width: 6px; height: 6px; }
  .calview .cv-grid--month .cv-more { display: none; }
}

/* ---------- Week: the same minimal look as Month. No boxes; hairlines, light dates, events as plain text ---------- */
.calview .cv-week { gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.calview .cv-weekday { min-height: 260px; padding: 12px 8px 12px 2px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.calview .cv-weekday.is-today { background: none; box-shadow: none; border-color: transparent; }
.calview .cv-weekday__head { gap: 6px; margin-bottom: 10px; }
.calview .cv-weekday__head span { font-size: 10px; font-weight: 500; letter-spacing: .14em; color: rgba(230, 243, 255, 0.45); }
.calview .cv-weekday__head b { display: grid; place-items: center start; height: 30px; min-width: 30px; font-size: 20px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: rgba(230, 243, 255, 0.9); }
.calview .cv-weekday.is-today .cv-weekday__head b { place-items: center; width: 30px; margin-left: -4px; border-radius: 50%; background: #3f7dff; color: #fff; }
.calview .cv-weekday.is-past-day .cv-weekday__head b { color: rgba(230, 243, 255, 0.4); }
.calview .cv-week .cv-none { display: none; }
.calview .cv-week .cv-chip { gap: 6px; margin-top: 6px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 400; color: rgba(230, 243, 255, 0.9); }
.calview .cv-week .cv-chip::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c, #3f7dff); }
.calview .cv-week .cv-chip b { order: 2; font-weight: 400; color: rgba(230, 243, 255, 0.45); }
.calview .cv-week .cv-chip svg.flat { display: none; }
.calview .cv-week .cv-chip.is-past { opacity: .4; }
/* on a phone: one row a day, a hairline between them, the date on the left and its events beside it */
@media (max-width: 700px) {
  .calview .cv-week { border-bottom: 0; }
  .calview .cv-weekday { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; min-height: 0; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .calview .cv-weekday__head { display: grid; gap: 4px; margin: 0; }
  .calview .cv-weekday__head b { font-size: 18px; height: 28px; min-width: 28px; }
  .calview .cv-weekday.is-today .cv-weekday__head b { width: 28px; margin-left: -3px; }
  .calview .cv-weekday__list { padding-top: 14px; }
  .calview .cv-week .cv-chip { margin: 0 0 6px; font-size: 13px; }
  .calview .cv-week .cv-chip b { display: inline; }   /* the time: there's room for it here */
}

/* ---------- The family PIN screen: nothing of the family shows until it's entered ---------- */
.lock { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at 50% 40%, #0a1f6e, #030c3a 70%); color: #fff; }
.lock__card { display: grid; justify-items: center; gap: 14px; width: min(360px, 100%); text-align: center; }
.lock__card.is-shaking { animation: lock-shake .4s; }
@keyframes lock-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lock__brand { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(230, 243, 255, 0.6); }
.lock__title { margin: 8px 0 0; font-size: 28px; font-weight: 300; letter-spacing: -0.01em; }
.lock__text { margin: 0; color: rgba(230, 243, 255, 0.65); line-height: 1.5; font-size: 15px; }
.lock__pin { width: 210px; height: 64px; margin-top: 10px; border: 1px solid rgba(120, 190, 255, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.06); color: #fff;
  font-size: 34px; letter-spacing: .6em; text-indent: .6em; text-align: center; outline: none; }
.lock__pin:focus { border-color: #6fd4ff; }
.lock__error { min-height: 20px; margin: 0; color: #ff9aa5; font-size: 14px; }
.lock__go { min-width: 160px; }