/* ==========================================================================
   Nanuq — app extensions on top of nanuq.css (the design system core).
   Everything here is built from DS tokens only. Rules are grouped by the
   surface they serve; instrument geometry (gauge, sparkline, trend chart)
   is here because the DS ships those as React components with inline
   styles and the app renders them server-side.
   ========================================================================== */

/* ===== Base ============================================================= */
html { background: var(--bg-page); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { padding: 1px 5px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
pre { margin: 0; padding: var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: auto; font-size: var(--text-sm); line-height: var(--leading-snug); }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
a.nq-btn, a.nq-btn:hover { text-decoration: none; }
a.nq-btn--primary, a.nq-btn--danger { color: var(--fg-on-accent); }
a.nq-btn--secondary { color: var(--fg-default); }
a.nq-btn--ghost { color: var(--fg-muted); }
a.nq-btn--danger { color: #fff; }
.nq-btn .ph { font-size: 18px; line-height: 1; }
.nq-btn--sm .ph { font-size: 15px; }
.nq-btn__form { display: inline; margin: 0; }

/* Generic text helpers */
.nq-muted { color: var(--fg-muted); }
.nq-subtle { color: var(--fg-subtle); }
.nq-small { font-size: var(--text-sm); }
.nq-xs { font-size: var(--text-xs); }
.nq-strong { font-weight: 600; }
.nq-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-prewrap { white-space: pre-wrap; }
.nq-right { text-align: right; }
.nq-center { text-align: center; }
.nq-block { display: block; }
.nq-w-full { width: 100%; }
.nq-row--between { justify-content: space-between; }
.nq-row--end { justify-content: flex-end; }
.nq-row--start { align-items: flex-start; }
.nq-row--nowrap { flex-wrap: nowrap; }
.nq-stack--sm { gap: var(--space-1); }
.nq-stack--lg { gap: var(--space-4); }
.nq-stack--xl { gap: var(--space-6); }
.nq-grow { flex: 1 1 auto; min-width: 0; }
.nq-mt-1 { margin-top: var(--space-1); } .nq-mt-2 { margin-top: var(--space-2); } .nq-mt-3 { margin-top: var(--space-3); } .nq-mt-4 { margin-top: var(--space-4); } .nq-mt-6 { margin-top: var(--space-6); }
.nq-mb-2 { margin-bottom: var(--space-2); } .nq-mb-3 { margin-bottom: var(--space-3); } .nq-mb-4 { margin-bottom: var(--space-4); }
.nq-hide-mobile { }
.nq-hide-desktop { display: none !important; }
@media (max-width: 767px) {
  .nq-hide-mobile { display: none !important; }
  .nq-hide-desktop { display: initial !important; }
}

/* Missing value — never 0, never blank. */
.nq-none { font-family: var(--font-mono); color: var(--fg-subtle); }

/* ===== Page header ====================================================== */
.nq-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-1) 0 var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.nq-page-header__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); }
.nq-page-header__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.nq-page-header__eyebrow a { color: inherit; }
.nq-page-header__eyebrow .nq-mono { text-transform: none; letter-spacing: 0; }
.nq-page-header__title { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--fg-default); }
.nq-page-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--fg-muted); }
.nq-page-header__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.nq-page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nq-sep { color: var(--border-strong); }
@media (max-width: 767px) {
  .nq-page-header { align-items: flex-start; padding-bottom: var(--space-3); }
  .nq-page-header__title { font-size: var(--text-xl); }
  .nq-page-header__actions { display: none; }
}

/* Mobile primary action — square, sits above the tab bar. */
.nq-fab { display: none; }
@media (max-width: 767px) {
  .nq-fab { display: inline-flex; position: fixed; right: var(--space-4); bottom: calc(var(--mobile-tabs-h) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 15; height: 44px; padding: 0 var(--space-5); box-shadow: var(--shadow-md); }
}

/* ===== Cards, sections, description lists ============================== */
.nq-card__body { padding: var(--space-4); }
.nq-card__body--sm { padding: var(--space-3); }
.nq-card__body--lg { padding: var(--space-6); }
.nq-card__body--flush { padding: 0; }
.nq-card__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.006em; }
.nq-card + .nq-card { margin-top: var(--space-4); }
.nq-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.nq-section-head .nq-eyebrow { margin: 0; }
.nq-section-head__link { font-size: var(--text-sm); }

.nq-dl { display: flex; flex-direction: column; gap: 6px; }
.nq-dl__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.nq-dl__label { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-snug); }
.nq-dl__value { font-size: var(--text-sm); color: var(--fg-default); text-align: right; }
.nq-dl__value--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }

/* Stat block — label over value. */
.nq-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nq-stat__label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-subtle); }
.nq-stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 500; }
.nq-stat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Neutral tag — system markers, kinds, sources. Never status colour. */
.nq-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fg-muted); white-space: nowrap; }
.nq-tag--brand { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }
.nq-tag--mono { font-family: var(--font-mono); font-weight: 500; }
.nq-tag--dashed { border-style: dashed; border-color: var(--border-strong); }

/* ===== Forms ============================================================= */
.nq-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.nq-form-main, .nq-form-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.nq-form-main .nq-card + .nq-card, .nq-form-side .nq-card + .nq-card { margin-top: 0; }
.nq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.nq-form-grid > [data-span="full"] { grid-column: 1 / -1; }
.nq-form-actions { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) 0; margin-top: var(--space-2); background: var(--bg-page); border-top: 1px solid var(--border-subtle); }
@media (max-width: 1023px) { .nq-form-layout, .nq-form-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .nq-form-actions { bottom: calc(var(--mobile-tabs-h) + env(safe-area-inset-bottom)); padding: var(--space-3) 14px; margin: 0 -14px; }
  .nq-form-actions .nq-btn { flex: 1; }
}

/* Field as a block (not a <label>) when it wraps more than one control. */
div.nq-field > .nq-field__label { display: block; }
.nq-field__textarea { flex: 1; min-width: 0; min-height: 84px; padding: 8px 10px; border: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-snug); color: var(--fg-default); resize: vertical; border-radius: var(--radius-md); }
.nq-field__textarea:focus { outline: none; }
.nq-field__textarea--mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.nq-field__wrap > .nq-select { flex: 1; }
.nq-field__wrap > .nq-select > .nq-select__el { border: none; background: transparent; height: 32px; }
.nq-field__wrap > .nq-select > .nq-select__el:focus { box-shadow: none; }
.nq-field__input[type="file"] { padding: 6px 10px; height: auto; }
.nq-field__input:disabled, .nq-field__textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.nq-field__input[readonly] { color: var(--fg-muted); }
.nq-field__input--mono { text-align: left; }
.nq-field__input--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 767px) { .nq-field__input, .nq-select__el { height: 44px; font-size: var(--text-md); } }

.nq-toggle { position: relative; }
.nq-toggle--disabled .nq-toggle__track { opacity: 0.45; }

/* Native checkbox / radio row. */
.nq-check { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: var(--text-base); color: var(--fg-default); cursor: pointer; }
.nq-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-500); cursor: pointer; }
.nq-check--disabled { color: var(--fg-subtle); cursor: not-allowed; }
.nq-check-stack { display: flex; flex-direction: column; gap: var(--space-1); }

.nq-fieldset { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.nq-fieldset > legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.nq-fieldset + .nq-fieldset { margin-top: var(--space-3); }
.nq-fieldset__roles { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Inline filter (label + native select) used in page-header filters. */
.nq-filter { display: inline-flex; align-items: center; gap: var(--space-2); }
.nq-filter__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
.nq-filter .nq-select { width: auto; }
.nq-filter .nq-select__el { height: 30px; font-size: var(--text-sm); }

/* Segmented control as links (server-rendered). */
a.nq-seg__btn { display: inline-flex; align-items: center; color: var(--fg-muted); text-decoration: none; }
a.nq-seg__btn:hover { text-decoration: none; }
a.nq-seg__btn[aria-current="page"], a.nq-seg__btn[aria-pressed="true"] { background: var(--brand-500); color: var(--fg-on-accent); font-weight: 600; }

/* ===== Flash messages ==================================================== */
.nq-flash { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.nq-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-left: var(--rail-w) solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-base); line-height: var(--leading-snug); color: var(--fg-default); }
.nq-alert__glyph { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1; color: var(--fg-muted); }
/* Confirmations are brand, not green — status colour belongs to readings. */
.nq-alert--success { border-left-color: var(--brand-500); }
.nq-alert--success .nq-alert__glyph { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }
.nq-alert--error { border-left-color: var(--breach-500); }
.nq-alert--error .nq-alert__glyph { background: var(--breach-500); border-color: var(--breach-500); color: #fff; }
.nq-alert--warning { border-left-color: var(--warn-500); }
.nq-alert--warning .nq-alert__glyph { background: var(--warn-50); border-color: var(--warn-500); color: var(--warn-700); }

/* ===== Tables ============================================================ */
.nq-table__row[data-href] { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.nq-table__row[data-href]:hover { background: var(--bg-hover); }
.nq-table__row[data-href]:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
.nq-table__row.nq-rail { border-left-width: var(--rail-w); }
.nq-table__row--muted { background: var(--bg-subtle); color: var(--fg-muted); }
.nq-table__cell--actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.nq-table__cell-sub { display: block; font-size: var(--text-sm); color: var(--fg-muted); }
.nq-table__empty { padding: var(--space-8); text-align: center; color: var(--fg-muted); font-size: var(--text-sm); }
.nq-table__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .nq-table__cell--actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
  .nq-table__cell--wide { grid-column: 1 / -1; }
  .nq-table__cell--num { text-align: left; }
}

/* ===== Pagination ======================================================== */
.nq-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.nq-pagination__controls { display: flex; align-items: center; gap: var(--space-2); }

/* ===== Overflow menu (⋯) ================================================ */
.nq-overflow { position: relative; display: inline-flex; }
.nq-overflow__menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; z-index: 40; padding: 3px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.nq-overflow__menu[hidden] { display: none; }
.nq-overflow__menu a, .nq-overflow__menu button { display: block; width: 100%; padding: 7px 10px; text-align: left; font: inherit; font-size: var(--text-sm); color: var(--fg-default); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.nq-overflow__menu a:hover, .nq-overflow__menu button:hover { background: var(--bg-hover); text-decoration: none; }
.nq-overflow__menu .is-danger { color: var(--breach-600); }
.nq-overflow__menu form { margin: 0; }
@media (max-width: 767px) {
  .nq-overflow__menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0; padding: var(--space-2) 0 calc(var(--space-3) + env(safe-area-inset-bottom)); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: var(--shadow-lg); }
  .nq-overflow__menu a, .nq-overflow__menu button { padding: 13px 18px; font-size: var(--text-md); border-radius: 0; border-top: 1px solid var(--border-subtle); }
  .nq-overflow__menu > :first-child, .nq-overflow__menu > form:first-child > button { border-top: 0; }
}

/* ===== Shell extras ====================================================== */
.nq-shell__top-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nq-shell__top-title strong { font-size: var(--text-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-shell__top-title .nq-spec { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); white-space: nowrap; }
.nq-shell__controls { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.nq-lang { display: inline-flex; font-family: var(--font-mono); font-size: var(--text-xs); }
.nq-lang a { padding: 4px 6px; color: var(--fg-subtle); border-radius: var(--radius-sm); }
.nq-lang a:hover { text-decoration: none; color: var(--fg-default); background: var(--bg-hover); }
.nq-lang a[aria-current="true"] { color: var(--fg-default); font-weight: 600; }
.nq-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--fg-muted); cursor: pointer; font-size: 18px; }
.nq-icon-btn:hover { background: var(--bg-hover); color: var(--fg-default); text-decoration: none; }
.nq-icon-btn .icon-sun { display: none; }
[data-theme="dark"] .nq-icon-btn .icon-sun { display: inline; }
[data-theme="dark"] .nq-icon-btn .icon-moon { display: none; }
.nq-shell__user { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px 14px; color: var(--shell-fg); font-size: var(--text-sm); }
.nq-shell__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-shell__version { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--shell-fg); opacity: 0.7; }
.nq-shell__version:hover { opacity: 1; text-decoration: none; color: var(--shell-fg-strong); }
a.nq-nav__item, a.nq-tab, a.nq-site__opt { text-decoration: none; }
a.nq-nav__item:hover, a.nq-tab:hover, a.nq-site__opt:hover { text-decoration: none; }
a.nq-tab { color: var(--fg-muted); }
.nq-shell__brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nq-site__menu[hidden] { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  .nq-shell__user, .nq-shell__version { display: none; }
}
@media (max-width: 767px) {
  .nq-shell__top { padding: 0 14px; }
  .nq-lang, .nq-shell__top .nq-role { display: none; }
}

/* ===== Instruments — server-rendered geometry ============================ */
/* Limit gauge: cold tint below min, band lit, breach tint above max. */
.nq-gauge { width: 100%; }
.nq-gauge__track { position: relative; height: 10px; background: var(--breach-50); border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.nq-gauge__cold { position: absolute; top: 0; bottom: 0; left: 0; background: var(--cold-50); }
.nq-gauge__band { position: absolute; top: 0; bottom: 0; background: var(--ok-50); border-left: 1px solid var(--ok-500); border-right: 1px solid var(--ok-500); }
.nq-gauge__tick { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--ok-600); }
.nq-gauge--warn .nq-gauge__tick { background: var(--warn-500); }
.nq-gauge--breach .nq-gauge__tick { background: var(--breach-500); }
.nq-gauge--stale .nq-gauge__tick { background: var(--neutral-400); }
.nq-gauge--stale .nq-gauge__track { background: var(--hatch-stale); }
.nq-gauge--stale .nq-gauge__band, .nq-gauge--stale .nq-gauge__cold { opacity: 0.5; }
.nq-gauge__scale { position: relative; height: 14px; margin-top: 3px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.nq-gauge__scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Sparkline / trend chart SVG wrappers. */
.nq-spark { display: block; overflow: visible; }
.nq-trend { width: 100%; }
.nq-trend__frame { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; }
.nq-trend__frame svg { display: block; width: 100%; height: 100%; }
.nq-trend__label { position: absolute; right: 6px; padding: 0 3px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ok-700); background: var(--bg-surface); border-radius: var(--radius-sm); transform: translateY(-50%); }
.nq-trend__axis { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.nq-trend__count--out { color: var(--breach-600); font-weight: 500; }
.nq-trend__thin { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg-muted); font-size: var(--text-sm); }

/* Tile as a link. */
a.nq-tile { color: inherit; text-decoration: none; }
a.nq-tile:hover { text-decoration: none; }
.nq-tile__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.nq-tile__spec { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); }
.nq-tile__spark--empty { width: 104px; height: 30px; border-top: 1px dashed var(--border-strong); align-self: center; }

/* Sensor detail: instrument column + analysis column. */
.nq-detail { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.nq-detail .nq-card + .nq-card { margin-top: 0; }
@media (max-width: 1023px) { .nq-detail { grid-template-columns: 1fr; } }

/* Status summary row above the overview grid. */
.nq-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ===== Alarms ============================================================ */
.nq-alarm__glyph { font-family: var(--font-mono); font-size: var(--text-base); }
.nq-alarm + .nq-alarm { margin-top: var(--space-2); }
a.nq-alarm { color: inherit; text-decoration: none; }
a.nq-alarm:hover { background: var(--bg-hover); text-decoration: none; }

/* ===== Settings tiles ==================================================== */
.nq-settings-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.nq-settings-tile { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.nq-settings-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
.nq-settings-tile > .ph { flex: none; font-size: 22px; line-height: 1; color: var(--fg-muted); }
.nq-settings-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nq-settings-tile__title { font-size: var(--text-base); font-weight: 600; color: var(--fg-default); }
.nq-settings-tile__desc { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-snug); }

/* ===== Client picker ===================================================== */
.nq-client-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nq-client-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg-surface); border: 1px solid var(--border-default); border-left: var(--rail-w) solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.nq-client-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
a.nq-client-tile { text-decoration: none; }
.nq-client-tile[aria-current="true"] { border-left-color: var(--brand-500); background: var(--brand-50); }
.nq-client-tile__name { font-size: var(--text-base); font-weight: 600; }
.nq-client-tile__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle); }

/* ===== Changelog ========================================================= */
.nq-changelog h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.nq-changelog h3:first-of-type { margin-top: 0; }
.nq-changelog ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); }
.nq-changelog li::marker { color: var(--fg-subtle); }

/* ===== Auth ============================================================== */
.nq-auth__title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.008em; }
.nq-auth .nq-flash { margin-bottom: var(--space-3); }
.nq-auth__foot .nq-lang { font-size: var(--text-sm); }

/* ===== Print ============================================================= */
@media print {
  .nq-shell__side, .nq-shell__tabs, .nq-shell__controls, .nq-fab, .nq-page-header__actions { display: none !important; }
  .nq-shell__body { max-width: none; padding: 0; }
}