/* Resident portal (home, pay, services, me). Prefix: r-. Uses tokens from app.css. */

.r-link { background: none; border: 0; padding: 0 2px; min-height: var(--touch); display: inline-flex; align-items: center; color: var(--accent-text); font-weight: 600; font-size: var(--fs-15); text-decoration: none; cursor: pointer; }
.r-link:hover { text-decoration: underline; }
.r-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-amt { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-mt { margin-top: var(--s2); }
.r-mb { margin-bottom: var(--s4); }
.r-pos { color: var(--success-ink); font-weight: 650; }
.r-neg { color: var(--text-2); font-weight: 650; }
.r-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--danger-solid); color: #fff; font-size: var(--fs-12); font-weight: 700; display: inline-grid; place-items: center; }

.r-inline-error { display: flex; align-items: center; gap: var(--s2); color: var(--danger-ink); font-size: var(--fs-15); flex-wrap: wrap; }

.r-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--touch); color: var(--accent-text); text-decoration: none; font-weight: 550; font-size: var(--fs-15); margin-left: -6px; padding-right: 8px; }

/* ---------- Home ---------- */
.r-hello { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 var(--s5); }
.r-hello__text { min-width: 0; }
.r-hello__text .t-large { margin: 2px 0 var(--s1); overflow-wrap: anywhere; }
.r-hello__text .t-sub { margin: 0; }
.r-nick { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--secondary-tint); color: var(--secondary); font-size: var(--fs-13); font-weight: 600; }
.r-hello__bell { position: relative; flex: none; width: var(--touch); height: var(--touch); border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--text); }
.r-badge-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger-solid); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }

.r-occasion { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: linear-gradient(120deg, var(--blush), var(--accent-tint)); color: #3A2A22; }
.r-occasion .t-foot { color: #5B4A40; }
.r-occasion__art { flex: none; width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,0.7); display: grid; place-items: center; color: #9C3D5A; }
:root[data-theme="dark"] .r-occasion { background: linear-gradient(120deg, #4A2A30, var(--accent-tint)); color: var(--text); }
:root[data-theme="dark"] .r-occasion .t-foot { color: var(--text-2); }
:root[data-theme="dark"] .r-occasion__art { background: rgba(0,0,0,0.25); color: #F2A7BC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .r-occasion { background: linear-gradient(120deg, #4A2A30, var(--accent-tint)); color: var(--text); }
  :root:not([data-theme="light"]) .r-occasion .t-foot { color: var(--text-2); }
  :root:not([data-theme="light"]) .r-occasion__art { background: rgba(0,0,0,0.25); color: #F2A7BC; }
}

.r-strip { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); padding: var(--s2) var(--s4); border-radius: var(--r-input); font-size: var(--fs-15); color: var(--text); text-decoration: none; }
.r-strip > span { flex: 1; min-width: 0; }
.r-strip--warn { background: var(--warning-tint); }
.r-strip--warn .icon:first-child { color: var(--warning-ink); }
.r-strip--info { background: var(--info-tint); }
.r-strip--info .icon:first-child { color: var(--info-ink); }

.r-tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-tile { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--text); text-decoration: none; min-width: 0; }
.r-tile--link { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.r-tile--link:hover { box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.r-tile--link:active { transform: scale(0.98); }
.r-tile--link:focus-visible { border-radius: var(--r-card); }
.r-tile__head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.r-tile__head .t-head { flex: 1; min-width: 0; font-size: var(--fs-15); }
.r-tile__icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); }
.r-tile__icon .icon { width: 18px; height: 18px; }
.r-tile__chev { color: var(--text-3); }
.r-tile__line { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-weight: 550; font-size: var(--fs-15); min-width: 0; flex-wrap: wrap; }
.r-points { font-size: var(--fs-28); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); line-height: 1.1; }
.r-tiles > .r-tile:first-child, .r-tiles > .r-tile--points { grid-column: 1 / -1; }
.r-tile--points { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.r-tile--points .r-tile__head { grid-column: 1 / -1; }
.r-tile--points .r-points { grid-row: 2; grid-column: 2; }
.r-tile--points > .t-foot { grid-row: 2; grid-column: 1; }

.r-mealrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.r-mealpill { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-3); font-size: var(--fs-13); font-weight: 550; min-width: 0; }
.r-mealpill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-mealpill.is-booked { background: var(--secondary-tint); color: var(--secondary); }

.r-dots { display: flex; gap: 4px; }
.r-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-strong); }
.r-dots i.is-on { background: var(--secondary); }

.r-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.r-quick__item { display: grid; justify-items: center; gap: 6px; padding: var(--s3) 2px; min-height: 84px; align-content: center; border-radius: var(--r-input); color: var(--text); text-decoration: none; font-size: var(--fs-12); font-weight: 550; text-align: center; line-height: 1.2; }
.r-quick__item:hover { background: var(--bg-sunken); }
.r-quick__icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--accent-text); }
.r-quick__item:active .r-quick__icon { transform: scale(0.94); }

.r-pet { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--secondary-tint); color: var(--text); text-decoration: none; min-height: 72px; }
.r-pet__main { flex: 1; min-width: 0; }
.r-pet__face { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 26px; flex: none; }
.r-pet__face--sad { filter: grayscale(0.6); }
.r-pet__face--thriving { box-shadow: 0 0 0 3px var(--accent); }

.r-notices { display: grid; gap: var(--s3); }
.r-notice { padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.r-notice .t-sub { margin: var(--s1) 0 var(--s2); }

/* ---------- Renewal ---------- */
.r-renew { display: grid; gap: var(--s2); }
.r-renew .t-sub { margin: 0; }
.r-renew--open { grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; border: 1.5px solid var(--accent); background: var(--surface); }
.r-renew--banner { padding: var(--s4); border-radius: var(--r-card); }
.r-renew__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-text); display: grid; place-items: center; }
.r-renew__main { display: grid; gap: var(--s2); justify-items: start; min-width: 0; }

/* ---------- Pay ---------- */
.r-monthpick { margin-bottom: var(--s4); }
.r-bill { display: grid; gap: var(--s4); padding: var(--s5) var(--s4); border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
@media (min-width: 600px) { .r-bill { padding: var(--s6); } }
.r-bill__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.r-bill__head .t-foot { margin: 0 0 2px; }
.r-bill__amount { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.r-bill__amount > .r-bill__now { font-size: var(--fs-44); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.r-bill__was { color: var(--text-3); text-decoration: line-through; font-size: var(--fs-17); }
.r-bill__count { display: flex; align-items: center; gap: 6px; margin: calc(var(--s2) * -1) 0 0; color: var(--accent-text); font-weight: 600; font-size: var(--fs-15); }
.r-bill__count.is-late { color: var(--danger-ink); }

/* Benefit slab ribbon: the month drawn as a strip, today pinned. */
.r-ribbon { margin: 0; padding: var(--s3) 0 0; }
.r-ribbon__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.r-ribbon__seg { position: relative; flex-basis: 0; min-width: 0; display: grid; gap: 4px; align-content: start; padding-top: 20px; }
.r-ribbon__bar { display: block; height: 10px; border-radius: 3px; background: var(--accent-tint-2); }
.r-ribbon__seg:first-child .r-ribbon__bar { border-radius: 6px 3px 3px 6px; }
.r-ribbon__seg:last-child .r-ribbon__bar { border-radius: 3px 6px 6px 3px; }
.r-ribbon__seg--sage .r-ribbon__bar { background: var(--secondary-tint); box-shadow: inset 0 0 0 1px var(--secondary); }
.r-ribbon__seg--late .r-ribbon__bar { background: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger); }
.r-ribbon__seg.is-past .r-ribbon__bar { opacity: 0.35; }
.r-ribbon__seg.is-now .r-ribbon__bar { background: var(--accent); height: 14px; margin-top: -2px; box-shadow: 0 0 0 3px var(--accent-tint); }
.r-ribbon__seg--late.is-now .r-ribbon__bar { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.r-ribbon__seg--sage.is-now .r-ribbon__bar { background: var(--secondary); box-shadow: 0 0 0 3px var(--secondary-tint); }
.r-ribbon__pin { position: absolute; top: 0; left: 0; font-size: var(--fs-11); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.r-ribbon__seg--late .r-ribbon__pin { color: var(--danger-ink); left: auto; right: 0; }
.r-ribbon__amt { font-size: var(--fs-12); font-weight: 650; font-family: var(--font-num); line-height: 1.2; overflow-wrap: anywhere; }
.r-ribbon__range { font-size: var(--fs-11); color: var(--text-3); line-height: 1.2; overflow-wrap: anywhere; }
.r-ribbon__seg.is-past .r-ribbon__amt, .r-ribbon__seg.is-past .r-ribbon__range { color: var(--text-3); font-weight: 450; }
.r-ribbon__seg--late .r-ribbon__amt { color: var(--danger-ink); }
.r-ribbon__legend { margin-top: var(--s2); }
@media (max-width: 420px) {
  .r-ribbon__seg { padding-top: 18px; }
  .r-ribbon__amt { font-size: 10.5px; }
  .r-ribbon__range { font-size: 10px; }
}

.r-details { border-radius: var(--r-input); background: var(--bg-sunken); }
.r-details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); padding: 0 var(--s4); cursor: pointer; font-size: var(--fs-15); font-weight: 550; color: var(--text-2); }
.r-details summary::-webkit-details-marker { display: none; }
.r-details[open] summary .icon { transform: rotate(180deg); }
.r-details .kv { padding: 0 var(--s4) var(--s4); font-size: var(--fs-13); }

.r-choice { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-input); background: var(--accent-tint); }
.r-choice .t-foot { margin: 0; color: var(--text-2); }
.r-choice .segmented { background: var(--surface); }
.r-pref { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.r-pref .segmented { width: 100%; }
.r-pref .segmented__opt { flex: 1; }

.r-streak { display: grid; gap: var(--s4); }
.r-streak__medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.r-medal { display: grid; justify-items: center; gap: 4px; text-align: center; padding: var(--s3) var(--s1); border-radius: var(--r-input); background: var(--bg-sunken); }
.r-medal__disc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-3); box-shadow: inset 0 0 0 2px var(--line-strong); }
.r-medal__name { font-weight: 650; font-size: var(--fs-15); }
.r-medal.is-earned .r-medal__disc { color: #fff; box-shadow: 0 6px 14px -6px rgba(64,42,12,0.5); }
.r-medal--bronze.is-earned .r-medal__disc { background: radial-gradient(circle at 35% 30%, #D99A6C, #A9683A); }
.r-medal--silver.is-earned .r-medal__disc { background: radial-gradient(circle at 35% 30%, #D5D9DF, #8A8F98); }
.r-medal--gold.is-earned .r-medal__disc { background: radial-gradient(circle at 35% 30%, #F0C75A, #B8860B); }

/* Checkout + success */
.r-checkout { display: grid; justify-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--bg-sunken); text-align: center; }
.r-checkout__merchant { display: flex; align-items: center; gap: var(--s3); text-align: left; }
.r-checkout__amount { font-size: var(--fs-44); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.r-paid { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s3) 0 var(--s2); }
.r-paid .t-sub { margin: 0; }
.r-paid__tick { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; animation: r-pop 420ms var(--ease-spring) both; }
.r-paid__actions { width: 100%; margin-top: var(--s2); }
@keyframes r-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Receipt */
.r-receipt { display: grid; gap: var(--s4); padding: var(--s4); border-radius: var(--r-input); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.r-receipt__head { display: flex; gap: var(--s3); align-items: flex-start; }
.r-receipt__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.r-receipt__rule { border-top: 2px dashed var(--line-strong); }
.r-receipt__note { margin: 0; }
.r-receipt .kv dd { overflow-wrap: anywhere; }

@media print {
  html.r-printing body * { visibility: hidden !important; }
  html.r-printing .r-receipt, html.r-printing .r-receipt * { visibility: visible !important; }
  html.r-printing .r-receipt { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; color: #000; background: #fff; }
  html.r-printing .overlay { background: none !important; }
}

/* ---------- Services hub ---------- */
.r-hub { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .r-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }
.r-hub__item { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--text); text-decoration: none; }
.r-hub__item:active { transform: scale(0.985); }
.r-hub__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); }
.r-hub__item--sos .r-hub__icon { background: var(--danger-tint); color: var(--danger-ink); }
.r-hub__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.r-hub__chev { color: var(--text-3); }

/* Meals */
.r-weekbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.r-day__head { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-17); font-weight: 650; margin: 0 0 var(--s2); }
.r-day__meals { border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); overflow: hidden; }
.r-meal { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 76px; }
.r-meal + .r-meal { border-top: 1px solid var(--line); }
.r-meal__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.r-meal__name { display: flex; align-items: baseline; gap: var(--s2); }
.r-meal__items { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-meal__state { display: flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--text-3); }
.r-meal__state.is-soon { color: var(--warning-ink); font-weight: 600; }
.r-meal.is-closed .r-meal__name .t-head { color: var(--text-2); }
.r-meal__act { flex: none; }
.r-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); min-width: 96px; justify-content: center; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--fs-15); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.r-toggle small { font-size: var(--fs-12); color: var(--text-3); font-weight: 500; }
.r-toggle.is-on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
:root[data-theme="dark"] .r-toggle.is-on { color: #10140F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .r-toggle.is-on { color: #10140F; } }
.r-toggle:active { transform: scale(0.96); }
.r-toggle:disabled { opacity: 0.6; }
.r-toggle:focus-visible { border-radius: var(--r-pill); }

.r-defaults { display: grid; gap: var(--s2); margin-top: var(--s3); }
.r-defaults__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--s2); }
.r-defaults__day { font-weight: 650; font-size: var(--fs-15); }
.r-defaults .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

.r-stars { display: flex; gap: 4px; }
.r-star { width: var(--touch); height: var(--touch); border: 0; border-radius: 12px; background: var(--bg-sunken); color: var(--text-3); display: grid; place-items: center; }
.r-star .icon { width: 24px; height: 24px; }
.r-star.is-on { background: var(--accent-tint); color: var(--accent); }
.r-star.is-on .icon { fill: currentColor; }

/* Laundry */
.r-laundry { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.r-laundry > * { min-width: 0; }
.r-dates { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: var(--s2); overflow-x: auto; padding: 2px 2px var(--s2); scroll-snap-type: x mandatory; scrollbar-width: none; }
.r-dates::-webkit-scrollbar { display: none; }
.r-date { scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; min-height: 76px; padding: var(--s2) 4px; border-radius: var(--r-input); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); }
.r-date__dow { font-size: var(--fs-11); color: var(--text-3); font-weight: 600; white-space: nowrap; }
.r-date__day { font-size: var(--fs-20); font-weight: 700; }
.r-date__price { font-size: var(--fs-11); font-weight: 650; color: var(--secondary); min-height: 14px; }
.r-date--express .r-date__price, .r-date--sameDay .r-date__price { color: var(--warning-ink); }
.r-date[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent) inset; }
.r-items { display: grid; border-radius: var(--r-input); background: var(--bg-sunken); }
.r-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); min-height: 60px; }
.r-item + .r-item { border-top: 1px solid var(--line); }
.r-stepper { display: flex; align-items: center; gap: 2px; background: var(--surface); border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); }
.r-stepper__btn { width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--accent-text); }
.r-stepper__btn:disabled { color: var(--text-3); opacity: 0.5; }
.r-stepper__val { min-width: 22px; text-align: center; font-weight: 650; }
.r-quote { padding: var(--s4); border-radius: var(--r-input); background: var(--accent-tint); min-height: 64px; }
.r-quote[aria-busy="true"] { opacity: 0.7; }
.r-quote .t-cap { margin: var(--s2) 0 0; }

.r-order { display: grid; gap: var(--s4); }
.r-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-track__step { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.r-track__step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; }
.r-track__step:first-child::before { display: none; }
.r-track__step.is-done::before, .r-track__step.is-now::before { background: var(--secondary); }
.r-track__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); color: #fff; }
.r-track__step.is-done .r-track__dot { background: var(--secondary); box-shadow: none; }
.r-track__step.is-now .r-track__dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.r-track__label { font-size: var(--fs-11); font-weight: 600; line-height: 1.2; }
.r-track__step:not(.is-done):not(.is-now) .r-track__label { color: var(--text-3); font-weight: 500; }
.r-track .t-cap { font-size: 10px; }

/* Requests */
.r-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr)); gap: var(--s2); }
.r-kind { display: grid; justify-items: center; gap: 6px; min-height: 88px; padding: var(--s3) var(--s2); border: 0; border-radius: var(--r-input); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--text); font-size: var(--fs-13); font-weight: 600; text-align: center; align-content: center; }
.r-kind:active { transform: scale(0.97); }
.r-kind__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); }
.r-sensitive { padding: var(--s3) var(--s4); border-radius: var(--r-input); background: var(--info-tint); }
.r-reqs { display: grid; gap: var(--s2); }
.r-req { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); justify-items: start; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.r-req > .row { width: 100%; }
.r-req__main { min-width: 0; flex: 1; }
.r-req__decision { margin: 0; }

/* Gate pass */
.r-passes { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .r-passes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* SOS */
.r-sos { display: grid; justify-items: center; gap: var(--s4); padding: var(--s4) 0; }
.r-sos .notice { width: 100%; }
.r-call { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch); padding: 0 var(--s5); border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text); text-decoration: none; font-weight: 600; }
.r-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.r-steps li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s3); }
.r-steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--danger-tint); color: var(--danger-ink); font-weight: 700; }

/* Documents */
.r-doctext { white-space: pre-wrap; font-size: var(--fs-15); line-height: 1.6; color: var(--text-2); max-height: 50vh; overflow-y: auto; padding: var(--s4); border-radius: var(--r-input); background: var(--bg-sunken); }
.r-signature { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-input); box-shadow: 0 0 0 1px var(--line); }
.r-signature .t-head { font-style: italic; }

/* Notices */
.r-gate { display: flex; gap: var(--s3); align-items: flex-start; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.r-gate > .icon { color: var(--accent-text); margin-top: 2px; }
.r-rules { margin: var(--s4) 0 0; padding-left: 1.2em; display: grid; gap: var(--s2); font-size: var(--fs-15); }

/* ---------- Me ---------- */
.r-mehead { display: flex; align-items: center; gap: var(--s4); margin: var(--s2) 0 var(--s5); }
.r-mehead__text { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.r-mehead__text .t-title { overflow-wrap: anywhere; }
.r-mehead__text .t-sub { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-13); }
.r-nickbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-top: 4px; border: 0; border-radius: var(--r-pill); background: var(--secondary-tint); color: var(--secondary); font-weight: 600; font-size: var(--fs-13); position: relative; }
.r-nickbtn::after { content: ""; position: absolute; inset: -4px 0; }
.r-avatars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.r-avatar { aspect-ratio: 1; min-height: var(--touch); border: 0; border-radius: 14px; background: var(--bg-sunken); font-size: 24px; display: grid; place-items: center; }
.r-avatar[aria-checked="true"] { background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent); }
.r-avatar:disabled { opacity: 0.55; }

.r-notifs { list-style: none; margin: 0; padding: 0; display: grid; }
.r-notif { width: 100%; display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); min-height: var(--touch); }
.r-notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; background: transparent; }
.r-notif.is-unread .r-notif__dot { background: var(--accent); }
.r-notif__main { display: grid; gap: 2px; min-width: 0; }
.r-notif__main .t-sub { font-size: var(--fs-13); }
.r-notif:not(.is-unread) .t-head { font-weight: 500; color: var(--text-2); }

.r-staycard { display: grid; gap: var(--s4); padding: var(--s4); border-radius: var(--r-card); background: var(--bg-sunken); }
.r-staycard__bed { display: grid; gap: 0; }
.r-exitzone { display: grid; gap: var(--s2); justify-items: start; padding-top: var(--s4); border-top: 1px solid var(--line); }
.r-exitzone .t-foot { margin: 0; }
.r-settle { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-input); background: var(--bg-sunken); }

.r-clear { display: grid; gap: var(--s3); border: 1.5px solid var(--warning); }
.r-clear .t-foot, .r-clear .t-sub { margin: 0; }
.r-liab { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-input); background: var(--bg-sunken); }
.r-plain { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--fs-13); color: var(--text-2); }

.r-pointsbig { display: grid; justify-items: center; padding: var(--s3) 0; }
.r-pointsbig .t-num { font-size: var(--fs-44); font-weight: 700; color: var(--accent-text); letter-spacing: -0.03em; line-height: 1.05; }
.r-ledger { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.r-ledger li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); }

.r-refer { display: grid; gap: var(--s3); }
.r-refer .t-sub { margin: 0; }
.r-refer__code { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-input); border: 1.5px dashed var(--accent); background: var(--accent-tint); }
.r-refer__code .t-num { font-weight: 700; font-size: var(--fs-17); letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .r-quick { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .r-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .r-tiles > .r-tile, .r-tiles > .r-tile:first-child, .r-tiles > .r-tile--points { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .r-paid__tick { animation: none; }
  .r-tile--link, .r-toggle { transition: none; }
}

/* Polish */
.r-weekbar .segmented { flex: 1 1 220px; }
.r-weekbar .segmented__opt { flex: 1; }
.r-clear .grid-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .r-clear .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-passwrap .pass > .t-foot.t-num { overflow-wrap: anywhere; padding: 0 var(--s5); font-size: var(--fs-11); }

/* ======================================================================
   New in v2: Goldy's ID, Resident Index band, attendance, visitors, Clean & Green, alumni, data
   ====================================================================== */
:root { --bin-green: #2E8B57; --bin-blue: #2F6FB3; --bin-red: #C2402F; --bin-black: #2B2623; --band-gold: #B8860B; --band-silver: #8A8F98; --band-bronze: #A0643A; }
.r-h { margin-bottom: var(--s3); }

/* Goldy's ID: a stamped tag */
.r-gid { display: inline-flex; align-items: stretch; min-height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; }
.r-gid__k { display: grid; place-items: center; padding: 0 8px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.r-gid__v { display: grid; place-items: center; padding: 0 10px; font-size: var(--fs-13); font-weight: 650; letter-spacing: .04em; }
.r-gid:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.r-hello__chips, .r-mehead__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); align-items: center; }

.r-gatechip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text); font-size: var(--fs-13); font-weight: 600; text-decoration: none; }
.r-gatechip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.r-gatechip--out .r-gatechip__dot { background: var(--warning); }
.r-gatechip--on_leave .r-gatechip__dot, .r-gatechip--night_out .r-gatechip__dot { background: var(--info); }

/* Band */
.r-band { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 4px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 650; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.r-band__medal { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.r-band--gold .r-band__medal { background: radial-gradient(circle at 35% 30%, #F2CF6B, var(--band-gold)); }
.r-band--silver .r-band__medal { background: radial-gradient(circle at 35% 30%, #E4E7EC, var(--band-silver)); }
.r-band--bronze .r-band__medal { background: radial-gradient(circle at 35% 30%, #E2A77A, var(--band-bronze)); }
.r-band__medal .icon { width: 14px; height: 14px; }
.r-bandcard { position: relative; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); display: grid; gap: var(--s2); overflow: hidden; }
.r-bandcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--band-gold); }
.r-bandcard--silver::before { background: var(--band-silver); } .r-bandcard--bronze::before { background: var(--band-bronze); }
.r-bandcard__lead { margin: 0; font-size: var(--fs-15); font-weight: 550; }
.r-bandcard__tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.r-bandcard__tips li { display: flex; gap: 8px; font-size: var(--fs-15); color: var(--text-2); }
.r-bandcard__tips .icon { flex: none; color: var(--secondary); margin-top: 3px; }

/* Gate status */
.r-gstatus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s5) var(--s4); border-radius: var(--r-card); background: var(--secondary-tint); color: var(--text); }
.r-gstatus--out { background: var(--warning-tint); } .r-gstatus--on_leave, .r-gstatus--night_out { background: var(--info-tint); }
.r-gstatus__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); color: var(--secondary); box-shadow: var(--sh-1); }
.r-gstatus--out .r-gstatus__icon { color: var(--warning-ink); } .r-gstatus--on_leave .r-gstatus__icon, .r-gstatus--night_out .r-gstatus__icon { color: var(--info-ink); }
.r-gstatus__main p { margin: 2px 0 0; }
.r-gstatus__gate { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding-top: var(--s3); border-top: 1px dashed var(--line-strong); font-size: var(--fs-13); color: var(--text-2); }
.r-gactions { display: grid; gap: var(--s2); }
.r-gaway { display: flex; flex-wrap: wrap; gap: var(--s2); }
.r-gsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.r-gsteps li { display: flex; align-items: center; gap: var(--s2); color: var(--text-3); font-size: var(--fs-15); }
.r-gsteps li.is-now { color: var(--text); font-weight: 600; } .r-gsteps li.is-done { color: var(--secondary); }
.r-gsteps__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); font-size: var(--fs-13); font-weight: 700; flex: none; }
.r-gsteps li.is-now .r-gsteps__n { background: var(--accent); color: var(--text-on-accent); }
.r-glocate { display: grid; justify-items: center; gap: var(--s2); padding: var(--s5) 0; text-align: center; }
.r-glocate__pulse { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); animation: r-pulse 1.4s var(--ease) infinite; }
@keyframes r-pulse { 0% { box-shadow: 0 0 0 0 rgba(184,134,11,.35); } 100% { box-shadow: 0 0 0 22px rgba(184,134,11,0); } }
@media (prefers-reduced-motion: reduce) { .r-glocate__pulse { animation: none; } }
.r-gprivacy { display: flex; gap: 6px; align-items: flex-start; }
.r-gprivacy .icon { flex: none; margin-top: 1px; color: var(--secondary); }
.r-gevents { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.r-gev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.r-gev__dot { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--secondary-tint); color: var(--secondary); }
.r-gev--out .r-gev__dot { background: var(--warning-tint); color: var(--warning-ink); }
.r-gev__main { display: grid; min-width: 0; }
.r-myqr { display: grid; gap: var(--s3); justify-items: stretch; }
.r-myqr__code { display: grid; place-items: center; }
.r-myqr__code .qr { width: 180px; height: 180px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(31,26,23,.1); }

/* Are you safe? */
.r-safe { display: grid; gap: var(--s3); padding: var(--s5) var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 2px var(--warning), var(--sh-2); text-align: center; justify-items: center; }
.r-safe__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--warning-tint); color: var(--warning-ink); }
.r-safe__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; }
.r-safe--fine, .r-safe--help { grid-template-columns: auto 1fr; text-align: left; align-items: center; box-shadow: 0 0 0 1px var(--line); }
.r-safe--fine .icon { color: var(--success-ink); } .r-safe--help .icon { color: var(--danger-ink); }
@media (max-width: 380px) { .r-safe__btns { grid-template-columns: 1fr; } }

/* Visitors */
.r-visrule { display: flex; gap: 8px; align-items: flex-start; padding: var(--s3); border-radius: var(--r-input); background: var(--bg-sunken); }
.r-visrule .icon { flex: none; color: var(--secondary); margin-top: 2px; }
.r-visrule p { margin: 0; }
.r-visno { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r-input); background: var(--info-tint); }
.r-visno .icon { flex: none; color: var(--info-ink); } .r-visno p { margin: 0; font-size: var(--fs-15); }
.r-visitor { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.r-visitor.is-inside { box-shadow: 0 0 0 2px var(--secondary), var(--sh-1); }
.r-visitor__main { min-width: 0; }
.r-visitor__pass { display: grid; gap: var(--s3); }
.r-visitor__pass .pass { box-shadow: 0 0 0 1px var(--line); }

/* Clean & Green: services */
.r-cleaned { display: grid; gap: var(--s3); }
.r-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.r-svc li { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-3); font-size: var(--fs-13); font-weight: 550; }
.r-svc li.is-on { background: var(--secondary-tint); color: var(--secondary); }
.r-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.r-thumb { display: grid; justify-items: center; gap: 6px; min-height: 84px; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: var(--fs-15); cursor: pointer; }
.r-thumb .icon { width: 28px; height: 28px; }
.r-thumb--up .icon { color: var(--secondary); } .r-thumb--down .icon { color: var(--danger-ink); }
.r-thumb:hover { background: var(--bg-sunken); } .r-thumb:active { transform: scale(.98); }
.r-cleaned__said { display: flex; gap: 8px; align-items: center; padding: var(--s3); border-radius: var(--r-input); font-size: var(--fs-15); }
.r-cleaned__said--up { background: var(--secondary-tint); } .r-cleaned__said--down { background: var(--warning-tint); }

.r-absent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--warning-tint); }
.r-absent__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--warning-ink); }
.r-absent .t-sub { margin: 4px 0 0; color: var(--text); }
.r-absent__ok { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; color: var(--success-ink); }

.r-bmc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--text); }
.r-bmc__when { display: grid; justify-items: center; min-width: 72px; padding: var(--s2) var(--s3); border-radius: 14px; background: var(--text); color: var(--bg); }
.r-bmc__time { font-size: var(--fs-20); font-weight: 700; line-height: 1.1; }
.r-bmc__day { font-size: 11px; font-weight: 600; opacity: .8; }
.r-bmc__main { min-width: 0; display: grid; gap: 4px; }
.r-bmc__main h2, .r-bmc__main p { margin: 0; }
.r-bmc__main .t-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-15); }
.r-bmc__rest { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-13); color: var(--text-2); }
.r-bmc__rest li { display: flex; gap: 8px; align-items: center; }
.r-bmclink { color: inherit; text-decoration: none; display: block; border-radius: var(--r-card); }
.r-bmclink:active { transform: scale(.99); }

.r-bindot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--bin-green); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.r-bindot--blue { background: var(--bin-blue); } .r-bindot--red { background: var(--bin-red); } .r-bindot--black { background: var(--bin-black); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

.r-binpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--s2); }
.r-binpick__opt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch); border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.r-binpick__opt[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--bg-sunken); }

/* Verdict: a round seal */
.r-verdict { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s4) var(--s5); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-2); text-align: center; }
.r-verdict__seal { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--bin-green); box-shadow: 0 0 0 6px var(--secondary-tint); animation: r-seal .5s var(--ease-spring) both; }
.r-verdict--contaminated .r-verdict__seal { background: var(--warning); color: #3A2A00; box-shadow: 0 0 0 6px var(--warning-tint); }
.r-verdict--unclear .r-verdict__seal { background: var(--text-3); box-shadow: 0 0 0 6px var(--bg-sunken); }
@keyframes r-seal { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .r-verdict__seal { animation: none; } }
.r-verdict__items { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; text-align: left; }
.r-verdict__items li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--bg-sunken); flex-wrap: wrap; }
.r-verdict__item { font-weight: 600; } .r-verdict__to { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); font-size: var(--fs-13); }
.r-verdict__tip { display: flex; gap: 6px; margin: 0; font-size: var(--fs-15); color: var(--text-2); text-align: left; }
.r-verdict__tip .icon { flex: none; margin-top: 2px; }

.r-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.r-check { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.r-check__img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--bg-sunken); display: grid; place-items: center; }
.r-check__main { display: grid; min-width: 0; }
.r-check--contaminated b { color: var(--warning-ink); }

/* Bin guide: lidded bins */
.r-bins { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .r-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-bin { --bc: var(--bin-green); display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s4); border-radius: 10px 10px var(--r-card) var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); border-top: 0; overflow: hidden; }
.r-bin--blue { --bc: var(--bin-blue); } .r-bin--red { --bc: var(--bin-red); } .r-bin--black { --bc: var(--bin-black); }
.r-bin__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; margin: 0 calc(var(--s4) * -1); padding: var(--s4) var(--s4) var(--s3); background: var(--bc); color: #fff; position: relative; }
.r-bin__head .t-foot { color: rgba(255,255,255,.85); }
.r-bin__lid { position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.45); }
.r-bin__who { font-size: 11px; font-weight: 650; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); white-space: nowrap; }
.r-bin__ex { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.r-bin__ex li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-sunken); font-size: var(--fs-13); }
.r-bin__rule { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.r-bintips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-bintips li { display: flex; gap: 8px; font-size: var(--fs-15); } .r-bintips .icon { flex: none; color: var(--accent-text); margin-top: 3px; }
.r-lookup { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.r-lookup__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.r-lookup__bin { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); padding-top: 2px; }
.r-lookup__main { display: grid; min-width: 0; }

/* Scores */
.r-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; }
.r-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.r-badge { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-input); background: var(--surface); box-shadow: 0 0 0 1px var(--line); opacity: .7; }
.r-badge > span:nth-child(2) { display: grid; min-width: 0; }
.r-badge.is-earned { opacity: 1; box-shadow: 0 0 0 1px var(--secondary); }
.r-badge__art { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-3); }
.r-badge.is-earned .r-badge__art { background: var(--bin-green); color: #fff; }
.r-badge__st { font-size: var(--fs-12); font-weight: 650; color: var(--text-3); }
.r-badge.is-earned .r-badge__st { color: var(--secondary); }
.r-league { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.r-league__row { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-input); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.r-league__row.is-mine { box-shadow: 0 0 0 2px var(--secondary); }
.r-league__rank { font-weight: 700; font-size: var(--fs-20); color: var(--text-3); }
.r-league__row:first-child .r-league__rank { color: var(--bin-green); }
.r-league__name { font-weight: 600; min-width: 0; display: grid; } .r-league__name small { font-weight: 500; color: var(--text-3); font-size: var(--fs-12); }
.r-league__bar { height: 8px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; } .r-league__bar i { display: block; height: 100%; background: var(--bin-green); border-radius: 4px; }
.r-league__pct { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
@media (max-width: 400px) { .r-league__row { grid-template-columns: 24px minmax(0, 1fr) auto; } .r-league__bar { grid-column: 2 / -1; grid-row: 2; } }

/* Alumni & data */
.r-alumni { display: grid; gap: var(--s3); }
.r-alumni__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
.r-alumni__mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blush); color: #9C3D5A; }
.r-alumni__keep { padding: var(--s3); border-radius: var(--r-input); background: var(--bg-sunken); } .r-alumni__keep p { margin: 2px 0 0; }
.r-dgroups { display: grid; gap: var(--s2); }
.r-dgroup { padding: var(--s3) var(--s4); border-radius: var(--r-input); border-left: 4px solid var(--secondary); background: var(--surface-2); }
.r-dgroup--deid { border-left-color: var(--info); } .r-dgroup--del { border-left-color: var(--danger); }
.r-dgroup__head { display: flex; gap: 8px; align-items: center; } .r-dgroup p { margin: 2px 0 6px; }
.r-dgroup ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-15); }
.r-erasure { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-card); background: var(--info-tint); }
.r-erasure__date { display: grid; } .r-erasure__date b { font-size: var(--fs-24); }
.r-erasure p { margin: 0; }
.r-erasure__would { margin: 0; padding: var(--s3); border-radius: var(--r-input); background: var(--bg-sunken); font-weight: 600; }

/* Misc */
.r-garden__art { width: 56px; height: 56px; flex: none; }
.r-myrating { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.r-sigimg { margin: 0; padding: var(--s3); border-radius: var(--r-input); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.r-sigimg img { max-width: 100%; max-height: 90px; display: block; }
.r-mphotos { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.r-mphotos img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-sm); }

/* Camera */
.cam { display: grid; gap: var(--s3); }
.cam__btns { display: grid; gap: var(--s2); justify-items: center; }
.cam__file { cursor: pointer; }
.cam__frame { position: relative; border-radius: var(--r-card); overflow: hidden; background: #000; aspect-ratio: 1; }
.cam__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam__reticle { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.cam__manual { display: grid; gap: var(--s2); }
.cam-photo { display: grid; gap: var(--s2); }
.cam-photo__preview { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--bg-sunken); aspect-ratio: 4 / 3; }
.cam-photo__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-photo__empty { aspect-ratio: 4 / 3; border-radius: var(--r-card); border: 2px dashed var(--line-strong); display: grid; place-items: center; color: var(--text-3); }
label.btn { cursor: pointer; }

/* Attendant app */
.a-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--r-card); background: var(--text); color: var(--bg); }
.a-progress__n { font-size: var(--fs-44); font-weight: 700; line-height: 1; } .a-progress__n small { font-size: var(--fs-20); opacity: .7; }
.a-progress__main { display: grid; gap: 6px; } .a-progress__main .t-foot { color: inherit; opacity: .75; }
.a-progress__bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.a-progress__bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--t-med) var(--ease); }
.a-rooms { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .a-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-room { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.a-room.is-done { box-shadow: 0 0 0 2px var(--secondary); background: var(--secondary-tint); }
.a-room__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.a-room__name { margin: 0; font-size: var(--fs-28); font-weight: 700; letter-spacing: -.02em; }
.a-room__state { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.a-room.is-done .a-room__state { color: var(--secondary); }
.a-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.a-job { display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-15); font-weight: 600; text-align: left; cursor: pointer; }
.a-job__tick { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-3); flex: none; }
.a-job.is-on { border-color: var(--secondary); } .a-job.is-on .a-job__tick { background: var(--secondary); color: #fff; }
.a-room__foot { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.a-room__note { margin: 0; }
.a-room__btns { display: flex; gap: 2px; flex-wrap: wrap; }
.a-room__photo { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.a-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; }
.a-score__n { font-size: var(--fs-44); font-weight: 700; color: var(--secondary); min-width: 72px; text-align: center; }
.a-score p { margin: 2px 0 0; }

/* Early return from leave (SPEC §21.7) */
.r-er__hint { display: block; margin-top: 2px; }
.r-er__late { padding: var(--s3); border-radius: var(--r-input); background: var(--surface-2); }
.r-req--er .row { gap: var(--s2); }

/* ---------- Community (SPEC §23): hostel mates, help board, print & study, scholarship ---------- */
.cm-row { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; }
.cm-row > .field { flex: 1; min-width: 0; }
.cm-row--between { justify-content: space-between; align-items: center; }
.cm-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cm-fields { display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.cm-filters { display: grid; gap: var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .cm-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cm-filters > :last-child { grid-column: 1 / -1; } }
.cm-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cm-mate { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--sh-1); min-width: 0; overflow-wrap: anywhere; }
.cm-mate__top { display: flex; gap: var(--s3); align-items: center; }
.cm-mate__who { min-width: 0; }
.cm-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); margin: 0; font-size: 14px; }
.cm-kv dt { color: var(--text-2); }
.cm-kv dd { margin: 0; }
.cm-bio { margin: 0; }
.cm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.cm-post { display: grid; gap: var(--s2); overflow-wrap: anywhere; }
.cm-offers, .cm-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.cm-offers li, .cm-jobs li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-input); background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.cm-contact { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-input); background: var(--accent-tint); color: var(--text); }
.cm-contact > div { flex: 1; min-width: 0; }
.cm-quota { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r-card); background: var(--accent-tint); }
.cm-quota > span:last-child { display: grid; gap: 2px; }
.cm-quota__n { font-size: 34px; font-weight: 700; line-height: 1; color: var(--accent-text); min-width: 1.4em; text-align: center; }
.cm-file { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-input); background: var(--surface-2); }
.cm-file > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-quote { font-weight: 600; }
.cm-award { display: flex; gap: var(--s3); align-items: center; }
.cm-award > .icon, .cm-award > svg { color: var(--accent-text); flex: none; }
.cm-wall { display: grid; gap: var(--s2); }
.cm-wall__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cm-wall__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.cm-wall__item > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.cm-wall__exam { overflow-wrap: anywhere; }
.cm-wall__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); flex: none; }
.cm-wall__score { font-weight: 700; color: var(--accent-text); }
/* Certificate: cream and gold, printable */
.cm-cert { position: relative; margin: var(--s3) auto 0; max-width: 720px; padding: clamp(20px, 5vw, 48px); text-align: center; color: #2a2118; background: #fffaf0;
  border: 2px solid #c9a227; box-shadow: inset 0 0 0 6px #fffaf0, inset 0 0 0 7px #e6cf86; border-radius: 12px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.cm-cert__brand { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; }
.cm-cert__logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #2a2118; color: #e9c35a; font-weight: 800; }
.cm-cert__kicker { margin: 8px 0 0; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #8a6d1e; }
.cm-cert__title { margin: 0; font-size: clamp(28px, 7vw, 44px); color: #8a6d1e; font-family: Georgia, 'Times New Roman', serif; }
.cm-cert__lead { margin: 4px 0; }
.cm-cert__name { margin: 4px 0 0; font-size: clamp(22px, 5.5vw, 32px); font-weight: 700; font-family: Georgia, 'Times New Roman', serif; }
.cm-cert__gid { margin: 0; color: #6b5a3c; }
.cm-cert__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; border-top: 1px solid #e6cf86; padding-top: 12px; }
.cm-cert__foot > div { display: grid; gap: 2px; }
.cm-cert .t-foot { color: #6b5a3c; }
.cm-cert__addr { margin-top: 8px; }
@media (max-width: 420px) { .cm-cert__foot { grid-template-columns: minmax(0, 1fr); } }
@media print {
  html.cm-printing body * { visibility: hidden !important; }
  html.cm-printing .cm-cert, html.cm-printing .cm-cert * { visibility: visible !important; }
  html.cm-printing .cm-cert { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; }
}

/* #/share — file shared to the app (Android share target) or picked with "Upload PDF" */
.sh { max-width: 640px; margin-inline: auto; }
.sh-file__name { overflow-wrap: anywhere; }
.sh-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sh-person { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sh-person > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sh-person:hover, .sh-person:focus-visible { border-color: var(--accent); }
.sh-who { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-input); background: var(--accent-tint); }
.sh-who > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Parent access (SPEC §24): her Family page, the parent app, the public page and the admin screen */
.fam-link__top { display: flex; gap: var(--s3); align-items: flex-start; }
.fam-link__top > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fam-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fam-cats { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fam-consent { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.fam-consent__row span { display: grid; gap: 2px; }
.fam-consent__hint { display: block; }
.fam-views, .par-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fam-views li { overflow-wrap: anywhere; }
.par-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.par-list li > span { min-width: 0; overflow-wrap: anywhere; }
.par-list--stack li { display: grid; justify-content: stretch; gap: 2px; }
.par-alerts li.is-unread .par-alert__title { color: var(--accent-text); }
.par-alert__title { display: flex; gap: var(--s1); align-items: center; }
.par-cat { padding: 0; overflow: hidden; }
.par-cat__head { width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.par-cat__head > .t-head { flex: 1; }
.par-cat__body { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s2); }
.par-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }
.par-plan { display: grid; gap: var(--s2); }
.par-plan__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.par-plan__price { font-size: 28px; font-weight: 700; }
.par-sub { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.par-ahead { display: grid; }
.par-req__grid { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .par-req__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.par-req__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.par-req__list li { display: flex; gap: var(--s2); align-items: flex-start; }
.par-home__card { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.par-home__card > div { min-width: 0; flex: 1 1 260px; }
.par-adm-plans { display: grid; gap: var(--s3); }
.par-adm-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); align-items: end; }
.jr-parent { display: grid; }
.par-req__faq { margin-top: var(--s4); }
.par-req__faq details { border-top: 1px solid var(--line); padding: var(--s2) 0; }
.par-req__faq summary { cursor: pointer; }

/* ---------- Step timeline (laundry, bookings, room cleaning, requests, print): vertical, parcel-tracker style ---------- */
.stl { list-style: none; margin: 0; padding: 0; display: grid; }
.stl__step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s3); padding-bottom: var(--s3); }
.stl__step:last-child { padding-bottom: 0; }
.stl__step::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line-strong); }
.stl__step:last-child::before { display: none; }
.stl__step.is-done::before, .stl__step.is-current::before, .stl__step.is-skipped::before { background: var(--secondary); }
.stl__step.is-current::before { background: linear-gradient(var(--secondary), var(--line-strong)); }
.stl__dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); color: #fff; }
.stl__dot .icon { width: 14px; height: 14px; }
.stl__step.is-done .stl__dot { background: var(--secondary); box-shadow: none; }
.stl__step.is-current .stl__dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.stl__step.is-skipped .stl__dot { background: var(--surface); box-shadow: inset 0 0 0 2px var(--secondary); color: var(--secondary); }
.stl__step.is-stopped .stl__dot { background: var(--danger-solid, var(--danger)); box-shadow: none; }
.stl__body { min-width: 0; padding-top: 2px; }
.stl__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.stl__label { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; }
.stl__step.is-pending .stl__label { color: var(--text-3); font-weight: 500; }
.stl__step.is-current .stl__label { color: var(--accent-text, var(--accent)); }
.stl__step.is-stopped .stl__label { color: var(--danger-ink); }
.stl__time { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.stl__step.is-current .stl__time { color: var(--text-2); font-weight: 600; }
.stl__meta { font-size: var(--fs-13); color: var(--text-2); margin-top: 1px; overflow-wrap: anywhere; }
.stl__expected { display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.stl__expected .icon { width: 13px; height: 13px; }
.stl__photo { display: inline-block; margin-top: var(--s2); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.stl__photo img { width: 96px; height: 72px; object-fit: cover; }
.stl--compact .stl__step { padding-bottom: var(--s2); }
.stl--compact .stl__label { font-size: var(--fs-13); }
/* "Received 12 pieces?" / "Fixed?" answer box under a timeline */
.stl-ask { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-input); background: var(--accent-tint); display: grid; gap: var(--s2); }
.stl-ask__q { font-weight: 600; }
.stl-ask .grid-2 { gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stl-said { margin-top: var(--s2); font-size: var(--fs-13); color: var(--success-ink); display: flex; align-items: center; gap: 6px; }
.stl-said--warn { color: var(--warning-ink); }
.r-order__facts { font-size: var(--fs-13); color: var(--text-2); }
.stl-card { display: grid; gap: var(--s3); }
.stl-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.stl-card__head > :first-child { min-width: 0; }
.cm-jobs li:has(.cm-job__steps) { flex-wrap: wrap; }
.cm-job__steps { flex-basis: 100%; padding-top: var(--s2); }

/* ---------- Laundry bill + expected time (owner 4-Nov-2026) ---------- */
.lw-when { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 600; color: var(--accent); font-size: .9rem; }
.lw-express { display: flex; align-items: center; gap: 6px; color: var(--warning); }
.lw-details { border-top: 1px solid var(--line); padding-top: var(--s2, 8px); }
.lw-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; min-height: 44px; list-style: none; }
.lw-details > summary::-webkit-details-marker { display: none; }
.lw-details > summary::after { content: '▾'; color: var(--text-2); }
.lw-details[open] > summary::after { content: '▴'; }
.lw-details[open] > summary { margin-bottom: 8px; }
.lw-details > summary > span:first-child { margin-right: auto; }
.lw-saved-chip { font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); white-space: nowrap; }
.lw-bill { display: grid; gap: 6px; }
.lw-saved { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: var(--success); }
.lw-month { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.lw-month__amt { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--success); }
.lw-bags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lw-bagbtn { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; min-height: 56px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.lw-bagbtn[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); }
.lw-bagbtn__k { font-weight: 700; font-size: .9rem; }
.lw-eta { display: grid; gap: 10px; }
.lw-eta__row { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.lw-express-offer { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--warning); }
.lw-express-offer.is-suggested { border-style: solid; background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.lw-express-offer p { margin: 0; }
.lw-print { gap: 12px; }
.t-right { text-align: right; }
@media print { .no-print, .app-nav, .tabbar, header.app-head, nav { display: none !important; } .lw-print { box-shadow: none; border: 0; } .lw-details > summary::after { content: ''; } }
.lw-bill .kv dd { white-space: nowrap; }

/* ---------------- Goldy's points (owner approved Nov 2026): wallet, claim form, split bill, staff queue ---------------- */
.pt-bal { display: grid; gap: var(--s3); }
.pt-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); text-align: center; }
.pt-tot > div { display: grid; gap: 2px; padding: var(--s2); border-radius: 12px; background: var(--surface-2); }
.pt-tot .t-num { font-size: var(--fs-17, 17px); font-weight: 650; }
.pt-where { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pt-where__i { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--success-tint); color: var(--success-ink); font-size: 13px; }
.pt-where__i.is-off { background: var(--surface-2); color: var(--text-3); text-decoration: line-through; }
.r-ledger li.pt-expired { color: var(--text-3); }
.pt-share { display: grid; gap: var(--s3); border: 1.5px solid var(--accent-tint-2); background: linear-gradient(180deg, var(--accent-tint), var(--surface)); }
.pt-share__top { display: flex; gap: var(--s3); align-items: flex-start; }
.pt-share__top > .icon { color: var(--accent-text); flex: none; margin-top: 2px; }
.pt-share__amt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--s2); }
.pt-share__amt .t-num { font-size: 26px; font-weight: 700; color: var(--accent-text); grid-row: span 2; align-self: center; }
.pt-form { display: grid; gap: var(--s3); }
.pt-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.pt-photo { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.pt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-photo__x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.pt-photo--add { display: grid; place-content: center; justify-items: center; gap: 4px; border-style: dashed; color: var(--text-2); cursor: pointer; }
.pt-est { padding: var(--s3); border-radius: 12px; background: var(--accent-tint); }
.pt-est__n { display: flex; gap: var(--s2); align-items: center; color: var(--accent-text); }
.pt-split .chips { row-gap: var(--s2); }
.pt-shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-shares li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pt-shares li > .t-body { flex: 1 1 auto; min-width: 0; }
.pt-shares__in { width: 92px; text-align: right; min-height: 40px; }
.pt-shares__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; }
.pt-shares--ro li { font-size: 14px; }
.pt-claim { display: grid; gap: var(--s2); }
.pt-claim__top, .pt-q__top { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.pt-use { padding: var(--s3); border-radius: 12px; border: 1.5px solid var(--accent-tint-2); background: var(--accent-tint); display: grid; gap: var(--s2); }
.pt-use.is-off { background: var(--surface-2); border-color: var(--line); }
.pt-use--order { margin: var(--s2) 0; }
.pt-q { display: grid; gap: var(--s3); }
.pt-q--flag { border-left: 4px solid var(--warning); }
.pt-q__amt { font-size: 20px; font-weight: 700; }
.pt-flags { display: grid; gap: var(--s2); }
.pt-q__photos { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pt-q__ph { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; width: 96px; height: 120px; background: var(--surface-2); }
.pt-q__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-big { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .85); display: grid; place-items: center; padding: 16px; }
.pt-big img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.pt-toggles { display: grid; gap: var(--s2); }
.pt-cats { display: grid; gap: 0; }
.pt-cat { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.pt-cat > .t-body { flex: 1; }
.pt-cat__in { width: 72px; text-align: right; min-height: 40px; }
.pt-save { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; }

/* ---------------- Laundry Wallet (owner approved Nov 2026) ----------------
   Wallet card with three limits (words + bar, never colour alone), piece counters with big tap targets, live estimate,
   over-limit message. Shared with the staff count check at drop-off (public/js/laundry-wallet.js). */
.lwt-card { display: grid; gap: var(--s4); background: linear-gradient(160deg, var(--accent-tint) 0%, var(--surface) 70%); }
.lwt-card__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-13); font-weight: 650; color: var(--accent-text); text-transform: none; }
.lwt-card__amt { font-family: var(--font-num); font-size: var(--fs-34); font-weight: 800; line-height: 1.1; color: var(--text); margin-top: 2px; }
.lwt-card__unit { font-family: var(--font); font-size: var(--fs-15); font-weight: 500; color: var(--text-2); }
.lwt-meters { display: grid; gap: var(--s3); }
.lwt-meter { display: grid; gap: 4px; }
.lwt-meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lwt-meter__k { font-weight: 650; }
.lwt-meter__v { font-weight: 700; }
.lwt-flag { font-size: var(--fs-12); font-weight: 650; padding: 1px 8px; border-radius: var(--r-pill); background: var(--warning-tint); color: var(--warning-ink); }
.lwt-meter.is-out .lwt-flag { background: var(--danger-tint); color: var(--danger-ink); }
.lwt-bar { height: 10px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.lwt-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--secondary); transition: width .3s ease; }
.lwt-meter.is-low .lwt-bar__fill { background: var(--warning); }
.lwt-meter.is-out .lwt-bar__fill { background: var(--danger); }
.lwt-held { display: flex; align-items: center; gap: 6px; margin: 0; }
.lwt-how > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--accent-text); }
.lwt-rules { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--text-2); font-size: var(--fs-15); }
.lwt-moves ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lwt-move { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); }
.lwt-items { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; }
.lwt-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; min-height: 56px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lwt-item.is-on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lwt-item__name { display: grid; gap: 1px; min-width: 0; }
.lwt-item__name .t-body { font-weight: 600; }
.lwt-item__sum { font-weight: 700; min-width: 3.5em; text-align: right; }
.lwt-item .r-stepper__btn { width: 44px; height: 44px; }
.lwt-item .r-stepper__val { min-width: 28px; font-size: var(--fs-17); }
.lwt-est { display: grid; gap: 6px; }
.lwt-est__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lwt-est__row--over { color: var(--warning-ink); }
.lwt-est__row--over span { display: inline-flex; align-items: center; gap: 4px; }
.lwt-est .t-cap { margin: 0; }
.lwt-billd { margin-top: var(--s2); }
.lwt-over__p { margin: 4px 0; }
.lwt-over__list { margin: 0 0 var(--s2); padding-left: 1.2em; display: grid; gap: 4px; }
.lwt-verify .lwt-est { padding: var(--s3); border-radius: var(--r-input); background: var(--accent-tint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lwt-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--surface) 70%); }
}
:root[data-theme="dark"] .lwt-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--surface) 70%); }
.lwt-moves { margin-top: var(--s3); }
.lwt-item__ctl { display: flex; align-items: center; gap: 4px; }
.lwt-num { width: 58px; min-width: 0; padding: 0 6px; text-align: center; height: 44px; }
.lwt-verify .lwt-item { grid-template-columns: minmax(0, 1fr) auto; }
.lwt-verify .lwt-item__sum { display: none; }
.lwt-verify .r-stepper__val { display: none; }
/* Monthly bill: laundry paid by the Laundry Wallet (struck value + FREE; screen readers hear "was ₹X, now free"). */
.lw-free s { color: var(--text-3); }
.lw-free b { color: var(--success-ink); font-weight: 700; }
.lw-year { display: flex; align-items: center; gap: 6px; margin: var(--s2) 0 0; font-weight: 600; color: var(--success-ink); }
.lwt-same { margin: var(--s2) 0 0; }
.lw-free { white-space: nowrap; }
/* Admin > Points > Welcome points: sign-up gift steps per app (owner 6-Nov) */
.pt-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pt-steps .pt-step { display: grid; border-bottom: 1px solid var(--line, rgba(31,26,23,.08)); grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; align-items: start; padding: 4px 0; }
.pt-step .field { margin: 0; }
.pt-step .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the switch names the step */
.pt-step__warn { grid-column: 1 / -1; margin: 0; color: var(--warning-ink, #8A5300); }
.pt-step .input { text-align: right; font-variant-numeric: tabular-nums; }
.pt-bad { color: var(--danger-ink, #B42318); font-weight: 600; }