/* ============================================================================
   OMP:SCP — application stylesheet
   Hand-written. No build step, no Tailwind, no CDN.

   Everything here consumes tokens.css. If you find yourself typing a raw hex
   value or a raw px size below, stop: it belongs in tokens.css first.

   Order: reset -> shell -> sidebar -> topbar -> duty bar -> components.
   ========================================================================== */

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

img, svg { display: block; max-width: 100%; }

code, pre, .mono { font-family: var(--font-mono); }
pre { margin: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* One focus treatment for the whole app. The old panel had none. */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-subtle); color: var(--text); }

/* Thin scrollbars, greyscale - they are chrome, not state. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-sm);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* Utility escape hatches. Kept to a handful on purpose. */
.u-mono   { font-family: var(--font-mono); }
.u-muted  { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-break  { overflow-wrap: anywhere; word-break: break-word; }
.u-hide   { display: none !important; }
.u-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- shell -- */
/* Desktop: fixed sidebar + fluid main column.
   Mobile (<1024): sidebar becomes a fixed bottom tab bar, no JS involved. */

.app {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.app-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6) var(--page-gutter) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.section-title {
    font-size: var(--text-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
}

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

/* -------------------------------------------------------------- sidebar -- */

.sidebar {
    grid-row: 1;
    border-right: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    flex: none;
}
.sidebar-brand img { height: 34px; width: auto; flex: none; }
.sidebar-brand b {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.sidebar-nav {
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.nav-label {
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    color: var(--text-subtle);
    padding: var(--space-4) var(--space-2) var(--space-1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item .ico { flex: none; width: 16px; height: 16px; opacity: 0.8; }
.nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-item.is-active {
    background: var(--accent-subtle);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border-accent);
}
.nav-item.is-active .ico { opacity: 1; color: var(--accent-text); }

/* Sub-entries: the server list nested under Servers. */
.nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 var(--space-2) var(--space-4);
    padding-left: var(--space-2);
    border-left: 1px solid var(--border);
}
.nav-sub .nav-item {
    /* Still honours the tap-target token - a nested list is not a licence to
       ship 32px click targets. */
    min-height: var(--tap);
    font-size: var(--text-xs);
    font-weight: var(--fw-body);
}

.sidebar-foot {
    flex: none;
    border-top: 1px solid var(--border);
    padding: var(--space-2);
}

/* --------------------------------------------------------------- topbar -- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: none;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--page-gutter);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-subtle); flex: none; }
.crumbs .current {
    color: var(--text);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

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

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: var(--text-xs);
    color: var(--text-muted);
    max-width: 180px;
}
.user-chip b { color: var(--text); font-weight: var(--fw-medium); }
.user-chip .role {
    color: var(--accent-text);
    font-size: var(--text-xs);
}

/* ------------------------------------------------------------- duty bar -- */
/* Permanent chrome. Duty gates every write in this system, so its state is
   ambient instead of something you discover when an action fails. */

.dutybar {
    flex: none;
    min-height: var(--dutybar-h);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-2) var(--page-gutter);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
}

.dutybar--on  { background: var(--success-subtle); }
.dutybar--off { background: var(--surface); }

.dutybar-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-medium);
    flex: none;
}
.dutybar--on  .dutybar-state { color: var(--success); }
.dutybar--off .dutybar-state { color: var(--text-muted); }

.dutybar-list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--text-muted);
}

.dutybar-entry {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.dutybar-entry b { color: var(--text); font-weight: var(--fw-medium); }
.dutybar-entry .note {
    color: var(--text-subtle);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dutybar-entry .elapsed {
    font-family: var(--font-mono);
    color: var(--accent-text);
    flex: none;
}

.dutybar-others {
    color: var(--text-subtle);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dutybar-others b { color: var(--text-muted); font-weight: var(--fw-medium); }

.dutybar-action { flex: none; margin-left: auto; }

/* -------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--surface-hover); border-color: var(--text-subtle); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 1;                    /* never fade the label to unreadable grey */
    color: var(--text-subtle);
    background: var(--surface);
    border-color: var(--border);
    cursor: not-allowed;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn--danger:hover { filter: brightness(1.08); }

.btn--success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.btn--success:hover { filter: brightness(1.08); }

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

/* --sm buys density in padding and type, never in hit area. The tap token is
   the floor for every interactive element in the app, including this one. */
.btn--sm { padding: 0 var(--space-2); font-size: var(--text-xs); }

.btn--icon {
    width: var(--tap);
    padding: 0;
    flex: none;
}

.btn-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.auto-refresh-controls {
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 32px;
    margin-block: 4px;
}
.auto-refresh-controls .btn,
.auto-refresh-controls .select {
    min-height: 32px;
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
}
.auto-refresh-controls .select {
    width: auto;
    padding-left: var(--space-2);
    padding-right: 28px;
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
}
.auto-refresh-controls .u-subtle {
    line-height: 32px;
}

.agent-attempt-summary {
    cursor: pointer;
    list-style: none;
}
.agent-attempt-summary::-webkit-details-marker { display: none; }
.agent-attempt-summary > div { min-width: 0; }
.agent-attempt-help { display: block; margin-top: var(--space-1); }

/* --------------------------------------------------------------- fields -- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.field > label {
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    color: var(--text-muted);
}

.input, .select, .textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-sm);
    transition: border-color var(--t-fast);
}
.textarea { padding: var(--space-2) var(--space-3); min-height: 96px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- cards -- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-none);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    border-bottom: 1px solid var(--border);
    flex: none;
    flex-wrap: wrap;
}
.card-title {
    font-size: var(--text-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    min-width: 0;
}

.card-body { padding: var(--card-pad); min-width: 0; }
.card-body--flush { padding: 0; }

.card-foot {
    padding: var(--space-3) var(--card-pad);
    border-top: 1px solid var(--border);
    flex: none;
}

.card--link { transition: border-color var(--t-fast), background var(--t-fast); }
.card--link:hover { border-color: var(--border-strong); background: var(--surface-hover); }

/* ------------------------------------------------------------ stat tile -- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    min-width: 0;
}
.stat-label {
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    color: var(--text-muted);
}
.stat-value {
    margin-top: var(--space-1);
    font-size: var(--text-2xl);
    line-height: var(--lh-2xl);
    font-weight: var(--fw-semibold);
    /* Deliberately NOT the mono face. JetBrains Mono's dotted zero is its
       default glyph, not an optional feature, so `font-feature-settings:
       "zero" 0` cannot switch it off - at 24px the dot reads as a typo or a
       dead pixel. Inter has a plain zero, and tabular-nums keeps the digits
       column-aligned across a stat row, which is the only thing the mono face
       was buying here. */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.stat-value .unit {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: 2px;
    font-weight: var(--fw-body);
}
.stat-sub {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    color: var(--text-subtle);
}

/* A meter is state, so it may carry colour. */
.meter {
    margin-top: var(--space-2);
    height: 3px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.meter > span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width var(--t-base);
}

/* -------------------------------------------------------- badges & dots -- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.badge--neutral { background: var(--surface-raised); border-color: var(--border); color: var(--text-muted); }
.badge--success { background: var(--success-subtle); border-color: var(--success); color: var(--success); }
.badge--danger  { background: var(--danger-subtle);  border-color: var(--danger);  color: var(--danger); }
.badge--warning { background: var(--warning-subtle); border-color: var(--warning); color: var(--warning); }
.badge--info    { background: var(--info-subtle);    border-color: var(--info);    color: var(--info); }
.badge--accent  { background: var(--accent-subtle);  border-color: var(--border-accent); color: var(--accent-text); }

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: var(--text-subtle);
}
.dot--success { background: var(--success); }
.dot--danger  { background: var(--danger); }
.dot--warning { background: var(--warning); }
.dot--info    { background: var(--info); }
.dot--accent  { background: var(--accent); }

/* ----------------------------------------------------------------- tabs -- */

.tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--tap);
    padding: 0 var(--space-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    flex: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); }

.tabbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--page-gutter);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.tabbar .tabs { border-bottom: 0; }
.tabbar-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* ---------------------------------------------------------------- table -- */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
    text-align: left;
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    background: var(--surface-raised);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-hover); }

/* A list row - the mobile-friendly stand-in for a table. */
.row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    border-bottom: 1px solid var(--border);
    min-width: 0;
    transition: background var(--t-fast);
}
.row:last-child { border-bottom: 0; }
.row--link:hover { background: var(--surface-hover); }
.row-main { min-width: 0; flex: 1 1 auto; }
.row-title {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-meta {
    margin-top: 2px;
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.row-aside { flex: none; display: flex; align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------- terminal -- */

.terminal {
    background: #08090A;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-muted);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 460px;
}
.terminal .ok   { color: var(--success); }
.terminal .err  { color: var(--danger); }
.terminal .dim  { color: var(--text-subtle); }

/* --------------------------------------------------------------- dialog -- */
/* Replaces the SweetAlert theme. <dialog> gives us Esc and focus trapping for
   free, so there is no JS modal framework here. */

.dialog {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-pop);
    padding: 0;
    width: min(440px, calc(100vw - var(--space-8)));
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-head { padding: var(--card-pad); border-bottom: 1px solid var(--border); }
.dialog-title { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.dialog-body { padding: var(--card-pad); color: var(--text-muted); }
.dialog-foot {
    padding: var(--space-3) var(--card-pad);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- toast -- */

.toast-stack {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: calc(100vw - var(--space-8));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-pop);
    font-size: var(--text-sm);
    max-width: 380px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger); }
.toast--info    { border-left-color: var(--info); }

/* ---------------------------------------------------------------- empty -- */

.empty {
    text-align: center;
    padding: var(--space-12) var(--card-pad);
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}
.empty h3 {
    font-size: var(--text-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------- definitions -- */

.deflist { display: flex; flex-direction: column; gap: var(--space-3); }
.defrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}
.defrow > dt { color: var(--text-muted); font-size: var(--text-xs); flex: none; }
.defrow > dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

/* ====================================================== responsive ======= */
/* Below 1024 the sidebar becomes a fixed bottom tab bar. This is the
   proposal's mobile sketch: 5 areas stay reachable in one tap, and there is
   no drawer to open, no hamburger, and no JS involved in navigation. */

@media (max-width: 1023.98px) {

    .app { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: auto;
        z-index: 40;
        flex-direction: row;
        border-right: 0;
        border-top: 1px solid var(--border);
        overflow: visible;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar-brand,
    .sidebar-foot,
    .nav-label,
    .nav-sub { display: none; }

    .sidebar-nav {
        flex-direction: row;
        padding: 0;
        gap: 0;
        width: 100%;
    }

    .nav-item {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: var(--space-1) 2px;
        border-radius: 0;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
    }
    .nav-item .ico { width: 18px; height: 18px; }
    .nav-item span { max-width: 100%; }

    .nav-item.is-active {
        background: transparent;
        box-shadow: inset 0 2px 0 0 var(--accent);
        color: var(--accent-text);
    }

    /* Clear the fixed bar so the last row of content is never trapped
       underneath it. */
    .app-content { padding-bottom: calc(56px + var(--space-8) + env(safe-area-inset-bottom)); }

    .toast-stack { bottom: calc(56px + var(--space-4) + env(safe-area-inset-bottom)); }
}

@media (max-width: 767.98px) {

    /* Tabs and page actions cannot share a row on a phone: the actions win the
       space and the tab strip collapses to a couple of clipped characters.
       Each gets its own full-width row, both horizontally scrollable. */
    .tabbar {
        flex-wrap: wrap;
        row-gap: var(--space-2);
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }
    .tabbar .tabs { flex: 1 1 100%; }
    .tabbar-actions {
        flex: 1 1 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabbar-actions::-webkit-scrollbar { display: none; }
    .tabbar-actions > .btn-group { flex-wrap: nowrap; }
}

@media (max-width: 639.98px) {

    .topbar {
        flex-wrap: wrap;
        row-gap: var(--space-2);
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }
    /* Brand and actions each take a full row rather than colliding. */
    .crumbs { flex: 1 1 100%; }
    .topbar-actions { flex: 1 1 100%; justify-content: flex-start; }

    .user-chip { max-width: none; }

    /* Compact duty bar: one row, never four. On a phone the state word, the
       task and the timer are the whole message - the explanatory sentence, the
       session note and the who-else-is-on list are secondary and would each
       cost a full row of the viewport. */
    .dutybar {
        flex-wrap: nowrap;
        gap: var(--space-2);
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }
    .dutybar-list { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    .dutybar-hint, .dutybar-others { display: none; }
    .dutybar-entry { flex-wrap: nowrap; min-width: 0; }
    .dutybar-entry b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dutybar-entry .note { display: none; }
    .dutybar-action { margin-left: auto; }

    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-value { font-size: var(--text-xl); line-height: var(--lh-xl); }

    .card-head { row-gap: var(--space-2); }


    /* Full-width tap targets read better than a row of tiny ones. */
    .btn-group--stack { display: flex; width: 100%; }
    .btn-group--stack .btn { flex: 1 1 0; min-width: 0; }

    .defrow { flex-direction: column; gap: 2px; }
    .defrow > dd { text-align: left; }
}

/* ------------------------------------------------------------- log view -- */

.logbox-wrap { position: relative; }

.logbox {
    max-height: none;
    height: min(58vh, 620px);
    padding: var(--space-2) var(--space-3);
}

.logline {
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.logline:hover { background: var(--surface-hover); }

/* Colour only where the line reports state. */
.logline--error { color: var(--danger); }
.logline--warn  { color: var(--warning); }
.logline--info  { color: var(--success); }
.logline--chat  { color: var(--info); }
.logline--join  { color: var(--accent-text); }
.logline--debug { color: var(--text-subtle); }

.logbox-jump {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--t-base), transform var(--t-base);
}
.logbox-jump.is-shown { opacity: 1; pointer-events: auto; transform: none; }

/* ---------------------------------------------------------------- forms -- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.form-grid--single { grid-template-columns: minmax(0, 1fr); }

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------- notice -- */
/* Inline page-level message. Left border carries the state colour. */

.notice {
    padding: var(--space-3) var(--card-pad);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.notice b { color: var(--text); font-weight: var(--fw-medium); }
.notice--success { border-left-color: var(--success); background: var(--success-subtle); }
.notice--warning { border-left-color: var(--warning); background: var(--warning-subtle); }
.notice--danger  { border-left-color: var(--danger);  background: var(--danger-subtle); }
.notice--info    { border-left-color: var(--info);    background: var(--info-subtle); }
.notice--accent  { border-left-color: var(--accent);  background: var(--accent-subtle); }

/* ------------------------------------------------------ workspace bits -- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    white-space: nowrap;
}
a.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-on {
    background: var(--accent-subtle);
    border-color: var(--border-accent);
    color: var(--accent-text);
}
.chip--accent  { border-color: var(--border-accent); color: var(--accent-text); }
.chip--success { border-color: var(--success); color: var(--success); }
.chip--danger  { border-color: var(--danger);  color: var(--danger); }

/* Segmented control - replaces the pill row. */
.segmented {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 2px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.seg {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Segments are hit targets like any other control - they get the same
       floor as buttons and tabs, not a smaller one bought back in density. */
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.seg:hover { color: var(--text); }
.seg.is-on { background: var(--accent-subtle); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-accent); }

/* Task cards */
.tasklist { display: flex; flex-direction: column; gap: var(--space-3); }

.taskcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
}
.taskcard.is-done { opacity: 0.72; }
.taskcard-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.taskcard-check { flex: none; padding-top: 2px; }
.taskcard-main  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.taskcard-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.taskcard-title { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.taskcard.is-done .taskcard-title { text-decoration: line-through; color: var(--text-muted); }
.taskcard-desc { color: var(--text-muted); white-space: pre-wrap; font-size: var(--text-sm); }
.taskcard-meta { color: var(--text-subtle); font-size: var(--text-xs); font-family: var(--font-mono); }
.taskcard-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-1);
}
.taskcard-drawer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.btn--danger-ghost { color: var(--danger); }
.btn--danger-ghost:hover { background: var(--danger-subtle); color: var(--danger); }

.checkbox {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}
.checkrow:last-child { border-bottom: 0; }
.checkrow .input { flex: 1 1 auto; }
.checkrow-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkrow-title.is-done { text-decoration: line-through; color: var(--text-subtle); }

.scope-list { display: flex; flex-direction: column; gap: var(--space-2); }
.scope-row  { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scope-row .select { flex: 0 0 auto; width: auto; }
.scope-row .input  { flex: 1 1 200px; }

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 300px;
    overflow-y: auto;
}
.activity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.activity-row b { color: var(--text); font-weight: var(--fw-medium); }

.doc-body { line-height: 1.7; color: var(--text-muted); }

@media (max-width: 639.98px) {
    .taskcard-head { flex-wrap: wrap; }
    .taskcard-actions { flex: 1 1 100%; justify-content: flex-start; }
    .scope-row .select, .scope-row .input { flex: 1 1 100%; }
}

/* Checkbox grid (server assignment) */
.checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
}
.checkopt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    cursor: pointer;
    min-width: 0;
}
.checkopt:hover { border-color: var(--border-strong); }
.checkopt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------- bare screens -- */
/* Sign-in and access-denied: no shell, centred panel. */

.bare {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--page-gutter);
}

.bare-panel {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.bare-panel--wide { max-width: 560px; }

.bare-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.bare-brand img { height: 34px; width: auto; }
.bare-brand b {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.bare-title {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
    font-weight: var(--fw-semibold);
}
.bare-sub { color: var(--text-muted); margin-top: calc(var(--space-2) * -1); }

/* Floating notice used by config-workflow-v2.js */
.cfg-notice {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    max-width: min(560px, calc(100vw - var(--space-8)));
    box-shadow: var(--shadow-pop);
}