/* SELL4ME interface v2: Inter, inset navigation and quiet iOS-style surfaces.
   This skin follows app.css; the released v1 stylesheet remains intact.
   CRM reference: card geometry, segmented controls and compact modal rhythm.
   Colour belongs to SELL4ME. Glass is restricted to the shell header and nav.
   Routes, fields, status meaning and the HTML hidden attribute stay authoritative. */

:root {
  --canvas: #F3F5F7;
  --surface: #FFFFFF;
  --surface-sunken: #F7F9FA;
  --surface-muted: #EDF1F3;
  --ink: #172B36;
  --ink-soft: #4A606D;
  --ink-faint: #60727C;
  --ink-disabled: #84959E;
  --line: #E1E8EB;
  --line-strong: #BCCCD3;
  --signal: #087886;
  --signal-hover: #066673;
  --signal-soft: #E4F3F4;
  --signal-ink: #FFFFFF;
  --accent-2: #265F88;
  --accent-2-soft: #E9F0F8;
  --focus: #087886;
  --focus-halo: #FFFFFF;
  --tone-neutral-bg: #EDF1F3;
  --tone-neutral-fg: #4A606D;
  --tone-success-bg: #E6F4ED;
  --tone-success-fg: #166E4B;
  --tone-warning-bg: #FFF3DD;
  --tone-warning-fg: #805000;
  --tone-danger-bg: #FCEBED;
  --tone-danger-fg: #AC303F;
  --tone-info-bg: #E9F0F8;
  --tone-info-fg: #265F88;
  --glass-shell: rgb(255 255 255 / 0.88);
  --glass-line: rgb(255 255 255 / 0.78);
  --backdrop: rgb(23 43 54 / 0.36);
  --scroll-thumb: rgb(23 43 54 / 0.22);
  --chip-success-fg: #0B4F35;
  --chip-success-rgb: 11 79 53;
  --chip-warning-fg: #7A4A06;
  --chip-warning-rgb: 122 74 6;
  --chip-danger-fg: #9A3034;
  --chip-danger-rgb: 154 48 52;
  --chip-neutral-rgb: 71 85 105;
  --shadow-color: 23 43 54;
  --shadow-1: 0 2px 6px rgb(var(--shadow-color) / 0.035);
  --shadow-2: 0 8px 28px rgb(var(--shadow-color) / 0.055), 0 2px 6px rgb(var(--shadow-color) / 0.025);
  --shadow-3: 0 24px 72px rgb(var(--shadow-color) / 0.18), 0 6px 20px rgb(var(--shadow-color) / 0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --sidebar-w: 248px;
  --content-max: 1280px;
  --auth-max: 1200px;
  --control-h: 44px;
  --control-h-sm: 34px;
  --text-2xl: 32px;
  --leading-2xl: 39px;
  --text-display: 48px;
  --leading-display: 54px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-synthesis: none;
}

/* Required even when an element also has a flex/grid recipe in this skin. */
[hidden] { display: none !important; }

body { min-height: 100dvh; }
h1 { letter-spacing: -0.045em; font-weight: 700; }
h2, h3 { letter-spacing: -0.025em; }
.lead { line-height: 1.7; }
.eyebrow, .org-context-label, .account-label, .dash-card-label, .status-card-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.07em;
}
.hint, .diag, .mk-map-explain { line-height: 1.6; }
.skip-link { z-index: 50; }

/* One light header, with the full approved lockup at desktop size. */
.shell-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 8px 28px;
  gap: 16px;
  background: var(--glass-shell);
  border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.brand { gap: 16px; flex: 0 1 auto; }
.brand-lockup { width: 280px; min-width: 256px; }
.wordmark-note {
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.12em;
}
.wordmark-text { letter-spacing: -0.035em; font-size: 22px; }
.header-right { flex: 0 1 auto; gap: 16px; }
.status-chip { padding: 6px 12px; font-size: 12px; line-height: 18px; }
/* Readiness chip contrast (moved here from app.css, which stays the frozen v1 baseline). */
.status-chip[data-tone="success"] { color: var(--chip-success-fg); box-shadow: inset 0 0 0 1px rgb(var(--chip-success-rgb) / 0.28); }
.status-chip[data-tone="warning"] { color: var(--chip-warning-fg); box-shadow: inset 0 0 0 1px rgb(var(--chip-warning-rgb) / 0.28); }
.status-chip[data-tone="danger"] { color: var(--chip-danger-fg); box-shadow: inset 0 0 0 1px rgb(var(--chip-danger-rgb) / 0.28); }
.status-chip[data-tone="neutral"] { box-shadow: inset 0 0 0 1px rgb(var(--chip-neutral-rgb) / 0.22); }
/* Hold both shells invisible until boot finishes the session probe (reload flicker). */
html[data-boot="pending"] #signed-out,
html[data-boot="pending"] #signed-in,
html[data-boot="pending"] #page-column { visibility: hidden; }
.lang-switch {
  padding: 3px;
  gap: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.lang-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
}
.lang-btn.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* Inset sidebar: one contained workspace, rather than a full-height divider. */
.app-shell { padding: 12px; gap: 12px; align-items: start; }
.sidebar {
  position: sticky;
  top: 108px;
  padding: 0; /* padding lives on the inner scroll shell so the scrollbar stays inside the radius */
  min-height: min(650px, calc(100dvh - 128px));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden; /* clip classic scrollbars to the rounded card */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.org-context {
  position: relative;
  padding: 12px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.org-context-name { margin-top: 4px; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; }
.org-context-role { margin-top: 2px; font-size: 12px; }
.org-context-select { background: var(--surface); }
.app-nav { gap: 3px; }
.nav-link {
  min-height: 40px;
  padding: 0 12px;
  gap: 10px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.nav-link:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-link[aria-current="page"] {
  background: var(--signal-soft);
  color: var(--signal);
  box-shadow: inset 3px 0 0 var(--signal);
}
.nav-icon { width: 21px; height: 21px; }
.account-block { padding: 12px 4px 0; gap: 4px; }
.account-email { font-size: 13px; margin-bottom: 6px; }
.account-block .btn { justify-self: start; }
.page-area { padding: 8px 12px 20px; margin: 0 auto; }
.page-header { margin-bottom: 12px; gap: 10px; align-items: center; }
.eyebrow { margin-bottom: 4px; }
.page-actions .btn { border-radius: var(--radius-pill); }
.page > .lead { margin-bottom: 12px; max-width: 74ch; }

/* Matte cards carry the work. No card or dialog requests a blur layer. */
.card, .dash-card, .product-card, .status-card, .onboarding-panel, .auth-card, .surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: 24px;
}
.card + .card { margin-top: 20px; }
.card-head {
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  gap: 12px 16px;
}
.card-head h2, .card-head h3 { font-size: 18px; line-height: 26px; }
#product-heading { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.category-draft-workspace { display: grid; gap: 16px; margin-top: 28px; min-width: 0; }
.category-draft-workspace h3, .category-draft-workspace p { margin-bottom: 0; overflow-wrap: anywhere; }
.cd-parameters { display: grid; gap: 16px; min-width: 0; }
.cd-parameter { border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 0; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.cd-parameter legend { font-weight: 600; padding-inline: 6px; overflow-wrap: anywhere; max-width: 100%; }
.cd-value-row { display: grid; gap: 10px; min-width: 0; }
.category-draft-workspace select, .category-draft-workspace input { width: 100%; min-width: 0; min-height: 44px; }
.category-draft-workspace input[type="file"] { padding-block: 10px; }
.category-draft-workspace .actions { flex-wrap: wrap; }
.cards { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; }
.dash-card { padding: 14px 16px; gap: 8px; min-height: 0; }
.dash-card-value { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.035em; }
.dash-card:first-child .dash-card-value { font-size: 28px; line-height: 34px; }
.dash-card-detail { font-size: 13px; line-height: 18px; }
.dash-card a { font-size: 13px; font-weight: 600; text-decoration: none; }
.dash-card a:hover { text-decoration: underline; }
.next-action {
  max-width: none;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
}
.next-action h2 { font-size: 18px; line-height: 24px; margin-bottom: 6px; }
.next-action p { max-width: 68ch; color: var(--ink-soft); line-height: 1.5; margin-bottom: 0; }
.next-action .actions { margin-top: 12px; }
.next-action .btn { border-radius: var(--radius-pill); padding-inline: 18px; }

/* Soft inset fields and tactile, restrained controls. */
label { font-size: 13px; line-height: 20px; margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], select {
  min-height: 46px;
  border-color: var(--line-strong);
  background: var(--surface-sunken);
  padding-inline: 14px;
  border-radius: 12px;
  font-size: 14px;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="search"]:focus, select:focus { background: var(--surface); border-color: var(--focus); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--signal); flex: none; }
button, .btn { border-radius: 12px; font-size: 14px; transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.btn-primary, .btn--primary { box-shadow: 0 3px 8px rgb(var(--shadow-color) / 0.09); }
.btn-primary:hover:not(:disabled), .btn--primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
button.secondary, .btn-secondary, .btn--secondary { border-color: var(--line); background: var(--surface); }
button.secondary:hover, .btn-secondary:hover, .btn--secondary:hover { border-color: var(--line-strong); background: var(--surface-sunken); }
.btn-small, .btn--sm, .session-list button, .mk-map-actions button, .mk-map-results button { font-size: 12px; padding-inline: 12px; border-radius: 10px; }
.btn-danger, .btn--danger { background: var(--tone-danger-bg); border-color: var(--tone-danger-bg); }
.link { box-shadow: none; }
.field { margin-bottom: 20px; }
.form-row, .stack-form { gap: 10px; }
.toolbar { padding: 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); margin-bottom: 20px; }
.toolbar .form-row { gap: 8px; }
.actions { gap: 10px; }
.facts, .product-fields { row-gap: 12px; font-size: 14px; }
.facts dt, .product-fields dt { font-weight: 500; }
.facts dd, .product-fields dd { line-height: 1.55; }
.product-fields { padding: 18px; background: var(--surface-sunken); border-radius: var(--radius-lg); }
details.diagnostics { margin-top: 18px; }
details.diagnostics summary { color: var(--ink-soft); font-size: 13px; }
.session-list { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.session-list li { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }

/* Lists keep their real table/record semantics and disclosure controls. */
.table-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.table th, .mk-items th { padding: 14px 12px; font-size: 12px; line-height: 18px; font-weight: 600; background: var(--surface-sunken); }
.table td, .mk-items td { padding: 16px 12px; font-size: 13px; line-height: 21px; }
.table tbody tr:last-child td, .mk-items tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover, .mk-items tbody tr:hover { background: var(--surface-sunken); }
.table--records-active { padding: 10px; }
.table--records-active tr { margin-bottom: 12px; border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-1); background: var(--surface); }
.table--records-active tr:last-child { margin-bottom: 0; }
.table--records-active td { padding: 8px 0; font-size: 13px; line-height: 21px; }
.table--records-active td::before { font-size: 12px; line-height: 18px; letter-spacing: 0; }
.table--records-active .record-toggle { top: 12px; right: 12px; }
.table--records-active tbody tr:hover { background: var(--surface); }
.mk-map-cell { min-width: 210px; }
.mk-map-actions { gap: 7px; margin-top: 10px; }
.mk-map-explain { font-size: 12px; }
.mk-map-panel { border-radius: 16px; padding: 20px; gap: 16px; }
.mk-map-results li { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.mk-import-preview .facts { padding: 16px; background: var(--surface); border-radius: 12px; }

/* Every status still includes its words; tone is a supporting cue. */
.chip { min-height: 26px; padding: 3px 10px; gap: 3px; font-size: 12px; line-height: 18px; font-weight: 600; }
.state-box, .alert { border-radius: 14px; border-left-width: 3px; padding-block: 16px; }
.state-detail, .alert-detail { font-size: 13px; line-height: 21px; overflow-wrap: anywhere; }
.empty-state { background: var(--surface-sunken); border-style: solid; padding: 28px; border-radius: var(--radius-xl); }
.empty-title { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; }
.empty-detail { font-size: 14px; line-height: 1.7; }
.marketplace { gap: 20px; }
.status-card { padding: 22px 24px; border-left-width: 3px; }
.status-card-title { margin-top: 8px; font-size: 22px; line-height: 29px; letter-spacing: -0.025em; }
.status-card-detail { font-size: 14px; line-height: 1.7; }
.mk-connection, .mk-snapshot { gap: 16px; }
.stepper { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; gap: 10px 18px; }
.stepper li { font-size: 12px; }
.step-number { border-radius: 10px; }
.onboarding-panel { gap: 20px; }

/* Public entry: compact editorial introduction beside a focused form (fit ~1440×900 without scroll). */
.app-shell:has(> #signed-in[hidden]) { padding: 0; }
.auth-layout { padding: 24px 28px 20px; gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; }
.auth-intro { padding: 0; }
.auth-intro h1 { max-width: 15ch; margin-bottom: 10px; font-size: 40px; line-height: 46px; }
.auth-intro .lead { max-width: 45ch; line-height: 1.55; margin-bottom: 0; }
.intro-points { margin-top: 14px; gap: 8px; max-width: 45ch; }
.intro-points li { padding-left: 28px; font-size: 13px; line-height: 1.45; }
.intro-points li::before {
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--signal-soft);
  color: var(--signal);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.auth-card { padding: 18px 20px; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2); }
.auth-tabs { background: var(--surface-muted); padding: 3px; gap: 3px; border: 0; border-radius: 12px; margin-bottom: 14px; }
.auth-tab { flex: 1; justify-content: center; min-height: 36px; border: 0; border-radius: 9px; margin: 0; font-size: 13px; }
.auth-tab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.auth-form h2 { font-size: 20px; line-height: 26px; margin-bottom: 12px; letter-spacing: -0.035em; }
.auth-form .field { margin-bottom: 10px; }
.auth-form .actions { margin-top: 12px; gap: 10px; }
.auth-form .actions > .btn-primary { flex: 1 1 100%; }
.auth-form .auth-switch { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.auth-card .state-box { margin: 12px 0 0; font-size: 12px; padding-block: 10px; }
#register-done-detail, #recover-done-detail { overflow-wrap: anywhere; }
.modal { padding: 28px; border-radius: 22px; max-width: min(92vw, 460px); border-color: var(--glass-line); }
.modal h2 { font-size: 22px; line-height: 29px; letter-spacing: -0.03em; }
.modal .actions { margin-top: 24px; }
.shell-footer { padding: 8px 28px; border-top: 0; background: transparent; font-size: 12px; }

@media (min-width: 1600px) {
  .app-shell { padding-inline: 32px; gap: 24px; }
  .page-area { padding-inline: 28px; }
}

@media (max-width: 1100px) {
  .wordmark-note { display: none; }
  .page-area { padding-inline: 8px; }
  .auth-layout { gap: 24px; }
  .auth-intro h1 { font-size: 34px; line-height: 40px; }
}

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .sidebar { position: static; min-height: 0; padding: 0; gap: 0; border-radius: 20px; overflow: hidden; }
  .sidebar-scroll { padding: 12px; gap: 10px; overflow: visible; scrollbar-gutter: auto; }
  .org-context { padding: 10px 12px; }
  .app-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 2px; scroll-snap-type: x proximity; }
  .nav-link { flex: none; white-space: nowrap; padding: 0 12px; scroll-snap-align: start; }
  .account-block { margin-top: 0; padding: 10px 2px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; }
  .account-block .account-label { grid-column: 1; }
  .account-email { margin: 0; grid-column: 1; }
  .account-block .btn { grid-column: 2; grid-row: 1 / span 2; }
  .page-area { padding: 4px 0 16px; }
  .page-header { margin-bottom: 12px; }
  .auth-layout { padding-top: 20px; }
}

@media (max-width: 768px) {
  :root { --text-2xl: 28px; --leading-2xl: 35px; }
  .shell-header { min-height: 76px; padding: 12px 20px; }
  .brand-lockup { display: none; }
  .brand-compact { display: flex; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 16px 24px; max-width: 620px; }
  .auth-intro h1 { font-size: 28px; line-height: 34px; max-width: 18ch; }
  .intro-points { margin-top: 12px; gap: 8px; }
  .auth-card { padding: 16px; order: -1; }
  .lang-btn { min-height: 44px; }
  button, .btn, .btn-small, .btn--sm, .auth-tab, .step-link, .session-list button, .mk-map-actions button, .mk-map-results button { min-height: 44px; }
  details.diagnostics summary { min-height: 44px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="search"], select { font-size: 16px; }
  .btn--icon { min-width: 44px; width: 44px; }
  .toolbar { padding: 16px; }
  .toolbar .form-row { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .dash-card { min-height: 0; }
  .form-row > button, .stack-form > button { justify-self: stretch; }
}

@media (max-width: 600px) {
  .category-draft-workspace input, .category-draft-workspace select, .category-draft-workspace button { font-size: 16px; min-height: 44px; }
  .shell-header { position: relative; padding: 12px 16px; gap: 10px; }
  .brand { width: 100%; }
  .header-right { flex-wrap: nowrap; width: 100%; justify-content: space-between; gap: 12px; }
  .status-chip { flex: 1 1 0; min-width: 0; max-width: none; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lang-switch { padding: 2px; border-radius: 12px; }
  .lang-btn { min-width: 44px; padding-inline: 10px; }
  .app-shell { padding: 12px; gap: 22px; }
  .sidebar { padding: 0; gap: 0; border-radius: 18px; }
  .sidebar-scroll { padding: 8px; gap: 8px; }
  .org-context { padding: 12px; }
  .org-context-name { font-size: 14px; line-height: 22px; }
  .account-block { padding: 10px 2px 2px; gap: 3px 8px; }
  .account-email { font-size: 12px; }
  .account-block .btn { padding-inline: 12px; }
  .app-nav {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 3px;
    overflow: visible;
    background: var(--glass-shell);
    border: 1px solid var(--glass-line);
    border-radius: 22px;
    box-shadow: var(--shadow-3);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .nav-link { flex-direction: column; justify-content: flex-start; padding: 8px 0 6px; gap: 5px; min-height: 74px; min-width: 0; border-radius: 15px; white-space: normal; font-size: 12px; line-height: 15px; text-align: center; font-weight: 400; }
  .nav-link > span { max-width: 100%; overflow-wrap: anywhere; hyphens: manual; letter-spacing: -0.05em; word-break: normal; text-wrap: balance; }
  .nav-link[aria-current="page"] { box-shadow: none; font-weight: 500; }
  .nav-icon { width: 22px; height: 22px; }
  .app-shell:has(> #signed-in:not([hidden])) { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .page-area { padding: 0 2px 12px; }
  .page-header { margin-bottom: 22px; gap: 16px; }
  .page-header h1 { font-size: 28px; line-height: 35px; }
  .page > .lead { font-size: 14px; line-height: 23px; }
  .card, .dash-card, .product-card, .status-card, .onboarding-panel, .surface { padding: 18px; border-radius: 18px; }
  .card-head { padding-bottom: 12px; margin-bottom: 16px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dash-card { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }
  .dash-card-label, .dash-card-value, .dash-card-detail, .dash-card a { grid-column: 1; grid-row: auto; }
  .dash-card-value { font-size: 22px; line-height: 29px; overflow-wrap: anywhere; }
  .dash-card:first-child { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .dash-card:first-child .dash-card-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 28px; }
  .dash-card:first-child a { grid-column: 1 / -1; }
  .next-action { padding: 22px; }
  .next-action h2 { font-size: 22px; line-height: 29px; }
  .next-action p { font-size: 14px; }
  .next-action .btn { width: 100%; }
  .toolbar { gap: 20px; }
  .table--records-active { padding: 6px; }
  .table--records-active tr { padding: 10px 12px; }
  .table--records-active .mk-map-cell { min-width: 0; }
  .mk-map-panel { padding: 16px; }
  .mk-map-actions .btn { flex: 1 1 auto; }
  .empty-state { padding: 22px; }
  .stepper { padding: 12px; gap: 8px 12px; }
  .step-link { padding-inline: 0; }
  .step-number { width: 26px; height: 26px; font-size: 12px; }
  .facts, .product-fields { row-gap: 8px; }
  .auth-layout { padding: 30px 16px 40px; gap: 28px; }
  .auth-intro h1 { font-size: 32px; line-height: 39px; max-width: 15ch; margin-bottom: 20px; }
  .auth-intro .lead { font-size: 14px; line-height: 24px; }
  .intro-points li { font-size: 13px; }
  .auth-card { padding: 22px; }
  .auth-form h2 { font-size: 22px; line-height: 29px; }
  .modal { padding: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .modal .actions { flex-direction: column; align-items: stretch; }
  .shell-footer { padding: 18px 16px; }
}

/* Images and the saved card review share the product surface. */
.offer-draft-workspace { margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); min-width: 0; }
.offer-draft-workspace .card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.offer-draft-workspace h4 { margin: 0; font-size: 18px; }
.of-commercial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.of-package { min-width: 0; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.of-package legend { padding-inline: 6px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
#of-barcodes_text, #of-document_numbers_text { min-height: 96px; }
.offer-draft-workspace textarea { box-sizing: border-box; width: 100%; min-height: 140px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken); color: var(--ink); font: inherit; }
.offer-draft-workspace .state-box { margin-top: 16px; }
@media (max-width: 600px) { .of-commercial { grid-template-columns: minmax(0, 1fr); gap: 0; } .offer-draft-workspace input, .offer-draft-workspace select, .offer-draft-workspace textarea, .offer-draft-workspace button { min-height: 44px; font-size: 16px; } }
.product-images { margin-top: 28px; min-width: 0; }
#image-drafts textarea { box-sizing: border-box; width: 100%; min-height: 140px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken); color: var(--ink); font: inherit; }
#image-drafts .check-label { display: flex; align-items: center; gap: 10px; width: 100%; }
#image-drafts input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; }
#ig-preview-image { display: block; max-width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
@media (max-width: 600px) { #image-drafts textarea, #image-drafts select, #image-drafts button { min-height: 44px; font-size: 16px; } }
.product-images .card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 20px 0; padding: 0; list-style: none; }
.pi-item { padding: 16px; border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.pi-item img { display: block; width: 100%; height: 160px; object-fit: contain; border-radius: 10px; background: var(--surface-sunken); }
.pi-caption { font-weight: 600; }
.pi-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-actions .btn { flex: 1 1 auto; }
.product-images input[type="file"] { display: block; width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken); color: var(--ink); font: inherit; }
.product-images input[type="file"]::file-selector-button { margin-right: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
@media (max-width: 600px) { .product-images input, .product-images button { min-height: 44px; font-size: 16px; } }
.cd-card-review { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); min-width: 0; }
.cd-card-review .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cd-card-review h4 { margin: 0; font-size: 18px; }
.cd-card-review .facts { overflow-wrap: anywhere; }
.cd-review-sections { list-style: none; margin: 20px 0 0; padding: 0; }
.cd-review-section { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.cd-review-verdict { color: var(--ink-soft); }
.cd-review-section[data-status="PASSED"] .cd-review-verdict { color: var(--tone-success-fg); }

/* Opaque fallback also applies when the user asks for less transparency. */
@supports not (backdrop-filter: blur(1px)) {
  .shell-header, .app-nav { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .shell-header, .app-nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link, button, .btn, input, select { transition: none; }
}

.pi-public-link { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: 14px; }

.price-preparation { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.price-preparation h5 { margin: 0 0 8px; font-size: 1rem; }
.pp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.pp-choices input, .pp-choices select { width: 100%; }
.pp-preview { padding: 16px; border-radius: 16px; background: var(--canvas); }
.pp-preview dd { overflow-wrap: anywhere; }
.pp-acks { display: grid; gap: 12px; margin-top: 20px; }
.pp-ack { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.pp-ack input { margin-top: 3px; }
.price-preparation input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; }
.pp-ack { min-height: 44px; }
.card-preparation .facts dd { white-space: pre-wrap; }
.card-preparation ol { display: grid; gap: 12px; padding: 0; list-style: none; }
.card-preparation ol li { display: grid; gap: 4px; }
.card-preparation ol a { font-size: 12px; overflow-wrap: anywhere; }
.price-preparation .actions { margin-top: 20px; }
.stock-preparation input[type="datetime-local"] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-sunken); color: var(--ink); font: inherit; }
.stock-preparation input[type="datetime-local"]:focus { background: var(--surface); border-color: var(--focus); }
.stock-preparation .pp-preview .product-fields { border: 0; padding: 0; background: transparent; }
@media (max-width: 600px) { .price-preparation { padding: 16px; } .pp-choices { grid-template-columns: minmax(0, 1fr); } .price-preparation .actions { align-items: stretch; } .price-preparation .actions > button { flex: 1 1 100%; white-space: normal; } }
@media (max-width: 600px) { .stock-preparation { padding: 0; border: 0; background: transparent; } .stock-preparation .pp-preview { padding: 12px; } }

/* Local confirmation history uses the editor card vocabulary. */
.price-history { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.ph-list { display: grid; gap: 16px; list-style: none; padding: 0; margin-block: 16px; }
.ph-record { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); }
.ph-record h5 { font-size: 1rem; margin: 0 0 12px; }
.ph-record dd{overflow-wrap:anywhere}
.card-history .ph-record summary { min-height: 44px; cursor: pointer; overflow-wrap: anywhere; line-height: 1.5; }
.card-history .ph-record dd { white-space: pre-wrap; }
.card-history-images { display: grid; gap: 12px; padding: 0; list-style: none; }
.card-history-images li { display: grid; gap: 4px; }
.card-history-images a { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .price-history { padding: 0; border: 0; background: transparent; }
  .ph-record { padding: 12px; }
  .ph-record .product-fields { padding: 0; background: transparent; }
}

/* Viewport shell (CRM pattern): the document never scrolls vertically. Header/footer stay put.
   Scroll lives on INNER shells (.sidebar-scroll / .main-scroll) with overflow:auto (no bar when
   content fits). Outer cards use overflow:hidden so classic scrollbars stay inside border-radius. */
html { height: 100%; overflow-y: hidden; }
body { height: 100dvh; min-height: 0; }
.shell-header, .shell-footer { flex: none; }
.shell-footer { padding: 6px 28px; }
.app-shell { flex: 1 1 auto; min-height: 0; overflow: hidden; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.sidebar { position: static; top: auto; min-height: 0; max-height: 100%; overflow: hidden; }
#main-content {
  min-height: 0;
  overflow: hidden; /* scroll lives on .main-scroll; outer stays a clip shell */
  display: flex;
  flex-direction: column;
}
.main-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
@media (min-width: 1025px) { .page-area { padding-bottom: 16px; } }

/* Thin scrollbars, inset; hidden automatically when overflow:auto has nothing to scroll. */
.app-shell, .sidebar-scroll, .main-scroll, .app-nav, .table-wrap, .modal {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.sidebar-scroll::-webkit-scrollbar,
.main-scroll::-webkit-scrollbar,
.app-nav::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sidebar-scroll::-webkit-scrollbar-thumb,
.main-scroll::-webkit-scrollbar-thumb,
.app-nav::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar-scroll::-webkit-scrollbar-track,
.main-scroll::-webkit-scrollbar-track,
.app-nav::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

/* Narrow shell: rail + page scroll together inside the shell, under a fixed header. */
@media (max-width: 1024px) {
  .app-shell { overflow-x: hidden; overflow-y: auto; grid-template-rows: none; align-content: start; overscroll-behavior: contain; }
  .sidebar { max-height: none; overflow: hidden; }
  .sidebar-scroll { max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .app-nav { overflow-y: hidden; }
  #main-content { overflow: visible; }
  .main-scroll { overflow: visible; scrollbar-gutter: auto; }
  .shell-footer { padding: 6px 16px; }
}
@media (max-width: 600px) {
  .app-nav { overflow: visible; }
  .app-shell:has(> #signed-in:not([hidden])) { padding-bottom: 12px; }
  body:has(#signed-in:not([hidden])) .shell-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .shell-footer { padding: 6px 12px; }
}

/* UI audit 2026-10-05: no technical identifiers in the person-facing surface. The diagnostics
   values stay in the DOM (tests and support read them) but are not painted; the product
   "open by identifier" tool and the tab-only "recently opened" note are developer aids. */
#product > details.diagnostics,
#organization-page details.diagnostics,
#catalog-open-by-id,
#catalog-session > .hint { display: none; }
#catalog-session:has(#session-list:empty) { display: none; }
/* Dashboard cards: the "open" link sits on one baseline across the row. */
@media (min-width: 601px) {
  .dash-card { display: flex; flex-direction: column; }
  .dash-card a { margin-top: auto; align-self: flex-start; }
}
/* Organization page: the edit form is its own block, not glued to the facts list. */
#org-edit-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Team records on phones: an empty actions cell is not a row of its own. */
.table--records-active td.actions-cell:empty { display: none; }