.sites-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5) var(--page-gutter);
    /* On the page ground, like Today: .page__header draws the scroll-edge line when content passes under. */
}

.sites-page__body {
    /* Inherits .page__body layout; centers the scrolling content. */
    align-items: stretch;
}

.sites-page__scroll {
    /* Padding here so the scrollbar sits flush, not inset. */
    padding: var(--space-6) var(--page-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.sites-page__scroll > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.sites-page__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* The back control beside a large title: bottom-aligned with the title's row, and the title block takes the rest
   of the row - without that, the header's space-between pushed the title to the far edge. */
.sites-page__header > .app-bar__back,
.photos-header > .app-bar__back {
    align-self: flex-end;
    margin-bottom: var(--space-1);
}

.sites-page__header > .app-bar__back + .sites-page__title-block,
.photos-header > .app-bar__back + .photos-header__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.sites-page__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-4xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

/* Stands in for .sites-page__title while its data loads - same box height, so the header
   band doesn't resize the instant the real title replaces it. */
.sites-page__title-skeleton {
    width: 12rem;
    max-width: 60%;
    height: calc(var(--text-4xl) * var(--leading-4xl));
}

.sites-page__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.sites-page__danger-item {
    color: var(--color-danger-text);
}

/* The header's right-hand action group: at most one primary, the rest soft, "More" last. The
   browse pages, the lookups and the four document editors all draw it with this one class, so the
   shell reads the same on every page (the document editors' own sheet is projects.css, which is
   why the group lives here with the other header idioms rather than beside .sow-editor__header). */
.sites-page__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sites-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Compact density's RecordCard.RecordVariant.Row swap (HIG rebuild Phase 7) renders `.list-row`
   <li> elements - the same shape already live at ProjectDetail.razor's document list - instead
   of `.sites-page__site-card` grid tiles. A fixed-width auto-fill grid fights a full-width row,
   so the four browse-page call sites add this modifier alongside .sites-grid when Compact swaps
   their RecordCard Variant; it is not density-gated here because the container-vs-variant
   pairing is the call site's job, not this stylesheet's. */
.sites-grid--row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* A lookup row stays ONE line at every width with its chevron showing - components.css's phone
   block wraps .list-row and hides the chevron for rows whose trail carries buttons; these carry a
   chevron or a pill. Tighter than a card: a row, not a tile. */
.sites-grid--row > .list-row {
    flex-wrap: nowrap;
    padding: var(--space-3) var(--space-4);
}

.sites-grid--row > .list-row > .list-row__link {
    flex: 1 1 auto;
}

.sites-grid--row .list-row__chevron {
    display: inline-flex;
}

/* flex-basis:100% claims its own row in the wrapping header. */
.browse-toolbar {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* One row at every width: the sort box keeps its own width, the search takes the rest. */
    flex-wrap: nowrap;
    margin-top: var(--space-1);
}

/* The chrome search trigger (MainLayout, HIG rebuild Phase 7) reuses this component for its
   search-only input (Sorts is left empty, so the sort segmented never renders) - the
   header-band top margin above is meaningless inside a small anchored dropdown. */
.app-chrome__search-panel .browse-toolbar {
    margin-top: 0;
}

.browse-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 420px;
}

.browse-toolbar__search-icon {
    position: absolute;
    left: var(--space-3);
    display: inline-flex;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    pointer-events: none;
}

/* Clears the icon: input's own padding plus the icon width. */
.browse-toolbar__input {
    padding-left: calc(var(--space-3) * 2 + 1em);
}

/* The sort control: a select dressed as a small field, the caret drawn by us (appearance: none
   drops the platform arrow, which never matches the sprite). Same height as .input. */
.browse-toolbar__sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.browse-toolbar__select {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    /* The label centres in the room LEFT of the caret (the caret is part of the box the eye sees),
       so the right padding reserves the caret's width and the left is a plain field inset. */
    padding: var(--space-2) calc(var(--space-3) * 2 + 1em) var(--space-2) var(--space-3);
    text-align: center;
    text-align-last: center;
    font: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-base);
    font-weight: var(--weight-medium);
    background: var(--color-surface);
    color: var(--color-text);
}

.browse-toolbar__select:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.browse-toolbar__sort-caret {
    position: absolute;
    right: var(--space-3);
    display: inline-flex;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    pointer-events: none;
}

/* This strip IS the Detailed/Compact density difference. */
.record-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    color: var(--color-text-muted);
}

.record-stats__count {
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    margin-right: var(--space-0-5);
}

/* Detailed is default (no attribute); Compact is subtractive. */
/* Vertical layout - inline foot (date+pills+buttons) shears on phone width. */
.card--stack .site-card__address {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    /* Full date must not clip - overrides the base ellipsis rule. */
    white-space: normal;
    overflow: visible;
}

.card--stack .site-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.card--stack .site-card__foot .pill {
    justify-content: center;
    text-align: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.card--stack .record-stats {
    justify-content: center;
}

/* HIG rebuild Phase 7: Compact used to tighten the Card tile in place (hide .record-stats,
   shrink .sites-page__site-card padding) at every width. Now the four browse pages swap
   RecordCard to Variant.Row instead (see .sites-grid--row below), so .record-stats and
   .sites-page__site-card never render while [data-density="compact"] is set - a
   [data-density="compact"] override of either would be dead CSS. Removed rather than left
   inert; if a future surface renders Card tiles under Compact without the Row swap, it needs
   this padding/stats treatment back. */

.sites-page__site-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    /* min-width:0 overrides grid's auto min so the card can shrink + ellipsis. */
    min-width: 0;
    /* Separation via --shadow-rest + radius; dark uses --color-card to stay distinct. */
    background: var(--color-card);
    border-color: var(--color-card-border);
    box-shadow: var(--shadow-rest);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

/* No border-ring on hover - reserved for keyboard focus below. */
.sites-page__site-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* Anchor-only - a div-card's own foot buttons press themselves. */
a.sites-page__site-card:active {
    transition-duration: 100ms;
    transition-timing-function: ease-in;
    transform: translateY(1px);
    box-shadow: var(--shadow-0);
}

.sites-page__site-card:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.sites-page__site-card:focus:not(:focus-visible) {
    outline: none;
}

.site-card__name {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    /* Clamp on every form factor, not just phone: a long client name in a narrowed tile grew
       the card unboundedly. anywhere covers the unbroken-token case a clamp alone won't. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.site-card__address {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.site-card__id {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.site-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* No border here - margin-top:auto + padding give the separation. */
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    color: var(--color-text-subtle);
}

.site-card__date {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.site-card__arrow {
    flex: 0 0 auto;
    font-size: var(--text-md);
    line-height: 1;
    color: var(--color-text-subtle);
    transition: transform 150ms ease-out, color 150ms ease-out;
}

.sites-page__site-card:hover .site-card__arrow {
    transform: translateX(3px);
    color: var(--color-primary-text);
}

/* 599px hardcoded - var() isn't valid in @media conditions. */
@media (max-width: 599px) {
    /* minmax(0,…) avoids 1fr's implicit auto-min growing the track. */
    .sites-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    /* The phone-width 2-up/1-col Compact overrides that used to live here are gone with
       .record-stats'/.sites-page__site-card's - see the removal note above .sites-page__site-card.
       .sites-grid--row (flex, not grid) is what Compact renders now, at every width. */

    .sites-page__site-card {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    /* The clamp itself is on the base rule now - phone only tightens the type. */
    .site-card__name {
        font-size: var(--text-md);
        line-height: var(--leading-md);
    }

    /* The glyph itself is the static "this row navigates" cue and stays visible on
       touch - only the mouse-hover slide-out (meaningless on touch) is dropped. */
    .sites-page__site-card:hover .site-card__arrow {
        transform: none;
    }

    .site-card__foot {
        flex-wrap: wrap;
        row-gap: var(--space-1);
    }

    .sites-page__actions {
        gap: var(--space-1);
    }
}

.site-detail-page__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--page-gutter);
    /* On the page ground; the scroll-edge line is the only separator. */
}

/* Also .segmented - use margin here so its own padding stands. */
.site-detail-page__tabs {
    margin: var(--space-3) var(--space-6) 0 var(--space-6);
}

/* Four equal segments across the track, as a native segmented control divides it - not four
   keys packed to the left with the slack on the right. */
.site-detail-page__tabs > .segmented__option {
    flex: 1 1 0;
    text-align: center;
}

/* Fixed band - search/sort never scroll away with the results. */
.site-detail-page__toolbar {
    margin: var(--space-3) var(--space-6) 0 var(--space-6);
    display: flex;
}

.site-detail-page__scroll {
    padding: var(--space-4) var(--page-gutter) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.site-detail-page__scroll > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.site-detail-page__title-block {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 240px;
}

/* Doubled class (.input.x) outranks the global .input rule by specificity. */
.input.site-detail-page__name,
.input.site-detail-page__address,
.input.site-detail-page__notes {
    background: transparent;
    border-color: transparent;
    padding: var(--space-0-5) var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
}

.input.site-detail-page__name:hover:not(:focus),
.input.site-detail-page__address:hover:not(:focus),
.input.site-detail-page__notes:hover:not(:focus) {
    background: var(--color-surface-hover);
    border-color: transparent;
}

.input.site-detail-page__name:focus,
.input.site-detail-page__address:focus,
.input.site-detail-page__notes:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.site-detail-page__name {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}


.site-detail-page__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-detail-page__panel-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.site-detail-page__missing {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

.site-picker {
    width: min(480px, calc(var(--vw, 1vw) * 92));
    max-height: calc(var(--vh, 1vh) * 80);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-picker__results {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    max-height: calc(var(--vh, 1vh) * 60);
}

.site-picker__empty {
    padding: var(--space-6);
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-sm);
}

.site-picker__empty--inline {
    padding: var(--space-3);
}

.site-picker__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.site-picker__row:hover {
    background: var(--color-primary-softer);
    border-color: var(--color-primary);
}

.site-picker__row--unfiled {
    border-style: dashed;
}

.site-picker__row-name {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.site-picker__row-meta {
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    color: var(--color-text-muted);
}

.photo-tile__site {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text-on-accent);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-editor__site {
    text-decoration: none;
    flex: 0 0 auto;
}

.photo-detail__site-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}





.quick-start__option {
    width: 100%;
    justify-content: flex-start;
}

/* Input grows, button hugs; the back link stays compact. */
.quick-start__create-row {
    display: flex;
    gap: var(--space-2);
}

.quick-start__create-row .input {
    flex: 1;
    min-width: 0;
}

.quick-start__back {
    align-self: flex-start;
}

.home-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--page-gutter) var(--space-4);
    background: var(--color-bg);
}

/* A row box inside the column header, so BrowseToolbar's flex-basis:100% means width here
   exactly as it does in the wrapping browse-page headers. */
.home-search {
    display: flex;
}

.home-scroll {
    padding: var(--space-3) var(--page-gutter) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.home-scroll > * {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The Calendar page: the view switch and person filter sit in the header beside the title. */
.calendar-page__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.calendar-page__person {
    width: auto;
    min-width: 10rem;
}

/* ── JobCalendar: a month of chips or a week of job cards (the console and the desktop app) ── */
.job-calendar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

/* Chevrons either side of the period, "Today" after: one row, never wrapping the title. */
.job-calendar__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.job-calendar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}

.job-calendar__weekday {
    padding: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    text-align: center;
}

/* Both spellings of a weekday are rendered; the width shows the abbreviation on a desk, the initial on a phone. */
.job-calendar__weekday-short {
    display: none;
}

.job-calendar__day {
    min-height: 5.5rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
}

.job-calendar--week .job-calendar__day {
    min-height: 16rem;
}

.job-calendar__day--other {
    opacity: 0.5;
}

/* Today wears a ring outside the cell, the selected day a ring inside it: both can hold at once. */
.job-calendar__day--today {
    outline: 2px solid var(--color-focus);
}

.job-calendar__day--selected {
    box-shadow: inset 0 0 0 2px var(--color-primary-text);
}

/* In the month the number is a button that opens the day's list; in the week it is only a label. base.css already
   strips a button's background and border. */
.job-calendar__day-number {
    align-self: flex-start;
    padding: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    color: var(--color-text-subtle);
    border-radius: var(--radius-sm);
}

.job-calendar__day--today .job-calendar__day-number {
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
}

/* Dots (or a count past three) stand in for the chips where a cell is too narrow to read one. */
.job-calendar__marks {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-0-5);
    min-height: var(--space-2);
}

.job-calendar__dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.job-calendar__count {
    font-size: var(--text-2xs);
    line-height: 1;
    font-weight: var(--weight-semibold);
    color: var(--color-primary-text);
}

.job-calendar__chip,
.job-calendar__job {
    min-width: 0;
    font: inherit;
    font-size: var(--text-xs);
    text-align: left;
    color: var(--color-text);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.job-calendar__chip {
    padding: 0 var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--color-primary-soft);
}

.job-calendar__job {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--space-1) var(--space-2);
    background: var(--color-card);
    border-color: var(--color-border);
}

.job-calendar__sub {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.job-calendar__chip:hover:not(:disabled),
.job-calendar__job:hover:not(:disabled) {
    border-color: var(--color-focus);
}

.job-calendar__chip:disabled,
.job-calendar__job:disabled {
    cursor: default;
}

/* The selected day's jobs under the grid: the chips' full text on a desk, the only reading of them on a phone. */
.job-calendar__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.job-calendar__detail-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.job-calendar__detail .job-calendar__job {
    font-size: var(--text-sm);
}

.job-calendar__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

/* A phone (599px = --breakpoint-phone-max). The month keeps its seven columns in ~340px: one-letter headers, square
   cells that are each a tap target, dots for jobs, and the tapped day's list under the grid. The week cannot show
   seven columns of job cards, so it becomes a list of days. A cross-month title ("Sep 28 - Oct 4, 2026") wraps
   rather than reading "Sep 28 - Oc...". */
@media (max-width: 599px) {
    .job-calendar {
        padding: var(--space-3) var(--space-2);
    }

    .job-calendar__title {
        white-space: normal;
        font-size: var(--text-base);
    }

    .job-calendar__grid {
        gap: var(--space-0-5);
    }

    .job-calendar__weekday {
        padding: var(--space-0-5) 0;
    }

    .job-calendar__weekday-long {
        display: none;
    }

    .job-calendar__weekday-short {
        display: inline;
    }

    .job-calendar:not(.job-calendar--week) .job-calendar__day {
        min-height: 2.75rem;
        align-items: center;
        gap: var(--space-0-5);
        padding: var(--space-1) 0;
        cursor: pointer;
    }

    .job-calendar:not(.job-calendar--week) .job-calendar__day-number {
        align-self: center;
        padding: 0 var(--space-1);
        font-size: var(--text-sm);
        color: var(--color-text);
    }

    .job-calendar:not(.job-calendar--week) .job-calendar__chip {
        display: none;
    }

    .job-calendar__marks {
        display: flex;
    }

    .job-calendar--week .job-calendar__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-calendar--week .job-calendar__day {
        min-height: 0;
    }

    .job-calendar--week .job-calendar__day-number {
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
    }

    /* A job card is a tap target. */
    .job-calendar__job {
        min-height: 44px;
        justify-content: center;
        font-size: var(--text-sm);
    }
}

.home-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.home-note {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.home-continue {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* The person's card at the top of You: the avatar in the icon column, the name a size up, the email under it. */
.you-profile__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);   /* the same avatar as Account's - one look for the person */
    color: var(--color-primary-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    user-select: none;
}

.you-me .you-me__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.you-me__pro {
    margin-left: var(--space-2);
    vertical-align: middle;
}

.you-me .you-me__sub {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}

/* A group's footnote under its card - what a switch does, in gray, like iPhone Settings. */
.you-footnote {
    margin: 0;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: var(--color-text-muted);
}

.you-scroll {
    padding: var(--space-2) var(--page-gutter) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* flex:0 0 auto - a column flexbox would otherwise shrink these. */
.you-scroll > * {
    flex: 0 0 auto;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* The address card is a button: a tap opens the address search. */
.start-survey__address {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.start-survey__address:active {
    background: var(--color-surface-active);
}

.start-survey__change {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-text);
}

.start-survey__pin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: var(--text-lg);
}

.start-survey__where {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.start-survey__addr {
    display: block;
    font-size: var(--text-md);
    line-height: var(--leading-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-survey__loc {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    color: var(--color-text-muted);
}

.start-survey__go {
    width: 100%;
    box-shadow: var(--shadow-glow-primary);
}

.site-detail-page__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.site-detail-page__title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.site-detail-page__name {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Stands in for .site-detail-page__name while the record loads - same box height, so the
   header band doesn't resize the instant the real title replaces it. */
.site-detail-page__name-skeleton {
    width: 12rem;
    max-width: 60%;
    height: calc(var(--text-2xl) * var(--leading-2xl));
}

/* Address / notes */
/* Scrolls with the list - the pinned band above it is already four rows deep on a phone. */
/* One quiet line under the header - no panel: the jobs are what the page is for. */
.site-detail-page__details {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.site-detail-page__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.site-detail-page__chip:hover { background: var(--color-surface-hover); }
.site-detail-page__chip:active { transform: translateY(1px); }

.site-detail-page__detail-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* Shadow + tint, not just a color change - the empty-state chips already read as
   buttons via their pill background, this row needed the same "this lifts" cue. */
.site-detail-page__detail-line:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-card);
}

.site-detail-page__detail-line:focus-within {
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-card);
}

/* Mirrors .list-row--interactive:active / .site-detail-page__chip:active - a row
   that doesn't press on tap reads as decoration, not as a control. */
.site-detail-page__detail-line:active {
    transition-duration: 100ms;
    transition-timing-function: ease-in;
    transform: translateY(1px);
    box-shadow: var(--shadow-0);
}

.site-detail-page__detail-icon { flex: 0 0 auto; color: var(--color-text-subtle); }
.site-detail-page__detail-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
    /* The row is a <button> - its default UA user-select:none made an address uncopyable. */
    user-select: text;
}
/* The notes keep their line breaks - a survey brief is a paragraph or a list, not a one-liner -
   but an AI-generated brief still needs a ceiling: clamp to 4 lines, "Show more" lifts it. */
.site-detail-page__detail-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-detail-page__notes-input {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    line-height: var(--leading-base);
}
/* Trailing pencil - without it the row read as static text, not a tap target. */
.site-detail-page__detail-edit {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: var(--space-2);
    color: var(--color-text-subtle);
    transition: transform 150ms ease-out, color 150ms ease-out;
}
/* Nudges toward the tap direction on hover - same "leads somewhere" cue as .list-row__chevron. */
.site-detail-page__detail-line:hover .site-detail-page__detail-edit {
    color: var(--color-primary-text);
    transform: translateX(2px);
}

/* Card: trailing slot + merged footer */
.site-card__trailing {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-0-5);
}

.site-card__chevron { color: var(--color-text-subtle); display: inline-flex; }

/* Merges what used to be two stacked footer bands into one. */
.card--stack .site-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.card--stack .site-card__footer .record-stats {
    margin: 0;
    border: 0;
    padding: 0;
}

.card--stack .site-card__footer .site-card__foot {
    /* Grid, not a flex column: a flex column shrunk by its parent still laid its children out at
       their max-content width, so the nowrap survey address and the Attach/Delete row ran past
       the card edge on phone. A minmax(0, 1fr) track is the width, full stop. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    /* min-width:0 - a flex item's auto-min is its content otherwise. */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

@media (max-width: 599px) {
    .site-detail-page__header {
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
        background: var(--color-bg);
        padding: var(--space-2) var(--page-gutter);
    }

    .site-detail-page__name {
        font-size: var(--text-2xl);
        line-height: var(--leading-2xl);
    }

    .site-detail-page__name-skeleton {
        height: calc(var(--text-2xl) * var(--leading-2xl));
    }

    /* Match the header's tighter side padding - these otherwise kept the desktop
       --space-6 gutter, insetting the tabs/search further than the title above them. */
    .site-detail-page__tabs,
    .site-detail-page__toolbar {
        margin-left: var(--page-gutter);
        margin-right: var(--page-gutter);
        margin-top: var(--space-2);
    }

    /* The search + sort row sits centred between the tabs and the list: the same air above it
       as the scroller's padding puts below it. */
    .site-detail-page__toolbar {
        margin-top: var(--space-4);
    }

    .site-detail-page__scroll {
        padding: var(--space-3) var(--page-gutter) var(--space-6);
        gap: var(--space-3);
    }
}

/* The client's contacts (CRM). */
.client-contacts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.client-contacts__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.client-contacts__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-contacts__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
}

.client-contacts__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.client-contacts__sub {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    overflow-wrap: anywhere;
}

.client-contacts__reach {
    display: flex;
    gap: var(--space-2);
}

/* ── The site's System tab (SiteSystemPanel): the property's installed devices ── */
.site-system__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.site-system__count {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.site-system__floor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-system__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-system__row {
    padding: var(--space-3) var(--space-4);
}

.site-system__row--muted {
    opacity: 0.7;
}

.site-system__tag {
    flex: 0 0 auto;
    min-width: var(--space-10);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-text);
}

.site-detail-page__check {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
}

.site-system__trail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.site-system__trail .pill {
    gap: var(--space-1);
}

/* ── A service ticket (TicketDetail) ── */
.ticket-page__device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ticket-page__device .pill {
    gap: var(--space-1);
}

.ticket-page__photo-actions {
    display: flex;
    gap: var(--space-2);
}

.ticket-page__customer-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
}

.ticket-page__customer-photos img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    aspect-ratio: 1;
}

.ticket-page__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── A site audit (SiteAuditPage) ── */
.audit-page__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.audit-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.audit-page__failure {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.audit-page__failure-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}