/* ─────────────────────────────────────────────────────────────────────────
   Loonee app screens, recreated from the Flutter source.

   One app point = var(--u): every size below is the value in the widget code
   (home_screen.dart, pet_card.dart, pet_card_info_panel.dart,
   quick_action_button.dart, upcoming_reminders_card.dart,
   glass_bottom_nav_bar.dart, glass_ai_orb.dart, …), so a screen scales
   cleanly to any width. Theme colours come in as --t-* (data/themes.json,
   generated from lib/core/theme/themes/*.dart); Dark is the default.
   ───────────────────────────────────────────────────────────────────────── */

/* Dark-theme defaults live on :root so any ancestor (the theme picker) can
   re-tint every screen inside it just by setting --t-*. */
:root {
    --t-bg: #0a0705;
    --t-glass: rgba(255, 255, 255, 0.078);
    --t-border: rgba(255, 255, 255, 0.149);
    --t-text: #ffffff;
    --t-text2: rgba(255, 255, 255, 0.702);
    --t-text3: rgba(255, 255, 255, 0.6);
    --t-subtle: rgba(255, 255, 255, 0.051);
    --t-icon2: rgba(255, 255, 255, 0.702);
    --t-glow1: rgba(245, 158, 11, 0.149);
    --t-glow2: rgba(225, 29, 72, 0.149);
}

.app {
    --w: 300px;
    --u: calc(var(--w) / 390);
    position: relative;
    width: var(--w);
    aspect-ratio: 390 / 844;
    flex: none;
    overflow: hidden;
    isolation: isolate;
    border-radius: calc(var(--w) * 0.14);
    background: var(--t-bg);
    color: var(--t-text);
    font-family: var(--font);
    font-size: calc(14 * var(--u));
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
}

/* AppBackground (app_background.dart): two circular glows. Glow 1 is a
   circle in a 0.8W x 0.6H box set 100 pt past the top-right corner; glow 2 a
   circle in a 0.7W x 0.5H box 50 pt past the bottom-left. Each fades to clear
   at 70% of its radius. */
.app__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle calc(156 * var(--u)) at calc(334 * var(--u)) calc(153 * var(--u)), var(--t-glow1), transparent 70%),
        radial-gradient(circle calc(136.5 * var(--u)) at calc(86.5 * var(--u)) calc(683 * var(--u)), var(--t-glow2), transparent 70%);
}

.app svg {
    flex: none;
    fill: currentColor;
}

.app b,
.app strong {
    font-weight: 600;
}

/* iOS status bar (system UI, drawn so the screen reads as a phone). */
.app__status {
    position: absolute;
    z-index: 5;
    top: calc(14 * var(--u));
    left: calc(38 * var(--u));
    right: calc(30 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(16 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app__status svg {
    width: calc(68 * var(--u));
    height: calc(12 * var(--u));
}

/* The scrollable body: 24 pt side padding (home_screen.dart). */
.app__body {
    position: absolute;
    inset: calc(60 * var(--u)) calc(24 * var(--u)) auto;
}

/* Section header: titleLarge bold + an orange text link with a chevron. */
.a-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(28 * var(--u));
}

.a-title {
    font-size: calc(22 * var(--u));
    line-height: calc(28 * var(--u));
    font-weight: 700;
    letter-spacing: -0.01em;
}

.a-link {
    display: inline-flex;
    align-items: center;
    font-size: calc(14 * var(--u));
    font-weight: 500;
    color: var(--orange);
}

.a-link svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

/* ── Pet carousel (pet_carousel.dart, viewportFraction 0.85) ── */
.a-carousel {
    position: relative;
    height: calc(320 * var(--u));
    margin-top: calc(16 * var(--u));
}

.a-card {
    position: absolute;
    top: 0;
    left: calc(25.65 * var(--u));
    width: calc(290.7 * var(--u));
    height: calc(320 * var(--u));
    border-radius: calc(32 * var(--u));
    overflow: hidden;
    box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.3);
}

/* the next companion, scaled 0.95 at 60% (pet_card.dart, isPrimary: false) */
.a-card--peek {
    left: calc(323.6 * var(--u));
    scale: 0.95;
    transform-origin: 0 50%;
    opacity: 0.6;
}

.a-card picture,
.a-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 60%);
}

.a-card__panel {
    position: absolute;
    z-index: 1;
    left: calc(12 * var(--u));
    right: calc(12 * var(--u));
    bottom: calc(12 * var(--u));
    display: flex;
    align-items: flex-start;
    gap: calc(8 * var(--u));
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u));
    border-radius: calc(24 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    -webkit-backdrop-filter: blur(calc(30 * var(--u)));
    backdrop-filter: blur(calc(30 * var(--u)));
}

.a-card__who {
    flex: 1;
    min-width: 0;
}

.a-card__name {
    display: block;
    font-size: calc(28 * var(--u));
    line-height: 1;
    font-weight: 700;
    letter-spacing: calc(-0.5 * var(--u));
}

.a-card__breed {
    display: block;
    margin-top: calc(4 * var(--u));
    font-size: calc(13 * var(--u));
    font-weight: 500;
    color: var(--t-text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Synergy badge: tier colour at 20% fill / 30% border, glowing dot. */
.a-badge {
    --c: #ff6347;
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    padding: calc(6 * var(--u)) calc(10 * var(--u));
    border-radius: calc(20 * var(--u));
    background: color-mix(in srgb, var(--c) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    font-size: calc(9 * var(--u));
    font-weight: 800;
    letter-spacing: calc(0.5 * var(--u));
    white-space: nowrap;
}

.a-badge::before {
    content: "";
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 calc(6 * var(--u)) var(--c);
}

.a-badge svg {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    margin-left: calc(-2 * var(--u));
    fill: var(--t-text2);
}

/* ── Quick actions (quick_actions_bar.dart: 4 across, 16 pt gutters) ── */
.a-actions {
    display: flex;
    justify-content: space-between;
    margin-top: calc(48 * var(--u));
}

.a-action {
    --c: var(--orange);
    display: grid;
    justify-items: center;
    gap: calc(12 * var(--u));
    width: calc(73.5 * var(--u));
    font-size: calc(10 * var(--u));
    font-weight: 700;
    letter-spacing: calc(1.2 * var(--u));
    color: #9e9e9e;
    white-space: nowrap;
}

.a-action i {
    display: grid;
    place-items: center;
    width: calc(73.5 * var(--u));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.a-action svg {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    fill: var(--c);
}

/* ── Reminders card (upcoming_reminders_card.dart) ── */
.a-reminders {
    margin-top: calc(48 * var(--u));
}

.a-reminders .a-title {
    margin-bottom: calc(12 * var(--u));
}

.a-label {
    display: block;
    margin-bottom: calc(6 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: calc(0.5 * var(--u));
}

.a-row {
    --c: var(--orange);
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-bottom: calc(8 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-radius: calc(20 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.a-row__icon {
    display: grid;
    place-items: center;
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    border-radius: calc(10 * var(--u));
    background: color-mix(in srgb, var(--c) 15%, transparent);
    color: var(--c);
}

.a-row__icon svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

.a-row__text {
    flex: 1;
    min-width: 0;
}

.a-row__title {
    display: block;
    font-size: calc(13 * var(--u));
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a-row__sub {
    display: flex;
    align-items: center;
    gap: calc(3 * var(--u));
    margin-top: calc(2 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 500;
    color: var(--t-text2);
}

.a-row__sub svg {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    fill: var(--t-text3);
}

.a-time {
    padding: calc(4 * var(--u)) calc(8 * var(--u));
    border-radius: calc(8 * var(--u));
    background: var(--t-subtle);
    font-size: calc(11 * var(--u));
    font-weight: 600;
    color: var(--t-text2);
    white-space: nowrap;
}

.a-check {
    display: grid;
    place-items: center;
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border-radius: calc(7 * var(--u));
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: var(--c);
}

.a-check svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
}

/* ── Floating tab bar (glass_bottom_nav_bar.dart) and the AI orb ── */
.a-tabbar {
    position: absolute;
    z-index: 4;
    left: calc(24 * var(--u));
    right: calc(24 * var(--u));
    bottom: calc(24 * var(--u));
    height: calc(64 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: calc(50 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    -webkit-backdrop-filter: blur(calc(15 * var(--u)));
    backdrop-filter: blur(calc(15 * var(--u)));
    color: var(--t-icon2);
}

.a-tabbar > * {
    display: grid;
    place-items: center;
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
}

.a-tabbar svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
}

.a-tabbar .is-on {
    color: var(--t-text);
}

.a-tabbar__gap {
    width: calc(60 * var(--u));
}

/* GlassAiOrb (56 pt, 4 pt scaffold ring), centred over the bar: its centre
   sits 76 pt above the screen's bottom edge (ai_speed_dial.dart). */
.a-orb {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(48 * var(--u));
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    translate: -50% 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: calc(4 * var(--u)) solid var(--t-bg);
    background:
        linear-gradient(135deg, rgba(244, 123, 37, 0.32), rgba(244, 123, 37, 0.12)) padding-box,
        var(--t-bg);
    box-shadow: inset 0 0 0 1px var(--t-border), 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, 0.051);
}

.a-orb img {
    width: calc(34 * var(--u));
    height: auto;
}

/* The app's PortraitFrameIcon (custom painter), traced 1:1 as a path. */
.a-frame-icon {
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.92;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─────────────────────────── AI chat (chat_screen) ─────────────────────────── */
/* The chat sits on the theme's gradient (Dark: #0F172A → #312E81) with the
   ambient glows, like chat_screen.dart's backdrop. */
.app--chat {
    --t-grad: linear-gradient(180deg, #0f172a, #1e1b4b 55%, #312e81);
    background: var(--t-grad);
}

.c-head {
    position: absolute;
    z-index: 3;
    top: calc(52 * var(--u));
    left: calc(12 * var(--u));
    right: calc(12 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
}

.c-ibtn {
    display: grid;
    place-items: center;
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    border-radius: 50%;
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    color: var(--t-text);
}

.c-ibtn svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

.c-pet {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(36 * var(--u));
    padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u));
    margin-right: auto;
    border-radius: calc(20 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(14 * var(--u));
    font-weight: 600;
}

.c-pet img {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    border-radius: 50%;
    box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--orange);
}

.c-pet svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    fill: var(--t-text2);
}

/* The thread: newest at the bottom, older messages pushed up and clipped. */
.c-thread {
    position: absolute;
    top: calc(98 * var(--u));
    bottom: calc(92 * var(--u));
    left: calc(14 * var(--u));
    right: calc(14 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(10 * var(--u));
    overflow: hidden;
    -webkit-mask: linear-gradient(transparent, #000 calc(24 * var(--u)));
    mask: linear-gradient(transparent, #000 calc(24 * var(--u)));
}

.c-msg {
    flex: none;
    overflow: hidden;
}

/* chat_bubble.dart: FrostedPanel, radius 20 with a 6 pt tail corner,
   14 x 10 padding, 15 pt text at 1.4, an 11 pt muted time. */
.c-bubble {
    max-width: 78%;
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(15 * var(--u));
    line-height: 1.4;
}

.c-bubble time {
    display: block;
    margin-top: calc(4 * var(--u));
    font-size: calc(11 * var(--u));
    color: var(--t-text3);
}

.c-bubble p + p {
    margin-top: calc(8 * var(--u));
}

.c-user {
    display: flex;
    justify-content: flex-end;
}

.c-user .c-bubble {
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u));
    background: linear-gradient(135deg, rgba(244, 123, 37, 0.28), rgba(244, 123, 37, 0.16));
}

.c-ai {
    display: flex;
    align-items: flex-end;
    gap: calc(8 * var(--u));
}

.c-ai__mascot {
    flex: none;
    width: calc(26 * var(--u));
    height: auto;
    margin-bottom: calc(2 * var(--u));
}

.c-ai__col {
    display: grid;
    gap: calc(6 * var(--u));
    max-width: 82%;
}

.c-ai .c-bubble {
    max-width: none;
}

/* Tool activity chips (tool_activity_chip.dart): a slim frosted capsule,
   radius 12, 12 pt w500 label; an aurora hairline rides the top edge while
   the tool runs, then it settles into a provenance line with a check. */
.c-chip {
    position: relative;
    justify-self: start;
    display: grid;
    padding: calc(7 * var(--u)) calc(10 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    overflow: hidden;
    font-size: calc(12 * var(--u));
    font-weight: 500;
    color: var(--t-text2);
    white-space: nowrap;
}

.c-chip > span {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
}

.c-chip svg {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
}

.c-chip__run svg {
    fill: var(--t-text3);
}

.c-chip__done svg {
    fill: var(--orange);
}

.c-chip__aurora {
    /* the aurora hairline while the tool runs */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(2.5 * var(--u));
    background: linear-gradient(90deg, transparent, #f47b25, #f59e0b, #e11d48, transparent) 0 0 / 200% 100%;
}

.c-chip__aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    animation: c-aurora 1.4s linear infinite;
}

@keyframes c-aurora {
    to { background-position: -200% 0; }
}

/* streaming shimmer placeholder lines before the text arrives */
.c-shimmer {
    display: grid;
    gap: calc(7 * var(--u));
    padding: calc(4 * var(--u)) 0;
}

.c-shimmer i {
    display: block;
    height: calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    background-size: 200% 100%;
    animation: c-aurora 1.6s linear infinite;
}

.c-shimmer i:nth-child(2) {
    width: 80%;
}

.c-shimmer i:nth-child(3) {
    width: 55%;
}

/* Thinking capsule (chat_typing_indicator.dart): mascot + a frosted pill with a
   pulsing sparkle and a cross-fading phrase. */
.c-capsule {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
}

.c-capsule img {
    width: calc(30 * var(--u));
    height: auto;
}

.c-capsule__pill {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(8 * var(--u));
    padding: calc(9 * var(--u)) calc(14 * var(--u));
    border-radius: calc(22 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(13.5 * var(--u));
    color: var(--t-text2);
}

.c-capsule__pill svg {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    fill: var(--orange);
}

.c-capsule__phrases {
    display: grid;
}

.c-capsule__phrases > span {
    grid-area: 1 / 1;
    white-space: nowrap;
}

/* Proposal card (proposal_pending_card.dart): radius 18, 14 pt padding; an
   orange action icon, a 14 pt w700 title, a muted subtitle; Confirm + edit +
   dismiss. */
.c-prop {
    display: grid;
    gap: calc(10 * var(--u));
    padding: calc(14 * var(--u));
    border-radius: calc(18 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.c-prop__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 calc(8 * var(--u));
    align-items: center;
}

.c-prop__head svg {
    grid-row: span 2;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    fill: var(--orange);
}

.c-prop__head b {
    font-size: calc(14 * var(--u));
    font-weight: 700;
}

.c-prop__head small {
    font-size: calc(12 * var(--u));
    color: var(--t-text3);
}

.c-prop__why {
    font-size: calc(12.5 * var(--u));
    font-style: italic;
    color: var(--t-text3);
}

.c-prop__row {
    display: grid;
    grid-template-columns: calc(52 * var(--u)) 1fr;
    font-size: calc(12 * var(--u));
    color: var(--t-text2);
}

.c-prop__row span:first-child {
    color: var(--t-text3);
}

.c-prop__actions {
    display: flex;
    gap: calc(8 * var(--u));
    overflow: hidden;
}

.c-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    height: calc(42 * var(--u));
    border-radius: calc(14 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(14 * var(--u));
    font-weight: 600;
}

.c-btn svg,
.c-ibtn--sq svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

.c-ibtn--sq {
    width: calc(42 * var(--u));
    height: calc(42 * var(--u));
    border-radius: calc(14 * var(--u));
}

.c-outcome {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-size: calc(12.5 * var(--u));
    font-weight: 500;
    color: var(--t-text2);
}

.c-outcome svg {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    fill: var(--orange);
}

/* chat_input_bar.dart: a glass pill (radius 26), photo button, hint, send. */
.c-input {
    position: absolute;
    z-index: 3;
    left: calc(12 * var(--u));
    right: calc(12 * var(--u));
    bottom: calc(30 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    min-height: calc(50 * var(--u));
    padding: calc(6 * var(--u)) calc(8 * var(--u));
    border-radius: calc(26 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    -webkit-backdrop-filter: blur(calc(15 * var(--u)));
    backdrop-filter: blur(calc(15 * var(--u)));
    font-size: calc(15 * var(--u));
    color: var(--t-text3);
}

.c-input > span:nth-child(2) {
    flex: 1;
    padding: 0 calc(4 * var(--u));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-input .c-ibtn {
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    color: var(--orange);
}

.c-send {
    display: grid;
    place-items: center;
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    border-radius: 50%;
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    color: var(--t-text2);
}

.c-send svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

/* ─────────────── Companion page: avatars + the reminders list ─────────────── */
.r-avatars {
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(24 * var(--u));
    display: flex;
    gap: calc(12 * var(--u));
}

.r-avatars > * {
    display: grid;
    place-items: center;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    border-radius: 50%;
    overflow: hidden;
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.r-avatars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r-avatars .is-on {
    box-shadow: 0 0 0 calc(2 * var(--u)) var(--t-bg), 0 0 0 calc(3.5 * var(--u)) #ef5350;
}

.r-avatars svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

.r-list {
    position: absolute;
    top: calc(124 * var(--u));
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
}

.r-list .a-head {
    margin-bottom: calc(10 * var(--u));
}

.r-list .a-title {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: calc(17 * var(--u));
}

.r-list .a-title svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    fill: var(--t-text2);
}

.r-tools {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 600;
    color: var(--orange);
}

.r-tools svg {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    fill: var(--orange);
}

.r-tools .c-ibtn {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    border-radius: calc(10 * var(--u));
    color: var(--t-text);
}

.r-tools .c-ibtn svg {
    fill: currentColor;
}

.a-label--muted {
    color: var(--t-text3);
}

.a-row--new {
    position: relative;
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c) 18%, transparent);
}

/* ───────────────────────────── Scan (scan_camera_screen) ───────────────────────────── */
.app--scan {
    background: #000;
}

.s-photo {
    position: absolute;
    inset: 0;
}

.s-photo picture,
.s-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* scan_top_bar.dart: a 40 pt scrim close button; mode chips below */
.s-top {
    position: absolute;
    z-index: 3;
    top: calc(54 * var(--u));
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    display: grid;
    gap: calc(14 * var(--u));
}

.s-scrim {
    display: grid;
    place-items: center;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.s-scrim svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

/* scan_mode_chips.dart: tint 16% / 6%, border 50% / 16%, Plus badge */
.s-modes {
    display: flex;
    gap: calc(8 * var(--u));
    overflow: hidden;
}

.s-mode {
    --c: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    flex: none;
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent);
    font-size: calc(13 * var(--u));
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(calc(12 * var(--u)));
    backdrop-filter: blur(calc(12 * var(--u)));
}

.s-mode svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    fill: var(--c);
}

.s-mode.is-on {
    background: color-mix(in srgb, var(--c) 16%, rgba(0, 0, 0, 0.35));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
}

.s-mode em {
    font-style: normal;
    padding: calc(2 * var(--u)) calc(6 * var(--u));
    border-radius: calc(6 * var(--u));
    background: rgba(244, 123, 37, 0.2);
    font-size: calc(10 * var(--u));
    color: var(--orange-soft);
}

/* scan_beam_overlay.dart: a 26% band of primary/0.18 with a bright leading edge */
.s-beam {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    height: 26%;
    background: linear-gradient(to bottom, rgba(244, 123, 37, 0), rgba(244, 123, 37, 0.18));
    border-bottom: calc(3 * var(--u)) solid rgba(255, 178, 122, 0.9);
    box-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(244, 123, 37, 0.6);
    pointer-events: none;
}

/* scan_status_capsule.dart */
.s-status {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(150 * var(--u));
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(12 * var(--u)) calc(18 * var(--u));
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: calc(14 * var(--u));
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.s-status i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    border-radius: 50%;
    border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--orange);
    animation: s-spin 900ms linear infinite;
}

@keyframes s-spin {
    to { rotate: 1turn; }
}

/* scan_shutter_bar.dart: gallery, the 76 pt shutter, flip */
.s-shutter {
    position: absolute;
    z-index: 3;
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    bottom: calc(40 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-shutter .s-scrim {
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
}

.s-shutter b {
    width: calc(76 * var(--u));
    height: calc(76 * var(--u));
    border-radius: 50%;
    border: calc(4 * var(--u)) solid rgba(255, 255, 255, 0.9);
    background: #fff content-box;
    padding: calc(5 * var(--u));
}

/* scan_result_panel.dart: a frosted sheet drawn up over the photo (58%) */
.s-sheet {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
    border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
    background: rgba(22, 16, 12, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(calc(24 * var(--u))) saturate(1.2);
    backdrop-filter: blur(calc(24 * var(--u))) saturate(1.2);
    color: #fff;
    overflow: hidden;
}

.s-sheet::before {
    content: "";
    display: block;
    width: calc(40 * var(--u));
    height: calc(4 * var(--u));
    margin: 0 auto calc(14 * var(--u));
    border-radius: calc(2 * var(--u));
    background: rgba(255, 255, 255, 0.25);
}

/* scan_result_card.dart: verdict pill, headline, confidence, sections */
.s-card {
    padding: calc(18 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.s-verdict {
    --c: #3fbf7f;
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    padding: calc(7 * var(--u)) calc(12 * var(--u));
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
    font-size: calc(13 * var(--u));
    font-weight: 700;
    color: var(--c);
}

.s-verdict svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    fill: var(--c);
}

.s-verdict--unsafe {
    --c: #e05252;
}

.s-card .s-h {
    margin-top: calc(12 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.3;
    font-weight: 700;
}

.s-conf {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(8 * var(--u));
    margin-top: calc(14 * var(--u));
    font-size: calc(11 * var(--u));
    color: rgba(255, 255, 255, 0.6);
}

.s-conf i {
    height: calc(5 * var(--u));
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c, #3fbf7f) var(--f, 100%), rgba(255, 255, 255, 0.12) 0);
}

.s-conf b {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.s-list {
    margin: calc(14 * var(--u)) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: calc(6 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.s-list li {
    position: relative;
    padding-left: calc(14 * var(--u));
}

.s-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: calc(5 * var(--u));
    height: calc(5 * var(--u));
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.s-sec {
    margin-top: calc(12 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.s-sec + .s-list {
    margin-top: calc(6 * var(--u));
}

.s-meta {
    margin-top: calc(12 * var(--u));
    font-size: calc(11 * var(--u));
    color: rgba(255, 255, 255, 0.55);
}

/* scan_result_sections.dart ScanBodyScoreSection: titleSmall w700, then nine
   8 pt pills 3 pt apart, the score's pill in the "safe" green */
.s-bcs {
    margin-top: calc(16 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.3;
    font-weight: 700;
}

.s-score {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: calc(3 * var(--u));
    margin-top: calc(8 * var(--u));
}

.s-score i {
    height: calc(8 * var(--u));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.s-score i.is-on {
    background: #3fbf7f;
}

/* scan_shutter_bar.dart, body mode: the hint pill for the next photo, then the
   staged photos (56 pt, radius 12, a remove button), 16 pt above the shutter */
.s-stage {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: calc(132 * var(--u));
    display: grid;
    justify-items: center;
    gap: calc(12 * var(--u));
}

.s-hint {
    padding: calc(8 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    font-size: calc(12 * var(--u));
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.s-strip {
    justify-self: stretch;
    display: flex;
    gap: calc(8 * var(--u));
    padding: 0 calc(20 * var(--u));
}

.s-thumb {
    position: relative;
    flex: none;
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
}

.s-thumb picture,
.s-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(12 * var(--u));
    object-fit: cover;
}

.s-thumb i {
    position: absolute;
    top: calc(-4 * var(--u));
    right: calc(-4 * var(--u));
    display: grid;
    place-items: center;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.s-thumb i svg {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    fill: #fff;
}

/* ───────────────────────── Stories (story_reader_screen) ───────────────────────── */
.app--story {
    background: #0b0806;
}

.st-hero {
    position: absolute;
    inset: 0 0 auto;
    height: calc(372 * var(--u));
}

.st-hero > picture,
.st-hero > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0b0806 2%, rgba(11, 8, 6, 0.55) 30%, transparent 58%);
}

.st-back {
    position: absolute;
    z-index: 2;
    top: calc(54 * var(--u));
    left: calc(16 * var(--u));
}

.st-head {
    position: absolute;
    z-index: 2;
    top: calc(282 * var(--u));
    left: calc(18 * var(--u));
    right: calc(18 * var(--u));
}

.st-head .st-h {
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: -0.01em;
}

.st-by {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    margin-top: calc(8 * var(--u));
    font-size: calc(12.5 * var(--u));
    color: var(--t-text2);
}

.st-by img {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border-radius: 50%;
}

.st-by small {
    display: block;
    font-size: calc(10.5 * var(--u));
    color: var(--t-text3);
}

.st-by .st-dots {
    margin-left: auto;
}

.st-dots {
    display: flex;
    gap: calc(4 * var(--u));
}

.st-dots i {
    width: calc(5 * var(--u));
    height: calc(5 * var(--u));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

.st-dots i:first-child {
    width: calc(14 * var(--u));
    background: var(--orange);
}

.st-kind {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--u));
    padding: calc(4 * var(--u)) calc(9 * var(--u));
    border-radius: 999px;
    border: 1px solid rgba(244, 123, 37, 0.55);
    background: rgba(244, 123, 37, 0.12);
    font-size: calc(10.5 * var(--u));
    font-weight: 600;
    color: var(--orange-soft);
}

.st-kind svg {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    fill: var(--orange);
}

.st-body {
    position: absolute;
    top: calc(392 * var(--u));
    left: calc(18 * var(--u));
    right: calc(18 * var(--u));
    display: grid;
    gap: calc(12 * var(--u));
}

.st-text {
    font-size: calc(13.5 * var(--u));
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.st-quote {
    display: flex;
    gap: calc(8 * var(--u));
    padding: calc(12 * var(--u)) calc(14 * var(--u));
    border-radius: calc(14 * var(--u));
    background: rgba(244, 123, 37, 0.08);
    border: 1px solid rgba(244, 123, 37, 0.3);
    font-size: calc(13 * var(--u));
    font-style: italic;
    font-weight: 600;
}

.st-quote::before {
    content: "\201C";
    font-size: calc(20 * var(--u));
    line-height: 0.8;
    color: var(--orange);
}

.st-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6 * var(--u));
}

.st-chips span {
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border-radius: 999px;
    border: 1px solid rgba(244, 123, 37, 0.5);
    font-size: calc(10.5 * var(--u));
    font-weight: 600;
    color: var(--orange-soft);
}

.st-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(8 * var(--u));
}

.st-stats span {
    display: grid;
    justify-items: center;
    padding: calc(10 * var(--u)) 0;
    border-radius: calc(14 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(18 * var(--u));
    font-weight: 700;
}

.st-stats small {
    font-size: calc(9.5 * var(--u));
    font-weight: 500;
    color: var(--t-text3);
}

.st-chart {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--gap, 10) * var(--u));
    height: calc(70 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(14 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.st-chart i {
    flex: 1;
    height: var(--h);
    border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
    background: linear-gradient(to top, #c2410c, #f97316);
}

.st-chart-title {
    font-size: calc(12 * var(--u));
    font-weight: 600;
    color: var(--orange);
    margin-bottom: calc(-6 * var(--u));
}

/* Share studio (share_studio_screen): the photo card, Instagram, Share/Save/Copy */
.sh-title {
    position: absolute;
    z-index: 2;
    top: calc(56 * var(--u));
    left: 0;
    right: 0;
    text-align: center;
    font-size: calc(15 * var(--u));
    font-weight: 600;
}

.sh-title .c-ibtn {
    position: absolute;
    left: calc(16 * var(--u));
    top: calc(-8 * var(--u));
}

.sh-card {
    position: absolute;
    top: calc(108 * var(--u));
    left: calc(38 * var(--u));
    right: calc(38 * var(--u));
    height: calc(560 * var(--u));
    border-radius: calc(24 * var(--u));
    overflow: hidden;
    box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.5);
}

.sh-card > picture,
.sh-card > picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 55%);
}

.sh-panel {
    position: absolute;
    z-index: 1;
    left: calc(12 * var(--u));
    right: calc(12 * var(--u));
    bottom: calc(12 * var(--u));
    display: grid;
    gap: calc(8 * var(--u));
    padding: calc(14 * var(--u));
    border-radius: calc(18 * var(--u));
    background: rgba(30, 22, 16, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(calc(18 * var(--u)));
    backdrop-filter: blur(calc(18 * var(--u)));
}

.sh-panel .st-by {
    margin: 0;
    color: #fff;
    font-weight: 600;
}

.sh-panel .x-h {
    font-size: calc(16 * var(--u));
    font-weight: 700;
}

.sh-panel p {
    font-size: calc(10.5 * var(--u));
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}

.sh-stats {
    display: flex;
    gap: calc(18 * var(--u));
    font-size: calc(14 * var(--u));
    font-weight: 700;
}

.sh-stats small {
    display: block;
    font-size: calc(8 * var(--u));
    font-weight: 600;
    letter-spacing: calc(0.6 * var(--u));
    color: rgba(255, 255, 255, 0.55);
}

.sh-made {
    font-size: calc(9 * var(--u));
    color: rgba(255, 255, 255, 0.5);
}

.sh-insta {
    position: absolute;
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    bottom: calc(92 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    height: calc(50 * var(--u));
    border-radius: calc(16 * var(--u));
    background: linear-gradient(90deg, #7c3aed, #db2777 55%, #f97316);
    font-size: calc(14 * var(--u));
    font-weight: 600;
}

.sh-insta svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

.sh-actions {
    position: absolute;
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    bottom: calc(30 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10 * var(--u));
}

.sh-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    height: calc(46 * var(--u));
    border-radius: calc(14 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(13 * var(--u));
    font-weight: 600;
}

.sh-actions svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
}

/* ───────────────────── Vaccinations (pet vaccination sheet) ───────────────────── */
.v-head {
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(20 * var(--u));
    right: calc(16 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
}

.v-head b {
    margin-right: auto;
    font-size: calc(20 * var(--u));
    font-weight: 700;
}

.v-list {
    position: absolute;
    top: calc(108 * var(--u));
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    display: grid;
    gap: calc(8 * var(--u));
}

.v-sec {
    margin-top: calc(10 * var(--u));
    font-size: calc(11 * var(--u));
    font-weight: 700;
    letter-spacing: calc(0.8 * var(--u));
    color: var(--t-text3);
}

.v-row {
    --c: #3fbf7f;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(16 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.v-row > svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    fill: var(--c);
}

.v-row b {
    display: block;
    font-size: calc(14 * var(--u));
    font-weight: 600;
}

.v-row small {
    display: block;
    margin-top: calc(2 * var(--u));
    font-size: calc(11.5 * var(--u));
    color: var(--t-text3);
}

.v-chip {
    padding: calc(4 * var(--u)) calc(9 * var(--u));
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 16%, transparent);
    font-size: calc(10.5 * var(--u));
    font-weight: 700;
    color: var(--c);
    white-space: nowrap;
}

.v-row--soon {
    --c: #f0a63c;
    border-color: color-mix(in srgb, #f0a63c 40%, transparent);
}

.v-row--ended {
    --c: #9aa0a6;
}

.v-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    margin-top: calc(6 * var(--u));
    height: calc(46 * var(--u));
    border-radius: calc(14 * var(--u));
    border: 1px solid rgba(63, 191, 127, 0.4);
    background: rgba(63, 191, 127, 0.1);
    font-size: calc(13.5 * var(--u));
    font-weight: 600;
    color: #5fd39a;
}

.v-add svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    fill: currentColor;
}

/* The exported PDF (vaccination_summary_exporter.dart), as paper. */
.pdf {
    --w: 300px;
    --u: calc(var(--w) / 390);
    width: var(--w);
    aspect-ratio: 210 / 297;
    padding: calc(30 * var(--u)) calc(28 * var(--u));
    border-radius: calc(6 * var(--u));
    background: #fff;
    color: #111;
    font-family: Helvetica, Arial, sans-serif;
    box-shadow: 0 30px 60px -30px rgba(40, 24, 10, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.pdf .x-h {
    font-size: calc(20 * var(--u));
    font-weight: 700;
}

.pdf__who {
    margin-top: calc(4 * var(--u));
    padding-bottom: calc(10 * var(--u));
    border-bottom: 1px solid #bdbdbd;
    font-size: calc(11 * var(--u));
    color: #616161;
}

.pdf__v {
    margin-top: calc(14 * var(--u));
}

.pdf__v b {
    display: block;
    font-size: calc(13 * var(--u));
}

.pdf__v span {
    display: block;
    margin: calc(2 * var(--u)) 0 calc(6 * var(--u));
    font-size: calc(10 * var(--u));
    color: #2e7d32;
}

.pdf__v span.is-soon {
    color: #bf360c;
}

.pdf table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(8.5 * var(--u));
}

.pdf th {
    padding: calc(4 * var(--u));
    background: #eeeeee;
    text-align: left;
    font-weight: 700;
    font-size: calc(8 * var(--u));
}

.pdf td {
    padding: calc(4 * var(--u));
    border-bottom: 1px solid #eeeeee;
}

.pdf__foot {
    margin-top: calc(16 * var(--u));
    font-size: calc(8 * var(--u));
    color: #757575;
}

/* ──────────────── iPad Home (wide layout, AdaptiveShell ≥ 600 pt) ──────────────── */
.app--ipad {
    --w: 640px;
    --u: calc(var(--w) / 1200);
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--w) * 0.035);
}

.app--ipad .app__status {
    top: calc(12 * var(--u));
    left: calc(28 * var(--u));
    right: calc(28 * var(--u));
    font-size: calc(13 * var(--u));
}

.app--ipad .app__status svg {
    width: calc(56 * var(--u));
    height: calc(10 * var(--u));
}

.ip-rail {
    position: absolute;
    left: calc(18 * var(--u));
    top: calc(300 * var(--u));
    width: calc(54 * var(--u));
    display: grid;
    justify-items: center;
    gap: calc(16 * var(--u));
    padding: calc(14 * var(--u)) 0;
    border-radius: calc(28 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    color: var(--t-icon2);
}

.ip-rail svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

.ip-rail .is-on {
    color: var(--t-text);
}

.ip-rail .ip-orb {
    display: grid;
    place-items: center;
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244, 123, 37, 0.32), rgba(244, 123, 37, 0.12));
    border: 1px solid var(--t-border);
}

.ip-rail .ip-orb img {
    width: calc(24 * var(--u));
    height: auto;
}

.ip-rail hr {
    width: calc(24 * var(--u));
    border: 0;
    border-top: 1px solid var(--t-border);
}

.ip-me {
    display: grid;
    place-items: center;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    border-radius: 50%;
    background: #be185d;
    box-shadow: 0 0 0 calc(2 * var(--u)) var(--t-bg), 0 0 0 calc(3.5 * var(--u)) #a855f7;
    font-size: calc(13 * var(--u));
    font-weight: 700;
    color: #fff;
}

.ip-hi {
    position: absolute;
    left: calc(96 * var(--u));
    top: calc(42 * var(--u));
}

.ip-hi small {
    display: block;
    font-size: calc(10 * var(--u));
    font-weight: 600;
    letter-spacing: calc(1.4 * var(--u));
    color: var(--t-text3);
}

.ip-hi b {
    display: block;
    margin-top: calc(6 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 1.1;
    font-weight: 600;
}

.ip-hi .r-avatars {
    position: static;
    margin-top: calc(16 * var(--u));
    gap: calc(14 * var(--u));
}

.ip-hi .r-avatars > * {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
}

.ip-hi .r-avatars .is-on {
    box-shadow: 0 0 0 calc(2 * var(--u)) var(--t-bg), 0 0 0 calc(3.5 * var(--u)) #ff6347;
}

.ip-banner {
    position: absolute;
    left: calc(96 * var(--u));
    right: calc(20 * var(--u));
    top: calc(240 * var(--u));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(14 * var(--u));
    padding: calc(12 * var(--u)) calc(20 * var(--u));
    border-radius: calc(18 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(12 * var(--u));
}

.ip-banner i {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-radius: 50%;
    background: #22c55e;
}

.ip-banner b {
    display: block;
    font-size: calc(13 * var(--u));
    font-weight: 500;
}

.ip-banner small {
    display: block;
    font-size: calc(10 * var(--u));
    color: var(--t-text3);
}

.ip-banner svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    fill: var(--t-text2);
}

.ip-card {
    position: absolute;
    left: calc(96 * var(--u));
    top: calc(330 * var(--u));
    width: calc(744 * var(--u));
    height: calc(420 * var(--u));
    display: grid;
    grid-template-columns: calc(400 * var(--u)) 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: calc(18 * var(--u));
    padding: calc(14 * var(--u));
    border-radius: calc(26 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
}

.ip-card > picture,
.ip-card > picture img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: calc(20 * var(--u));
}

.ip-det {
    display: grid;
    align-content: start;
    gap: calc(10 * var(--u));
    padding-top: calc(4 * var(--u));
}

.ip-det__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ip-det__top b {
    display: block;
    font-size: calc(22 * var(--u));
    font-weight: 600;
}

.ip-det__top small {
    display: block;
    font-size: calc(11 * var(--u));
    color: var(--t-text2);
}

.ip-det .a-badge {
    font-size: calc(8.5 * var(--u));
}

.ip-metric {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border-radius: calc(12 * var(--u));
    background: var(--t-subtle);
    border: 1px solid var(--t-border);
    font-size: calc(12 * var(--u));
}

.ip-metric svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    fill: var(--t-text2);
}

.ip-metric small {
    display: block;
    font-size: calc(8 * var(--u));
    letter-spacing: calc(0.8 * var(--u));
    color: var(--t-text3);
}

.ip-metric .ip-spark {
    width: calc(76 * var(--u));
    height: calc(22 * var(--u));
    fill: none;
    stroke: #f472b6;
    stroke-width: 2;
}

.ip-right {
    position: absolute;
    left: calc(858 * var(--u));
    right: calc(20 * var(--u));
    top: calc(330 * var(--u));
    display: grid;
    gap: calc(12 * var(--u));
}

.ip-qa {
    display: flex;
    justify-content: space-between;
}

.ip-qa .a-action {
    width: calc(56 * var(--u));
    gap: calc(8 * var(--u));
    font-size: calc(7.5 * var(--u));
    letter-spacing: calc(0.8 * var(--u));
}

.ip-qa .a-action i {
    width: calc(56 * var(--u));
}

.ip-qa .a-action svg {
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
}

.ip-tile {
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(18 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(12 * var(--u));
}

.ip-tile small {
    display: block;
    font-size: calc(9 * var(--u));
    letter-spacing: calc(0.8 * var(--u));
    color: var(--t-text3);
}

.ip-big {
    display: block;
    margin: calc(4 * var(--u)) 0;
    font-size: calc(34 * var(--u));
    line-height: 1;
    font-weight: 600;
    color: #f472b6;
}

.ip-big em {
    font-style: normal;
    font-size: calc(10 * var(--u));
    color: var(--t-text3);
}

.ip-tile .ip-line {
    display: block;
    width: 100%;
    height: calc(34 * var(--u));
    fill: none;
    stroke: #f472b6;
    stroke-width: 2;
}

.ip-vbig {
    color: #f0a63c;
}

.ip-ask {
    position: absolute;
    left: calc(380 * var(--u));
    right: calc(380 * var(--u));
    top: calc(772 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    height: calc(40 * var(--u));
    padding: 0 calc(8 * var(--u)) 0 calc(12 * var(--u));
    border-radius: 999px;
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(11 * var(--u));
    color: var(--t-text3);
}

.ip-ask img {
    width: calc(20 * var(--u));
    height: auto;
}

.ip-ask span {
    flex: 1;
}

.ip-ask i {
    display: grid;
    place-items: center;
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    border-radius: 50%;
    background: rgba(244, 123, 37, 0.25);
    color: var(--orange);
}

.ip-ask i svg {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
}

.ip-bottom {
    position: absolute;
    left: calc(96 * var(--u));
    right: calc(20 * var(--u));
    top: calc(836 * var(--u));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--u));
}

.ip-bottom .a-title {
    font-size: calc(15 * var(--u));
}

/* ───────────────── Day care: the owner's stay feed and the report card ───────────────── */
/* care_stay_screen.dart: GlassPageAppBar "Day Care" (18 pt w600, centred),
   CareStayStatusHeader, CareReportCardBanner once the card exists, then the
   read-only CareTimelineSliver (newest first, in day-part groups). */
.k-title {
    flex: 1;
    text-align: center;
    font-size: calc(18 * var(--u));
    font-weight: 600;
}

/* balances the back button so the title sits in the true centre */
.k-pad {
    width: calc(36 * var(--u));
    flex: none;
}

.k-feed {
    position: absolute;
    top: calc(104 * var(--u));
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    display: grid;
}

/* GlassContainer r18 p16: a 10 pt orange dot, the status (titleMedium) and,
   once anything is logged, the log count in orange. */
.k-status {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-bottom: calc(12 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: calc(18 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(16 * var(--u));
    font-weight: 500;
}

.k-status i {
    flex: none;
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-radius: 50%;
    background: #f47b25;
}

.k-st {
    flex: 1;
    min-width: 0;
    display: grid;
}

.k-st > span {
    grid-area: 1 / 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* at rest the stay is over: "Visit complete", five entries */
.k-st1,
.k-st2 {
    opacity: 0;
}

@property --k-n {
    syntax: "<integer>";
    inherits: false;
    initial-value: 5;
}

.k-count {
    color: #f47b25;
    font-weight: 500;
    counter-reset: kn var(--k-n);
}

.k-count::after {
    content: counter(kn);
}

/* CareReportCardBanner: GlassContainer r16 p14, auto_awesome, bodyLarge */
.k-banner {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    margin-bottom: calc(12 * var(--u));
    padding: calc(14 * var(--u));
    border-radius: calc(16 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(16 * var(--u));
}

.k-banner svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
}

.k-banner span {
    display: flex;
    color: #f47b25;
}

.k-banner > svg {
    margin-left: auto;
    color: var(--t-text2);
}

/* GlassEmptyState.inline before the first entry */
.k-empty {
    position: absolute;
    top: calc(150 * var(--u));
    left: calc(24 * var(--u));
    right: calc(24 * var(--u));
    margin: 0;
    text-align: center;
    font-size: calc(14 * var(--u));
    line-height: 1.45;
    color: var(--t-text3);
    opacity: 0;
}

/* Each entry's wrapper can fold to nothing, so a new one pushes the rest down. */
.k-ent {
    display: grid;
    grid-template-rows: 1fr;
}

.k-ent > div {
    min-height: 0;
    overflow: hidden;
}

/* day-part header: 13 pt w600 textTertiary, padding 6/22/6/6 */
.k-part {
    margin: 0;
    padding: calc(22 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
    font-size: calc(13 * var(--u));
    font-weight: 600;
    color: var(--t-text3);
}

/* CareTimelineTile: a 38 pt tinted round icon in a 44 pt box, then the title
   (15 w600), the detail (13, textSecondary) and "time · who" (12.5). */
.k-tile {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(8 * var(--u)) calc(6 * var(--u));
}

.k-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    margin: calc(3 * var(--u));
    border-radius: 50%;
    background: var(--wash);
    color: var(--ink);
}

.k-ic svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
}

/* CareActivityStyle tones, dark theme: ink, and the base at 17% as the wash */
.k-ic--sky { --wash: rgba(56, 189, 248, 0.17); --ink: #7dd3fc; }
.k-ic--violet { --wash: rgba(192, 132, 252, 0.17); --ink: #d8b4fe; }
.k-ic--indigo { --wash: rgba(129, 140, 248, 0.17); --ink: #a5b4fc; }
.k-ic--amber { --wash: rgba(245, 158, 11, 0.17); --ink: #fbbf24; }
.k-ic--teal { --wash: rgba(45, 212, 191, 0.17); --ink: #5eead4; }

.k-tile b {
    display: block;
    font-size: calc(15 * var(--u));
    line-height: 1.3;
    font-weight: 600;
}

.k-tile small {
    display: block;
    font-size: calc(13 * var(--u));
    color: var(--t-text2);
}

.k-tile em {
    display: block;
    font-style: normal;
    font-size: calc(12.5 * var(--u));
    color: var(--t-text3);
}

/* care_report_card_screen.dart: the hero photo (16:9, r18) from the stay's own
   photo log, the recap in a GlassContainer r18 p18, then "Generated <date>". */
.k-rc {
    position: absolute;
    top: calc(104 * var(--u));
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
}

.k-rc__hero {
    display: block;
    aspect-ratio: 16 / 9;
    margin-bottom: calc(16 * var(--u));
    border-radius: calc(18 * var(--u));
    overflow: hidden;
}

.k-rc__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 40%;
}

.k-rc__md {
    padding: calc(18 * var(--u));
    border-radius: calc(18 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(14 * var(--u));
    line-height: 1.45;
}

.k-rc__md p {
    margin: 0 0 calc(10 * var(--u));
}

.k-rc__md .k-rc__h {
    margin-bottom: calc(8 * var(--u));
    font-size: calc(18 * var(--u));
    font-weight: 600;
}

.k-rc__md ul {
    margin: 0;
    padding-left: calc(18 * var(--u));
    display: grid;
    gap: calc(4 * var(--u));
}

.k-rc__gen {
    margin: calc(12 * var(--u)) 0 0;
    font-size: calc(12 * var(--u));
    color: var(--t-text3);
}