/* Resident progress: the chip in the top bar, the panel "your street this week", the earned-day toast
   and the level card. Frosted glass like every HUD; each thing arrives with a 250 ms ease and takes its
   room from the start, so nothing around it moves. Amber for progress, never red. */

.r-ring { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); }
.r-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.r-ring circle { fill: none; }
.r-ring .track { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
.r-ring .arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.r-ring b { position: relative; font-variant-numeric: tabular-nums; }

/* ---- chip */
.resident-chip { display: none; align-items: center; gap: 9px; flex: none; min-width: 11.5em; height: 34px; padding: 0 14px 0 2px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, background .25s ease; }
.resident-chip.on { display: inline-flex; animation: resident-in .25s ease both; }
.resident-chip:hover, .resident-chip[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, var(--panel)); }
.chip-ring b { font-size: 12px; }
.chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.chip-text b { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.chip-text small { color: var(--hud-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- panel: where the people panel sits, which it replaces while open */
.resident-panel { position: fixed; z-index: 16; right: var(--gap); top: calc(var(--bar, 50px) + 2 * var(--gap)); bottom: var(--gap); width: 320px; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.resident-panel.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body.in-room .resident-panel { bottom: calc(var(--bottom-hud, 0px) + 2 * var(--gap)); }
body.resident-open .side, body.resident-open .side-tab { display: none !important; }
.rp-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 16px; border-bottom: 1px solid var(--hud-line); }
.rp-head b { flex: 1; font-size: 14px; }
.rp-hero { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 16px 10px; }
.hero-ring b { font-size: 22px; }
.rp-hero-text { display: flex; flex-direction: column; min-width: 0; }
.rp-hero-text b { font-size: 18px; line-height: 1.25; }
.rp-hero-text span { color: var(--hud-muted); font-size: 13px; }
.rp-next { flex: none; padding: 0 16px 12px; font-size: 13px; }
.rp-bar { height: 6px; margin: 7px 0 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.rp-next small { display: block; min-height: 1.45em; color: var(--hud-muted); font-size: 12.5px; }
.rp-week { flex: none; display: flex; flex-direction: column; padding: 10px 16px 8px; border-top: 1px solid var(--hud-line); }
.rp-week b { font-size: 13px; }
.rp-week small { color: var(--hud-muted); font-size: 12px; }
.rp-board { flex: 1; min-height: 0; margin: 0; padding: 2px 8px 14px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.rp-board li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 4px 8px; border-radius: 9px; font-size: 13.5px; }
.rp-board li.me { background: color-mix(in srgb, var(--accent) 20%, transparent); font-weight: 650; }
.rp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-name em { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-style: normal; font-weight: 650; }
.rp-dots { display: inline-flex; flex: none; gap: 4px; }
.rp-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background .3s ease; }
.rp-dots i.on { background: var(--accent); }
.rp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px 28px; text-align: center; }
.rp-empty b { font-size: 15px; line-height: 1.4; }
.rp-empty small { color: var(--hud-muted); font-size: 12.5px; }

/* ---- toast */
.resident-toast.hud { position: fixed; z-index: 31; left: 50%; bottom: calc(var(--bottom-hud, 0px) + 2 * var(--gap) + 48px); margin: 0; max-width: min(520px, calc(100vw - 2 * var(--gap))); padding: 9px 18px; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); font-size: 14px; font-weight: 600; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.resident-toast.hud.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* ---- level card */
.resident-card { position: fixed; z-index: 19; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: min(400px, calc(100vw - 2 * var(--gap))); padding: 24px 22px 20px; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 10px)); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.resident-card.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
.card-ring b { font-size: 30px; }
.resident-card h2 { margin: 12px 0 6px; font-size: 21px; line-height: 1.3; }
.resident-card p { margin: 0 0 18px; color: var(--hud-muted); font-size: 14.5px; }
.resident-card .btn { min-height: 42px; padding: 6px 28px; font-size: 14px; }
.resident-confetti { position: fixed; z-index: 40; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

@keyframes resident-in { from { opacity: 0; transform: translateY(-4px); } }

/* The counts by presence give way to the chip when the bar runs out of room. */
@media (max-width: 1400px) { header:has(.resident-chip.on) .summary { display: none; } }

/* On a phone the top bar has no room: the chip hangs under the bar's right end (the bar is its
   containing block, so nothing in the bar moves) and the panel is as wide as the people panel. */
@media (max-width: 760px) {
  /* Under the bar's left end hang the bean counter and, one row below it, the shared-hour pill
     (bag.css); the chip hangs under the right end. --resident-hang is how far below the bar those
     rows reach: what opens under the chip starts there. */
  body { --resident-hang: 58px; }
  body:has(.shared-pill.on) { --resident-hang: 96px; }
  .resident-chip { position: absolute; right: 0; top: calc(100% + 8px); min-width: 0; padding-right: 12px; background: color-mix(in srgb, var(--accent) 22%, var(--panel)); box-shadow: 0 8px 28px #0002; }
  /* Before the bean counter is up the pill has the first row, so the chip takes the second. */
  body:has(.shared-pill.on):not(:has(.bean-chip.on)) .resident-chip { top: calc(100% + 46px); }
  body:has(.resident-chip.on) .side-tab { top: calc(var(--bar, 50px) + var(--gap) + var(--resident-hang)); }
  .resident-chip.on { padding-right: 10px; }
  .chip-text b { font-size: 12px; }
  .resident-panel { top: calc(var(--bar, 50px) + var(--gap) + var(--resident-hang)); width: calc(100vw - 2 * var(--gap)); }
  /* The toast passes under the People tab, which takes that row's right end. */
  .resident-toast.hud { bottom: auto; top: calc(var(--bar, 50px) + var(--gap) + var(--resident-hang) + 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .resident-chip.on, .resident-panel, .resident-toast, .resident-card, .r-ring .arc, .rp-bar i { animation: none; transition-duration: 0s; transition-delay: 0s; }
}
body.pip .resident-chip, body.record .resident-chip, body.pip .resident-panel, body.record .resident-panel,
body.pip .resident-toast, body.record .resident-toast, body.pip .resident-card, body.record .resident-card { display: none !important; }