:root {
    color-scheme: light;

    /* DESIGN.md color tokens */
    --color-ink: #17211b;
    --color-paper: #f5f6f2;
    --color-white: #ffffff;
    --color-graphite: #29332d;
    --color-slate: #68736c;
    --color-stone: #929b95;
    --color-silver: #e3e7e2;
    --color-action-blue: #256548;
    --color-info-banner-bg: #eff6fe;

    /* DESIGN.md spacing scale — the primitive scale everything else should
       pull from. Add new spacing decisions here first rather than reaching
       for a fresh magic number. */
    --spacing-4: 4px;
    --spacing-5: 5px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-80: 80px;

    /* Page shell — the gutter maps to the spacing scale, while the shared
       content measure keeps every route on the same centered column. */
    --page-gutter: var(--spacing-20);
    --content-column-width: 720px;
    /* Rendered height of .app-header (40px control + 12px block padding each side).
       The person detail scroll-spy uses it to inset its view timeline. */
    --app-header-height: 64px;

    /* DESIGN.md font stacks */
    --font-sf-pro-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-sf-pro-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-sf-pro-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, "Segoe UI", Roboto, sans-serif;

    /* Existing token names remain aliases so the rest of the stylesheet
       does not need a simultaneous rename. */
    --bg: var(--color-paper);
    --panel: var(--color-white);
    --text: var(--color-graphite);
    --muted: var(--color-slate);
    --line: var(--color-silver);
    --accent: var(--color-ink);
    --danger: #b42318;

    /* 2026 interface refinement: warmer, calmer, and intentionally hierarchical. */
    --color-moss: #3F6B52;
    --color-moss-soft: #e8f0ea;
    --color-warm: #a35b2a;
    --color-warm-soft: #f8eee6;
    --color-moss-hatch-light: #bcd7c5;
    --color-moss-hatch: #8fae9c;
    --color-hover-wash: #fafbf9;
    --shadow-card: 0 1px 2px rgba(23, 33, 27, 0.04), 0 8px 28px rgba(23, 33, 27, 0.05);
    /* Elevation for content that floats over the page rather than sitting in it.
       A card shadow is too soft to separate a white overlay from a white card. */
    --shadow-overlay: 0 2px 6px rgba(23, 33, 27, 0.08), 0 12px 32px rgba(23, 33, 27, 0.14);
    --radius-small: 10px;
    --radius-card: 18px;
}

* {
    box-sizing: border-box;
}

/* Pulls an element back out to the viewport edge, canceling .app-main's
   padding on whichever sides it's applied. Use on components (lists,
   tables, media) that should span full-width on narrow screens instead
   of sitting inside the page gutter — anything text-heavy (cards, forms,
   headings) should keep the gutter for readability. Driven by the same
   --page-gutter token as .app-main so the two can't drift apart. */
.full-bleed {
    margin-left: calc(var(--page-gutter) * -1);
    margin-right: calc(var(--page-gutter) * -1);
}

.skip-link {
    position: fixed;
    top: var(--spacing-8);
    left: var(--spacing-8);
    z-index: 100;
    padding: var(--spacing-10) var(--spacing-16);
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--spacing-16)));
}

.skip-link:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
    transform: translateY(0);
}

.people-list__empty {
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.person-row:last-child {
    border-bottom: none;
}

.person-row__track {
    display: grid;
    grid-template-columns: 100% var(--person-row-action-width);
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    background: var(--color-white);
    position: relative;
    z-index: 1;
}

.person-row__track::-webkit-scrollbar {
    display: none;
}

.person-row__track--dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.person-row__swipe-form {
    display: contents;
}

.person-row__swipe-action {
    position: static;
    width: var(--person-row-action-width);
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--color-ink);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    cursor: pointer;
    scroll-snap-align: end;
    scroll-snap-stop: always;
    z-index: 1;
}

.person-row__swipe-icon {
    width: var(--spacing-24);
    height: var(--spacing-24);
}

.person-row__primary {
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.filter-drawer {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: auto 0 0;
    width: min(480px, 100%);
    max-width: none;
    margin: 0 auto;
    background: var(--color-white);
    color: var(--color-graphite);
    border: 0;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px max(var(--spacing-24), env(safe-area-inset-bottom));
    max-height: 80vh;
    max-height: 80dvh;
    overflow: hidden;
    z-index: 31;
}

.filter-drawer[open] {
    display: flex;
}

.filter-drawer::backdrop {
    background: rgba(16, 16, 16, 0.45);
}

.filter-drawer__handle {
    width: 36px;
    height: 4px;
    background: var(--color-silver);
    border-radius: 4px;
    margin: 0 auto 14px;
}

.filter-drawer__title {
    font-size: 17px;
    margin: 0 0 6px;
}

.filter-drawer__title:focus {
    outline: 0;
}

.filter-drawer__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate);
    font-weight: 600;
    margin: 16px 0 7px;
}

.chip-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

/* Visually hides a real input (radio/checkbox) while keeping it in the
   accessibility tree and the tab order — used to drive chip/segment
   pickers with a sibling-styled <label> instead of a native <select>,
   with no JS. See .chip__radio and .strength-picker__input below. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.visually-hidden:focus-visible + .chip,
.visually-hidden:focus-visible + .rating-picker__choice {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

.rating-picker {
    display: grid;
    gap: var(--spacing-6);
}

.rating-picker__choices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-6);
}

.rating-picker__choice {
    display: grid;
    place-items: center;
    min-height: var(--spacing-48);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-small);
    background: var(--color-white);
    color: var(--color-graphite);
    cursor: pointer;
}

.rating-picker__value {
    font: 700 17px/1 var(--font-sf-pro-rounded);
}

.rating-picker__scale {
    display: flex;
    justify-content: space-between;
    color: var(--color-slate);
    font-size: 12px;
}

.rating-picker__no-change {
    justify-self: start;
    margin-top: var(--spacing-4);
}

.rating-picker__input:checked + .rating-picker__choice {
    border-color: var(--color-moss);
    background: var(--color-moss);
    color: var(--color-white);
}

@media (hover: hover) {
    .rating-picker__choice:hover {
        border-color: var(--color-moss);
        background: var(--color-moss-soft);
    }

    .rating-picker__input:checked + .rating-picker__choice:hover {
        background: var(--color-moss);
    }
}

.filter-drawer__done {
    flex-shrink: 0;
    min-height: var(--spacing-48);
    margin-top: var(--spacing-20);
}

.filter-drawer__body {
    min-height: 0;
    overflow-y: auto;
}

/* Forms (BEM) — shared by Login, Add/Edit Person, Log Interaction, and
   CSV Import. */

.card--narrow {
    max-width: 380px;
    margin: 56px auto;
}

.form__hidden {
    display: none;
}

.form__back-icon {
    width: 16px;
    height: 16px;
}

.form__section {
    margin-top: 0;
}

.form__fieldset {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
}

.form__field:last-child {
    margin-bottom: 0;
}

textarea.form__control {
    resize: vertical;
}

.form__checkbox {
    --form-checkbox-track-width: var(--spacing-48);
    --form-checkbox-track-height: var(--spacing-28);
    --form-checkbox-thumb-size: var(--spacing-20);
    --form-checkbox-track-border-width: 1px;
    --form-checkbox-thumb-inset: calc(var(--spacing-4) - var(--form-checkbox-track-border-width));
    --form-checkbox-motion-duration: 180ms;
    --form-checkbox-motion-easing: cubic-bezier(.2, .8, .2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    width: 100%;
    min-height: var(--spacing-48);
    margin-top: var(--spacing-4);
    cursor: pointer;
    font-family: var(--font-sf-pro-text);
    font-size: 14px;
    color: var(--color-graphite);
}

.form__checkbox-label {
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
}

.form__checkbox-track {
    position: relative;
    flex: 0 0 var(--form-checkbox-track-width);
    width: var(--form-checkbox-track-width);
    height: var(--form-checkbox-track-height);
    border: var(--form-checkbox-track-border-width) solid var(--color-stone);
    border-radius: var(--form-checkbox-track-height);
    background: var(--color-silver);
    transition:
        background-color var(--form-checkbox-motion-duration) ease-out,
        border-color var(--form-checkbox-motion-duration) ease-out;
}

.form__checkbox-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--form-checkbox-thumb-inset);
    width: var(--form-checkbox-thumb-size);
    height: var(--form-checkbox-thumb-size);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(23, 33, 27, .22);
    translate: 0 -50%;
    scale: 1;
    transition:
        translate var(--form-checkbox-motion-duration) var(--form-checkbox-motion-easing),
        scale 100ms ease-out;
}

.form__checkbox-control:checked + .form__checkbox-track {
    border-color: var(--color-moss);
    background: var(--color-moss);
}

.form__checkbox-control:checked + .form__checkbox-track::after {
    translate: var(--spacing-20) -50%;
}

.form__checkbox:active .form__checkbox-track::after {
    scale: .9;
}

.form__checkbox-control:focus-visible + .form__checkbox-track {
    outline: 2px solid var(--color-ink);
    outline-offset: var(--spacing-4);
}

.form__checkbox:has(.form__checkbox-control:disabled) {
    cursor: not-allowed;
    opacity: .55;
}

@media (hover: hover) {
    .form__checkbox:hover .form__checkbox-track {
        border-color: var(--color-moss);
    }
}

.form__file {
    display: block;
    width: 100%;
    padding: var(--spacing-8) var(--spacing-10);
    border: 1px solid var(--color-silver);
    border-radius: 8px;
    background: var(--color-white);
    font-family: var(--font-sf-pro-text);
    font-size: 13.5px;
    color: var(--color-graphite);
}

.form__file::file-selector-button {
    font-family: var(--font-sf-pro-rounded);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-graphite);
    background: var(--color-paper);
    border: 1px solid var(--color-silver);
    border-radius: 999px;
    padding: 7px 14px;
    margin-right: 10px;
    cursor: pointer;
}

.form__actions {
    display: flex;
    gap: var(--spacing-10);
    margin-top: var(--spacing-20);
}

.form__actions--footer {
    align-items: center;
    margin: 0 0 0 auto;
}

.form__action-form {
    margin: 0;
}

.form__action-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-slate);
    cursor: pointer;
    font: 600 13px/1.25 var(--font-sf-pro-text);
    text-decoration: none;
}

.form__action-link:hover {
    color: var(--color-ink);
    text-decoration: underline;
}

.form__action-link:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}

.form__action-link--danger {
    color: var(--danger);
}

.memory-form__title {
    margin: 0;
    color: var(--color-ink);
    font: 700 19px/1.25 var(--font-sf-pro-display);
}

.memory-form__intro {
    max-width: 62ch;
    margin: var(--spacing-6) 0 var(--spacing-20);
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.5;
    text-wrap: pretty;
}

.button--block {
    width: 100%;
}

.banner {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.banner--error {
    background: rgba(180, 35, 24, 0.08);
    color: var(--danger);
}

.banner--info {
    background: var(--color-info-banner-bg);
    color: var(--color-graphite);
}

.banner--success {
    border: 1px solid rgba(37, 101, 72, .16);
    background: var(--color-moss-soft);
    color: var(--color-ink);
}

/* Transient notices. The region is fixed and non-interactive so it never blocks
   the page; each toast re-enables pointer events for its dismiss control. Toasts
   flow inside the region, so stacking needs no per-toast positioning. */
.toast-region {
    position: fixed;
    inset-inline: 0;
    inset-block-start: calc(var(--app-header-height) + var(--spacing-12));
    z-index: 40;
    display: grid;
    justify-items: center;
    padding-inline: var(--page-gutter);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    width: fit-content;
    /* Long operational errors wrap inside the pill rather than stretching
       across a desktop viewport. */
    max-width: min(100%, 32rem);
    padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-12);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--shadow-overlay);
    pointer-events: auto;
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;
}

.toast + .toast {
    margin-block-start: var(--spacing-8);
}

@starting-style {
    .toast {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.toast--leaving {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
}

.toast__icon {
    flex: 0 0 auto;
    width: var(--spacing-20);
    height: var(--spacing-20);
}

.toast__message {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-ink);
    text-wrap: pretty;
}

.toast--success {
    box-shadow: var(--shadow-overlay), inset 0 0 0 1px rgba(63, 107, 82, 0.22);
}

.toast--success .toast__icon {
    color: var(--color-moss);
}

.toast--error {
    box-shadow: var(--shadow-overlay), inset 0 0 0 1px rgba(180, 35, 24, 0.24);
}

.toast--error .toast__icon {
    color: var(--danger);
}

.toast--info {
    box-shadow: var(--shadow-overlay), inset 0 0 0 1px rgba(23, 33, 27, 0.12);
}

.toast--info .toast__icon {
    color: var(--color-slate);
}

.toast__dismiss {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--spacing-28);
    height: var(--spacing-28);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-stone);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.toast__dismiss:hover {
    background: var(--color-paper);
    color: var(--color-graphite);
}

.toast__dismiss-icon {
    width: var(--spacing-16);
    height: var(--spacing-16);
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: opacity 120ms ease, display 120ms allow-discrete;
    }

    @starting-style {
        .toast {
            transform: none;
        }
    }

    .toast--leaving {
        transform: none;
    }
}

/* 2026 interface refinement: warmer, calmer, and intentionally hierarchical. */

body {
    margin: 0;
    font-family: var(--font-sf-pro-text);
    background: var(--color-moss-soft);
    color: var(--color-graphite);
    min-height: 100dvh;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--spacing-12);
    padding-inline: max(var(--page-gutter), calc((100% - var(--content-column-width)) / 2));
    border-bottom: 1px solid rgba(23, 33, 27, 0.08);
    background: rgba(255, 255, 255, 0.88);
    min-height: 64px;
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 25;
}

.brand {
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-10);
}

.brand__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand__context {
    font-size: 13px;
    color: var(--color-slate);
}

.app-menu { position: relative; }

.app-menu__trigger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-silver);
    border-radius: 12px;
    corner-shape: squircle;
    background: var(--color-white);
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.app-menu__trigger:hover,
.app-menu__trigger[aria-expanded="true"] { border-color: #cbd2cc; background: var(--color-paper); }
.app-menu__trigger:focus-visible { outline: 3px solid var(--color-moss); outline-offset: 2px; }
.app-menu__icon { display: grid; gap: 4px; width: 17px; }
.app-menu__icon span { display: block; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; }
.app-menu__panel {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background: var(--color-white);
    border: 1px solid var(--color-silver);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 6px;
    min-width: 190px;
    z-index: 20;
}
.app-menu__panel--open { display: block; }
.app-menu__item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-graphite);
    font: 600 14px/1.25 var(--font-sf-pro-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.app-menu__item:hover { background: var(--color-paper); color: var(--color-ink); }
.app-menu__item:focus-visible { outline: 2px solid var(--color-moss); outline-offset: -2px; background: var(--color-paper); color: var(--color-ink); }
.app-menu__divider { height: 1px; margin: var(--spacing-5) var(--spacing-8); background: var(--color-silver); }
.app-menu__form { margin: 0; }
.app-menu__sign-out { color: var(--color-slate); }

/* Unified back header — profile, edit person, log/edit interaction, add/edit memory,
   and prepare with AI all show the same chevron + avatar + person's name. The chevron
   destination and aria-label are the only things that vary per screen. */
.app-header--back { justify-content: flex-start; gap: var(--spacing-12); }

.header-back {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--spacing-40);
    height: var(--spacing-40);
    margin-inline-start: calc(var(--spacing-10) * -1);
    border-radius: 50%;
    color: var(--color-slate);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.header-back:hover { background: var(--color-paper); color: var(--color-ink); }
.header-back:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 2px; }
.header-back__icon { width: var(--spacing-20); height: var(--spacing-20); }

.header-back__name {
    color: var(--color-ink);
    font-family: var(--font-sf-pro-display);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Portrait handoff — person detail only. That page is the one screen showing the same
   portrait twice, so the header starts as name-only (sitting where the avatar would be)
   and takes over the identity as the card portrait slides underneath it: the name makes
   room first, then the small portrait fades in as the big one disappears. Scrolling back
   reverses it, because the animation is driven by scroll position rather than time.

   The card portrait publishes a view timeline, inset by the header height so its "exit"
   phase measures exactly the travel from touching the header to being hidden behind it.
   Progressive enhancement: browsers without scroll-driven animations (Firefox, iOS 18 and
   earlier) get the header portrait shown as-is.

   Deliberately not gated on prefers-reduced-motion. Every frame here is driven by the
   user's own scroll rather than a clock — nothing moves unless they move it, and the
   travel is a 44px slide plus a fade — so it does not carry the vestibular risk the
   preference exists to avoid. Gating it meant the whole effect vanished on any machine
   with Reduce Motion switched on. */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    body:has(.profile-summary__header) { timeline-scope: --person-portrait; }

    .profile-summary__header .profile-header__avatar {
        view-timeline: --person-portrait block;
        view-timeline-inset: var(--app-header-height) 0;
    }

    body:has(.profile-summary__header) .header-back__avatar {
        animation: header-portrait-reveal auto linear both;
        animation-timeline: --person-portrait;
        animation-range: exit 45% exit 100%;
    }

    body:has(.profile-summary__header) .header-back__name {
        animation: header-portrait-make-room auto linear both;
        animation-timeline: --person-portrait;
        animation-range: exit 0% exit 55%;
    }
}

@keyframes header-portrait-reveal {
    from { opacity: 0; scale: 0.65; }
    to { opacity: 1; scale: 1; }
}

/* The avatar keeps its box the whole time, so the name only has to slide across the
   avatar's width plus the header's flex gap. */
@keyframes header-portrait-make-room {
    from { translate: calc((var(--spacing-32) + var(--spacing-12)) * -1) 0; }
    to { translate: 0 0; }
}

.app-main {
    width: 100%;
    max-width: calc(var(--content-column-width) + var(--page-gutter) + var(--page-gutter));
    margin-inline: auto;
    padding: var(--page-gutter);
    padding-top: var(--spacing-32);
    padding-bottom: var(--spacing-80);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--spacing-10) var(--spacing-16);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sf-pro-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.005em;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(23, 33, 27, 0.16); }

.button--secondary {
    background: var(--color-white);
    color: var(--color-ink);
    border-color: var(--color-silver);
}

.section-kicker {
    margin: 0 0 var(--spacing-4);
    color: var(--color-moss);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Daily focus — the bounded "Today" set above the directory. The reason line
   is the headline and outranks the person's name, because this view is
   organized around what happened rather than who scores highest. */
.daily-focus {
    margin-bottom: var(--spacing-24);
}
.daily-focus__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}
.daily-focus__empty {
    margin: 0;
    color: var(--color-slate);
    font-size: 14px;
}

.focus-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    padding: var(--spacing-16);
    border-radius: var(--radius-card);
    corner-shape: squircle;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}
.focus-card--done, .focus-card--snoozed { opacity: 0.65; }

.focus-card__identity {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    text-decoration: none;
}
.focus-card__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 11px;
    corner-shape: squircle;
    background: var(--color-moss-soft);
    color: var(--color-moss);
    font-size: 9px;
    font-weight: 700;
}
.focus-card__name {
    font-family: var(--font-sf-pro-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-slate);
}
.focus-card__headline {
    margin: 0;
    font-family: var(--font-sf-pro-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    text-wrap: balance;
}
.focus-card__opener {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-slate);
    text-wrap: pretty;
}
/* Holds the opener's height before the articulation fragment lands, so the
   card does not jump when the text swaps in. */
.focus-card__opener--pending { min-block-size: 1.45lh; }
.focus-card__resolved {
    margin: 0;
    font-size: 14px;
    color: var(--color-slate);
}

.focus-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    margin-top: var(--spacing-4);
}
.focus-card__snooze-form { margin: 0; }
.focus-card__action {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sf-pro-text);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    cursor: pointer;
}
.focus-card__action--prepare { color: var(--color-moss); }
.focus-card__action:hover { text-decoration: underline; }
.focus-card__action:focus-visible {
    outline: 2px solid var(--color-moss);
    outline-offset: 3px;
    border-radius: 4px;
}

.workbench-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-24);
}
.workbench-toolbar__search-region {
    flex: 1;
    min-width: 0;
}
.workbench-toolbar__search-form {
    position: relative;
    width: 100%;
}
.workbench-toolbar__search {
    width: 100%;
    font: inherit;
    min-height: 46px;
    margin: 0;
    padding: var(--spacing-10) var(--spacing-48) var(--spacing-10) var(--spacing-16);
    border: 1px solid transparent;
    border-radius: 13px;
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(23, 33, 27, 0.04);
    font-size: 14px;
}
.workbench-toolbar__search:focus { outline: none; border-color: rgba(37, 101, 72, 0.4); box-shadow: 0 0 0 3px rgba(37, 101, 72, 0.09); }
.workbench-toolbar__search-submit {
    position: absolute;
    top: 50%;
    right: var(--spacing-4);
    display: grid;
    place-items: center;
    width: var(--spacing-40);
    height: var(--spacing-40);
    padding: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--color-slate);
    cursor: pointer;
    transform: translateY(-50%);
}
.workbench-toolbar__search-submit:hover { background: var(--color-paper); color: var(--color-ink); }
.workbench-toolbar__search-submit:focus-visible { outline: 2px solid var(--color-moss); outline-offset: -2px; }
.workbench-toolbar__search-icon { width: var(--spacing-20); height: var(--spacing-20); }
.workbench-toolbar__filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sf-pro-rounded);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-graphite);
    background: var(--color-white);
    border: 1px solid var(--color-silver);
    border-radius: 13px;
    padding: var(--spacing-10) var(--spacing-16);
    cursor: pointer;
    min-height: 46px;
    flex-shrink: 0;
}

.people-list-header { display: flex; justify-content: space-between; padding: 0 var(--spacing-16) var(--spacing-8); color: var(--color-slate); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.people-list-header__count { color: var(--color-moss); font-variant-numeric: tabular-nums; }
.workbench-results { transition: opacity 120ms ease; }
.workbench-results.htmx-request { opacity: .55; pointer-events: none; }
.people-list {
    display: grid;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background: var(--color-white);
    overflow: hidden;
    border: 1px solid rgba(23, 33, 27, 0.08);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    list-style: none;
}
.person-row {
    --person-row-action-width: calc(var(--spacing-32) * 2);

    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-silver);
}
.person-row__primary {
    display: flex;
    min-width: 0;
    background: var(--color-white);
}
.person-row__link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    min-height: 90px;
    padding: var(--spacing-16);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: background 120ms ease;
}
.person-row__link:hover { background: var(--color-hover-wash); }
.person-row__link:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--color-moss); outline-offset: -3px; background: var(--color-hover-wash); }
.person-row__avatar, .profile-header__avatar, .header-back__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 26px;
    corner-shape: squircle;
    background: var(--color-moss-soft);
    color: var(--color-moss);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .04em;
}
.header-back__avatar { width: var(--spacing-32); height: var(--spacing-32); border-radius: 50%; font-size: 11px; }
.portrait { position: relative; overflow: hidden; }
.portrait__initials { display: grid; place-items: center; width: 100%; height: 100%; }
.portrait__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--color-moss-soft); object-fit: cover; }
.person-row__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.person-row__name {
    font-family: var(--font-sf-pro-text);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
.person-row__meta {
    font-size: 12px;
    color: var(--color-slate);
    margin-top: 1px;
    display: block;
}
.person-row__context { display: block; margin-top: var(--spacing-6); overflow: hidden; color: var(--color-slate); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person-row__context--overdue { color: var(--color-warm); font-weight: 650; }
.person-row__context-note { font-weight: 400; }
.person-row__health { display: flex; align-items: flex-end; flex-direction: column; gap: var(--spacing-4); padding-right: var(--spacing-4); }
.person-row__contacted { color: var(--color-slate); font-size: 11px; white-space: nowrap; }
.person-row__swipe-action:focus-visible {
    z-index: 3;
    outline: 3px solid var(--color-white);
    outline-offset: -5px;
}
.strength-bar__track { position: relative; height: 12px; border-radius: 6px; background: var(--color-silver); overflow: hidden; }
.strength-bar__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--bar-end) * 20%); border-radius: 6px; }
.strength-bar__fill--current { background: var(--color-ink); }
.strength-bar__fill--goal { background: repeating-linear-gradient(45deg, var(--color-moss-hatch-light) 0 5px, var(--color-moss-hatch) 5px 10px); }
.strength-bar--compact { width: 56px; }
.strength-bar--compact .strength-bar__track { height: 8px; border-radius: 4px; }
.strength-bar--compact .strength-bar__fill { border-radius: 4px; }
.strength-bar--full .strength-bar__scale { position: relative; }
.strength-bar--full .strength-bar__marker {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    left: calc(var(--strength-bar-pos) * 20%);
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 12px/1 var(--font-sf-pro-text); color: var(--color-white);
    z-index: 1;
}
.strength-bar--full .strength-bar__marker--current { background: var(--color-ink); }
.strength-bar--full .strength-bar__marker--target { background: var(--color-moss); }

/* Person profile */
.profile-header__identity { display: flex; align-items: center; gap: var(--spacing-16); min-width: 0; color: inherit; text-decoration: none; }
.profile-header__identity:hover { color: inherit; text-decoration: none; }
.profile-header__avatar { width: 72px; height: 72px; border-radius: 18px; font-size: 16px; }
.profile-header__name-row { display: flex; align-items: center; gap: var(--spacing-10); }
.profile-header__name {
    font-family: var(--font-sf-pro-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 38px);
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.profile-header__subtitle {
    font-size: 14px;
    color: var(--color-slate);
    margin: var(--spacing-6) 0 0;
    overflow-wrap: anywhere;
}
.status-badge { padding: var(--spacing-4) var(--spacing-8); border-radius: 999px; background: var(--color-silver); color: var(--color-slate); font-size: 11px; font-weight: 700; }

.detail-layout { display: grid; gap: var(--spacing-24); }
.detail-layout > .card { margin-bottom: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16); margin-bottom: var(--spacing-20); }
.section-title { margin: 0; color: var(--color-ink); font: 700 23px/1.15 var(--font-sf-pro-display); letter-spacing: -.025em; }
.section-title--small { font-size: 18px; margin-bottom: var(--spacing-16); }
.section-heading__count { color: var(--color-slate); font-size: 12px; }

/* `clip` rather than `hidden`: both round off the stacked child backgrounds, but `hidden`
   makes this a scroll container, which would capture the portrait's view timeline (see the
   portrait handoff above) instead of letting it resolve against the page. */
.profile-summary { border-radius: var(--radius-card); overflow: clip; box-shadow: var(--shadow-card); }
.profile-summary__header { padding: var(--spacing-24); background: var(--color-white); }
.profile-summary__chart { padding: var(--spacing-20) var(--spacing-24); background: var(--color-paper); }
.profile-summary__next-step { padding: var(--spacing-16) var(--spacing-24) var(--spacing-24); background: var(--color-moss-soft); }
.profile-summary--overdue .profile-summary__next-step { background: var(--color-warm-soft); }
.profile-summary--overdue .profile-summary__next-step .section-kicker { color: var(--color-warm); }
.next-step__content { min-width: 0; }
.next-step__title { margin: 0; color: var(--color-ink); font: 700 19px/1.25 var(--font-sf-pro-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.next-step__note { max-width: 68ch; margin: var(--spacing-6) 0 0; color: var(--color-graphite); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.next-step__meta { display: grid; gap: 2px; margin: var(--spacing-6) 0 0; color: var(--color-slate); font-size: 12px; }

.timeline {
    display: grid;
    gap: 0;
}
.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--spacing-32) minmax(0, 1fr);
    gap: var(--spacing-12);
    padding: 0 var(--spacing-12);
    margin: 0 calc(-1 * var(--spacing-12));
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease;
}
.timeline-item:hover,
.timeline-item:focus-visible { background: var(--color-hover-wash); }
.timeline-item:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 2px; }
.timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: var(--spacing-32);
    bottom: calc(var(--spacing-12) * -1);
    left: calc(var(--spacing-12) + var(--spacing-16) - .5px);
    width: 1px;
    background: var(--color-silver);
}
.timeline-item__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--spacing-32);
    height: var(--spacing-32);
    border: 1px solid var(--color-silver);
    border-radius: 50%;
    background: var(--color-white);
}
.timeline-item__icon--interaction { color: var(--color-moss); }
.timeline-item__icon--memory { color: var(--color-warm); }
.timeline-item__icon-svg { width: var(--spacing-16); height: var(--spacing-16); }
.timeline-item__content { padding-bottom: var(--spacing-24); }
.timeline-item:last-child .timeline-item__content { padding-bottom: 0; }
.timeline-item__meta {
    font-size: 12px;
    color: var(--color-slate);
    margin: 0 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}
.timeline-item__type {
    display: inline-block;
    font-family: var(--font-sf-pro-rounded);
    font-weight: 600;
    font-size: 11px;
    color: var(--color-moss);
    background: var(--color-moss-soft);
    border-radius: 999px;
    padding: 3px var(--spacing-8);
    margin: 0;
}
.timeline-item__type--memory { color: var(--color-warm); background: var(--color-warm-soft); }
.timeline-item__note {
    display: block;
    margin: 0;
    font-size: 14px;
    color: var(--color-graphite);
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 68ch;
    line-height: 1.65;
}
.timeline-item__follow-up { display: block; max-width: 68ch; margin: var(--spacing-6) 0 0; color: var(--color-slate); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.timeline-item__follow-up-label { color: var(--color-moss); font-weight: 700; }
.timeline-item__privacy {
    display: block;
    margin-top: var(--spacing-6);
    color: var(--color-warm);
    font-size: 11px;
    font-weight: 650;
}
.timeline-item__privacy--eligible { color: var(--color-slate); font-weight: 500; }
.timeline-item--person { grid-template-columns: var(--spacing-40) minmax(0, 1fr); }
.timeline-item--person:not(:last-child)::before { top: var(--spacing-20); bottom: calc(var(--spacing-20) * -1); left: calc(var(--spacing-12) + var(--spacing-20) - 0.5px); }
.timeline-item__avatar { position: relative; z-index: 1; display: grid; place-items: center; width: var(--spacing-40); height: var(--spacing-40); border-radius: 50%; font-size: 12px; }
.timeline-item--person .timeline-item__avatar { color: inherit; text-decoration: none; }
.timeline-item--person .timeline-item__avatar:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 2px; }
.timeline-item--person .timeline-item__content { display: block; color: inherit; text-decoration: none; border-radius: 10px; transition: background 120ms ease; }
.timeline-item--person .timeline-item__content:hover,
.timeline-item--person .timeline-item__content:focus-visible { background: var(--color-hover-wash); }
.timeline-item--person .timeline-item__content:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 2px; }
.timeline-item__person { display: block; margin: 0 0 var(--spacing-4); color: var(--color-ink); font-size: 13px; font-weight: 700; }
.empty-state { padding: var(--spacing-40) var(--spacing-20); text-align: center; }
.empty-state__icon { display: grid; place-items: center; margin-bottom: var(--spacing-10); color: var(--color-moss); }
.empty-state__icon-svg { width: var(--spacing-28); height: var(--spacing-28); }
.empty-state__title { margin: 0; color: var(--color-ink); font: 700 17px var(--font-sf-pro-display); }
.empty-state__copy { max-width: 360px; margin: var(--spacing-6) auto 0; color: var(--color-slate); font-size: 13px; }

.contact-list { display: grid; gap: var(--spacing-4); }
.contact-item { display: flex; align-items: flex-start; gap: var(--spacing-10); padding: var(--spacing-10) 0; border-top: 1px solid var(--color-silver); }
.contact-item__icon { display: grid; place-items: center; align-self: stretch; flex: 0 0 var(--spacing-32); width: var(--spacing-32); min-width: var(--spacing-32); aspect-ratio: 1; border-radius: 8px; background: var(--color-paper); color: var(--color-slate); }
.contact-item__icon-svg { width: 15px; height: 15px; }
.contact-item__body { display: flex; flex-direction: column; min-width: 0; }
.contact-item__label { color: var(--color-slate); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.contact-item__value, .contact-item__empty { margin-top: 1px; font-size: 12px; overflow-wrap: anywhere; }
.contact-item__value { display: inline-flex; align-items: center; gap: var(--spacing-4); width: fit-content; color: var(--color-moss); font-weight: 600; text-decoration: none; }
.contact-item__external-icon { flex: 0 0 auto; width: 12px; height: 12px; }
.contact-item__empty { color: var(--color-stone); }
.relationship-rubric { margin: 0; }
.relationship-rubric--canvas { width: 100%; margin: var(--spacing-48) 0 0; padding: 0 var(--spacing-24); }
.relationship-rubric__list { display: grid; gap: var(--spacing-20); padding: 0; margin: 0; list-style: none; }
.relationship-rubric__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--spacing-10); }
.relationship-rubric__score { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-moss-soft); color: var(--color-moss); font-size: 12px; font-weight: 750; }
.relationship-rubric__description { color: var(--color-graphite); font-size: 13px; line-height: 1.4; }
.relationship-rubric--canvas .relationship-rubric__list { gap: var(--spacing-12); }
.profile-ai-preparation {
    position: fixed;
    right: var(--spacing-16);
    bottom: max(var(--spacing-16), env(safe-area-inset-bottom));
    z-index: 10;
}
.profile-ai-preparation__button {
    display: grid;
    place-items: center;
    width: var(--spacing-48);
    height: var(--spacing-48);
    border: none;
    border-radius: 999px;
    background: var(--color-moss);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(23, 33, 27, .28);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.profile-ai-preparation__button:hover { background: var(--color-ink); transform: translateY(-1px); }
.profile-ai-preparation__button:focus-visible { outline: 3px solid var(--color-moss); outline-offset: var(--spacing-4); }
.profile-ai-preparation__button:disabled { background: var(--color-silver); color: var(--color-slate); cursor: not-allowed; box-shadow: none; }
.profile-ai-preparation__icon { width: var(--spacing-28); height: var(--spacing-28); }
.profile-ai-preparation__hint {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--spacing-8));
    width: max-content;
    max-width: 220px;
    margin: 0;
    padding: var(--spacing-8) var(--spacing-10);
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: var(--color-white);
    font-size: 12px;
    line-height: 1.35;
}
/* Forms inherit the same rhythm and editorial hierarchy. */
.card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-24);
    margin-bottom: var(--spacing-12);
    border: 1px solid rgba(23, 33, 27, .07);
}
.card--has-footer {
    --card-padding-block: var(--spacing-24);
    --card-padding-inline: var(--spacing-24);
    padding: var(--card-padding-block) var(--card-padding-inline);
    overflow: hidden;
}
.card__footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    margin: var(--card-padding-block) calc(-1 * var(--card-padding-inline)) calc(-1 * var(--card-padding-block));
    padding: var(--spacing-16) var(--card-padding-inline);
    border-top: 1px solid var(--color-silver);
    background: var(--color-paper);
}

/* Mirrors .card--has-footer: padding moves off .card and onto .card__body
   so the utility bar can bleed edge-to-edge and be clipped to the card's
   own top corners by this overflow. */
.card--has-utility-bar {
    padding: 0;
    overflow: hidden;
}
.card__utility-bar {
    display: flex;
    background: var(--color-moss);
}
.card__utility-action {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    min-height: 52px; /* comfortably above the 44px touch-target minimum */
    padding: 0 var(--spacing-8);
    border: none;
    background: none;
    font-family: var(--font-sf-pro-rounded);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.card__utility-action:hover { background: rgba(255, 255, 255, .10); }
.card__utility-action:active { background: rgba(0, 0, 0, .10); }
.card__utility-action:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -3px;
}
.card__utility-divider {
    flex: none;
    align-self: stretch;
    width: 1px;
    margin: var(--spacing-12) 0;
    background: rgba(255, 255, 255, .22);
}
.card__utility-icon {
    flex: none;
    width: var(--spacing-16);
    height: var(--spacing-16);
}
.card__body {
    padding: var(--spacing-24);
}
.form__back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    font-family: var(--font-sf-pro-rounded);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-moss);
    text-decoration: none;
    margin-bottom: var(--spacing-10);
}
.form__section + .form__section {
    margin-top: var(--spacing-32);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-silver);
}
.form__section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-moss);
    font-weight: 600;
    margin-bottom: var(--spacing-16);
}
.form__required-mark { color: var(--color-warm); font-weight: 750; }
.form__field {
    display: grid;
    min-width: 0;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.form__hint {
    margin: calc(var(--spacing-4) * -1) 0 0;
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.35;
}
.form__label {
    display: block;
    font-family: var(--font-sf-pro-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-graphite);
}

.form__control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: var(--spacing-10) var(--spacing-12);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-small);
    background: #fcfdfb;
    color: var(--color-graphite);
    font-family: var(--font-sf-pro-text);
    font-size: 16px;
    min-height: 44px;
}

.form__date-control {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--spacing-10) var(--spacing-12);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-small);
    background: #fcfdfb;
}

.form__date-control:focus-within {
    border-color: var(--color-moss);
    box-shadow: 0 0 0 3px rgba(37, 101, 72, .09);
}

.form__date-input {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-graphite);
    font: 16px var(--font-sf-pro-text);
    line-height: 1.5;
}

.form__date-input:focus {
    outline: 0;
}
.date-shortcuts { display: flex; flex-wrap: wrap; gap: var(--spacing-6); }
.date-shortcuts__button {
    min-height: var(--spacing-32);
    padding: var(--spacing-6) var(--spacing-10);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-small);
    background: var(--color-white);
    color: var(--color-graphite);
    cursor: pointer;
    font: 600 12px/1 var(--font-sf-pro-rounded);
}
.date-shortcuts__button:hover { border-color: var(--color-moss); background: var(--color-moss-soft); color: var(--color-moss); }
.date-shortcuts__button:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 2px; }
.date-shortcuts__button--clear { color: var(--color-slate); }
.form__control:focus {
    outline: none;
    border-color: var(--color-moss);
    box-shadow: 0 0 0 3px rgba(37, 101, 72, .09);
}
.chip {
    display: inline-block;
    font-family: var(--font-sf-pro-rounded);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-silver);
    color: var(--color-graphite);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-white);
}
.chip--selected,
.chip__radio:checked + .chip {
    background: var(--color-moss-soft);
    color: var(--color-moss);
    border-color: var(--color-moss);
}
.chip--preset {
    border-style: dashed;
}
.chip--preset.chip--selected {
    border-style: solid;
}

/* AI preparation — a full-height assistant shell: fixed bar, scrolling
   stream, pinned composer. The shared content column moves from .app-main
   onto the shell's three rows, which is what a fixed shell requires.

   The shell is taken out of flow and pinned to the *visible* viewport rect
   that app.js publishes as --viewport-safe-height / --viewport-safe-offset.
   dvh tracks the layout viewport, which on iOS keeps full height behind the
   keyboard and its floating accessory toolbar, so a dvh-sized composer row
   sits under that chrome with nothing scrollable to reveal it. Sizing
   without positioning is worse still — see the note in app.js. Both custom
   properties fall back to the plain 100dvh shell when there is no JS or no
   visualViewport, which is also the literal declaration scripts/check.sh
   greps for; keep it. */
.app-main--focus {
    position: fixed;
    inset-inline: 0;
    top: 0;
    top: var(--viewport-safe-offset, 0px);
    max-width: none;
    padding: 0;
    block-size: 100dvh;
    block-size: var(--viewport-safe-height, 100dvh);
    overflow: hidden;
}

.ai-preparation {
    --ai-preparation-entry-gap: var(--spacing-28);
    display: grid;
    grid-template-rows: auto 1fr auto;
    block-size: 100dvh;
    block-size: 100%;
}

.ai-preparation__inner {
    width: 100%;
    max-width: calc(var(--content-column-width) + var(--page-gutter) + var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.ai-preparation__bar {
    border-bottom: 1px solid var(--color-silver);
    background: var(--color-white);
}

.ai-preparation__bar .ai-preparation__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    min-height: 58px;
}

.ai-preparation__stream {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-preparation__stream .ai-preparation__inner {
    padding-block: var(--spacing-32) var(--spacing-40);
}

.ai-preparation__entries {
    display: grid;
    gap: var(--ai-preparation-entry-gap);
}

.ai-preparation__composer {
    border-top: 1px solid var(--color-silver);
    background: var(--color-white);
}

.ai-preparation__composer .ai-preparation__inner { padding-block: var(--spacing-12); }

.ai-preparation__composer-form {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-10);
    margin: 0;
}

.ai-preparation__input {
    flex: 1;
    width: 100%;
    field-sizing: content;
    min-block-size: 2lh;
    max-block-size: 8lh;
    padding: var(--spacing-10) var(--spacing-12);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: var(--color-graphite);
    font-family: var(--font-sf-pro-text);
    font-size: 1rem;
    line-height: 1.45;
    resize: none;
}

.ai-preparation__input:focus-visible {
    outline: 2px solid var(--color-moss);
    outline-offset: 1px;
    background: var(--color-white);
}

.ai-preparation__send { flex: 0 0 auto; }

.ai-preparation__footer {
    display: grid;
    gap: var(--spacing-12);
    justify-items: start;
    margin-top: var(--spacing-40);
    padding-top: var(--spacing-24);
    border-top: 1px dashed var(--color-silver);
}

.ai-preparation__temporary-notice {
    margin: 0;
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.4;
}

.ai-preparation__end-form { margin: 0; }

/* Entries. Only records carry a frame — that reserves the border for
   "this becomes data", the one distinction that carries meaning here. */
.ai-preparation__entry { margin: 0; }

.ai-preparation__kicker {
    margin: 0 0 var(--spacing-6);
    color: var(--color-moss);
    font-family: var(--font-sf-pro-rounded);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
}

.ai-preparation__prose {
    margin: 0;
    color: var(--color-graphite);
    font-size: 17px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ai-preparation__prose--clarification {
    margin-top: var(--spacing-12);
    color: var(--color-ink);
    font-weight: 600;
}

.ai-preparation__answer + .ai-preparation__answer { margin-top: var(--spacing-16); }

.ai-preparation__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4) var(--spacing-12);
    margin: var(--spacing-6) 0 0;
}

.ai-preparation__source {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.ai-preparation__source-icon { display: inline-grid; flex: 0 0 auto; place-items: center; }
.ai-preparation__source-icon-svg { width: var(--spacing-12); height: var(--spacing-12); }

a.ai-preparation__source {
    color: var(--color-moss);
    text-decoration: underline;
    text-decoration-color: var(--color-moss-hatch);
    text-underline-offset: var(--spacing-4);
    transition: text-decoration-color 120ms ease;
}

a.ai-preparation__source:hover { text-decoration-color: var(--color-moss); }
a.ai-preparation__source:focus-visible { outline: 2px solid var(--color-moss); outline-offset: var(--spacing-4); }

.ai-preparation__entry--you {
    justify-self: end;
    max-inline-size: 32ch;
    padding: var(--spacing-10) var(--spacing-16);
    border-radius: var(--radius-card);
    background: var(--color-moss-soft);
}

.ai-preparation__entry--you .ai-preparation__prose {
    color: var(--color-ink);
    font-size: 16px;
}

.ai-preparation__entry--next-step,
.ai-preparation__entry--record {
    padding: var(--spacing-20);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.ai-preparation__next-step .section-kicker { margin-bottom: var(--spacing-4); }
.ai-preparation__next-step .next-step__title { font-size: 20px; }
.ai-preparation__next-step .next-step__meta { gap: var(--spacing-4); margin-top: var(--spacing-10); font-size: 13px; }

.ai-preparation__record-kicker {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin: 0 0 var(--spacing-10);
    color: var(--color-moss);
    font-family: var(--font-sf-pro-rounded);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
}

.ai-preparation__record-icon { display: inline-grid; place-items: center; }
.ai-preparation__record-icon-svg { width: var(--spacing-16); height: var(--spacing-16); }

.ai-preparation__record-title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-sf-pro-display);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.ai-preparation__record-body {
    margin: var(--spacing-8) 0 0;
    color: var(--color-graphite);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ai-preparation__record-lines {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-4) var(--spacing-16);
    margin: var(--spacing-16) 0 0;
}

.ai-preparation__record-label { margin: 0; color: var(--color-slate); font-size: 13px; line-height: 1.4; }
.ai-preparation__record-value { margin: 0; color: var(--color-graphite); font-size: 13px; font-weight: 600; line-height: 1.4; }

.ai-preparation__record-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-16);
    margin-top: var(--spacing-20);
}

.ai-preparation__record-save { margin: 0; }

.ai-preparation__record-edit {
    color: var(--color-slate);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: var(--spacing-4);
}

.ai-preparation__record-edit:hover { color: var(--color-ink); }
.ai-preparation__record-edit:focus-visible { outline: 2px solid var(--color-moss); outline-offset: var(--spacing-4); }

.ai-preparation__record-form { margin: 0; }

.ai-preparation__entry--outcome {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-10);
}

.ai-preparation__entry--outcome:focus-visible { outline: 2px solid var(--color-moss); outline-offset: var(--spacing-4); }

.ai-preparation__outcome { margin: 0; color: var(--color-moss); font-size: 15px; font-weight: 700; }

.ai-preparation__undo-form { display: inline-flex; margin: 0; }

.ai-preparation__undo {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-slate);
    font: 600 14px/1.4 var(--font-sf-pro-text);
    text-decoration: underline;
    text-underline-offset: var(--spacing-4);
    cursor: pointer;
}

.ai-preparation__undo:hover { color: var(--color-ink); }
.ai-preparation__undo:focus-visible { outline: 2px solid var(--color-moss); outline-offset: var(--spacing-4); }

.ai-preparation__entry--error {
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--color-warm);
    border-radius: var(--radius-card);
    background: var(--color-warm-soft);
}

.ai-preparation__entry--error .ai-preparation__prose { color: var(--color-warm); font-size: 15px; }

.ai-preparation__entry--pending {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    padding-block: var(--spacing-8);
}

.ai-preparation__pending-dot {
    width: var(--spacing-6);
    height: var(--spacing-6);
    border-radius: 50%;
    background: var(--color-moss-hatch);
    animation: ai-preparation-pulse 1.2s ease-in-out infinite;
}

.ai-preparation__pending-dot:nth-child(2) { animation-delay: .18s; }
.ai-preparation__pending-dot:nth-child(3) { animation-delay: .36s; }

@keyframes ai-preparation-pulse {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(calc(var(--spacing-4) * -1)); }
}

.ai-preparation__entry--latest { scroll-initial-target: nearest; }

@media (min-width: 720px) {
    .full-bleed { margin-right: 0; margin-left: 0; }
}

@media (max-width: 620px) {
    :root { --page-gutter: var(--spacing-16); }
    .app-header { min-height: 58px; }
    .brand { flex-direction: column; align-items: flex-start; gap: 1px; }
    .app-main { padding-top: var(--spacing-24); }
    .workbench-toolbar { align-items: stretch; flex-direction: column; }
    .workbench-toolbar__search-region { width: 100%; }
    .workbench-toolbar__search { font-size: 1rem; }
    .workbench-toolbar__filter-pill { justify-content: center; }
    .people-list-header { padding-right: 0; padding-left: 0; }
    .person-row__link { min-height: 96px; padding-right: var(--spacing-10); padding-left: var(--spacing-12); }
    .person-row__context { margin-top: var(--spacing-4); font-size: 11px; }
    .profile-header__identity { align-items: flex-start; }
    .profile-header__name { font-size: 28px; }
    .card { padding: var(--spacing-20) var(--spacing-16); }
    .card--has-footer { --card-padding-block: var(--spacing-20); --card-padding-inline: var(--spacing-16); }
    .card--has-utility-bar { padding: 0; }
    .card__body { padding: var(--spacing-20) var(--spacing-16); }
    .relationship-rubric--canvas { padding-right: var(--spacing-16); padding-left: var(--spacing-16); }
    .ai-preparation { --ai-preparation-entry-gap: var(--spacing-24); }
}

@media (prefers-reduced-motion: reduce) {
    .app-menu__trigger,
    .button,
    .person-row__link,
    .person-row__swipe-action,
    .header-back,
    .timeline-item,
    .timeline-item--person .timeline-item__content,
    .workbench-results,
    .form__checkbox-track,
    .form__checkbox-track::after,
    a.ai-preparation__source,
    .ai-preparation__send {
        transition: none;
    }

    .ai-preparation__pending-dot { animation: none; opacity: .6; }
}