/* chrome.css: Observatory chrome: header cluster, notification panel and inbox, Attention Center, mobile tab bar and More drawer, footer, generic panel, readiness marker. */
/* ============================================================
   OBSERVATORY OVERHAUL: nav components, panels, Command Post
   Added for the Deep-Field Observatory identity. Reuses tokens
   above; introduces no new color outside the theme system.
   ============================================================ */

/* ---- Header: currency cluster, weather, notif bell, account menu ---- */
.site-nav-right { gap: 14px; }

/* Site clock: inline in the header from --bp-sm (768px) up; below that it is hidden here
   and shown in the account menu instead (.account-menu-clock), since the phone header row
   has no room beside the currency chips. Tabular figures so the ticking seconds do not
   jitter the width. */
.site-clock {
    display: none;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.site-clock__ico { font-size: 0.9rem; line-height: 1; }
.site-clock__time { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.site-clock__tz { font-size: 0.7rem; letter-spacing: 0.02em; }
@media (min-width: 768px) { .site-clock--header { display: inline-flex; } }

.account-menu-clock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 8px;
    padding: 8px 12px 10px;
}
.account-menu-clock .mono { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .account-menu-clock { display: none; } }

.currency-cluster { display: inline-flex; align-items: center; gap: 8px; }
.currency-cluster .nav-currency {
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.weather-chip {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    background: var(--bg-cool);
    border-color: var(--border-subtle);
}

.notif-bell { position: relative; display: flex; }
.notif-bell-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-secondary);
    padding: 7px;
    border-radius: var(--radius-md);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* The Legacy header's own bell/account controls never got the 44px coarse-pointer
   floor the Frontier interface's copies of these selectors already carry (see the
   body.interface-frontier rule below): at 1.15rem glyph + 7px padding the bell
   measured 41x34, the smallest primary-nav target on every single page. */
@media (pointer: coarse) {
    .notif-bell-toggle { min-width: 44px; min-height: 44px; }
}
@media (hover: hover) { .notif-bell-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } }
.notif-bell-toggle[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-color); }
/* Unread treatment keys off the badge's presence, not a server-rendered class: the
   badge is OOB-swapped on every list refresh, so a class on the button would keep
   glowing after the last notification was read. */
.notif-bell-toggle:has(.notif-badge) { color: var(--text-primary); }
.notif-bell-toggle:has(.notif-badge) .notif-bell-glyph { animation: notif-bell-nudge 4.5s var(--ease) infinite; }
@keyframes notif-bell-nudge {
    0%, 88%, 100% { transform: rotate(0deg); }
    91% { transform: rotate(11deg); }
    94% { transform: rotate(-9deg); }
    97% { transform: rotate(4deg); }
}
.notif-bell-glyph { display: inline-block; transform-origin: 50% 15%; }
/* Explicit `none`, not left to the global reduced-motion block: that one clamps
   animation-duration to 0.001s without clamping iteration-count, which turns an
   infinite animation into a rapid flicker rather than stopping it. Same reason
   .preview-canvas::before is disabled by hand. */
body.reduced-motion .notif-bell-toggle .notif-bell-glyph { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .notif-bell-toggle .notif-bell-glyph { animation: none; }
}
.notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-reward);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    box-shadow: var(--glow-reward);
}

/* Sidebar "you have an incursion in progress" dot on the Incursions link. */
.nav-active-dot { margin-left: 6px; color: var(--color-reward); font-size: 0.7rem; vertical-align: middle; animation: nav-dot-pulse 1.8s ease-in-out infinite; }
@keyframes nav-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
}

/* ---- Notification panel: popover / tablet sheet / phone sheet ----
   Lives at body level, outside .site-header (see base.html): inside the header it
   inherited `white-space: nowrap`, sat below the tab bar in the header's stacking
   context, and had the header as the containing block for its fixed rules. z-index
   clears the Campfire dock (9990) and stays under #toast-container (9999).

   1024px and up: a popover under the bell. notifPanel writes the bell's position into
   --notif-anchor-top/right on open; the fallbacks only matter for a frame before that. */
.notif-dropdown {
    position: fixed;
    z-index: 9996;
    top: var(--notif-anchor-top, calc(var(--header-height) + 10px));
    right: var(--notif-anchor-right, 16px);
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - var(--notif-anchor-top, 72px) - 16px);
    max-height: calc(100dvh - var(--notif-anchor-top, 72px) - 16px);
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
#notif-dropdown-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.notif-panel__loading { margin: 0; padding: 22px; text-align: center; color: var(--text-muted); font-size: 0.86rem; }
.notif-sheet__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: var(--modal-overlay);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
@media (width >= 1024px) {
    .notif-sheet__backdrop { display: none !important; }
}
/* Tablets: a full-height sheet from the right, the same edge the Menu drawer uses. */
@media (width < 1024px) {
    .notif-dropdown {
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 100vw);
        max-height: none;
        border-block: 0;
        border-right: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
        overscroll-behavior: contain;
    }
    .notif-panel__foot { padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: the whole screen, tab bar included. The panel's own ✕ is the way out,
   since the sheet covers the bell that opened it. */
@media (width < 768px) {
    .notif-dropdown { left: 0; width: auto; border: 0; box-shadow: none; }
}

/* ---- Notifications: dropdown panel + inbox page ----
   One row markup serves both surfaces (partials/_notification_row.html); everything
   below that differs between them is width and chrome, handled here rather than by
   forking the template. Unread never rests on colour alone: an accent rail, a heavier
   title and a "New" chip all carry it. */

/* Panel chrome (dropdown only: the inbox page uses .page-header instead). */
.notif-panel__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px 10px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
}
.notif-panel__head::after {
    content: '';
    position: absolute;
    left: 14px;
    bottom: -1px;
    width: 28px;
    height: 2px;
    background: var(--gradient-primary);
}
.notif-panel__title {
    margin: 0;
    margin-right: auto;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.notif-panel__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
}
@media (hover: hover) { .notif-panel__close:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-color); } }
@media (pointer: coarse) { .notif-panel__close { width: 44px; height: 44px; margin: -6px -8px -6px 0; } }

.notif-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
.notif-tab {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
@media (hover: hover) { .notif-tab:hover { color: var(--text-primary); } }
.notif-tab.is-active { background: var(--bg-elevated); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.notif-panel__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
}
.notif-panel__foot form { margin: 0; max-width: none; }
.notif-panel__link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-primary);
}
@media (hover: hover) { .notif-panel__link:hover { color: var(--color-primary-dark); text-decoration: underline; } }

/* The scrolling middle of the dropdown. On the inbox page it is just a block. */
#notif-dropdown-body .notif-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.notif-group + .notif-group { margin-top: 4px; }
.notif-group__label {
    margin: 0;
    padding: 9px 14px 7px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-block: 1px solid var(--border-subtle);
}

/* ---- The row ---- */
.notif-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.notif-row:last-child { border-bottom: none; }
@media (hover: hover) { .notif-row:hover { background: var(--bg-hover); } }
.notif-row--unread { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.notif-row--unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
}
.notif-row__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.notif-row__body { min-width: 0; }
.notif-row__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
/* The whole row is the link's hit area: the title's ::after stretches over the row
   (.notif-row is the positioned ancestor), and the action buttons are lifted above
   it. The focus ring moves to the row so a keyboard user sees the full target. */
.notif-row__title[href]::after { content: ''; position: absolute; inset: 0; }
.notif-row__title[href]:focus-visible { outline: none; }
.notif-row:has(.notif-row__title[href]:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.notif-row__actions { position: relative; z-index: 1; }
@media (hover: hover) { a.notif-row__title:hover { color: var(--color-primary); text-decoration: none; } }
.notif-row--unread .notif-row__title { color: var(--text-primary); font-weight: 700; }
.notif-row__message {
    margin: 3px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
    /* Two lines in the panel; the inbox page below lifts the clamp entirely. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.notif-row__meta {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-muted);
}
.notif-row__new {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-reward) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-reward) 45%, var(--border-color));
    color: var(--color-reward);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Always visible, never hover-revealed: a hover-only control is unreachable on touch
   and invisible to a keyboard user until it already has focus. */
.notif-row__actions { display: flex; gap: 2px; }
.notif-row__act {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
}
@media (hover: hover) { .notif-row__act:hover { background: var(--bg-subtle); border-color: var(--border-color); color: var(--color-primary); } }
@media (hover: hover) { .notif-row__act--dismiss:hover { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, var(--border-color)); } }

/* ---- Empty state ---- */
.notif-empty { padding: 34px 20px; text-align: center; }
.notif-empty__glyph { display: block; font-size: 1.9rem; opacity: 0.65; margin-bottom: 8px; }
.notif-empty__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--text-secondary); }
.notif-empty__hint { margin: 5px auto 0; max-width: 34ch; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* ---- Inbox page: same rows, page-scale chrome ---- */
.notif-feed {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.notif-feed .notif-row { padding: 15px 20px; }
.notif-feed .notif-row__title { font-size: 0.95rem; }
.notif-feed .notif-row__message { -webkit-line-clamp: none; display: block; overflow: visible; }
.notif-feed .notif-group__label { padding: 11px 20px 7px; }
.notif-feed .notif-row__icon { width: 36px; height: 36px; font-size: 1.05rem; }
.notif-feed .staff-pagination { padding: 14px; margin-top: 0; border-top: 1px solid var(--border-subtle); }

.notif-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: none;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.notif-filters label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.notif-filters select { margin: 0; font-family: var(--font-body); font-size: 0.9rem; }
.notif-feed__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.notif-filters__count { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.notif-filters__mark-form { display: block; margin: 0; }
.notif-row__action-form { display: contents; }
.staff-quick-action { display: contents; }

/* ---- Preference toggles ---- */
/* A bare <form> is display:flex/column here, so the submit button would stretch to the
   full panel width without this. */
.notif-prefs { max-width: none; margin: 0; align-items: flex-start; }
.notif-prefs__categories { display: grid; gap: 12px; align-items: start; }
.notif-pref-category {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-subtle) 82%, var(--bg-surface));
}
.notif-pref-category__header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.notif-pref-category__icon { flex: 0 0 auto; color: var(--color-primary); font-size: 1.15rem; }
.notif-pref-category__text { min-width: 0; flex: 1 1 auto; }
.notif-pref-category__text h3 { margin: 0; color: var(--text-primary); font-family: var(--font-heading); font-size: 0.94rem; }
.notif-pref-category__text p { margin: 3px 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; }
.notif-pref-category__master { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -4px -4px -4px 0; padding: 4px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.notif-pref-category__master-copy { display: grid; justify-items: end; gap: 1px; line-height: 1.1; }
.notif-pref-category__master-label { color: var(--text-muted); }
.notif-pref-category__master-state { color: var(--color-primary); }
.notif-pref-category .notif-prefs__list { margin: 0; gap: 0; }
.notif-pref-category .notif-pref { border: 0; border-radius: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; }
.notif-pref-category .notif-pref:last-child { border-bottom: 0; }
.notif-pref-category .notif-pref__label { min-height: 56px; padding: 10px 14px; }
.notif-pref-category--locked .notif-prefs__list + .notif-prefs__list { border-top: 1px solid var(--border-subtle); }
.notif-pref-category--locked .state-chip { flex: 0 0 auto; }
.notif-group--pinned .notif-group__label { color: var(--color-primary); }
.notif-prefs__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.notif-pref {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}
.notif-pref__label {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    cursor: pointer;
}
.notif-pref--locked .notif-pref__label { cursor: default; }
.notif-pref__icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border-subtle); border-radius: 8px; background: color-mix(in srgb, var(--bg-elevated) 72%, transparent); font-size: 0.95rem; }
.notif-pref__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.notif-pref__name { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.notif-pref__help { font-size: 0.79rem; color: var(--text-muted); line-height: 1.45; }
@media (hover: hover) {
    .notif-pref:hover { border-color: var(--border-color); }
    .notif-pref__label:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
}
.notif-pref--locked { opacity: 0.78; }
@media (hover: hover) { .notif-pref--locked:hover { border-color: var(--border-subtle); } }

/* Native checkboxes keep the semantics and keyboard behavior; the track and thumb
   give the dense preference bank a quiet, readable control instead of a field of
   browser-default squares. */
/* Shared with .notification-setting-switch below (the push-settings redesign): both
   named the same 42x24 pill-and-thumb toggle independently. One declaration set,
   both selectors, so the two can never drift again. */
.notif-pref__switch,
.notification-setting-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: 0 0 auto; }
.notif-pref__switch input,
.notification-setting-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.notif-pref__switch-track,
.notification-setting-switch__track { position: absolute; inset: 0; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-elevated); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.notif-pref__switch-track::after,
.notification-setting-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.notif-pref__switch input:checked + .notif-pref__switch-track,
.notification-setting-switch input:checked + .notification-setting-switch__track { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 32%, var(--bg-elevated)); }
.notif-pref__switch input:checked + .notif-pref__switch-track::after,
.notification-setting-switch input:checked + .notification-setting-switch__track::after { transform: translateX(18px); background: var(--text-primary); }
.notif-pref__switch input:focus-visible + .notif-pref__switch-track,
.notification-setting-switch input:focus-visible + .notification-setting-switch__track { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media (max-width: 600px) {
    .notif-filters { padding: 12px 14px; gap: 10px; }
    /* Both selects on one row. min-width: 0 is what lets them share it: a <select>'s
       min-content is its longest option ("All kinds" lists every notification type),
       which pushed each label onto its own full-width line. */
    .notif-filters label { flex: 1 1 0; min-width: 0; }
    .notif-filters select { width: 100%; min-width: 0; }
    .notif-feed__bar { padding: 8px 14px; }
    .notif-feed .notif-row { padding: 13px 14px; }
    .notif-feed .notif-group__label { padding: 10px 14px 6px; }
}

/* ---- Attention Center: queue-first notification surface ----
   The bell and the full page share this visual language. The queue is intentionally
   quieter than a toast stream: newness is a small signal, while the source action and
   its current state remain the main content. */
.attention-surface {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.attention-surface--panel {
    width: 430px;
    max-width: calc(100vw - 24px);
    display: flex;
    flex-direction: column;
}
.attention-surface--center { max-width: 940px; }
.attention-surface__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, var(--bg-surface)), var(--bg-surface));
    border-bottom: 1px solid var(--border-subtle);
}
.attention-surface--panel .attention-surface__head { padding: 13px 15px 12px; }
.attention-surface__head h2 { margin: 3px 0 0; font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-primary); }
.attention-surface__lede { max-width: 62ch; margin: 8px 0 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; }
.attention-surface__count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--color-reward) 42%, var(--border-color));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-reward) 11%, transparent);
    color: var(--color-reward);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.attention-surface__body { display: grid; gap: 10px; padding: 14px; }
.attention-surface--panel .attention-surface__body { overflow-y: auto; max-height: min(60vh, 500px); max-height: min(60dvh, 500px); padding: 8px; }
.attention-group { display: grid; gap: 10px; }
.attention-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.attention-surface--panel .attention-card { padding: 12px; gap: 10px; }
.attention-card--new { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border-color)); box-shadow: inset 3px 0 0 var(--color-primary); }
.attention-card--critical { border-color: color-mix(in srgb, var(--color-error) 56%, var(--border-color)); box-shadow: inset 3px 0 0 var(--color-error); }
.attention-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-subtle));
    border: 1px solid var(--border-subtle);
    font-size: 1.15rem;
}
.attention-surface--panel .attention-card__icon { width: 32px; height: 32px; font-size: 0.95rem; }
.attention-card--critical .attention-card__icon { background: color-mix(in srgb, var(--color-error) 12%, var(--bg-subtle)); }
.attention-card__content { min-width: 0; }
.attention-card__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.attention-card__priority,
.attention-card__new { padding: 2px 6px; border-radius: var(--radius-pill); letter-spacing: 0.05em; }
.attention-card__priority { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, transparent); }
.attention-card__new { color: var(--color-reward); background: color-mix(in srgb, var(--color-reward) 13%, transparent); }
.attention-card__title { margin: 6px 0 0; font-family: var(--font-heading); font-size: 0.97rem; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.attention-surface--panel .attention-card__title { font-size: 0.88rem; }
.attention-card__summary { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; overflow-wrap: anywhere; }
.attention-surface--panel .attention-card__summary { font-size: 0.79rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.attention-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; }
.attention-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.attention-surface--panel .attention-card__actions { margin-top: 11px; gap: 5px; }
.attention-card__actions form { display: flex; align-items: center; gap: 6px; margin: 0; max-width: none; }
.attention-card__actions .btn { min-height: 38px; padding: 8px 12px; font-size: 0.76rem; }
.attention-card__primary { box-shadow: var(--shadow-sm); }
.attention-card__snooze select { min-height: 38px; width: auto; margin: 0; padding-block: 7px; font-size: 0.76rem; }
.attention-card__secondary { background: var(--bg-subtle); }
.attention-card__actions .btn-quiet { color: var(--text-muted); border: 1px solid transparent; background: transparent; }
@media (hover: hover) {
    .attention-card__actions .btn-quiet:hover { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 40%, var(--border-color)); }
}
.attention-surface__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.attention-surface__link, .attention-surface__history, .attention-history__back { color: var(--color-primary); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; }
.attention-surface__history { color: var(--text-muted); font-weight: 600; }
.attention-empty { padding: 30px 18px; text-align: center; }
.attention-empty--large { padding: 52px 24px; }
.attention-empty__glyph { display: block; margin-bottom: 8px; color: var(--color-primary); font-size: 1.7rem; }
.attention-empty__title { margin: 0; color: var(--text-primary); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; }
.attention-empty__hint { max-width: 42ch; margin: 6px auto 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.attention-history.panel { padding: 0; overflow: hidden; }
.attention-history .panel__header > div { min-width: 0; }
.attention-history__back { max-width: 100%; overflow-wrap: anywhere; }
.attention-history .panel__header { margin: 0; padding: 16px 20px; }
.attention-history .notif-feed { border: 0; border-radius: 0; box-shadow: none; }

@media (hover: hover) {
    .attention-card:hover { border-color: var(--border-color); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .attention-surface__link:hover, .attention-surface__history:hover, .attention-history__back:hover { text-decoration: underline; }
}
@media (width < 768px) {
    .attention-surface__head { padding: 15px 14px 14px; }
    .attention-surface__body { padding: 10px; }
    .attention-card { padding: 14px; gap: 10px; }
    .attention-card__actions { align-items: stretch; }
    .attention-card__actions form, .attention-card__actions .btn, .attention-card__snooze { flex: 1 1 auto; }
    .attention-card__actions .btn { min-height: 44px; }
    .attention-card__snooze { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .attention-card__snooze select { min-height: 44px; width: 100%; }
    .attention-card__snooze .btn { flex: 0 0 auto; }
    .attention-history .panel__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px;
    }
    .attention-history__back { justify-self: start; }
}
@media (max-width: 600px) {
    .attention-surface--panel { width: 100%; max-width: none; border-inline: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
    .attention-surface--panel .attention-surface__body { max-height: calc(100vh - var(--header-height) - 112px); max-height: calc(100dvh - var(--header-height) - 112px); }
    .attention-surface__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
    .notification-quiet-grid label:nth-child(3) { grid-column: 1 / -1; }
    /* One wrapping row of small buttons, not two full-width stacked ones: together with
       the subtitle, the stack pushed the first notification a full screen down. */
    .notification-page__header .page-header__actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .notification-page__header .page-header__actions > .btn {
        min-width: 0;
        max-width: 100%;
        padding: 8px 12px;
        font-size: 0.85rem;
        white-space: normal;
    }
    .notification-page__header .page-subtitle { display: none; }
}
@media (pointer: coarse) {
    .attention-card__actions .btn, .attention-card__snooze select { min-height: 44px; }
}

@media (pointer: coarse) {
    .notif-row__act { width: 40px; height: 40px; }
    .notif-tab { min-height: 36px; display: inline-flex; align-items: center; }
    /* Tapping a linked row opens it and marks it read, so its ✓ is redundant on touch
       and the 40px goes back to the title. A row with no destination keeps its ✓. */
    .notif-row--linked .notif-row__action-form--read { display: none; }
}

.account-menu { position: relative; display: flex; }
.account-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 3px 8px 3px 3px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
}
@media (hover: hover) { .account-menu-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } }
.account-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.account-name { font-size: 0.92rem; }
.account-menu-dropdown { width: 224px; padding: 6px; }
.account-menu-dropdown a,
.account-menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.92rem;
}
@media (hover: hover) {
    .account-menu-dropdown a:hover,
    .account-menu-dropdown button:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
}
.account-menu-sep { height: 1px; background: var(--border-subtle); margin: 5px 6px; }
.account-menu-form { display: block; margin: 0; max-width: none; }

/* ---- Mobile bottom tab bar (replaces the desktop rail below 1024px) ---- */
.mobile-tabbar { display: none; }
@media (width < 1024px) {
    .mobile-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 150;
        display: flex;
        justify-content: space-around;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        /* Solid surface, no backdrop-filter: a fixed element with backdrop-filter
           failed to paint as fixed until first scroll on some mobile browsers.
           translateZ(0) also forces its own compositing layer up front so it
           sticks from the initial paint. */
        background: var(--bg-surface);
        border-top: 1px solid var(--border-color);
        transform: translateZ(0);
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        min-height: 48px;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        font-family: var(--font-heading);
        font-size: 0.64rem;
        font-weight: 600;
        white-space: nowrap;
    }
    @media (hover: hover) { .mobile-tab:hover { text-decoration: none; } }
    .mobile-tab .nav-ico { font-size: 1.25rem; line-height: 1; }
    .mobile-tab.is-active { color: var(--text-primary); }
    .mobile-tab.is-active .nav-ico { filter: drop-shadow(0 0 6px var(--color-primary)); }
}

/* ---- Mobile "More" drawer (full destination list on phone/tablet) ----
   The bottom tab bar carries 4 top destinations + a "More" button that opens
   this drawer, which mirrors the desktop sidebar so every page (Create Pet,
   Factions, Inventory, …) stays reachable ≤899px. Hidden ≥900 where the real
   sidebar takes over. */
button.mobile-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
}
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 160;
    background: var(--modal-overlay);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.nav-drawer {
    position: fixed;
    z-index: 170;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 84vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    /* Same reason as .hatch-modal__card: a fling past the end of the destination list
       must not scroll the page underneath the open drawer. */
    overscroll-behavior: contain;
}
.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.nav-drawer__title {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.nav-drawer__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 8px;
    border-radius: var(--radius-md);
    min-width: 44px;
    min-height: 44px;
}
@media (hover: hover) { .nav-drawer__close:hover { background: var(--bg-hover); color: var(--text-primary); } }
.nav-drawer .sidebar-nav a { font-size: 1rem; padding: 12px 12px; min-height: 44px; }
/* Open/close fade+scale is handled by Alpine's default x-transition (inline
   styles); no CSS transition here so the two don't fight. */
/* Safety: the drawer/backdrop are only reachable via the ≤1023 tab bar, but hard
   hide them once the sidebar takes over so a stale open-state can never leak. */
@media (min-width: 1024px) {
    .nav-drawer, .nav-drawer-backdrop { display: none !important; }
}

/* ---- Site footer ---- */
.site-footer {
    margin-top: 40px;
    padding: 18px 20px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}
.site-footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.site-footer-inner a { color: var(--text-secondary); }
@media (hover: hover) { .site-footer-inner a:hover { color: var(--text-primary); } }
@media (pointer: coarse) {
    .site-footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Generic panel + the repeated accent-hairline header motif ---- */
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.panel--cool { background: var(--bg-cool); }
.panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.panel__header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 30px;
    height: 2px;
    background: var(--gradient-primary);
}
.panel-title { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; }
.panel-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.86rem; }
/* Explanatory line under a panel header, above the panel's content. */
.panel-note { margin: -6px 0 14px; font-size: 0.84rem; color: var(--text-secondary); max-width: 78ch; }

/* ---- Readiness marker: icon + text + color, never color alone ---- */
.state-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-subtle);
    white-space: nowrap;
}
.state-chip--ready { color: var(--color-reward-ink); border-color: color-mix(in srgb, var(--color-reward-ink) 50%, var(--border-color)); }
.state-chip--active { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color)); }
.state-chip--warn { color: var(--color-warning-ink); border-color: color-mix(in srgb, var(--color-warning-ink) 45%, var(--border-color)); }
.state-chip--busy { color: var(--text-secondary); border-style: dashed; }
/* A finished-and-successful state (a sold listing), distinct from --ready, which means
   "waiting for you". --muted is the closed-without-happening end (a cancelled listing). */
.state-chip--done { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color)); }
.state-chip--muted { color: var(--text-muted); border-style: dashed; }
/* A closed-and-lost state (an incursion room whose lock held), distinct from --warn, which
   is a caution about something still ahead. */
.state-chip--bad { color: var(--color-error-ink); border-color: color-mix(in srgb, var(--color-error-ink) 45%, var(--border-color)); }