/*
 * Page layouts for the rebuilt pages (Roadmap/49 D5). Components come from
 * css/hs-components.css; this file only arranges them per page.
 */

/* ------------------------------------------------------------ shared */
.hs-dash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--sp-4);
    align-items: start;
}
.hs-stat-link {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hs-stat-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.hs-stat-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hs-list-note {
    list-style: none;
    padding-top: var(--sp-3);
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}
.hs-list-item .hs-meter { margin-top: var(--sp-1-5); }
.hs-mate-row.is-stale { opacity: 0.6; }
.hs-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.hs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.hs-toolbar .hs-input-icon { flex: 1 1 240px; max-width: 420px; }
.hs-spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------ mates */
.mates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--sp-4);
}
.mate-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.mate-card.is-stale { opacity: 0.65; }
.mate-card.is-offline .mate-vitals { opacity: 0.55; }
.mate-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.mate-name {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mate-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.mate-head .hs-badge { margin-left: auto; flex: none; }
.mate-vitals { display: grid; gap: var(--sp-2-5); }
.mate-vitals .hs-meter-label { margin-bottom: 4px; }
.mate-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mate-novitals { font-size: var(--fs-sm); color: var(--text-subtle); }
.mate-id { flex: 1; min-width: 0; }
.mates-section-head { margin-bottom: var(--sp-3); flex-wrap: wrap; }
.mates-section-head .hs-section-title { margin-bottom: 0; }
.mates-empty { grid-column: 1 / -1; }
.mate-table-hp { width: 72px; flex: none; }

/* ------------------------------------------------------------ inventory */
.inv-searchbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.inv-search { flex: 1 1 auto; max-width: 680px; }
.inv-search .hs-input { min-height: 44px; font-size: var(--fs-body); }
.inv-filters-btn { display: none; }
.inv-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6) 0; }
.inv-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
    max-width: 1440px;
    padding: var(--sp-5) var(--sp-6) var(--sp-12);
}
.inv-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    padding-right: 2px;
}
.inv-side:has([data-inv-panel="buildings"][hidden]) #invFiltersHome { display: none; }
.inv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.inv-filters .hs-check { grid-column: 1 / -1; }
.inv-buildings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-building-skel { padding: var(--sp-2) var(--sp-3); }
.inv-skel-short { width: 60%; }
.inv-building {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}
.inv-building:hover { background: var(--hover); }
.inv-building:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.inv-building[aria-current] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.inv-building > .hs-icon { color: var(--text-subtle); }
.inv-building-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--raised);
    color: var(--text-muted);
}
.inv-building[aria-current] .inv-building-icon { color: var(--accent-text); }
.inv-building-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.inv-building-name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-building-meta { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-back { margin: 0 0 var(--sp-2) calc(-1 * var(--sp-2)); }
.inv-containers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--sp-4); align-items: start; }
.inv-grid-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); }
.inv-result-group + .inv-result-group { margin-top: var(--sp-4); }
.inv-result-icon { flex: none; width: 32px; height: 32px; object-fit: contain; }
.inv-liquid { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.inv-liquid:hover { background: var(--hover); }
#searchView .hs-section-title { margin-bottom: var(--sp-4); }

@media (max-width: 767.98px) {
    .inv-searchbar { padding: var(--sp-3) var(--sp-4); }
    .inv-filters-btn { display: inline-flex; }
    .inv-filters-btn span { display: none; }
    .inv-recent { padding: var(--sp-3) var(--sp-4) 0; }
    .inv-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-8); }
    .inv-side { position: static; max-height: none; overflow: visible; padding: 0; }
    #invFiltersHome { display: none; }
    .inv-filters { grid-template-columns: 1fr; }
    .inv-main:not([data-view="overview"]) .inv-side { display: none; }
    .inv-main[data-view="overview"] #overviewView { display: none; }
}

/* ------------------------------------------------------------ map */
.map-controls { display: flex; align-items: center; gap: var(--sp-2); }
.map-search { width: 240px; }
.map-search .hs-input { min-height: 36px; }
.map-level { width: auto; min-height: 36px; }
#mapControls .hs-switch { min-height: 36px; font-size: var(--fs-sm); color: var(--text-muted); }
.hs-sheet-body > .map-controls { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
.hs-sheet-body > .map-controls .map-search { width: 100%; }
.hs-sheet-body > .map-controls .hs-input,
.hs-sheet-body > .map-controls .map-level,
.hs-sheet-body > .map-controls .hs-btn { min-height: 44px; width: 100%; }
.map-container { position: relative; }
.map-svg.is-panning { cursor: grabbing; }
.map-zoom {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.map-zoom .hs-iconbtn { background: var(--raised); box-shadow: var(--shadow-2); }
.map-drawbar {
    position: absolute;
    left: 50%;
    top: var(--sp-4);
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: calc(100% - 32px);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--raised);
    box-shadow: var(--shadow-3);
    transform: translateX(-50%);
}
.map-drawbar-hint { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-ctx { position: fixed; top: 0; left: 0; }
.breadcrumb .crumb { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.interior-header { flex-wrap: wrap; }
@media (max-width: 767.98px) {
    .map-drawbar-hint { display: none; }
    .interior-header { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
    .floor-tab { min-height: 44px; display: inline-flex; align-items: center; }
    .container-panel { left: 0; right: 0; width: auto; max-height: 60%; }
}

/* ------------------------------------------------------------ login */
body.hs-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 55%),
        var(--bg);
}
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    width: 100%;
    max-width: 420px;
    padding: calc(var(--sp-10) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-10) + env(safe-area-inset-bottom));
}
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-mark {
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-3);
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent));
}
.login-title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 var(--sp-1-5);
}
.login-subtitle { font-size: var(--fs-md); color: var(--text-muted); margin: 0; }
.login-card { width: 100%; padding: var(--sp-6); }
.login-status { text-align: center; }
.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-heading { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); color: var(--text); margin: 0; }
.login-pass { position: relative; display: block; }
.login-pass .hs-input { width: 100%; padding-right: 52px; }
.login-reveal { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.login-reveal[aria-pressed="true"] { color: var(--accent); }
.login-error:empty { display: none; }
.login-server { width: 100%; font-size: var(--fs-sm); color: var(--text-muted); }
.login-server summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--text-muted);
    list-style: none;
}
.login-server summary::-webkit-details-marker { display: none; }
.login-server summary:hover { color: var(--text); }
.login-server[open] { display: flex; flex-direction: column; gap: var(--sp-2); }
.login-server-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.login-server-addr {
    flex: 1;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--sunken);
    color: var(--text);
    overflow-wrap: anywhere;
    user-select: all;
}

/* ------------------------------------------------------------ alerts */
.alerts-push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.hs-tabs + .alerts-panel { margin-top: var(--sp-5); }
.alerts-panel { margin-top: var(--sp-5); }
.alerts-filter { width: auto; min-width: 160px; }
.alerts-lead { margin-bottom: var(--sp-4); max-width: 72ch; }
.alerts-group + .alerts-group { margin-top: var(--sp-4); }
.alerts-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2-5);
    min-height: 52px;
    padding: 0 var(--sp-4);
    cursor: pointer;
    list-style: none;
}
.alerts-summary::-webkit-details-marker { display: none; }
.alerts-summary:hover { background: var(--hover); }
.alerts-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.alerts-group-label { font-weight: var(--fw-semibold); color: var(--text); }
.alerts-pending { font-size: var(--fs-sm); }
.alerts-chevron { margin-left: auto; display: inline-flex; color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.alerts-group[open] .alerts-chevron { transform: rotate(180deg); }
.alerts-list { list-style: none; margin: 0; padding: 0; }
.alerts-group .alerts-list { border-top: 1px solid var(--border); }
.alerts-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    min-width: 0;
}
.alerts-item + .alerts-item { border-top: 1px solid var(--border); }
.alerts-item.is-acked .alerts-body { opacity: 0.7; }
.alerts-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--info); }
[data-severity="critical"] > .alerts-dot,
[data-severity="critical"] > summary > .alerts-dot { background: var(--danger); }
[data-severity="warning"] > .alerts-dot,
[data-severity="warning"] > summary > .alerts-dot { background: var(--warning); }
.alerts-body { flex: 1; min-width: 0; }
.alerts-title { font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.alerts-text { color: var(--text-muted); overflow-wrap: anywhere; }
.alerts-meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-subtle); margin-top: 2px; }
.alerts-item > .hs-btn, .alerts-item > .hs-badge, .alerts-item > .hs-switch, .alerts-item > .hs-iconbtn { flex: none; }
.alerts-item > .hs-switch { min-width: 44px; justify-content: center; }
.alerts-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: var(--sp-4);
}
.alerts-config, .alerts-template { display: flex; flex-direction: column; gap: var(--sp-4); }
.alerts-config-title { display: flex; align-items: center; gap: var(--sp-2-5); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); margin: 0; }
.alerts-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); flex: none; }
.alerts-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-3); }
.alerts-switches { display: flex; flex-direction: column; gap: var(--sp-2); }
.alerts-switch { display: flex; flex-direction: column; gap: 2px; }
.alerts-switch .hs-hint { padding-left: 52px; }
.alerts-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.alerts-template .hs-badge { align-self: flex-start; }
.alerts-details summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.alerts-json {
    margin: 0;
    padding: var(--sp-3);
    max-height: 260px;
    overflow: auto;
    border-radius: var(--radius);
    background: var(--sunken);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: pre;
}
.alerts-newthr { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.alerts-newthr-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.alerts-newthr .hs-error-text:empty { display: none; }
@media (max-width: 639px) {
    .alerts-newthr-fields { grid-template-columns: 1fr 1fr; }
    .alerts-newthr-item { grid-column: 1 / -1; }
    .alerts-item:has(> .hs-btn) { flex-wrap: wrap; }
    .alerts-item:has(> .hs-btn) > .alerts-body { flex-basis: calc(100% - 30px); }
    .alerts-item > .hs-btn { margin-left: 22px; }
}

/* ------------------------------------------------------------ settings */
.hs-page-narrow { max-width: 880px; }
.settings-who { display: flex; align-items: center; gap: var(--sp-2-5); min-width: 0; }
.settings-who-name { font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-panel { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.settings-panel[hidden] { display: none; }
.settings-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin: 0; }
.settings-facts dt { font-size: var(--fs-sm); color: var(--text-muted); }
.settings-facts dd { margin: 2px 0 0; font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.settings-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.settings-form .hs-card-title { margin: 0; }
.settings-status:empty { display: none; }
.settings-status.is-ok { color: var(--success); }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.settings-actions-start { justify-content: flex-start; }
.settings-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.settings-grow { flex: 1 1 240px; }
.settings-inline + .hs-error-text:empty { display: none; }
.settings-keybox { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.settings-keyvalue { flex: 1 1 240px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.settings-listhead { margin-top: var(--sp-2); }
.settings-listhead .hs-section-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.settings-keys { list-style: none; margin: 0; padding: 0; }
.settings-key { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.settings-key + .settings-key { border-top: 1px solid var(--border); }
.settings-key.is-revoked { opacity: 0.7; }
.settings-keyicon { flex: none; display: inline-flex; color: var(--text-muted); }
.settings-keybody { flex: 1; min-width: 0; }
.settings-keylabel { font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.settings-keymeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.settings-fp { font-family: var(--font-mono); color: var(--text); }
.settings-key > .hs-btn { flex: none; }
.settings-revoked summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); }
.settings-revoked[open] summary { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------ characters */
/* The page still loads style.css for the stats and study views; undo its
   full-height #app and padded, self-scrolling main so the shell's layout
   holds. */
body.chars-page #app { height: auto; }
body.chars-page main#hs-main { padding: 0; overflow: visible; flex: none; }
.chars-page .chars-tabs { margin-bottom: var(--sp-5); }
.chars-page .chars-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chars-page .stats-header span:not(:first-child) { text-align: right; }
.chars-page .chart-btn { min-width: 44px; min-height: 36px; }
@media (pointer: coarse), (max-width: 639px) {
    .chars-page .chart-btn { min-height: 44px; }
}

/* ------------------------------------------------------------ admin */
.admin-panel { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-panel[hidden] { display: none; }
.admin-lead { align-items: flex-start; flex-wrap: wrap; }
.admin-lead .hs-hint, p.admin-lead { max-width: 76ch; }
.admin-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-form .hs-card-title { margin: 0; }
.admin-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-3); }
.admin-form .hs-error-text:empty, .admin-wipe .hs-error-text:empty { display: none; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.admin-actions-start { justify-content: flex-start; }
.admin-rowactions { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.admin-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.admin-mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.admin-subhead { margin: var(--sp-2) 0 0; }
.admin-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.admin-wipe { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 420px; }
.admin-members { list-style: none; margin: 0; padding: 0; }
.admin-member { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.admin-member + .admin-member { border-top: 1px solid var(--border); }
.admin-member-body { flex: 1 1 220px; min-width: 0; }
.admin-member-name { font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.admin-member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.admin-addmember { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.admin-grow { flex: 1 1 200px; }
#memberBody { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ------------------------------------------------------------ village admin */
.va-identity { min-width: 0; }
.va-picker { min-width: 220px; }
.va-narrow { max-width: 640px; }
.va-mono { font-family: var(--font-mono); }
.va-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); }
.va-favicon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.va-favicon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--sunken);
    font-size: var(--fs-sm);
}
.va-filename { overflow-wrap: anywhere; }
.va-labs { margin: var(--sp-2) 0 var(--sp-3); }

/* ------------------------------------------------------------ offline */
.offline-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.offline-card .hs-empty-icon { margin-bottom: var(--sp-1); }
.offline-actions { width: 100%; margin-top: var(--sp-2); }
.offline-note { font-size: var(--fs-xs); }
#offlineStatus:empty { display: none; }

.inv-decal { padding: 0 1rem; overflow-wrap: anywhere; }