/* ─────────────────────────────────────────────────────────────────────────
 * Sundown — desktop screens
 *
 * Everything here is scoped to one breakpoint. Below it the phone layout in
 * styles.css stands untouched, which is the point: the Playwright suite runs
 * at 430px and never sees any of this.
 *
 * Values come from the desktop handoff (design_handoff_desktop_screens),
 * renamed to this project's kebab-case semantic convention.
 * ───────────────────────────────────────────────────────────────────────── */

/* Desktop-only markup is in the DOM at every width, so hiding it has to
 * happen outside the query. This preamble is the only part of this file that
 * escapes the breakpoint, and it does nothing but hide.
 *
 * .avatar and the chip counts are here for the same reason: the row and chip
 * templates are shared, and on a phone both are noise the phone layout never
 * had room for. */
.desk-sidebar,
.desk-topbar,
.avatar,
.filter-chips .count,
.past-toggle,
.master-group {
    display: none;
}

@media (min-width: 1100px) {
    /* ─── Shell ───────────────────────────────────────────────────────── */

    body,
    .sundown {
        background: var(--color-paper);
    }

    .bottom-tabs,
    .page-header-mobile,
    .fab {
        display: none;
    }

    .app-container {
        margin-left: 232px;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* Sidebar */

    .desk-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 232px;
        display: flex;
        flex-direction: column;
        padding: 20px 16px 16px;
        background: var(--color-paper-alt);
        border-right: 1px solid var(--color-line);
        z-index: 20;
    }

    .desk-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 8px 22px;
        color: var(--color-ink);
        text-decoration: none;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    .desk-brand .brand-mark {
        width: 34px;
        height: 23px;
    }

    .desk-create {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 42px;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--color-primary);
        color: var(--color-primary-fg);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }
    .desk-create svg {
        width: 17px;
        height: 17px;
    }
    .desk-create:hover {
        filter: brightness(0.96);
    }

    .desk-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 22px;
    }

    .desk-navitem {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 40px;
        padding: 0 10px;
        border-radius: var(--radius-md);
        color: var(--color-ink-muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
    }
    .desk-navitem svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }
    .desk-navitem:hover {
        color: var(--color-ink);
    }
    .desk-navitem.is-active {
        background: var(--color-paper);
        color: var(--color-primary);
        font-weight: 600;
        box-shadow: var(--shadow-sm);
    }
    /* Bleeds off the sidebar's left padding to meet the viewport edge. */
    .desk-navitem.is-active::before {
        content: "";
        position: absolute;
        left: -16px;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--color-primary);
    }

    .desk-spacer {
        flex: 1;
    }

    .desk-foot {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 12px 10px 0;
        border-top: 1px solid var(--color-line);
        color: var(--color-ink-muted);
        font-size: 13px;
    }

    /* Topbar */

    .desk-topbar {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px 28px 18px;
        border-bottom: 1px solid var(--color-line);
    }
    .desk-topbar .titles {
        display: flex;
        flex-direction: column;
    }
    .desk-topbar h1 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.015em;
    }
    .desk-topbar .sub {
        margin-top: 3px;
        font-size: 13px;
        color: var(--color-ink-subtle);
    }
    .desk-topbar .grow {
        flex: 1;
    }

    /* ─── Atoms ───────────────────────────────────────────────────────── */

    .avatar {
        display: inline-flex;
        width: 22px;
        height: 22px;
        border-radius: var(--radius-pill);
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        flex: 0 0 auto;
    }
    .avatar.is-me {
        background: var(--color-primary);
        color: var(--color-primary-fg);
    }
    .avatar.is-partner {
        background: var(--color-accent);
        color: oklch(0.3 0.05 50);
    }
    .avatar.is-nobody {
        background: transparent;
        border: 1.5px dashed var(--color-line);
        color: var(--color-ink-subtle);
        font-weight: 600;
    }
    .avatar-stack {
        display: flex;
        align-items: center;
    }
    .avatar-stack .avatar + .avatar {
        margin-left: -7px;
        box-shadow: 0 0 0 2px var(--color-paper-alt);
    }

    /* Buttons */

    .desk-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 38px;
        padding: 0 16px;
        border-radius: var(--radius-md);
        border: 1px solid var(--color-line);
        background: var(--color-paper);
        color: var(--color-ink);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
    }
    .desk-btn svg {
        width: 17px;
        height: 17px;
    }
    .desk-btn:hover {
        background: var(--color-paper-alt);
    }
    .desk-btn.is-primary {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-primary-fg);
        font-weight: 600;
    }
    .desk-btn.is-primary:hover {
        filter: brightness(0.96);
        background: var(--color-primary);
    }
    .desk-btn.is-danger {
        color: var(--color-danger);
        border-color: transparent;
        background: transparent;
    }
    .desk-btn.is-danger:hover {
        background: oklch(from var(--color-danger) l c h / 0.08);
    }
    .desk-btn.is-small {
        height: 32px;
        padding: 0 13px;
        font-size: 12.5px;
    }
    .desk-btn.is-ghost {
        border-color: transparent;
        color: var(--color-ink-subtle);
    }

    /* Search field */

    .desk-search {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        width: 240px;
        padding: 0 12px;
        border-radius: var(--radius-md);
        border: 1px solid var(--color-line);
        background: var(--color-paper);
        color: var(--color-ink-subtle);
    }
    .desk-search svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
    .desk-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 13px;
        color: var(--color-ink);
    }
    .desk-search input:focus {
        outline: none;
    }
    .desk-search:focus-within {
        box-shadow: var(--ring-focus);
    }

    /* Segmented control */

    .desk-seg {
        display: flex;
        padding: 3px;
        gap: 2px;
        background: var(--color-paper-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }
    .desk-seg a {
        height: 30px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        border-radius: 7px;
        color: var(--color-ink-muted);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
    }
    .desk-seg a.is-active {
        background: var(--color-paper);
        color: var(--color-ink);
        font-weight: 600;
        box-shadow: var(--shadow-sm);
    }

    /* Filter chips — the desktop treatment of the existing .filter-chips */

    .desk-filters {
        display: flex;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-line);
        flex-wrap: wrap;
    }
    .desk-filters .chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 32px;
        padding: 0 13px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-line);
        background: transparent;
        color: var(--color-ink-muted);
        font-size: 13px;
        font-weight: 500;
    }
    .desk-filters .chip .count {
        display: inline;
        color: var(--color-ink-subtle);
        font-size: 12px;
    }
    .desk-filters .chip.is-active {
        background: var(--color-ink);
        border-color: var(--color-ink);
        color: var(--color-paper);
        padding: 0 13px;
    }
    .desk-filters .chip.is-active .count {
        color: oklch(0.98 0.01 70 / 0.6);
    }

    /* ─── Master–detail ───────────────────────────────────────────────── */

    .desk-split {
        flex: 1;
        display: flex;
        min-height: 0;
    }

    .master {
        width: 392px;
        flex: 0 0 392px;
        border-right: 1px solid var(--color-line);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .master-rows {
        flex: 1;
        overflow-y: auto;
        padding: 6px 8px;
    }

    .master-group {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-subtle);
        padding: 14px 10px 6px;
    }

    .master-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        font-family: inherit;
        text-align: left;
        color: var(--color-ink);
        cursor: pointer;
    }
    /* Hairlines are drawn as an inset shadow so the selected row can suppress
     * both its own and its neighbour's. */
    .master-row + .master-row {
        box-shadow: 0 -1px 0 var(--color-line);
    }
    .master-row:hover {
        background: oklch(from var(--color-paper-alt) l c h / 0.6);
    }
    .master-row .text {
        min-width: 0;
        flex: 1;
    }
    .master-row .title {
        display: block;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .master-row .meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 3px;
        font-size: 12px;
        color: var(--color-ink-subtle);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .master-row .meta .avatar {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
    .master-row.is-selected {
        background: var(--color-paper-alt);
        box-shadow: none;
    }
    .master-row.is-selected + .master-row {
        box-shadow: none;
    }
    .master-row.is-selected::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--color-primary);
    }
    .master-row .kind-tile {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: var(--radius-md);
        background: var(--kind-bg);
        color: var(--kind-fg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .master-row .kind-tile svg {
        width: 19px;
        height: 19px;
    }

    /* Detail pane */

    .detail-pane {
        flex: 1;
        min-width: 0;
        padding: 34px 40px 28px;
        background: var(--color-paper);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .detail-pane .head {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .detail-pane .kind-tile {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        border-radius: var(--radius-lg);
        background: var(--kind-bg);
        color: var(--kind-fg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .detail-pane .kind-tile svg {
        width: 25px;
        height: 25px;
    }
    .detail-pane .kind-name {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-ink-subtle);
    }
    .detail-pane h2 {
        margin: 6px 0 0;
        font-size: 30px;
        line-height: 36px;
        font-weight: 600;
        letter-spacing: -0.022em;
    }
    .detail-pane .sub {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--color-ink-muted);
    }
    .detail-pane .note {
        margin: 24px 0 0;
        padding: 18px 20px;
        max-width: 68ch;
        background: var(--color-paper-alt);
        border-radius: var(--radius-lg);
        font-size: 14.5px;
        line-height: 1.62;
        color: var(--color-ink-muted);
        white-space: pre-wrap;
    }
    .detail-pane .link {
        margin-top: 18px;
        font-size: 13px;
    }
    .detail-pane .actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px solid var(--color-line);
    }
    .detail-pane .actions .grow {
        flex: 1;
    }

    .detail-empty {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background: var(--color-paper);
        color: var(--color-ink-subtle);
        font-size: 13.5px;
        text-align: center;
    }
}

/* The pane host exists at every width but only participates in the layout at
 * desktop; on a phone the same Item is shown by detail_sheet.html instead. */
.detail-host {
    display: none;
}

@media (min-width: 1100px) {
    /* .page is a flex *column* on a phone; the split is the one place that
     * has to turn the axis, or the master's flex-basis becomes its height. */
    .desk-split {
        flex: 1;
        display: flex;
        flex-direction: row;
        min-height: 0;
        padding: 0;
    }

    .desk-split > .master {
        width: 392px;
        flex: 0 0 392px;
    }

    .detail-host {
        display: flex;
        flex: 1;
        min-width: 0;
    }
    .detail-host > * {
        flex: 1;
        min-width: 0;
    }

    /* The phone list styles assume a scrolling page; inside the master column
     * the column scrolls instead. */
    #wishlist-list,
    #events-list {
        height: auto;
        padding-bottom: 0;
    }

    /* Every row in the Wishlist is an Open Item, so a "Want to" chip on each
     * of them says nothing. The Calendar's List view keeps its chip, because
     * there the status actually varies. */
    .wishlist-page .master-row .status-chip {
        display: none;
    }

    /* The Kind chips sit in the master column's filter strip, not the page. */
    .master > .filter-chips {
        margin: 0;
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-line);
    }
}

/* The grids are desktop markup. Below the breakpoint they are only reachable
 * by a hand-typed or shared ?view= URL, so they get a minimum width and let
 * the container scroll rather than a second, untested small-screen layout. */
.cal-month,
.cal-week {
    min-width: 900px;
}
.cal-canvas {
    overflow: auto;
}

@media (min-width: 1100px) {
    .desk-full {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0;
    }
    .desk-full .cal-canvas {
        flex: 1;
        min-height: 0;
        display: flex;
    }
    .cal-month,
    .cal-week {
        flex: 1;
        min-width: 0;
        display: flex;
        min-height: 0;
    }

    .desk-btn.is-icon {
        width: 38px;
        padding: 0;
    }

    /* ─── Month ───────────────────────────────────────────────────────── */

    .cal-grid-wrap {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: 18px 24px 24px;
    }

    .cal-dow {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
        padding: 0 0 8px;
    }
    .cal-dow div {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-subtle);
        padding-left: 4px;
    }

    .cal-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: 1fr;
        gap: 8px;
        min-height: 0;
    }

    .cal-cell {
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-paper);
        padding: 7px 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 0;
        overflow: hidden;
    }
    .cal-cell .d {
        font-size: 12px;
        font-weight: 600;
        color: var(--color-ink-muted);
    }
    .cal-cell.is-out {
        background: transparent;
        border-color: transparent;
    }
    .cal-cell.is-out .d {
        color: var(--color-ink-faint);
    }
    .cal-cell.is-today {
        border-color: var(--color-primary);
        background: oklch(from var(--color-primary) l c h / 0.05);
    }
    .cal-cell.is-today .d {
        color: var(--color-primary);
    }

    .cal-pill {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        padding: 5px 7px;
        border: 0;
        border-radius: 6px;
        background: var(--kind-bg);
        color: var(--kind-fg);
        font-family: inherit;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        overflow: hidden;
        cursor: pointer;
    }
    .cal-pill .nm {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Time under the title: the title is what you scan for. */
    .cal-pill .tm {
        order: 2;
        font-size: 11px;
        font-weight: 500;
        opacity: 0.72;
    }
    .cal-pill.is-past {
        background: var(--color-paper-alt);
        color: var(--color-ink-subtle);
    }

    /* Rail */

    .cal-rail {
        width: 312px;
        flex: 0 0 312px;
        border-left: 1px solid var(--color-line);
        background: var(--color-paper-alt);
        padding: 22px 20px;
        overflow-y: auto;
    }
    .cal-rail h3 {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 600;
    }
    .cal-rail .rail-heading {
        margin-top: 26px;
    }
    .cal-rail .sub {
        font-size: 12.5px;
        color: var(--color-ink-subtle);
        margin: 0 0 18px;
    }
    .rail-row {
        display: flex;
        gap: 11px;
        padding: 12px 0;
        border-top: 1px solid var(--color-line);
    }
    .rail-row .when {
        width: 54px;
        flex: 0 0 54px;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-ink-subtle);
    }
    .rail-row > span:last-child {
        flex: 1;
        min-width: 0;
    }
    .rail-row .t {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rail-row .m {
        margin-top: 5px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: var(--color-ink-subtle);
    }
    .rail-row .m .avatar {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .rail-empty {
        padding: 14px 16px;
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-md);
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-ink-subtle);
        margin: 0 0 20px;
    }

    /* ─── Week ────────────────────────────────────────────────────────── */

    .cal-week {
        flex-direction: column;
    }

    .week-head {
        display: grid;
        grid-template-columns: 56px repeat(7, 1fr);
        border-bottom: 1px solid var(--color-line);
    }
    .week-head .dh {
        padding: 10px 8px 12px;
        text-align: center;
    }
    .week-head .dn {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-subtle);
    }
    .week-head .dd {
        display: block;
        font-size: 19px;
        font-weight: 600;
        margin-top: 3px;
        letter-spacing: -0.01em;
    }
    .week-head .dh.is-today .dn,
    .week-head .dh.is-today .dd {
        color: var(--color-primary);
    }

    .week-body {
        flex: 1;
        display: grid;
        grid-template-columns: 56px repeat(7, 1fr);
        position: relative;
        overflow-y: auto;
        min-height: 0;
    }
    .week-times {
        position: relative;
    }
    .week-times .h {
        height: 56px;
        font-size: 11px;
        color: var(--color-ink-subtle);
        text-align: right;
        padding-right: 9px;
        transform: translateY(-6px);
    }
    .week-day {
        position: relative;
        border-left: 1px solid var(--color-line);
    }
    .week-day.is-today {
        background: oklch(from var(--color-primary) l c h / 0.04);
    }
    .week-day .h {
        height: 56px;
        border-top: 1px solid var(--color-line);
    }

    .week-ev {
        position: absolute;
        left: 4px;
        right: 4px;
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 7px;
        background: var(--kind-bg);
        color: var(--kind-fg);
        padding: 6px 8px;
        font-family: inherit;
        text-align: left;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        z-index: 2;
    }
    .week-ev .t {
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.25;
    }
    .week-ev .tm {
        font-size: 11px;
        opacity: 0.75;
        margin-top: 2px;
    }
    .week-ev .who {
        display: flex;
        margin-top: 6px;
    }
    .week-ev .who .avatar {
        width: 18px;
        height: 18px;
        font-size: 9px;
        box-shadow: 0 0 0 2px var(--kind-bg);
    }

    .week-now {
        position: absolute;
        left: 56px;
        right: 0;
        height: 1px;
        background: var(--color-primary);
        z-index: 3;
    }
    .week-now::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -3.5px;
        width: 8px;
        height: 8px;
        border-radius: var(--radius-pill);
        background: var(--color-primary);
    }

    /* ─── List view rows ──────────────────────────────────────────────── */

    /* .event-card is the phone's card; inside the master column it becomes a
     * row, so the card chrome comes off and .master-row's takes over. */
    .events-page .master-row.event-card {
        margin: 0;
        border: 0;
        background: none;
        box-shadow: 0 -1px 0 var(--color-line);
        padding: 0;
    }
    .events-page .master-row.event-card:first-child {
        box-shadow: none;
    }
    .events-page .master-row .event-info {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 10px;
    }
    /* The month/day stack becomes the 38px date tile the design specifies. */
    .events-page .master-row .event-date {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: var(--radius-md);
        background: var(--kind-bg);
        color: var(--kind-fg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
        margin: 0;
    }
    .events-page .master-row .event-date-month {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.8;
    }
    .events-page .master-row .event-date-day {
        font-size: 15px;
        font-weight: 700;
        margin-top: 2px;
    }
    /* The Kind is already in the tile's colour; the badge is a third telling. */
    .events-page .master-row .kind-badge {
        display: none;
    }
    .events-page .master-row.is-past .title {
        font-weight: 500;
        color: var(--color-ink-muted);
    }
    .events-page .master-row.is-past .event-date {
        background: var(--color-paper-alt);
        color: var(--color-ink-muted);
    }
    .events-page .master-row.is-selected .event-info {
        background: var(--color-paper-alt);
        border-radius: var(--radius-md);
    }

    .past-toggle {
        display: flex;
    }
    .master-group {
        display: block;
    }
    .desk-filters .chip {
        text-decoration: none;
    }
}

/* The device list is new markup with no phone styling of its own; a plain
 * stack reads fine at both widths, so only the desktop refinements below are
 * inside the query. */
.device-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.device {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-paper-alt);
}
.device .dt {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.device .n {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.device .tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-subtle);
    white-space: nowrap;
}
.device .dm {
    font-size: 12px;
    color: var(--color-ink-subtle);
    white-space: nowrap;
}
.device-empty {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-ink-subtle);
}


@media (min-width: 1100px) {
    .page-settings-body {
        flex: 1;
        min-height: 0;
        padding: 0;
    }

    .page-settings .settings-container {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 28px 40px 24px;
        display: flex;
        justify-content: center;
    }

    /* A fixed measure is the point of this screen: without it a label and its
     * control sit most of a metre apart. */
    .settings-col {
        width: 100%;
        max-width: 720px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* flex:none is load-bearing — as flex items in a column these shrink and
     * clip their last row without it. */
    .settings-card {
        flex: none;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        background: var(--color-paper);
        overflow: hidden;
    }
    .settings-card > header {
        padding: 18px 22px 16px;
        background: var(--color-paper-alt);
        border-bottom: 1px solid var(--color-line);
    }
    .settings-card > header h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.008em;
    }
    .settings-card > header p {
        margin: 6px 0 0;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--color-ink-muted);
        max-width: 56ch;
    }

    .settings-rows {
        display: flex;
        flex-direction: column;
    }
    .page-settings .settings-row {
        display: flex;
        /* Explicit: the phone stacks .is-top rows, and that must not leak up
         * here, where the label sits beside its control. */
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 14px 22px;
        margin: 0;
        border: 0;
    }
    .page-settings .settings-row + .settings-row {
        border-top: 1px solid var(--color-line);
    }
    .settings-row .rt {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .settings-row .rt .l {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.005em;
    }
    .settings-row .rt .d {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--color-ink-subtle);
        max-width: 52ch;
    }
    .settings-row .rc {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .page-settings .settings-value {
        font-size: 13.5px;
        font-weight: 500;
    }
    .page-settings .settings-value.muted {
        color: var(--color-ink-subtle);
        font-weight: 400;
    }
    /* For a control taller than one line, the label aligns to its top. */
    .settings-row.is-top {
        align-items: flex-start;
    }
    .settings-row.is-top .rt {
        padding-top: 6px;
    }
    .settings-row.is-top .device-list {
        min-width: 330px;
    }

    .settings-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 2px 0;
        flex-wrap: wrap;
    }
    .settings-foot .fine {
        flex: 1;
        min-width: 240px;
        margin: 0;
        font-size: 12px;
        line-height: 1.5;
        color: var(--color-ink-subtle);
    }
    /* The old screen put a full-width red Log Out under an "Actions" heading,
     * which read as the most important thing here. It is not. */
    .page-settings .settings-foot .settings-btn {
        width: auto;
        background: var(--color-paper);
        color: var(--color-ink);
        border: 1px solid var(--color-line);
    }

    .saves-note {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        color: var(--color-ink-subtle);
    }
    .saves-note svg {
        width: 14px;
        height: 14px;
    }
}