/* ==========================================================================
   03-workspace.css — account, dashboard, enquiries, auth and admin screens.
   Same language as the public site: the row pattern (hairline, label on the
   left, content on the right), grey labels, ink numbers, one ink button per
   view. No cards, pills or badges. Shared with quote_requests, claims/new and
   the listing editor, so the older class names below keep working.
   ========================================================================== */

/* ---------- Overrides of shared primitives (02-components.css) ----------
   Status marks: the signal colour is reserved for the 24/7 dot, so states
   are told apart by shape. Filled ink = live, half = in progress,
   ring = idle, red = rejected or failed. */
.status--pending, .badge--warning { color: var(--ink); }
.status--pending::before, .badge--warning::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--ink); }
.status--draft::before { box-shadow: inset 0 0 0 1px var(--grey-text); }
.unread-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* ---------- Workspace frame: section nav in cols 1–2, content in 3–12 --- */
.ws { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-block: var(--s-7) var(--s-10); }
.ws__main { grid-column: 3 / -1; display: grid; gap: var(--s-8); min-width: 0; }
.ws__main > * { min-width: 0; }
.ws__main--narrow > * { max-width: 60rem; }
.ws__main .crumbs ol { padding-top: 0; }
.ws__main .crumbs + .page-head { margin-block-start: calc(var(--s-6) - var(--s-8)); }

/* Legacy frame (quote requests, claims): a plain stack */
.workspace { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-10); }
.workspace > * { min-width: 0; }

/* Page title row: 40px title, grey line, actions on the right */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.page-head h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--track-display); }
.page-head p { margin-block-start: var(--s-2); color: var(--grey-text); }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); }
.page-head .btn-group, .page-head .btn-row { flex: none; }

/* Section nav. Vertical list beside the content on desktop, text tabs on phones. */
.workspace-nav { display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.workspace-nav::-webkit-scrollbar { display: none; }
.workspace-nav a { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 52px; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--grey-text); white-space: nowrap; transition: color 200ms var(--ease); }
.workspace-nav a:hover { color: var(--ink); }
.workspace-nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.workspace-nav__label { display: none; }
.token[aria-current]:not([aria-current="false"]) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.token[aria-current]:not([aria-current="false"]) span { text-decoration: none; }
/* Counts are plain numbers, never pills */
.workspace-nav .count, .app-nav__count { font-size: var(--t-s); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

.ws > .workspace-nav { grid-column: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--s-5)); flex-direction: column; gap: 0; overflow: visible; border: 0; padding-top: 6px; }
.ws > .workspace-nav .workspace-nav__label { display: block; margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.ws > .workspace-nav a { position: relative; min-height: 36px; margin: 0; border: 0; }
.ws > .workspace-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
.ws > .workspace-nav .count { margin-inline-start: 2px; }

@media (max-width: 63.99rem) {
  .ws { row-gap: var(--s-6); padding-block-start: var(--s-5); }
  .ws__main { grid-column: 1 / -1; gap: var(--s-7); }
  .ws > .workspace-nav { grid-column: 1 / -1; position: static; flex-direction: row; gap: var(--s-6); overflow-x: auto; padding: 0; border-bottom: 1px solid var(--rule); }
  .ws > .workspace-nav .workspace-nav__label { display: none; }
.token[aria-current]:not([aria-current="false"]) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.token[aria-current]:not([aria-current="false"]) span { text-decoration: none; }
  .ws > .workspace-nav a { min-height: 52px; margin-bottom: -1px; border-bottom: 1px solid transparent; }
  .ws > .workspace-nav a[aria-current="page"] { border-color: var(--ink); }
  .ws > .workspace-nav a[aria-current="page"]::before { display: none; }
  .ws > .workspace-nav .count { margin: 0; padding: 0; }
}

/* ---------- Sections (legacy name .panel): hairline, title, content ----- */
.panel, .card { border-top: 1px solid var(--rule); }
.card { padding-block: var(--s-5); }
.card__title, .panel__title { font-size: var(--t-m); font-weight: 500; line-height: 1.3; letter-spacing: var(--track-head); }
.panel__count { margin-inline-start: 6px; font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-4) var(--s-4); }
.panel__head .more, .panel__head .link-arrow { min-height: 0; font-size: var(--t-s); }
.panel__head p { flex-basis: 100%; font-size: var(--t-s); color: var(--grey-text); }
.panel__body { padding-block: var(--s-2) var(--s-5); }
.panel__foot { padding-block: var(--s-3); font-size: var(--t-s); color: var(--grey-text); border-top: 1px solid var(--rule); }
.panel__empty { padding-block: var(--s-4); border-top: 1px solid var(--rule); color: var(--grey-text); max-width: 40em; }
.panel__empty a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.panel > .table-wrap { border-top: 1px solid var(--rule); }
.panel-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--s-8) var(--s-6); }

/* KPI: numbers as type */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-6) var(--col-gap); }
.kpi { display: grid; gap: 6px; align-content: start; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); }
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--grey-text); }
.kpi__label .icon { display: none; }
.kpi__value { order: -1; font-size: var(--t-xl); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.kpi__delta { font-size: var(--t-s); color: var(--grey-text); }
.stat-inline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); color: var(--grey-text); }
.stat-inline strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 30-day bars: thin grey columns, today in ink, hairline baseline */
.sparkline { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 96px; border-bottom: 1px solid var(--ink); }
.sparkline span { flex: 0 1 10px; min-width: 2px; min-height: 1px; background: var(--grey); transition: background-color 200ms var(--ease); }
.sparkline span:last-child, .sparkline span:hover { background: var(--ink); }
.sparkline__axis { display: flex; justify-content: space-between; margin-block-start: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }

/* ---------- List rows (enquiries, companies, claims, admin queues) ----- */
.list-rows { display: grid; }
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); min-height: 64px; padding-block: var(--s-4); border-top: 1px solid var(--rule); color: inherit; }
a.list-row { transition: color 200ms var(--ease); }
a.list-row:hover .list-row__title { color: var(--grey-text); }
.list-row__main { display: grid; flex: 1 1 16rem; gap: 4px; min-width: 0; }
.list-row__title { font-size: var(--t-body); font-weight: 500; }
.list-row__title a:hover { color: var(--grey-text); }
.list-row__title .status { margin-inline-start: 6px; font-weight: 400; }
.list-row__sub { font-size: var(--t-s); color: var(--grey-text); }
.list-row__sub a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.list-row__note { max-width: 40em; margin-block-start: 4px; }
.list-row__quote { max-width: 40em; margin-block-start: 4px; padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--ink); }
.list-row__aside { flex: none; font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; text-align: end; }
.list-row__actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.list-row__actions .more { font-size: var(--t-body); }

/* Your companies: logo · name · completeness · actions */
.list-row--company { display: grid; grid-template-columns: auto minmax(0, 5fr) minmax(0, 3fr) auto; align-items: start; column-gap: var(--s-5); }
.list-row--company .list-row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); font-size: var(--t-m); letter-spacing: var(--track-head); }
.list-row--company .list-row__actions { align-self: center; }
.ws-progress { display: grid; gap: var(--s-2); padding-top: 6px; }
.ws-progress .meter { max-width: none; }
@media (max-width: 47.99rem) {
  .list-row--company { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-4); }
  .list-row--company > .list-row__main { flex: 1 1 0; }
  .list-row--company > .ws-progress, .list-row--company > .list-row__actions { flex: 1 0 100%; padding-inline-start: calc(48px + var(--s-4)); }
}

/* Inbox rows: unread dot in the margin, unread titles in ink, read ones quieter */
.list-row--inbox { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-4); }
.list-row--inbox .unread-dot { position: absolute; left: -16px; top: 50%; margin-top: -3.5px; }
.list-row--inbox .list-row__title { font-weight: 400; }
.list-row--inbox:has(.unread-dot) .list-row__title { font-weight: 500; }
.list-row--inbox .status { justify-self: end; }
@media (max-width: 63.99rem) { .list-row--inbox .unread-dot { left: auto; right: 0; top: var(--s-4); margin: 0; } }

.meter { height: 2px; width: 100%; max-width: 16rem; background: var(--rule); }
.meter span { display: block; height: 100%; background: var(--ink); }
.steps { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.steps li { display: flex; align-items: center; gap: var(--s-2); color: var(--grey-text); }
.steps li.done { text-decoration: line-through; }

/* Definition rows: term on the left, description on the right */
.def-rows { display: grid; }
.def-rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-2) var(--s-5); padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.def-rows dt { font-weight: 500; }
.def-rows dd { color: var(--grey-text); }
@media (max-width: 47.99rem) { .def-rows > div { grid-template-columns: 1fr; } }

/* ---------- Conversation: meta on the left, message on the right ------- */
.thread { display: grid; }
.message { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: var(--col-gap); row-gap: var(--s-2); padding-block: var(--s-5) var(--s-6); border-top: 1px solid var(--rule); }
.message__body { grid-column: 2; display: grid; gap: 0.75em; max-width: 38em; }
.message__meta { grid-column: 1; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-s); color: var(--grey-text); }
.message__meta strong { font-size: var(--t-body); color: var(--ink); }
.message--mine { border-top-color: var(--ink); }
.message a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.message__brief { font-size: var(--t-s); color: var(--grey-text); }
.message__brief strong { color: var(--ink); }
.thread__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.thread__pager .more { font-size: var(--t-body); }
.thread__note { padding-block-start: var(--s-4); border-top: 1px solid var(--rule); color: var(--grey-text); }
@media (max-width: 47.99rem) {
  .message { grid-template-columns: 1fr; }
  .message__body, .message__meta { grid-column: 1; }
  .message__meta { flex-direction: row; flex-wrap: wrap; gap: 4px var(--s-3); align-items: baseline; }
}

/* ---------- Long forms: the row pattern (intro left, fields right) ----- */
.form-section { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--rule); }
.form-section > :not(.form-section__intro) { min-width: 0; max-width: 52rem; }
@media (min-width: 64rem) {
  .form-section { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--col-gap); row-gap: 0; align-items: start; }
  .form-section > :not(.form-section__intro) { grid-column: 2; }
  .form-section > :not(.form-section__intro) ~ :not(.form-section__intro) { margin-block-start: var(--s-5); }
  .form-section > .form-section__intro { grid-row: 1 / span 12; }
}
.form-section__intro h2 { font-size: var(--t-m); line-height: 1.3; }
.form-section__intro p { margin-block-start: var(--s-2); max-width: 22rem; font-size: var(--t-s); color: var(--grey-text); }
.form-section .stack { gap: var(--s-5); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--rule); }
@media (min-width: 64rem) { .form-actions { padding-inline-start: calc((100% - var(--col-gap)) / 4 + var(--col-gap)); } }
.form-actions--sticky { position: sticky; bottom: 0; z-index: 5; background: var(--scrim); }
.form-actions .more { color: var(--grey-text); }
.form-actions .more:hover { color: var(--ink); }
.switch-list { display: grid; border-top: 1px solid var(--rule); }
.switch__text { display: grid; gap: 2px; }
.switch__text strong { font-weight: 500; }
.switch__text small { color: var(--grey-text); max-width: 40em; }
.check-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--s-5); }
.check-group { border-bottom: 1px solid var(--rule); }
.check-group:first-of-type { border-top: 1px solid var(--rule); }
.check-group > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 52px; list-style: none; cursor: pointer; }
.check-group > summary::-webkit-details-marker { display: none; }
.check-group > summary::after { content: "+"; color: var(--grey-text); }
.check-group[open] > summary::after { content: "−"; }
.check-group > .check-columns { padding-block-end: var(--s-4); }
.dropzone { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); border: 1px dashed var(--grey); border-radius: var(--radius); color: var(--grey-text); text-align: center; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s-3); }
.photo-grid figure { display: grid; gap: 6px; font-size: var(--t-s); }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.logo-preview { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius); background: #fff; }
.file-input { padding-block: var(--s-2); }
.admin-form { display: grid; }
.inline-form { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); }
.inline-form .input { width: auto; }
.inline-form--wide { display: flex; }
.inline-form--wide .input { flex: 1 1 18rem; min-width: 0; }
.code-block { overflow-x: auto; padding: var(--s-4); border-radius: var(--radius); background: var(--field); font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre; }
.mail-test-result { color: var(--grey-text); }
.mail-test-result strong { color: var(--ink); }
.bulk-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: var(--t-s); }

/* Status statement (mail settings, listing review): large state, grey detail */
.state { display: grid; gap: var(--s-3); padding-block: var(--s-5) var(--s-2); border-top: 1px solid var(--rule); }
.state__line { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); color: var(--grey); text-wrap: pretty; max-width: 32em; }
.state__line strong { color: var(--ink); font-weight: 500; }
.state__line .status { display: inline; font-size: inherit; color: var(--ink); }
.state__line .status::before { display: inline-block; width: 10px; height: 10px; margin-inline-end: 12px; vertical-align: 0.12em; }
.state__detail { max-width: 44em; color: var(--grey-text); }

/* Reject / request-changes inline form: underline field + red text button */
.decide { display: grid; justify-items: end; gap: var(--s-2); width: min(100%, 22rem); }
.decide__reject { width: 100%; }
.decide__reject { display: flex; align-items: flex-end; gap: var(--s-3); }
.decide__reject .input { flex: 1; min-width: 0; min-height: 44px; font-size: var(--t-s); }
.btn--text { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); }
.btn--text:hover { background: none; color: var(--grey-text); }
.btn--text.btn--danger { box-shadow: none; color: var(--danger); }
.btn--text.btn--danger:hover { color: var(--ink); }

.decide--wide { width: min(100%, 30rem); }
.decide__reject .textarea { flex: 1; min-width: 0; min-height: 44px; }
.review-actions { align-items: flex-end; gap: var(--s-5) var(--s-7); }
.switch--first { border-top: 1px solid var(--rule); }
.import-created { padding-block: var(--s-2) var(--s-5); font-size: var(--t-m); }
.import-issues > div { grid-template-columns: 6rem minmax(0, 1fr); }
.def-rows dd a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Table extras: quiet text actions, filter bar with search */
.table__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-body); color: var(--ink); }
.table__link:hover { color: var(--grey-text); }
.table__actions .table__link + .table__link, .table__actions form { margin-inline-start: var(--s-4); }
.table__actions form { display: inline-block; }
.table .table__sub { margin-block-start: 2px; }
.table-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: calc(var(--s-4) - var(--s-7)); padding-block: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); }
.admin-filters__sep { width: 1px; height: 16px; background: var(--rule); }
.admin-filters__search { margin-inline-start: auto; }
.admin-filters__search .input { width: 18rem; max-width: 100%; min-height: 44px; }
@media (max-width: 47.99rem) { .admin-filters__search { margin-inline-start: 0; width: 100%; } .admin-filters__search .input { width: 100%; } }

/* Danger zone: one hairline row with a red text button */
.danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); color: var(--grey-text); }

/* ---------- Auth (sign in, register, passwords) ------------------------- */
.auth { padding-block: clamp(48px, 6vw, 96px) var(--s-10); row-gap: var(--s-7); align-items: start; }
.auth__panel { grid-column: 1 / span 5; display: grid; gap: var(--s-8); }
.auth__form { display: grid; gap: var(--s-6); max-width: 26rem; }
.auth__form h1 { font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.auth__head, .auth__form > div:first-child { display: grid; gap: var(--s-4); }
.auth__form form.stack { gap: var(--s-5); }
.auth__form .btn--block { margin-block-start: var(--s-3); }
.auth__form .field__hint { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; }
.auth__form a.field__hint:hover { color: var(--ink); }
.auth__sub { color: var(--grey-text); max-width: 24em; }
.auth__alt { padding-block-start: var(--s-5); border-top: 1px solid var(--rule); color: var(--grey-text); }
.auth__alt a { color: var(--ink); }
.auth__divider { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.auth__foot { display: flex; gap: var(--s-4); font-size: var(--t-s); color: var(--grey-text); }
.auth__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.auth__foot a:hover { color: var(--ink); }
.auth__media { grid-column: 7 / -1; }
.auth__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.auth__media blockquote { margin-block-start: var(--s-5); max-width: 22em; font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); color: var(--grey); text-wrap: pretty; }
.auth__media cite { display: block; margin-block-start: var(--s-3); font-size: var(--t-s); font-style: normal; color: var(--grey-text); }
@media (max-width: 63.99rem) {
  .auth__panel { grid-column: 1 / -1; }
  .auth__media { display: none; }
}

/* Content pages that keep the old wrapper (unsubscribe, edit listing) */
.content-page { padding-block: var(--s-8) var(--s-10); }

/* ---------- Admin shell -------------------------------------------------- */
.app-shell { display: grid; min-height: 100dvh; }
@media (min-width: 64rem) { .app-shell { grid-template-columns: 15rem minmax(0, 1fr); } }
.app-sidebar { display: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; flex-direction: column; gap: var(--s-4); padding: var(--s-3) var(--gutter) var(--s-6); border-right: 1px solid var(--rule); }
@media (min-width: 64rem) { .app-sidebar { display: flex; } }
.app-sidebar .brand { flex: none; margin: 0; min-height: 40px; font-size: var(--t-body); }
.app-nav { display: grid; }
.app-nav__heading { padding: var(--s-5) 0 var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
.app-nav__heading:first-child { padding-top: var(--s-3); }
.app-nav a { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 36px; color: var(--grey-text); transition: color 200ms var(--ease); }
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); }
.app-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
.app-nav .app-nav__count { margin-inline-start: auto; }
.app-nav__back { margin-block-start: var(--s-6); padding-block-start: var(--s-3); border-top: 1px solid var(--rule); }
.app-main { min-width: 0; }
.app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); background: var(--scrim); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); }
.app-topbar__crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--t-s); color: var(--grey-text); }
.app-topbar__crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.app-topbar__crumb a:hover { color: var(--ink); }
.app-topbar__crumb strong { overflow: hidden; font-weight: 400; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.app-topbar__user { margin-inline-start: auto; font-size: var(--t-s); color: var(--grey-text); }
.admin-menu { display: inline-flex; }
@media (min-width: 64rem) { .admin-menu { display: none; } }
@media (max-width: 47.99rem) { .app-topbar__user { display: none; } .app-topbar .theme-toggle { margin-inline-start: auto; } }
.app-content { display: grid; gap: var(--s-7); max-width: 90rem; padding: var(--s-7) var(--gutter) var(--s-10); }
.app-content > * { min-width: 0; }
.app-content .flash-stack { padding: 0; }
.app-content .panel-pair { gap: var(--s-7) var(--s-6); }