:root {
  color-scheme: light;
  --ink: #17233a;
  --muted: #526178;
  --line: #d7dee8;
  --line-strong: #7c899c;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --canvas: #f3f6fa;
  --accent: #174f76;
  --accent-soft: #e8f0f7;
  --focus: #f2b84b;
  --success-soft: #dcfce7;
  --success-ink: #14532d;
  --warning-soft: #fef3c7;
  --warning-ink: #854d0e;
  --danger-soft: #fee2e2;
  --danger-ink: #7f1d1d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f4f7;
  --muted: #aeb8c5;
  --line: #344054;
  --line-strong: #667085;
  --surface: #191f2a;
  --surface-soft: #1d2531;
  --canvas: #11151c;
  --accent: #8bb3ff;
  --accent-soft: #1b3158;
  --focus: #f7b76b;
  --success-soft: #123a2b;
  --success-ink: #a7f3c7;
  --warning-soft: #3a2b16;
  --warning-ink: #f7b76b;
  --danger-soft: #3d1d23;
  --danger-ink: #ffaaa3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
}

a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  padding: .75rem 1rem;
  background: var(--ink);
  color: #fff;
  z-index: 2;
}

.skip-link:focus { top: 1rem; }

header {
  padding: 1rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}

/* Use the approved product mark on the public sign-in surfaces too; the authenticated
   shell renders the same asset in its sidebar brand. */
.brand::before {
  content: "";
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: .4rem;
  background: url('/app/assets/clientsupply-logo.svg') center / cover no-repeat;
}

main {
  width: min(100% - 2rem, 34rem);
  margin: clamp(2rem, 8vh, 5rem) auto;
}

.card {
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1rem 3rem rgb(23 35 58 / .08);
}

h1 {
  margin: 0 0 .6rem;
  font-size: clamp(1.8rem, 7vw, 2.65rem);
  line-height: 1.12;
}

p { max-width: 62ch; }
.lead { color: var(--muted); }

.eyebrow {
  margin: 0 0 .35rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form { margin-top: 1.5rem; }

label {
  display: block;
  margin-top: 1rem;
  font-weight: 650;
}

input {
  width: 100%;
  min-height: 48px;
  margin-top: .35rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: .55rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

input[type="checkbox"] {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0 .55rem 0 0;
  vertical-align: middle;
}

.check-label {
  display: flex;
  align-items: flex-start;
  font-weight: 500;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  margin-top: 1.25rem;
  padding: .7rem 1rem;
  border: 1px solid var(--accent);
  border-radius: .55rem;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

button[disabled] { cursor: wait; opacity: .7; }

/* Author button/fieldset display rules must never override the HTML hidden contract. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.status {
  min-height: 1.6em;
  margin-top: 1rem;
  padding: .65rem 0;
  overflow-wrap: anywhere;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1.25rem;
}

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* V0 sign-in composition: a quiet brand panel paired with the small, focused
   credential surface. Behaviour remains owned by auth.js and the same form
   endpoint/field names are retained. */
.signin-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr); width: min(100% - 2rem, 74rem); min-height: min(42rem, calc(100vh - 4rem)); margin: 2rem auto; padding: 0; }
.signin-brand-panel { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(2rem, 6vw, 4.5rem); border-radius: 1.25rem 0 0 1.25rem; background: #101d36; color: #f4f7fc; }
.signin-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-size: 1rem; font-weight: 750; text-decoration: none; }
.signin-brand img { width: 2rem; height: 2rem; border-radius: .45rem; }
.signin-brand-panel h1 { margin: 1.5rem 0 .8rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; }
.signin-brand-panel p:not(.eyebrow) { max-width: 29rem; margin: 0; color: #c6d1e1; font-size: .95rem; }
.signin-brand-panel .eyebrow { color: #8bb3ff; }
.signin-brand-foot { color: #8d9bb1; font-size: .72rem; }
.signin-form-panel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.25rem, 5vw, 4rem); background: var(--surface); border: 1px solid var(--line); border-left: 0; border-radius: 0 1.25rem 1.25rem 0; }
.signin-card { width: min(100%, 24rem); margin-inline: auto; }
.signin-card h2 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.2rem); letter-spacing: -.035em; }
.signin-card .lead { margin-top: .3rem; }
.signin-card form { margin-top: 1.5rem; }
.signin-card button { width: 100%; }
.signin-legal { width: min(100%, 24rem); margin: 2rem auto 0; color: var(--muted); font-size: .72rem; }
.signin-legal nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.signin-legal a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.signin-mobile-header { display: none; }
.signin-mobile-header .brand { min-height: 2.75rem; }
@media (max-width: 760px) {
  .signin-mobile-header { display: block; padding: 1rem; border-bottom: 1px solid var(--line); }
  .signin-layout { display: block; width: min(100% - 1rem, 34rem); min-height: 0; margin: 1rem auto 2rem; }
  .signin-brand-panel { display: none; }
  .signin-form-panel { padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; }
  .signin-card, .signin-legal { width: 100%; }
}

@media (max-width: 420px) {
  main { width: min(100% - 1rem, 34rem); margin: 1rem auto; }
  .card { padding: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------------------
   Phase 3 responsive pass: touch-target and navigation sizing.

   Measured at 390x844 and 768x1024, the brand link, the shared app navigation links and
   several inputs rendered under 24px tall, which is below a reliable touch target. These
   rules set a floor without changing the visual language: the elements keep their type
   scale and colour, they simply gain enough vertical box to be hit accurately on a phone.
   --------------------------------------------------------------------------------------- */

.brand,
.links a,
.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  max-width: 100%;
}

.app-nav a {
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.app-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 750;
  text-decoration: underline;
}

/* Inputs and controls need a comfortable hit area on touch devices, and a large-enough font
   that iOS Safari does not zoom the viewport on focus. */
input,
select,
textarea,
button {
  min-height: 44px;
  font-size: max(1rem, 16px);
}

/* The terms checkbox must stay square rather than inherit the 44px control height, but it
   still has to be large enough to tap accurately. Its label is the generous target. */
input[type="checkbox"] {
  min-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
}

/* The organisation switcher list renders as rows of name plus action. */
.org-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.org-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.org-list .org-name { font-weight: 600; }
.org-list .org-meta { opacity: 0.85; }

/* Wide content must scroll inside its own container so the page body never scrolls sideways. */
table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
}

.progress {
  font-weight: 750;
  color: var(--accent);
}

.muted,
.example {
  color: var(--muted);
}

.detail-list {
  margin: 1rem 0;
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

/* Public trust pages reuse the authenticated surface's typography and focus treatment. */
.legal-main {
  width: min(100% - 2rem, 70rem);
  margin: clamp(1.25rem, 5vh, 3.5rem) auto;
}

.legal-card h2 {
  margin-top: 2rem;
  line-height: 1.25;
}

.legal-card h3 {
  margin-top: 1.5rem;
  line-height: 1.3;
}

.legal-card ul {
  padding-left: 1.35rem;
}

.legal-meta {
  color: var(--muted);
  font-size: .94rem;
}

.legal-footer {
  width: min(100% - 2rem, 70rem);
  margin: 0 auto 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .94rem;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: .5rem;
}

.legal-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Phase 4A command-centre primitives. They are deliberately dependency-free so the warm
   authenticated shell stays small and usable before data requests complete. */
.command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
}

.metric {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface-soft);
}

.metric strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.metric span { color: var(--muted); font-size: .92rem; }
.button.secondary { background: var(--surface); color: var(--accent); }
.action-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.action-row .button, .action-row button { margin-top: .5rem; }
.queue-list { list-style: none; padding: 0; margin: 0; }
.queue-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.queue-list li:last-child { border-bottom: 0; }
.job-progress-notes { margin-top: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
.job-progress-notes h4 { margin: .1rem 0 .5rem; }
.job-progress-notes form { margin-top: .6rem; }
.job-progress-notes textarea { min-height: 4.5rem; }
.queue-meta { color: var(--muted); font-size: .9rem; }
textarea, select { width: 100%; min-height: 48px; margin-top: .35rem; padding: .7rem .8rem; border: 1px solid var(--line-strong); border-radius: .55rem; background: var(--surface); color: var(--ink); font: inherit; }

.recovery-summary {
  margin: 0 0 1rem;
  color: var(--muted);
}

.recovery-summary strong {
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
}

.recovery-list { display: grid; gap: .75rem; }

.recovery-item {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface-soft);
}

.recovery-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem .75rem;
}

.recovery-item-header strong { font-size: 1.08rem; }
.recovery-item p { margin: .45rem 0 0; }
.recovery-customer { font-weight: 700; }

.recovery-priority {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  color: var(--ink);
  background: #e8eef4;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.recovery-priority[data-priority="high"] { color: var(--danger-ink); background: var(--danger-soft); }
.recovery-priority[data-priority="medium"] { color: var(--warning-ink); background: var(--warning-soft); }
.recovery-priority[data-priority="low"] { color: var(--success-ink); background: var(--success-soft); }

.recovery-item .button { margin-top: .8rem; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.recovery-actions .button { margin-top: 0; }

/* Phase 4B-R1 dashboard shell. The shared auth shell intentionally keeps forms narrow;
   the authenticated overview needs a responsive working canvas instead. Scope this wider
   treatment to the overview page so onboarding and account forms retain their compact flow. */
main.app-main {
  width: min(calc(100% - clamp(2rem, 6vw, 5rem)), 90rem);
  margin: clamp(1.5rem, 5vw, 4rem) auto;
}

.dashboard-shell,
.dashboard-grid,
.dashboard-grid > *,
.dashboard-support {
  min-width: 0;
}

.dashboard-shell {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.dashboard-intro { padding-inline: clamp(.25rem, 1vw, 1rem); }
.dashboard-intro .status { margin-top: .75rem; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.dashboard-command,
.dashboard-attention,
.dashboard-support {
  overflow-wrap: anywhere;
}

.dashboard-command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .dashboard-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  main.app-main {
    width: min(calc(100% - 1rem), 90rem);
    margin: 1rem auto;
  }

  .dashboard-command-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-intro { padding-inline: .1rem; }
}

.detail-list dt { font-weight: 700; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

.form-actions,
.review-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.form-actions[hidden] { display: none; }

.form-actions {
  justify-content: space-between;
  margin-top: 1rem;
}

.form-actions button {
  min-height: 44px;
  margin-top: 0;
  padding: .55rem .9rem;
}

.form-actions button[data-onboarding-back] { margin-right: auto; }
.form-actions button[data-onboarding-submit],
.form-actions button[data-onboarding-complete] { margin-left: auto; }

.secondary-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.danger-button {
  border-color: #9f2e2e;
  background: #9f2e2e;
  color: #fff;
}

.link-button {
  min-height: 44px;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
}

.review-section {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.review-heading-row { justify-content: space-between; }
.review-heading-row h3 { margin: 0; }

.first-run,
.checklist {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.first-run h2,
.checklist h2 { margin-top: 0; }

.empty-state {
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--accent);
  background: #eef5fa;
}

/* Phase 4C-R3A customer detail primitives. The page remains read-only and uses the same
   authenticated shell as Workflows, with bounded timeline rows that stay readable on phones. */
.customer-detail-grid { align-items: stretch; }
.customer-summary-list { margin-top: .5rem; }
.customer-summary-list > div { grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr); }
.customer-summary-list dd { white-space: pre-wrap; }
.timeline-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.timeline-item {
  display: grid;
  gap: .3rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}
.timeline-item strong { overflow-wrap: anywhere; }
.customer-detail-grid .queue-list a { font-weight: 700; }
.customer-detail-grid .queue-list li > .button { margin-top: .65rem; }

/* Phase 4C-R3B3 quote workflow surfaces. These primitives keep list, detail and forms
   readable at the existing JobDesk breakpoints without introducing a second design system. */
.quote-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: .75rem;
  align-items: end;
  margin-top: 1rem;
}
.quote-filter-form label { margin-top: 0; }
.quote-filter-form button { margin-top: 0; }
.quote-list { display: grid; gap: .75rem; }
.quote-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}
.quote-card-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .75rem; }
.quote-card-header strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.quote-status {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: #e8eef4;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  text-transform: capitalize;
}
.quote-status[data-status="accepted"] { background: #dcfce7; color: #14532d; }
.quote-status[data-status="declined"], .quote-status[data-status="expired"] { background: #fee2e2; color: #7f1d1d; }
.quote-status[data-status="converted"] { background: #dbeafe; color: #1e3a8a; }
.quote-detail-list dd { overflow-wrap: anywhere; }
.quote-scope { white-space: pre-wrap; }
.field-error { min-height: 1.4em; margin: .2rem 0 0; color: #8a1c1c; font-size: .9rem; }
.quote-filter-form + .status { min-height: 1.4em; }

/* R3C3 manual missed-call workspace. Keep capture, queue and detail controls on the same
   authenticated shell while allowing the dense form to collapse cleanly on phones. */
.missed-call-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
}
.missed-call-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: .75rem;
  align-items: end;
  margin-top: 1rem;
}
.missed-call-filter-form label { margin-top: 0; }
.missed-call-filter-form button { margin-top: 0; }
.missed-call-overdue-filter { align-items: center; }
.missed-call-overdue-filter input { margin-top: 0; }
.missed-call-list { display: grid; gap: .75rem; }
.missed-call-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}
.missed-call-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem .75rem;
}
.missed-call-card-header strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.missed-call-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #854d0e;
  font-size: .78rem;
  font-weight: 800;
}
.missed-call-status-badge[data-state="resolved"] { background: #dcfce7; color: #14532d; }
.missed-call-card .queue-meta { margin-top: .35rem; }
.missed-call-card .action-row { margin-top: .7rem; }
.missed-call-detail-card { scroll-margin-top: 1rem; }
.missed-call-action-box {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}
.missed-call-action-editor { margin-top: .75rem; }
.missed-call-action-editor .field-error { min-height: 1.4em; }
.missed-call-final-warning {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-left: 4px solid #b45309;
  background: var(--shell-warning-soft);
  color: var(--shell-warning);
}
.missed-call-detail-list dd { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .missed-call-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missed-call-filter-form button { width: 100%; }
}

@media (max-width: 760px) {
  .quote-filter-form { grid-template-columns: minmax(0, 1fr); }
  .quote-filter-form button { width: 100%; }
  .missed-call-form-grid,
  .missed-call-filter-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .customer-summary-list > div { grid-template-columns: 1fr; gap: .2rem; }
}

.checklist ul { padding-left: 1.25rem; }
.checklist li { margin: 0.6rem 0; }

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--shell-overlay);
}

.dialog-backdrop[hidden] { display: none; }

.dialog {
  width: min(100%, 32rem);
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1rem 3rem rgb(23 35 58 / .2);
}

@media (max-width: 480px) {
  .app-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .app-nav a { justify-content: center; }
  .detail-list > div { grid-template-columns: 1fr; gap: 0.2rem; }

  .form-actions { align-items: stretch; }
  .form-actions button { flex: 1 1 auto; }
}

@media (min-width: 481px) and (max-width: 760px) {
  .app-nav { gap: 0.35rem 0.55rem; }
}

/* ==========================================================================
   ClientSupply application design system — Premium product UI restructure.

   One token set, one component layer. This section replaces four previously
   stacked app-shell passes (five competing :root blocks, 171 duplicated
   selectors, 605 `body.app-shell` specificity overrides). Rules here are
   authored at their natural specificity and are not intended to be overridden
   by a later appended layer: edit the rule, do not append another.
   ========================================================================== */

:root {
  /* Canvas and surfaces ------------------------------------------------- */
  --shell-canvas: #f6f7f9;
  --shell-surface: #ffffff;
  --shell-surface-soft: #fafbfc;
  --shell-surface-sunken: #f1f3f7;

  /* Ink ------------------------------------------------------------------ */
  --shell-ink: #101828;
  --shell-ink-soft: #475467;
  --shell-muted: #626c7c;
  /* Decorative only (aria-hidden icons, arrows, separators). Never used for
     text: it does not meet WCAG AA against these surfaces. */
  --shell-faint: #98a2b3;

  /* Lines ---------------------------------------------------------------- */
  --shell-line: #e7eaef;
  --shell-line-soft: #eff1f5;
  --shell-line-strong: #d2d8e0;

  /* Brand ---------------------------------------------------------------- */
  --shell-accent: #2563eb;
  --shell-accent-strong: #1d4ed8;
  --shell-accent-soft: #eef4ff;
  --shell-accent-ink: #1e40af;

  /* Secondary accent ----------------------------------------------------- */
  --shell-teal: #0d9488;
  --shell-teal-soft: #edfbf8;

  /* Semantic ------------------------------------------------------------- */
  --shell-success: #067647;
  --shell-success-soft: #ecfdf3;
  --shell-warning: #b54708;
  --shell-warning-soft: #fffaeb;
  --shell-danger: #b42318;
  --shell-danger-soft: #fef3f2;
  --shell-violet: #6941c6;
  --shell-violet-soft: #f4f3ff;

  /* Shape ---------------------------------------------------------------- */
  --shell-radius-sm: 6px;
  --shell-radius: 10px;
  --shell-radius-lg: 14px;

  /* Elevation ------------------------------------------------------------ */
  --shell-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shell-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --shell-shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shell-shadow-lg: 0 14px 32px -10px rgba(16, 24, 40, .16);

  /* Layout --------------------------------------------------------------- */
  --shell-sidebar-w: 15rem;
  --shell-topbar-h: 3.25rem;
  --shell-max: 78rem;
  --shell-gap: .875rem;
  --shell-topbar-bg: rgba(255, 255, 255, .86);
  --shell-overlay: rgba(16, 24, 40, .38);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --shell-canvas: #11151c;
  --shell-surface: #191f2a;
  --shell-surface-soft: #1d2531;
  --shell-surface-sunken: #141a23;
  --shell-ink: #f2f4f7;
  --shell-ink-soft: #d0d5dd;
  --shell-muted: #98a2b3;
  --shell-faint: #667085;
  --shell-line: #2b3442;
  --shell-line-soft: #232c38;
  --shell-line-strong: #475467;
  --shell-accent: #6b9cff;
  --shell-accent-strong: #8bb3ff;
  --shell-accent-soft: #1b3158;
  --shell-accent-ink: #b5d0ff;
  --shell-teal: #42c7bb;
  --shell-teal-soft: #123a3a;
  --shell-success: #6ce0a5;
  --shell-success-soft: #123a2b;
  --shell-warning: #f7b76b;
  --shell-warning-soft: #3a2b16;
  --shell-danger: #ff8b82;
  --shell-danger-soft: #3d1d23;
  --shell-violet: #b29af7;
  --shell-violet-soft: #2e2450;
  --shell-topbar-bg: rgba(25, 31, 42, .9);
  --shell-overlay: rgba(0, 0, 0, .62);
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */

body.app-shell {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--shell-topbar-h) minmax(0, 1fr);
  grid-template-areas: "sidebar topbar" "sidebar main";
  background: var(--shell-canvas);
  color: var(--shell-ink);
  font-size: .9rem;
  line-height: 1.5;
}

body.app-shell > header,
body.app-shell .legal-footer { display: none; }

/* The public/auth stylesheet has a broad `header` rule for marketing and
   sign-in surfaces. Authenticated modules also use semantic headers for page,
   document, and composer chrome, so reset that light-only treatment at the
   shell boundary. Individual app headers add back only the spacing/border
   they need, while every surface inherits the selected theme tokens. */
body.app-shell header {
  padding: 0;
  border-bottom: 0;
  background: transparent;
  color: var(--shell-ink);
}

/* Sidebar ------------------------------------------------------------------ */

body.app-shell .app-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .625rem .5rem .75rem;
  background: var(--shell-surface);
  border-right: 1px solid var(--shell-line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.app-shell .sidebar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 .5rem;
  margin-bottom: .375rem;
  color: var(--shell-ink);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -.011em;
}

body.app-shell .brand-mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--shell-radius-sm);
  background: var(--shell-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex: none;
}
body.app-shell .brand-mark img { display: block; width: 1.9rem; height: 1.9rem; border-radius: var(--shell-radius-sm); }
body.app-shell .brand-copy strong { font-size: .875rem; font-weight: 650; }

body.app-shell .sidebar-nav { display: flex; flex-direction: column; gap: .0625rem; }
body.app-shell .sidebar-nav-group { display: flex; flex-direction: column; gap: .0625rem; margin-bottom: .375rem; }

body.app-shell .sidebar-section-label {
  margin: .625rem .5rem .1875rem;
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--shell-muted);
}

body.app-shell .sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.95rem;
  padding: 0 .5rem;
  border-radius: var(--shell-radius-sm);
  color: var(--shell-ink-soft);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
body.app-shell .sidebar-link:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
body.app-shell .sidebar-link[aria-current="page"] {
  background: var(--shell-accent-soft);
  color: var(--shell-accent-ink);
  font-weight: 600;
}
body.app-shell .sidebar-link[aria-current="page"] .nav-icon { color: var(--shell-accent); }
body.app-shell .sidebar-link:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 1px; }

body.app-shell .nav-icon { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; flex: none; color: var(--shell-faint); }
body.app-shell .nav-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

body.app-shell .sidebar-badge {
  margin-left: auto;
  min-width: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--shell-danger-soft);
  color: var(--shell-danger);
  font-size: .65rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.15rem;
}

body.app-shell .sidebar-support { margin-top: .375rem; }
body.app-shell .sidebar-support,
body.app-shell .sidebar-logout {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.95rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: var(--shell-radius-sm);
  background: none;
  color: var(--shell-muted);
  font: inherit;
  font-size: .8125rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
body.app-shell .sidebar-support:hover,
body.app-shell .sidebar-logout:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }

/* Account block ------------------------------------------------------------ */

body.app-shell .sidebar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .375rem;
  padding: .375rem .5rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface-soft);
  color: var(--shell-ink);
}
body.app-shell .sidebar-user .user-copy { width: 100%; }
body.app-shell .user-initials {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 999px;
  background: var(--shell-accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 650;
}
body.app-shell .user-copy { display: grid; min-width: 0; line-height: 1.25; }
body.app-shell .user-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .user-copy strong { font-size: .78rem; font-weight: 600; }
body.app-shell .user-copy span { font-size: .68rem; color: var(--shell-muted); }
body.app-shell .sidebar-workspace {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .5rem .45rem;
  border-top: 1px solid var(--shell-line-soft);
}
body.app-shell .workspace-business-mark {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  border-radius: 999px;
  background: var(--shell-accent-soft);
  color: var(--shell-accent-ink);
  font-size: .62rem;
  font-weight: 750;
}
body.app-shell .workspace-copy {
  display: grid;
  min-width: 0;
}
body.app-shell .workspace-copy strong {
  overflow: hidden;
  color: var(--shell-ink);
  font-size: .78rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top bar ------------------------------------------------------------------ */

body.app-shell .app-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .625rem;
  height: var(--shell-topbar-h);
  padding: 0 1.25rem;
  background: var(--shell-topbar-bg);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--shell-line);
}

body.app-shell .topbar-workspace {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--shell-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.app-shell .global-search { position: relative; display: flex; align-items: center; flex: 1 1 15rem; min-width: 15rem; max-width: 22rem; margin-left: auto; }
body.app-shell .global-search .search-icon { position: absolute; left: .72rem; z-index: 1; width: 1rem; height: 1rem; margin: 0; pointer-events: none; color: var(--shell-muted); }
body.app-shell .global-search .search-icon svg { width: 1rem; height: 1rem; }
body.app-shell .global-search input {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  margin: 0;
  padding: 0 .625rem 0 2.3rem;
  box-sizing: border-box;
  text-indent: 0;
  line-height: 1.25;
  appearance: none;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-surface-sunken);
  font-size: .8125rem;
}
body.app-shell .global-search input:focus {
  background: var(--shell-surface);
  border-color: var(--shell-accent);
  box-shadow: 0 0 0 3px var(--shell-accent-soft);
  outline: none;
}
body.app-shell .global-search-results {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 20rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow-lg);
}
body.app-shell .search-result {
  display: block;
  padding: .4rem .5rem;
  border-radius: var(--shell-radius-sm);
  color: var(--shell-ink);
  font-size: .8125rem;
  text-decoration: none;
}
body.app-shell .search-result:hover { background: var(--shell-surface-sunken); }
body.app-shell .search-message { margin: 0; padding: .5rem; color: var(--shell-muted); font-size: .78rem; }

body.app-shell .topbar-actions { display: flex; align-items: center; gap: .375rem; }
body.app-shell .topbar-action,
body.app-shell .topbar-help {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2rem;
  padding: 0 .625rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-surface);
  color: var(--shell-ink-soft);
  font-size: .78rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
body.app-shell .topbar-action:hover,
body.app-shell .topbar-help:hover { background: var(--shell-surface-sunken); border-color: var(--shell-line-strong); }
body.app-shell .topbar-action-primary {
  background: var(--shell-accent);
  border-color: var(--shell-accent);
  color: #fff;
  font-weight: 600;
}
body.app-shell .topbar-action-primary:hover { background: var(--shell-accent-strong); border-color: var(--shell-accent-strong); }
body.app-shell .topbar-action-plus { font-size: .95rem; line-height: 1; margin-top: -1px; }
body.app-shell .shell-menu-toggle { display: none; }
body.app-shell .dashboard-intro-tools .app-topbar {
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

body.app-shell .nav-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  background: var(--shell-accent);
  transition: width .18s ease;
}

/* Main canvas -------------------------------------------------------------- */

/* Scoped to the shell rather than the `app-main` class: several app pages carry
   only `<main id="main">`, and without this they inherit the base layer's narrow
   auth-form width (~544px) instead of the application canvas. */
body.app-shell main {
  grid-area: main;
  min-width: 0;
  /* The shared base layer sizes `main` for auth and legal forms with
     `width: min(100% - 2rem, 34rem)` plus a vertical page margin. Both the
     width and the margin must be released here, not just max-width. */
  width: auto;
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.25rem 2.5rem;
}

/* Every module shares one contained, compact canvas. */
main[data-route-label]:not(:has(.dashboard-shell)) > *,
body.app-shell .dashboard-shell {
  max-width: var(--shell-max);
  margin-inline: auto;
}

/* Route-level atomic loading keeps geometry stable while data arrives. */
main[data-route-atomic][data-route-ready="false"] { visibility: hidden; }

/* --------------------------------------------------------------------------
   Typography and page headers
   -------------------------------------------------------------------------- */

body.app-shell h1 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.018em; margin: 0; }
body.app-shell h2 { font-size: .95rem; font-weight: 640; letter-spacing: -.008em; margin: 0; }
body.app-shell h3 { font-size: .85rem; font-weight: 620; margin: 0; }
body.app-shell .lead { margin: .1875rem 0 0; color: var(--shell-muted); font-size: .8125rem; }

body.app-shell .eyebrow {
  margin: 0 0 .0625rem;
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--shell-muted);
}

body.app-shell .page-head,
body.app-shell .dashboard-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
body.app-shell .page-head { align-items: center; }
body.app-shell .page-head > div { min-width: 0; }
body.app-shell .page-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
body.app-shell .page-head-disclosure { margin-left: auto; }
body.app-shell .dashboard-intro-copy { min-width: 0; }
body.app-shell .dashboard-intro-tools,
body.app-shell .dashboard-intro-actions { display: flex; align-items: center; gap: .5rem; }

body.app-shell .dashboard-context-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .375rem;
  color: var(--shell-muted);
  font-size: .75rem;
}
body.app-shell .dashboard-context-item { display: inline-flex; align-items: center; gap: .3rem; }
body.app-shell .dashboard-context-item svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.app-shell .dashboard-context-separator { color: var(--shell-line-strong); }

/* Today is intentionally a quiet operating surface. The inline summary carries
   live context without turning the first viewport into a wall of KPI tiles. */
body.app-shell .today-inline-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: -.3rem 0 .875rem;
  padding: .55rem .75rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow-xs);
}
body.app-shell .today-inline-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: var(--shell-muted);
  font-size: .72rem;
  white-space: nowrap;
}
body.app-shell .today-inline-summary > span + span { padding-left: 1rem; border-left: 1px solid var(--shell-line-soft); }
body.app-shell .today-inline-summary strong { color: var(--shell-ink); font-size: .95rem; font-weight: 650; font-variant-numeric: tabular-nums; }

body.app-shell .section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}
body.app-shell .section-heading-row-outer { margin-bottom: .5rem; }
body.app-shell .section-count { color: var(--shell-muted); font-size: .75rem; font-weight: 550; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

body.app-shell .card {
  padding: .875rem 1rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow-xs);
  margin: 0 0 var(--shell-gap);
}
body.app-shell .page-surface { padding: 1rem 1.125rem; }
body.app-shell .work-overview { display: grid; gap: .875rem; }
body.app-shell .work-overview > .page-head { margin-bottom: 0; }
body.app-shell .work-operations { display: grid; gap: .875rem; }
body.app-shell .work-operations > .dashboard-grid { margin: 0; }
body.app-shell .module-panel { min-width: 0; }
body.app-shell .module-panel + .module-panel { padding-top: .75rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-context-panel { margin-bottom: 0; padding: .625rem .75rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius); background: var(--shell-surface-soft); }
body.app-shell .workspace-context-panel .review-heading-row { margin-bottom: .25rem; }
body.app-shell main:has(.dashboard-shell) > .dashboard-shell > .workspace-context-panel { display: none; }

/* Content-driven geometry: panels size to their content. Fixed floors created
   dead vertical space on quiet days, which is the defect this pass removes. */
.dashboard-attention,
body.app-shell .dashboard-summary { min-height: 0; }

body.app-shell .dashboard-grid,
body.app-shell .dashboard-secondary-grid {
  display: grid;
  gap: var(--shell-gap);
  margin-bottom: var(--shell-gap);
}
body.app-shell .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
body.app-shell .dashboard-secondary-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
body.app-shell .dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .95fr); gap: var(--shell-gap); align-items: start; margin-bottom: var(--shell-gap); }
body.app-shell .dashboard-main-grid > .card { min-width: 0; margin-bottom: 0; }

body.app-shell .dashboard-work-lower-grid {
  display: grid;
  gap: var(--shell-gap);
  margin-bottom: var(--shell-gap);
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .85fr);
}
body.app-shell .dashboard-work-lower-grid--today { grid-template-columns: minmax(0, 1fr); }
body.app-shell .dashboard-main-grid.dashboard-work-lower-grid--today { grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .95fr); }
body.app-shell .dashboard-lower-side { display: flex; flex-direction: column; gap: var(--shell-gap); min-height: 0; }
body.app-shell .dashboard-lower-side .card { margin: 0; }

body.app-shell .dashboard-section { margin-bottom: var(--shell-gap); }

/* Compact creation disclosures keep the default view focused on live work while
   preserving the existing forms, field names and event handlers. */
body.app-shell .creation-disclosure { min-width: 0; }
body.app-shell .creation-disclosure > summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
}
body.app-shell .creation-disclosure > summary::-webkit-details-marker { display: none; }
body.app-shell .creation-disclosure > summary::after { content: '+'; color: var(--shell-faint); font-size: 1rem; font-weight: 500; }
body.app-shell .creation-disclosure[open] > summary::after { content: '−'; }
body.app-shell .creation-disclosure > summary.button { margin: 0; }
body.app-shell .creation-disclosure > summary.creation-summary { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
body.app-shell .creation-disclosure > summary.creation-summary::after { margin-left: auto; }
body.app-shell .creation-disclosure > summary.creation-summary .button { pointer-events: none; }
body.app-shell .disclosure-panel { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .disclosure-panel form { max-width: none; margin-top: 0; }
body.app-shell .compact-disclosure { margin: .5rem 0 .75rem; }
body.app-shell .compact-disclosure > summary { min-height: 2rem; padding: .35rem .65rem; font-size: .78rem; }
body.app-shell .filter-disclosure { display: flex; justify-content: flex-end; margin: -.1rem 0 .75rem; }
body.app-shell .filter-disclosure > summary { min-height: 2rem; padding: 0 .65rem; }
body.app-shell .filter-disclosure > form { width: 100%; max-width: 42rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .settings-edit-disclosure { margin-top: .25rem; }
body.app-shell .settings-edit-disclosure > summary { width: fit-content; min-height: 2rem; padding: 0 .7rem; }
body.app-shell .settings-edit-disclosure > form { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--shell-line-soft); }

/* Calendar ----------------------------------------------------------------- */
body.app-shell .calendar-shell { min-width: 0; gap: 0; }
body.app-shell .calendar-page-head { align-items: center; margin-bottom: .75rem; }
body.app-shell .calendar-page-head h1 { font-size: 1.35rem; }
body.app-shell .calendar-booking-disclosure { position: relative; margin-left: auto; }
body.app-shell .calendar-booking-disclosure > summary { min-height: 2.25rem; padding-inline: .8rem; }
body.app-shell .calendar-booking-disclosure > summary::-webkit-details-marker { display: none; }
body.app-shell .calendar-booking-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 25;
  width: 34rem;
  max-width: calc(100dvw - 2rem);
  max-height: min(48rem, calc(100vh - var(--shell-topbar-h) - 1.5rem));
  max-height: min(48rem, calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom)));
  padding: 1rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-lg);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.app-shell .calendar-booking-panel-head { margin-bottom: .75rem; }
body.app-shell .calendar-booking-panel-head h2 { font-size: .95rem; }
body.app-shell .calendar-booking-panel-head p { margin: .15rem 0 0; color: var(--shell-muted); font-size: .78rem; }
body.app-shell .calendar-booking-panel .form-grid { flex: 1 1 auto; min-height: 0; margin: 0; max-width: none; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
body.app-shell .calendar-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.app-shell .calendar-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.app-shell .calendar-card { padding: 1rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface); box-shadow: var(--shell-shadow-xs); }
body.app-shell .calendar-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(20rem, 1.08fr); gap: 0; }
body.app-shell .calendar-month { min-width: 0; padding-right: 1.25rem; }
body.app-shell .calendar-month-toolbar { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem auto; align-items: center; gap: .4rem; margin-bottom: 1rem; }
body.app-shell .calendar-month-toolbar h2 { text-align: center; font-size: 1rem; font-weight: 650; }
body.app-shell .calendar-chevron { display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--shell-ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer; }
body.app-shell .calendar-chevron:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
body.app-shell .calendar-today-link { min-height: 0; margin: 0; padding: .35rem .55rem; border: 0; border-radius: var(--shell-radius-sm); background: transparent; color: var(--shell-accent); font-size: .75rem; font-weight: 650; cursor: pointer; }
body.app-shell .calendar-today-link:hover { background: var(--shell-accent-soft); }
body.app-shell .calendar-weekdays,
body.app-shell .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.app-shell .calendar-weekdays { margin-bottom: .35rem; color: var(--shell-muted); font-size: .68rem; font-weight: 650; text-align: center; }
body.app-shell .calendar-weekdays span { display: grid; place-items: center; min-height: 1.7rem; }
body.app-shell .calendar-grid { row-gap: .2rem; }
body.app-shell .calendar-day { display: flex; min-height: 3.65rem; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; padding: .15rem; border: 0; border-radius: 999px; background: transparent; }
body.app-shell .calendar-day--muted { opacity: .42; }
body.app-shell .calendar-day-number { display: grid; place-items: center; align-self: center; width: 2.35rem; height: 2.35rem; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--shell-ink-soft); font-size: .8rem; font-weight: 600; cursor: pointer; }
body.app-shell .calendar-day-number:hover { background: var(--shell-accent-soft); color: var(--shell-accent-ink); }
body.app-shell .calendar-day-number:focus-visible,
body.app-shell .calendar-chevron:focus-visible,
body.app-shell .calendar-today-link:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
body.app-shell .calendar-day--selected .calendar-day-number { background: var(--shell-accent); color: #fff; }
body.app-shell .calendar-day--selected .calendar-day-number:hover { background: var(--shell-accent-strong); }
body.app-shell .calendar-day--today:not(.calendar-day--selected) .calendar-day-number { box-shadow: inset 0 0 0 1px var(--shell-accent); color: var(--shell-accent-ink); }
body.app-shell .calendar-day-number:disabled { cursor: default; }
body.app-shell .calendar-day-dot { width: .28rem; height: .28rem; border-radius: 999px; background: var(--shell-accent); }
body.app-shell .calendar-agenda { min-width: 0; min-height: 23rem; padding: 0 0 0 1.25rem; border: 0; border-left: 1px solid var(--shell-line-soft); border-radius: 0; background: transparent; }
body.app-shell .calendar-agenda-head { display: flex; align-items: center; min-height: 2.35rem; margin-bottom: .7rem; }
body.app-shell .calendar-agenda-head h2 { font-size: 1rem; }
body.app-shell .calendar-agenda-list { display: grid; gap: 0; }
body.app-shell .calendar-agenda-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .65rem; padding: .75rem 0; border: 0; border-top: 1px solid var(--shell-line-soft); border-radius: 0; background: transparent; }
body.app-shell .calendar-agenda-item:first-child { border-top: 0; padding-top: .2rem; }
body.app-shell .calendar-agenda-time { padding-top: .1rem; color: var(--shell-ink); font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
body.app-shell .calendar-agenda-copy { display: grid; gap: .3rem; min-width: 0; }
body.app-shell .calendar-agenda-event { display: grid; min-width: 0; gap: .1rem; padding: 0; background: transparent; color: inherit; text-decoration: none; }
body.app-shell .calendar-agenda-event:hover { background: transparent; }
body.app-shell .calendar-agenda-event strong { display: block; overflow: hidden; color: var(--shell-ink); font-size: .84rem; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .calendar-agenda-event span { display: block; color: var(--shell-muted); font-size: .76rem; }
body.app-shell .calendar-event-actions { margin-top: .1rem; }
body.app-shell .calendar-event-actions .button { min-height: 1.8rem; padding: 0 .5rem; font-size: .7rem; }
body.app-shell .calendar-reschedule-form { display: grid; gap: .45rem; padding-top: .55rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .calendar-reschedule-form label { color: var(--shell-muted); font-size: .7rem; }
body.app-shell .calendar-reschedule-form input { min-height: 2rem; padding: .35rem .45rem; font-size: .75rem; }
body.app-shell .calendar-empty { display: grid; gap: .5rem; align-content: start; margin: .2rem 0; color: var(--shell-muted); font-size: .82rem; }
body.app-shell .calendar-empty p { margin: 0; }
body.app-shell .calendar-empty-action { width: fit-content; min-height: 2rem; margin: 0; padding: 0 .65rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); color: var(--shell-accent); font-size: .75rem; font-weight: 650; cursor: pointer; }
body.app-shell .calendar-empty-action:hover { background: var(--shell-accent-soft); border-color: var(--shell-accent); }

/* --------------------------------------------------------------------------
   Priority strip — the "what needs attention" row on Today
   -------------------------------------------------------------------------- */

.dashboard-kpi-strip {
  display: grid;
  /* Wide enough that the label never has to truncate; wraps to two rows
     rather than squeezing four tiles onto a narrow canvas. */
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .625rem;
  margin-bottom: var(--shell-gap);
}
/* Below the tile's comfortable width the supporting note is dropped before the
   label is ever compromised. */
@media (max-width: 1240px) {
  body.app-shell .dashboard-kpi-note { display: none; }
}

.dashboard-kpi {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.dashboard-kpi:hover { border-color: var(--shell-line-strong); box-shadow: var(--shell-shadow); transform: translateY(-1px); }

body.app-shell .dashboard-kpi-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--shell-radius-sm);
  background: var(--shell-accent-soft);
  color: var(--shell-accent);
}
body.app-shell .dashboard-kpi-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.app-shell .dashboard-kpi--orange .dashboard-kpi-icon { background: var(--shell-warning-soft); color: var(--shell-warning); }
body.app-shell .dashboard-kpi--green .dashboard-kpi-icon { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .dashboard-kpi--violet .dashboard-kpi-icon { background: var(--shell-violet-soft); color: var(--shell-violet); }

body.app-shell .dashboard-kpi-copy { display: grid; gap: .0625rem; min-width: 0; line-height: 1.25; }
body.app-shell .dashboard-kpi-copy strong { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
/* The label is the meaning of the tile and must never be truncated; only the
   secondary note clamps, and it drops out entirely when tiles get narrow. */
body.app-shell .dashboard-kpi-label { font-size: .75rem; font-weight: 550; color: var(--shell-ink-soft); }
body.app-shell .dashboard-kpi-note {
  font-size: .68rem;
  color: var(--shell-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-shell .dashboard-kpi-arrow { margin-left: auto; color: var(--shell-faint); font-size: 1rem; }

/* --------------------------------------------------------------------------
   Queues, lists and rows
   -------------------------------------------------------------------------- */

body.app-shell .queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.app-shell .queue-list > li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5625rem 0;
  border-top: 1px solid var(--shell-line-soft);
  font-size: .8125rem;
}
body.app-shell .queue-list > li:first-child { border-top: 0; }
body.app-shell .queue-meta { color: var(--shell-muted); font-size: .78rem; }
body.app-shell .queue-list strong { font-weight: 600; }

body.app-shell .today-work-grid { display: grid; gap: .5rem; }
body.app-shell .today-work-grid > * { margin: 0; }

body.app-shell .summary-list { display: grid; gap: .0625rem; }
body.app-shell .summary-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .4375rem 0;
  border-top: 1px solid var(--shell-line-soft);
  font-size: .8125rem;
}
body.app-shell .summary-list > div:first-child { border-top: 0; }
body.app-shell .summary-list span { color: var(--shell-muted); }
body.app-shell .summary-list strong { font-weight: 650; font-variant-numeric: tabular-nums; }

body.app-shell .summary-link,
body.app-shell .attention-footer-link,
body.app-shell .activity-footer-link,
body.app-shell .text-action {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
  color: var(--shell-accent);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
body.app-shell .text-action { margin-top: 0; }
body.app-shell .summary-link:hover,
body.app-shell .attention-footer-link:hover,
body.app-shell .activity-footer-link:hover,
body.app-shell .text-action:hover { text-decoration: underline; text-underline-offset: .16em; }

/* --------------------------------------------------------------------------
   Empty states — deliberately compact, never a void
   -------------------------------------------------------------------------- */

body.app-shell .attention-empty,
body.app-shell .today-work-empty,
body.app-shell .activity-empty,
body.app-shell .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-height: 0;
  padding: 1.25rem .75rem;
  border-radius: var(--shell-radius);
  background: var(--shell-surface-soft);
  text-align: center;
  color: var(--shell-muted);
  font-size: .8125rem;
}
body.app-shell .empty-state { margin: 0; }
body.app-shell .attention-empty strong,
body.app-shell .today-work-empty strong { color: var(--shell-ink); font-size: .85rem; font-weight: 600; }
body.app-shell .attention-empty-note { font-size: .78rem; color: var(--shell-muted); }

body.app-shell .attention-empty-icon,
body.app-shell .today-work-empty-icon,
body.app-shell .activity-empty-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: .125rem;
  border-radius: 999px;
  background: var(--shell-success-soft);
  color: var(--shell-success);
}
body.app-shell .attention-empty-icon svg,
body.app-shell .today-work-empty-icon svg,
body.app-shell .activity-empty-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

body.app-shell .table-wrap { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; }
body.app-shell table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
body.app-shell thead th {
  padding: 0 .625rem .4375rem;
  border-bottom: 1px solid var(--shell-line);
  color: var(--shell-muted);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
body.app-shell tbody td {
  padding: .5625rem .625rem;
  border-bottom: 1px solid var(--shell-line-soft);
  vertical-align: middle;
}
body.app-shell tbody tr:last-child td { border-bottom: 0; }
body.app-shell tbody tr:hover { background: var(--shell-surface-soft); }
body.app-shell thead th:first-child,
body.app-shell tbody td:first-child { padding-left: 0; }
body.app-shell thead th:last-child,
body.app-shell tbody td:last-child { padding-right: 0; }
body.app-shell .table-primary-link { color: var(--shell-ink); font-weight: 600; text-decoration: none; }
body.app-shell .table-primary-link:hover { color: var(--shell-accent); text-decoration: underline; text-underline-offset: .16em; }
/* Money must never break across lines: "$1,250.00" is one token. */
body.app-shell .num, body.app-shell .amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Badges and status
   -------------------------------------------------------------------------- */

body.app-shell .badge,
body.app-shell .pill,
body.app-shell .status-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--shell-surface-sunken);
  color: var(--shell-ink-soft);
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}
body.app-shell .badge-success, body.app-shell .is-paid, body.app-shell .is-complete { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .badge-warning, body.app-shell .is-pending, body.app-shell .is-sent { background: var(--shell-warning-soft); color: var(--shell-warning); }
body.app-shell .badge-danger, body.app-shell .is-overdue { background: var(--shell-danger-soft); color: var(--shell-danger); }
body.app-shell .badge-accent, body.app-shell .is-draft { background: var(--shell-accent-soft); color: var(--shell-accent-ink); }

/* --------------------------------------------------------------------------
   Buttons — three clear tiers
   -------------------------------------------------------------------------- */

body.app-shell .button,
body.app-shell button:not(.sidebar-logout):not(.shell-menu-toggle):not(.topbar-action):not(.calendar-day-number):not(.calendar-chevron):not(.calendar-today-link):not(.calendar-empty-action):not(.revenue-tab):not(.revenue-reset):not(.revenue-card-action):not(.workspace-reset):not(.workspace-detail-action):not(.workspace-secondary-action):not(.workspace-inline-toggle):not(.workspace-filter-button):not(.workspace-detail-back):not(.contextual-return):not(.detail-modal-close):not(.workspace-record-action),
body.app-shell .shell-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.125rem;
  padding: 0 .8125rem;
  border: 1px solid var(--shell-accent);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-accent);
  color: #fff;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
body.app-shell .button:hover,
body.app-shell button:not(.sidebar-logout):not(.shell-menu-toggle):not(.topbar-action):not(.calendar-day-number):not(.calendar-chevron):not(.calendar-today-link):not(.calendar-empty-action):not(.revenue-tab):not(.revenue-reset):not(.revenue-card-action):not(.workspace-reset):not(.workspace-detail-action):not(.workspace-secondary-action):not(.workspace-inline-toggle):not(.workspace-filter-button):not(.workspace-detail-back):not(.contextual-return):not(.detail-modal-close):not(.workspace-record-action):hover {
  background: var(--shell-accent-strong);
  border-color: var(--shell-accent-strong);
}
body.app-shell .button:focus-visible,
body.app-shell button:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }

body.app-shell .button.secondary,
body.app-shell button.secondary {
  background: var(--shell-surface);
  border-color: var(--shell-line-strong);
  color: var(--shell-ink);
}
body.app-shell .button.secondary:hover,
body.app-shell button.secondary:hover { background: var(--shell-surface-sunken); border-color: var(--shell-line-strong); }

body.app-shell .button.tertiary,
body.app-shell button.tertiary,
body.app-shell .button.link {
  background: none;
  border-color: transparent;
  color: var(--shell-accent);
  padding-inline: .375rem;
}
body.app-shell .button.tertiary:hover,
body.app-shell button.tertiary:hover { background: var(--shell-accent-soft); border-color: transparent; }

body.app-shell .button.danger,
body.app-shell button.danger { background: var(--shell-danger); border-color: var(--shell-danger); }

body.app-shell .button[disabled],
body.app-shell button[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Forms — contained, two-column where it helps
   -------------------------------------------------------------------------- */

body.app-shell form { max-width: 42rem; }
body.app-shell .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
body.app-shell .form-grid .full { grid-column: 1 / -1; }

body.app-shell label { display: block; font-size: .75rem; font-weight: 600; color: var(--shell-ink-soft); }
body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([data-global-search-input]):not([data-workspace-search]):not([data-recovery-search]):not([data-revenue-search]),
body.app-shell select,
body.app-shell textarea {
  width: 100%;
  min-height: 2.125rem;
  margin-top: .25rem;
  padding: .375rem .5625rem;
  border: 1px solid var(--shell-line-strong);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-surface);
  color: var(--shell-ink);
  font: inherit;
  font-size: .8125rem;
}
body.app-shell textarea { min-height: 4.5rem; padding-top: .5rem; }
body.app-shell input:focus, body.app-shell select:focus, body.app-shell textarea:focus {
  border-color: var(--shell-accent);
  box-shadow: 0 0 0 3px var(--shell-accent-soft);
  outline: none;
}
body.app-shell .field-hint { margin: .1875rem 0 0; color: var(--shell-muted); font-size: .72rem; }
body.app-shell .form-context {
  margin: 0 0 .75rem;
  padding: .5rem .625rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-surface-soft);
  color: var(--shell-muted);
  font-size: .78rem;
}

/* --------------------------------------------------------------------------
   Drawer / modal creation surfaces
   -------------------------------------------------------------------------- */

body.app-shell .drawer-backdrop,
body.app-shell .dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--shell-overlay);
  backdrop-filter: blur(2px);
}
body.app-shell .drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 51;
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--shell-surface);
  border-left: 1px solid var(--shell-line);
  box-shadow: var(--shell-shadow-lg);
}
body.app-shell .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--shell-line);
}
body.app-shell .drawer-body { flex: 1; overflow-y: auto; padding: 1rem; }
body.app-shell .drawer-body form { max-width: none; }
body.app-shell .drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--shell-line);
  background: var(--shell-surface-soft);
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.settings-subnav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  padding: .25rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-surface-soft);
}
.settings-subnav a {
  padding: .5rem .6rem;
  border-radius: var(--shell-radius-sm);
  color: var(--shell-muted);
  font-size: .8125rem;
  font-weight: 550;
  text-decoration: none;
}
.settings-subnav a:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
.settings-subnav a[aria-current="page"] { background: var(--shell-accent-soft); color: var(--shell-accent-ink); font-weight: 600; }
body.app-shell .settings-subnav a[data-active="true"] { color: var(--shell-accent-strong); box-shadow: inset 0 -2px 0 var(--shell-accent); }
body.app-shell .settings-context { margin: -.2rem 0 .5rem; color: var(--shell-muted); font-size: .78rem; }
body.app-shell .settings-current-workspace { margin: 0 0 .6rem; color: var(--shell-ink); font-size: .82rem; }
body.app-shell .settings-workspace-group { padding-bottom: .1rem; border-bottom: 1px solid var(--shell-line-soft); }
body.app-shell .settings-workspace-group > .card { margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Misc module surfaces
   -------------------------------------------------------------------------- */

body.app-shell .opportunity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .625rem; }
body.app-shell .opportunity-card {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0;
  padding: .75rem .8125rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
body.app-shell .opportunity-card:hover { border-color: var(--shell-line-strong); box-shadow: var(--shell-shadow); transform: translateY(-1px); }
body.app-shell .opportunity-icon {
  display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; flex: none;
  border-radius: var(--shell-radius-sm);
  font-size: .75rem; font-weight: 700;
  background: var(--shell-accent-soft); color: var(--shell-accent);
}
body.app-shell .opportunity-icon-orange { background: var(--shell-warning-soft); color: var(--shell-warning); }
body.app-shell .opportunity-icon-green { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .opportunity-copy { display: grid; gap: .0625rem; min-width: 0; }
body.app-shell .opportunity-copy strong { font-size: .8125rem; font-weight: 600; }
body.app-shell .opportunity-copy span { font-size: .72rem; color: var(--shell-muted); }
body.app-shell .opportunity-arrow { margin-left: auto; color: var(--shell-faint); }

body.app-shell .revenue-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .625rem;
  margin-bottom: .75rem;
}
body.app-shell .revenue-overview-grid > div {
  padding: .625rem .75rem;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-sm);
  background: var(--shell-surface-soft);
}
body.app-shell .revenue-overview-grid strong { display: block; font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.app-shell .revenue-overview-grid span { font-size: .72rem; color: var(--shell-muted); }

/* --------------------------------------------------------------------------
   Invoices & Receipts money workspace
   -------------------------------------------------------------------------- */
body.app-shell .revenue-shell { display: grid; gap: .875rem; }
body.app-shell .revenue-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .1rem;
}
body.app-shell .revenue-page-head h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
body.app-shell .revenue-page-head .lead { margin: .15rem 0 0; font-size: .78rem; color: var(--shell-muted); }
body.app-shell .revenue-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.app-shell .revenue-create-drawer { position: relative; margin-left: auto; }
body.app-shell .revenue-create-drawer > summary {
  min-height: 2.25rem; margin: 0; padding: .45rem .85rem;
  list-style: none; cursor: pointer;
}
body.app-shell .revenue-create-drawer > summary::-webkit-details-marker { display: none; }
body.app-shell .revenue-drawer-panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 35;
  width: 34rem; max-width: calc(100dvw - 2rem); max-height: min(48rem, calc(100vh - var(--shell-topbar-h) - 1.5rem)); max-height: min(48rem, calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom))); padding: 1rem;
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg);
  background: var(--shell-surface); box-shadow: var(--shell-shadow-lg);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
body.app-shell .revenue-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
body.app-shell .revenue-drawer-head h2 { margin: 0; font-size: 1rem; }
body.app-shell .revenue-drawer-head p { margin: .2rem 0 0; color: var(--shell-muted); font-size: .75rem; }
body.app-shell .revenue-drawer-panel > .form-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
body.app-shell .revenue-tabs {
  display: inline-flex; width: max-content; padding: .2rem;
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm);
  background: var(--shell-surface-soft);
}
body.app-shell .revenue-tab {
  min-height: 2rem; margin: 0; padding: .35rem .85rem; border: 0;
  border-radius: calc(var(--shell-radius-sm) - .1rem); background: transparent;
  color: var(--shell-muted); font-size: .78rem; font-weight: 650; cursor: pointer;
}
body.app-shell .revenue-tab.is-active { background: var(--shell-surface); color: var(--shell-accent); box-shadow: var(--shell-shadow-xs); }
body.app-shell .revenue-tab:focus-visible,
body.app-shell .revenue-reset:focus-visible,
body.app-shell .revenue-card-action:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
body.app-shell .revenue-tools { display: grid; gap: .6rem; }
body.app-shell .revenue-search { position: relative; display: flex; margin: 0; }
body.app-shell .revenue-search input {
  width: 100%; min-height: 2.75rem; margin: 0; padding: .55rem .75rem .55rem 2.2rem; box-sizing: border-box; text-indent: 0; line-height: 1.25; appearance: none;
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm);
  background: var(--shell-surface); color: var(--shell-ink);
}
body.app-shell .revenue-search-icon { position: absolute; left: .75rem; top: 50%; display: grid; place-items: center; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--shell-muted); font-size: 0; line-height: 1; pointer-events: none; }
body.app-shell .revenue-search-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.app-shell .revenue-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
body.app-shell .revenue-filter-row label { margin: 0; }
body.app-shell .revenue-filter-row select,
body.app-shell .revenue-custom-range input {
  min-height: 2.25rem; margin: 0; padding: .4rem .7rem;
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm);
  background: var(--shell-surface); color: var(--shell-ink); font-size: .76rem;
}
body.app-shell .revenue-reset { min-height: 2.25rem; margin: 0; padding: .35rem .2rem; border: 0; background: transparent; color: var(--shell-accent); font-size: .76rem; font-weight: 650; cursor: pointer; }
body.app-shell .revenue-custom-range { display: flex; flex-wrap: wrap; gap: .6rem; }
body.app-shell .revenue-custom-range label { display: grid; gap: .2rem; color: var(--shell-muted); font-size: .72rem; }
body.app-shell .revenue-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
body.app-shell .revenue-summary-strip article {
  display: grid; gap: .15rem; min-width: 0; padding: .7rem .85rem;
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm);
  background: var(--shell-surface); box-shadow: var(--shell-shadow-xs);
}
body.app-shell .revenue-summary-strip article span { color: var(--shell-muted); font-size: .72rem; }
body.app-shell .revenue-summary-strip article strong { font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.app-shell .revenue-summary-strip .revenue-summary--danger { border-color: var(--shell-danger-soft); }
body.app-shell .revenue-summary-strip .revenue-summary--danger strong { color: var(--shell-danger); }
body.app-shell .revenue-summary-strip .revenue-summary--success { border-color: var(--shell-success-soft); }
body.app-shell .revenue-summary-strip .revenue-summary--success strong { color: var(--shell-success); }
body.app-shell .revenue-record-section { min-width: 0; }
body.app-shell .revenue-table-head { display: grid; grid-template-columns: minmax(11rem, 1.2fr) minmax(9rem, 1fr) minmax(7rem, .75fr) minmax(8rem, .85fr) minmax(5rem, .6fr) minmax(12rem, 1.35fr); gap: .65rem; padding: .6rem .9rem; border: 1px solid var(--shell-line); border-bottom: 0; border-radius: var(--shell-radius-lg) var(--shell-radius-lg) 0 0; background: var(--shell-surface-soft); color: var(--shell-muted); font-size: .61rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.app-shell .revenue-record-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.app-shell .revenue-record-card {
  display: grid; grid-template-columns: minmax(11rem, 1.2fr) minmax(9rem, 1fr) minmax(7rem, .75fr) minmax(8rem, .85fr) minmax(5rem, .6fr) minmax(12rem, 1.35fr); align-items: center; gap: .65rem; min-width: 0; padding: .72rem .9rem;
  border: 1px solid var(--shell-line); border-top: 0; border-radius: 0;
  background: var(--shell-surface); box-shadow: var(--shell-shadow-xs);
}
body.app-shell .revenue-record-card:last-child { border-radius: 0 0 var(--shell-radius-lg) var(--shell-radius-lg); }
body.app-shell .revenue-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
body.app-shell .revenue-record-amount { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.app-shell .revenue-record-head .status-badge { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .18rem .5rem; border-radius: 999px; background: var(--shell-surface-soft); color: var(--shell-muted); font-size: .68rem; font-weight: 650; white-space: nowrap; }
body.app-shell .revenue-record-head .status-badge--sent { background: var(--shell-accent-soft); color: var(--shell-accent-strong); }
body.app-shell .revenue-record-head .status-badge--due-soon { background: var(--shell-warning-soft); color: var(--shell-warning); }
body.app-shell .revenue-record-head .status-badge--overdue { background: var(--shell-danger-soft); color: var(--shell-danger); }
body.app-shell .revenue-record-head .status-badge--paid { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .revenue-record-card h3 { margin: 0; font-size: .9rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .revenue-record-meta { margin: 0; color: var(--shell-muted); font-size: .75rem; overflow-wrap: anywhere; }
body.app-shell .revenue-record-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .1rem .65rem; margin: 0; padding: 0; }
body.app-shell .revenue-record-primary .revenue-table-value { font-weight: 650; }
body.app-shell .revenue-record-amount-cell .revenue-table-value { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.app-shell .revenue-table-cell { display: grid; align-content: center; gap: .08rem; min-width: 0; }
body.app-shell .revenue-table-label { display: none; color: var(--shell-muted); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
body.app-shell .revenue-table-value { min-width: 0; overflow: hidden; color: var(--shell-ink); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .revenue-table-status { overflow: visible; }
body.app-shell .revenue-card-action {
  display: inline-flex; align-items: center; min-height: 2rem; margin: 0; padding: .2rem 0;
  border: 0; background: transparent; color: var(--shell-accent); font-size: .75rem;
  font-weight: 650; text-decoration: none; cursor: pointer;
}
body.app-shell .revenue-card-action--primary { color: var(--shell-accent-strong, var(--shell-accent)); }
body.app-shell .revenue-empty {
  display: grid; gap: .25rem; padding: 1.1rem;
  border: 1px dashed var(--shell-line); border-radius: var(--shell-radius-lg);
  background: var(--shell-surface-soft); color: var(--shell-muted); font-size: .78rem;
}
body.app-shell .revenue-empty strong { color: var(--shell-ink); font-size: .84rem; }
body.app-shell .revenue-empty .revenue-card-action { justify-self: start; margin-top: .25rem; }
body.app-shell .revenue-payment-panel { margin-top: .25rem; }

/* Document previews ------------------------------------------------------- */
body.app-shell .document-view-shell { display: grid; gap: .75rem; max-width: 64rem; margin-inline: auto; }
body.app-shell .document-view-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--shell-line); }
body.app-shell .document-view-heading { display: flex; align-items: center; gap: .65rem; min-width: 0; }
body.app-shell .document-view-heading h1 { overflow-wrap: anywhere; }
body.app-shell .document-view-heading .eyebrow { margin-bottom: .15rem; }
body.app-shell .document-view-back { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--shell-ink-soft); font: inherit; font-size: 1.35rem; cursor: pointer; }
body.app-shell .document-view-back:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
body.app-shell .document-view-back:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
body.app-shell .document-view-meta { margin: .15rem 0 0; color: var(--shell-muted); font-size: .78rem; }
body.app-shell .document-view-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
body.app-shell .document-view-actions .button { min-height: 2rem; font-size: .75rem; }
body.app-shell .document-view-status { min-height: 1rem; margin: 0; color: var(--shell-muted); font-size: .75rem; }
body.app-shell .document-preview-frame { min-height: calc(100vh - var(--shell-topbar-h) - 8rem); border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface-sunken); overflow: hidden; }
body.app-shell .document-preview-frame iframe { display: block; width: 100%; height: min(72rem, calc(100vh - var(--shell-topbar-h) - 8rem)); min-height: 36rem; border: 0; background: #fff; }

body.app-shell .workspace-card-identity { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
body.app-shell .workspace-card-icon {
  display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; flex: none;
  border-radius: var(--shell-radius-sm);
  background: var(--shell-teal-soft); color: var(--shell-teal);
}
body.app-shell .workspace-card-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.app-shell .workspace-card-details { display: grid; gap: .0625rem; margin: 0; }
body.app-shell .workspace-card-details > div { display: flex; justify-content: space-between; gap: .75rem; padding: .3125rem 0; border-top: 1px solid var(--shell-line-soft); font-size: .78rem; }
body.app-shell .workspace-card-details > div:first-child { border-top: 0; }
body.app-shell .workspace-card-details dt { color: var(--shell-muted); }
body.app-shell .workspace-card-details dd { margin: 0; font-weight: 600; }

body.app-shell .dashboard-support { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
body.app-shell .dashboard-support-links { display: flex; gap: .75rem; flex-wrap: wrap; margin-left: auto; }
body.app-shell .dashboard-support-links a { color: var(--shell-accent); font-size: .78rem; text-decoration: none; }
body.app-shell .dashboard-support-links a:hover { text-decoration: underline; }

body.app-shell .settings-surface { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .9rem 1.5rem; }
body.app-shell .settings-surface > .page-head { margin-bottom: 0; }
body.app-shell .settings-surface > .page-head,
body.app-shell .settings-surface > .status,
body.app-shell .settings-surface > noscript { grid-column: 1 / -1; }
body.app-shell .settings-surface > .settings-subnav { grid-column: 1; align-self: start; }
body.app-shell .settings-surface > .settings-group,
body.app-shell .settings-surface > .settings-edit-disclosure { grid-column: 2; }
body.app-shell .settings-group { min-width: 0; }
body.app-shell .settings-group--full { grid-column: 1 / -1; }
body.app-shell .settings-group h2 { margin-bottom: .5rem; }
body.app-shell .settings-readonly { display: grid; grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr); gap: .375rem .875rem; margin: 0; font-size: .8rem; }
body.app-shell .settings-readonly dt { color: var(--shell-muted); }
body.app-shell .settings-readonly dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
body.app-shell .settings-form-grid { max-width: 58rem; }
body.app-shell .settings-communications { padding-top: .2rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .settings-communications-card { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); }
body.app-shell .settings-communications-card p { margin: 0; color: var(--shell-ink); font-size: .78rem; }
body.app-shell .settings-communications-card [data-email-actions] { display: flex; flex-wrap: wrap; gap: .4rem; }
body.app-shell .settings-communications-card .button { min-height: 2rem; font-size: .7rem; }
body.app-shell .settings-appearance { padding-top: .2rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .settings-appearance-control { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); }
body.app-shell .settings-appearance-control > div { display: grid; gap: .15rem; min-width: 0; }
body.app-shell .settings-appearance-control strong { font-size: .8rem; }
body.app-shell .settings-appearance-control span:not(.visually-hidden) { color: var(--shell-muted); font-size: .72rem; }
body.app-shell .settings-appearance-control label { margin: 0; }
body.app-shell .settings-appearance-control select { width: auto; min-width: 7rem; margin: 0; }
body.app-shell .settings-embedded-panel { min-width: 0; }
body.app-shell .settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
body.app-shell .settings-section-heading h2 { margin: 0 0 .2rem; }
body.app-shell .settings-profile-form { display: grid; grid-template-columns: minmax(8rem, .55fr) minmax(0, 1.45fr); align-items: center; gap: .55rem .85rem; max-width: 42rem; margin-top: .75rem; }
body.app-shell .settings-profile-form label { color: var(--shell-muted); font-size: .74rem; font-weight: 600; }
body.app-shell .settings-profile-form input { width: 100%; min-height: 2.2rem; margin: 0; padding: .4rem .55rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); color: var(--shell-ink); }
body.app-shell .settings-profile-form small { grid-column: 2; margin-top: -.35rem; color: var(--shell-muted); font-size: .68rem; }
body.app-shell .settings-profile-form .form-actions { grid-column: 2; display: flex; justify-content: flex-start; gap: .5rem; }
body.app-shell .settings-profile-context { max-width: 42rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .settings-security-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
body.app-shell .settings-security-actions .button { min-height: 2.1rem; font-size: .72rem; }
body.app-shell .settings-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
body.app-shell .settings-activity-grid > div { min-width: 0; padding: .75rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); }
body.app-shell .settings-activity-grid h3 { margin: 0 0 .5rem; color: var(--shell-muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
body.app-shell .settings-activity-grid ul { margin: 0; padding: 0; list-style: none; }
body.app-shell .settings-confirmation { margin-top: .75rem; padding: .75rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); }
body.app-shell .settings-confirmation p { margin: 0 0 .6rem; font-size: .8rem; font-weight: 650; }
body.app-shell .team-page { display: grid; gap: .9rem; }
body.app-shell .team-page > h2 { margin-top: .15rem; }
body.app-shell .team-page table { width: 100%; margin: 0; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface); overflow: hidden; }
body.app-shell .team-page th { padding: .62rem .75rem; background: var(--shell-surface-soft); color: var(--shell-muted); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
body.app-shell .team-page td { padding: .75rem; border-top: 1px solid var(--shell-line-soft); color: var(--shell-ink); font-size: .78rem; }
body.app-shell .team-page tbody tr:hover { background: var(--shell-accent-soft); }
/* Older record primitives can still appear inside authenticated settings and
   detail surfaces. Keep their presentation on the same token contract so a
   dark shell never contains a light-mode-only card or row. */
body.app-shell .timeline-item,
body.app-shell .quote-card,
body.app-shell .missed-call-card,
body.app-shell .missed-call-action-box,
body.app-shell .missed-call-final-warning,
body.app-shell .dialog {
  border-color: var(--shell-line);
  background: var(--shell-surface);
  color: var(--shell-ink);
}
body.app-shell .quote-status { background: var(--shell-surface-sunken); color: var(--shell-ink-soft); }
body.app-shell .quote-status[data-status="accepted"] { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .quote-status[data-status="declined"],
body.app-shell .quote-status[data-status="expired"] { background: var(--shell-danger-soft); color: var(--shell-danger); }
body.app-shell .quote-status[data-status="converted"] { background: var(--shell-accent-soft); color: var(--shell-accent-ink); }
body.app-shell .missed-call-status-badge { background: var(--shell-warning-soft); color: var(--shell-warning); }
body.app-shell .missed-call-status-badge[data-state="resolved"] { background: var(--shell-success-soft); color: var(--shell-success); }
body.app-shell .missed-call-final-warning { border-left-color: var(--shell-warning); }
body.app-shell .secondary-button { border-color: var(--shell-line); background: var(--shell-surface); color: var(--shell-ink); }
body.app-shell .queue-list > li { color: var(--shell-ink); }
body.app-shell .queue-list > li strong { color: var(--shell-ink); }
body.app-shell .queue-list > li p { color: var(--shell-muted); }
body.app-shell .communication-composer { width: min(34rem, calc(100dvw - 2rem)); max-width: none; max-height: min(46rem, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface); color: var(--shell-ink); box-shadow: var(--shell-shadow-lg); }
body.app-shell .communication-composer::backdrop { background: var(--shell-overlay); }
body.app-shell .communication-composer-panel { display: flex; flex-direction: column; max-height: min(46rem, calc(100dvh - 2rem)); min-height: 0; padding: 1rem; gap: .65rem; }
body.app-shell .communication-composer-panel header, body.app-shell .communication-composer-panel footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex: 0 0 auto; }
body.app-shell .communication-composer-panel header { padding-bottom: .55rem; border-bottom: 1px solid var(--shell-line-soft); }
body.app-shell .communication-composer-panel h2 { margin: 0; font-size: 1.05rem; }
body.app-shell .communication-composer-panel label { display: grid; gap: .22rem; color: var(--shell-muted); font-size: .72rem; font-weight: 650; }
body.app-shell .communication-composer-panel input, body.app-shell .communication-composer-panel textarea { width: 100%; margin: 0; padding: .48rem .58rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); color: var(--shell-ink); font: inherit; font-size: .8rem; }
body.app-shell .communication-composer-panel textarea { flex: 1 1 auto; min-height: 9rem; resize: vertical; }
body.app-shell .communication-composer-panel footer { justify-content: flex-end; padding-top: .65rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .communication-attachments { margin: 0; color: var(--shell-muted); font-size: .72rem; }
@media (max-width: 560px) { body.app-shell .communication-composer { width: calc(100dvw - 1rem); max-height: calc(100dvh - .5rem); } body.app-shell .communication-composer-panel { max-height: calc(100dvh - .5rem); padding: .8rem; } }

body.app-shell .status { margin: 0; font-size: .78rem; }
body.app-shell .status:empty { display: none; }
body.app-shell .dashboard-status { margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Premium workspace master/detail surfaces
   -------------------------------------------------------------------------- */
body.app-shell .workspace-page { display: grid; gap: .8rem; min-width: 0; }
body.app-shell .workspace-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
body.app-shell .workspace-page-head h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
body.app-shell .workspace-lead { margin: .2rem 0 0; color: var(--shell-muted); font-size: .78rem; }
body.app-shell .workspace-primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: .45rem .82rem; border: 1px solid var(--shell-accent); border-radius: var(--shell-radius-sm); background: var(--shell-accent); color: #fff; font-size: .77rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
body.app-shell .workspace-primary-action:hover { background: var(--shell-accent-strong); color: #fff; }
body.app-shell .workspace-status { min-height: 1rem; margin: 0; color: var(--shell-muted); font-size: .72rem; }
body.app-shell .workspace-page-count { color: var(--shell-muted); font-size: .72rem; }
body.app-shell .workspace-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
body.app-shell .workspace-summary-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .6rem; min-width: 0; padding: .72rem .8rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); box-shadow: var(--shell-shadow-xs); }
body.app-shell .workspace-summary-card[data-tone="warning"] { border-color: var(--shell-warning-soft); }
body.app-shell .workspace-summary-card[data-tone="danger"] { border-color: var(--shell-danger-soft); }
body.app-shell .workspace-summary-card[data-tone="success"] { border-color: var(--shell-success-soft); }
body.app-shell .workspace-summary-icon { display: grid; place-items: center; grid-row: 1 / span 2; width: 1.8rem; height: 1.8rem; border-radius: var(--shell-radius-sm); background: var(--shell-accent-soft); color: var(--shell-accent); font-size: .95rem; font-weight: 750; }
body.app-shell .workspace-summary-card strong { min-width: 0; font-size: 1.1rem; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-shell .workspace-summary-card > span:last-child { color: var(--shell-muted); font-size: .7rem; }
body.app-shell .workspace-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .55rem .65rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); }
body.app-shell .workspace-search { position: relative; display: flex; flex: 1 1 18rem; min-width: 12rem; margin: 0; }
body.app-shell .workspace-search input { width: 100%; min-height: 2.25rem; margin: 0; padding: .42rem .7rem .42rem 2rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); color: var(--shell-ink); font-size: .76rem; }
body.app-shell .workspace-search-icon { position: absolute; left: .7rem; top: 50%; display: grid; place-items: center; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--shell-muted); font-size: 0; line-height: 1; pointer-events: none; }
body.app-shell .workspace-search-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.app-shell .workspace-filter { display: flex; margin: 0; }
body.app-shell .workspace-filter select { min-height: 2.25rem; margin: 0; padding: .4rem .65rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); color: var(--shell-ink); font-size: .73rem; }
body.app-shell .workspace-reset, body.app-shell .workspace-secondary-action, body.app-shell .workspace-detail-action, body.app-shell .workspace-inline-toggle { display: inline-flex; align-items: center; min-height: 2.1rem; margin: 0; padding: .28rem .35rem; border: 0; background: transparent; color: var(--shell-accent); font-size: .73rem; font-weight: 650; text-decoration: none; cursor: pointer; }
body.app-shell .workspace-reset:hover, body.app-shell .workspace-secondary-action:hover, body.app-shell .workspace-detail-action:hover, body.app-shell .workspace-inline-toggle:hover { color: var(--shell-accent-strong); text-decoration: underline; }
body.app-shell .workspace-content { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(18rem, .88fr); align-items: start; gap: .7rem; min-width: 0; }
body.app-shell .workspace-list-panel, body.app-shell .workspace-detail-panel, body.app-shell .workspace-secondary-panel { min-width: 0; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface); box-shadow: var(--shell-shadow-xs); }
body.app-shell .workspace-list-panel { overflow: hidden; }
body.app-shell .workspace-detail-panel { position: sticky; top: calc(var(--shell-topbar-h) + .75rem); min-height: 18rem; padding: .9rem; }
body.app-shell .workspace-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .82rem .9rem; border-bottom: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-panel-head h2 { margin: 0; font-size: .95rem; letter-spacing: -.02em; }
body.app-shell .workspace-eyebrow { margin: 0 0 .2rem; color: var(--shell-muted); font-size: .62rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
body.app-shell .workspace-panel-note { color: var(--shell-muted); font-size: .68rem; }
body.app-shell .workspace-record-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.app-shell .workspace-record-list > li.workspace-record { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta actions"; gap: .3rem .75rem; min-width: 0; margin: 0; padding: .72rem .9rem; border: 0; border-bottom: 1px solid var(--shell-line-soft); border-radius: 0; background: var(--shell-surface); cursor: pointer; }
body.app-shell .workspace-record-list > li.recovery-item, body.app-shell .workspace-record-list > li.quote-card { position: relative; display: grid; gap: .22rem; min-width: 0; margin: 0; padding: .78rem .9rem; border: 0; border-bottom: 1px solid var(--shell-line-soft); border-radius: 0; background: var(--shell-surface); cursor: pointer; }
body.app-shell .workspace-record-list > li:last-child { border-bottom: 0; }
body.app-shell .workspace-record-list > li.workspace-record:hover, body.app-shell .workspace-record-list > li.workspace-record:focus-visible, body.app-shell .workspace-record-list > li.workspace-record.is-selected, body.app-shell .workspace-record-list > li.quote-card:hover, body.app-shell .workspace-record-list > li.quote-card.is-selected { background: var(--shell-accent-soft); outline: none; }
body.app-shell .workspace-record-list > li.workspace-record.is-selected { box-shadow: inset 3px 0 0 var(--shell-accent); }
body.app-shell .workspace-record-list > li.workspace-record strong, body.app-shell .workspace-record-list > li.quote-card strong { color: var(--shell-ink); font-size: .8rem; font-weight: 650; }
body.app-shell .workspace-record-list > li.workspace-record .queue-meta, body.app-shell .workspace-record-list > li.quote-card .queue-meta { margin: 0; color: var(--shell-muted); font-size: .7rem; }
body.app-shell .workspace-record-list > li.workspace-record form.action-row { display: grid; gap: .45rem; margin-top: .35rem; padding-top: .55rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-record-list > li.workspace-record form.action-row[hidden] { display: none; }
body.app-shell .workspace-record-list > li.workspace-record .job-progress-notes { display: none; }
body.app-shell .workspace-record-main { display: grid; grid-area: main; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; min-width: 0; }
body.app-shell .workspace-record-avatar { width: 2.15rem; height: 2.15rem; }
body.app-shell .workspace-record-copy { display: grid; min-width: 0; gap: .12rem; }
body.app-shell .workspace-record-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .workspace-record-subtitle { overflow: hidden; color: var(--shell-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .workspace-record-status { align-self: start; }
body.app-shell .workspace-record-meta { display: grid; grid-area: meta; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 0 2.75rem; min-width: 0; }
body.app-shell .workspace-record-meta-item { display: grid; min-width: 0; gap: .08rem; }
body.app-shell .workspace-record-meta-label { color: var(--shell-muted); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
body.app-shell .workspace-record-meta-item strong { overflow: hidden; font-size: .7rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .workspace-record-actions { display: flex; grid-area: actions; align-items: center; justify-content: flex-end; gap: .45rem; margin: 0; padding: 0; }
body.app-shell .workspace-record-action { display: inline-flex; align-items: center; min-width: 0; min-height: 2rem; margin: 0; padding: .25rem .35rem; border: 0; background: transparent; color: var(--shell-accent); font-size: .72rem; font-weight: 650; text-decoration: none; cursor: pointer; }
body.app-shell .workspace-record-action:hover { color: var(--shell-accent-strong); text-decoration: underline; }
body.app-shell .workspace-record-action:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; border-radius: .25rem; }
/* One dominant action per row: give it the same strong-accent weight already
   used for revenue's primary action, so rows never present several
   equally-weighted controls with no clear next step. */
body.app-shell .workspace-record-action--primary { color: var(--shell-accent-strong, var(--shell-accent)); }
body.app-shell .workspace-record-controls { min-width: 0; }
body.app-shell .workspace-record-controls > summary { display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .35rem; color: var(--shell-accent); font-size: .72rem; font-weight: 650; cursor: pointer; list-style: none; }
body.app-shell .workspace-record-controls > summary::-webkit-details-marker { display: none; }
body.app-shell .workspace-record-controls > summary::after { content: '⌄'; margin-left: .3rem; font-size: .8rem; }
body.app-shell .workspace-record-controls[open] > summary::after { content: '⌃'; }
body.app-shell .workspace-record-controls > form.action-row { min-width: min(28rem, 100%); }
/* Overflow menus used inside table-row action cells (Recovery, Invoices,
   Receipts) drop below the row as a compact list rather than a wide form. */
body.app-shell .workspace-record-actions .workspace-record-controls > .action-row {
  display: grid; gap: .1rem; min-width: min(11rem, 100%); margin-top: .2rem;
}
body.app-shell .workspace-record-actions .workspace-record-controls > .action-row > * { margin: 0; justify-self: start; }
body.app-shell .workspace-detail-placeholder { display: grid; place-items: center; gap: .35rem; min-height: 15rem; color: var(--shell-muted); text-align: center; font-size: .76rem; }
body.app-shell .workspace-detail-placeholder strong { color: var(--shell-ink); font-size: .85rem; }
body.app-shell .workspace-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-detail-heading { display: flex; align-items: flex-start; gap: .35rem; min-width: 0; }
body.app-shell .workspace-detail-back,
body.app-shell .contextual-return { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; margin: -.05rem 0 0 -.2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--shell-ink-soft); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
body.app-shell .workspace-detail-back:hover,
body.app-shell .contextual-return:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
body.app-shell .workspace-detail-back:focus-visible,
body.app-shell .contextual-return:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
body.app-shell .workspace-detail-identity { display: flex; align-items: center; gap: .55rem; min-width: 0; }
body.app-shell .workspace-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--shell-accent-soft); color: var(--shell-accent); font-size: .7rem; font-weight: 750; }
body.app-shell .workspace-detail-title-group { min-width: 0; }
body.app-shell .workspace-detail-title-group h2 { margin: 0; overflow: hidden; color: var(--shell-ink); font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .workspace-detail-muted { margin: .14rem 0 0; color: var(--shell-muted); font-size: .7rem; }
body.app-shell .workspace-status-pill { display: inline-flex; align-items: center; min-height: 1.4rem; padding: .15rem .45rem; border-radius: 999px; background: var(--shell-accent-soft); color: var(--shell-accent-strong); font-size: .65rem; font-weight: 700; white-space: nowrap; }
body.app-shell .workspace-detail-section { display: grid; gap: .35rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-detail-section h3 { margin: 0 0 .15rem; color: var(--shell-muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
body.app-shell .workspace-detail-line { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(0, 1.3fr); gap: .6rem; font-size: .72rem; }
body.app-shell .workspace-detail-line dt { color: var(--shell-muted); }
body.app-shell .workspace-detail-line dd { margin: 0; color: var(--shell-ink); overflow-wrap: anywhere; }
body.app-shell .workspace-detail-actions { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .workspace-content > .workspace-detail-panel,
body.app-shell .quotes-content > .quote-detail-panel { display: block; }

/* V0 table rows: one calm operational surface with direct columns rather than
   nested admin cards. Labels stay available to assistive technology and become
   visible on narrow screens when the grid stacks. */
body.app-shell .workspace-table-head { display: grid; gap: .55rem; padding: .55rem .9rem; border-bottom: 1px solid var(--shell-line-soft); color: var(--shell-muted); font-size: .61rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.app-shell [data-work-module="customers"] .workspace-table-head,
body.app-shell [data-work-module="customers"] .workspace-table-row { grid-template-columns: minmax(13rem, 1.45fr) minmax(7rem, .9fr) minmax(7rem, .9fr) minmax(5rem, .65fr) auto; }
body.app-shell [data-work-module="jobs"] .workspace-table-head,
body.app-shell [data-work-module="jobs"] .workspace-table-row { grid-template-columns: minmax(12rem, 1.35fr) minmax(8rem, 1fr) minmax(8rem, .9fr) minmax(8rem, 1fr) minmax(6rem, .75fr) minmax(5.5rem, .65fr) auto; }
body.app-shell [data-work-module="enquiries"] .workspace-table-head,
body.app-shell [data-work-module="enquiries"] .workspace-table-row { grid-template-columns: minmax(12rem, 1.35fr) minmax(6rem, .8fr) minmax(8rem, 1fr) minmax(7rem, .85fr) minmax(5.5rem, .65fr) auto; }
body.app-shell .workspace-table-head span:last-child { min-width: 2rem; }
body.app-shell .workspace-record-list > li.workspace-table-row { display: grid; align-items: center; gap: .55rem; min-width: 0; padding: .68rem .9rem; }
body.app-shell .workspace-record-primary { display: flex; align-items: center; gap: .55rem; min-width: 0; }
body.app-shell .workspace-record-primary .workspace-record-copy { min-width: 0; }
body.app-shell .workspace-table-cell { display: grid; align-content: center; gap: .1rem; min-width: 0; }
body.app-shell .workspace-table-label { color: var(--shell-muted); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
body.app-shell .workspace-table-value { min-width: 0; overflow: hidden; color: var(--shell-ink); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .workspace-table-status .workspace-table-value { overflow: visible; }
body.app-shell .workspace-table-row .workspace-record-actions { grid-area: auto; justify-content: flex-end; }
body.app-shell .workspace-table-row .workspace-record-avatar { width: 2rem; height: 2rem; }
body.app-shell .workspace-table-row .workspace-record-title { font-size: .78rem; }
body.app-shell .workspace-table-row .workspace-record-subtitle { font-size: .67rem; }
body.app-shell .workspace-table-row .workspace-record-action { white-space: nowrap; }

/* Recovery and quotes use the same direct-column rhythm. */
body.app-shell .recovery-list > li.workspace-record { grid-template-columns: minmax(11rem, 1.3fr) minmax(8rem, 1fr) minmax(5rem, .7fr) minmax(8rem, 1fr) minmax(7rem, .8fr) auto; }
body.app-shell .recovery-workspace .workspace-table-head { grid-template-columns: minmax(11rem, 1.3fr) minmax(8rem, 1fr) minmax(5rem, .7fr) minmax(8rem, 1fr) minmax(7rem, .8fr) auto; }
body.app-shell .quote-list > li.workspace-table-row { grid-template-columns: minmax(11rem, 1.25fr) minmax(8rem, 1fr) minmax(6rem, .75fr) minmax(7rem, .8fr) minmax(5rem, .65fr) auto; }
body.app-shell .quotes-content .workspace-table-head { grid-template-columns: minmax(11rem, 1.25fr) minmax(8rem, 1fr) minmax(6rem, .75fr) minmax(7rem, .8fr) minmax(5rem, .65fr) auto; }
body.app-shell .recovery-list > li.recovery-item { grid-template-columns: minmax(11rem, 1.2fr) minmax(8rem, 1fr) minmax(5rem, .7fr) minmax(8rem, 1fr) minmax(7rem, .8fr) auto; align-items: center; gap: .55rem; }
body.app-shell .recovery-item-header { display: flex; align-items: center; gap: .45rem; min-width: 0; }
body.app-shell .recovery-item-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .recovery-item .recovery-customer,
body.app-shell .recovery-item .recovery-record,
body.app-shell .recovery-item .recovery-why,
body.app-shell .recovery-item .recovery-recommended { min-width: 0; margin: 0; overflow: hidden; color: var(--shell-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .recovery-item .recovery-why::before { content: 'Reason · '; color: var(--shell-faint); }
body.app-shell .recovery-item .recovery-recommended::before { content: 'Next · '; color: var(--shell-faint); }
  body.app-shell .recovery-item .recovery-actions { display: flex; justify-content: flex-end; gap: .25rem; min-width: 0; }
  body.app-shell .quote-list > li.workspace-table-row .workspace-record-actions { grid-area: auto; }
  /* The recovery-item row is a fixed 6-column grid; the follow-up schedule
     editor is appended as an extra child when opened from the overflow menu,
     so it needs to span the full row instead of collapsing into one track. */
  body.app-shell .recovery-item > .recovery-action-editor { grid-column: 1 / -1; margin-top: .3rem; padding-top: .55rem; border-top: 1px solid var(--shell-line-soft); }
  /* Quoted opportunity value rides inside the related-record cell as a second
     labelled line, keeping the row's fixed 6-column grid intact rather than
     introducing a variable extra column. */
  body.app-shell .workspace-record-value-line { display: flex; align-items: baseline; gap: .3rem; margin-top: .1rem; }
  body.app-shell .workspace-record-value-label { color: var(--shell-muted); font-size: .64rem; }
  body.app-shell .workspace-record-value-amount { color: var(--shell-ink); font-size: .7rem; font-weight: 600; }
body.app-shell .workspace-create-drawer { position: fixed; top: calc(var(--shell-topbar-h) + .8rem); right: 1rem; z-index: 50; width: min(26rem, calc(100dvw - 2rem)); }
body.app-shell .workspace-create-drawer[open] { display: flex; flex-direction: column; height: calc(100vh - var(--shell-topbar-h) - 1.5rem); max-height: min(48rem, calc(100vh - var(--shell-topbar-h) - 1.5rem)); overflow: hidden; }
body.app-shell .workspace-create-drawer[open] { height: calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom)); max-height: min(48rem, calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom))); }
body.app-shell .workspace-create-drawer[open] > summary { display: none; }
body.app-shell .workspace-create-panel { display: flex; flex: 1 1 0%; flex-direction: column; min-height: 0; height: calc(100vh - var(--shell-topbar-h) - 1.5rem); max-height: calc(100vh - var(--shell-topbar-h) - 1.5rem); height: calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom)); max-height: min(48rem, calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom))); overflow: hidden; padding: 1rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-lg); background: var(--shell-surface); box-shadow: var(--shell-shadow-lg); }
body.app-shell .workspace-create-panel h2 { margin: 0 0 .75rem; font-size: 1rem; }
body.app-shell .workspace-create-panel form { display: grid; flex: 1 1 0%; gap: .55rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
body.app-shell .workspace-create-panel label { display: grid; gap: .22rem; color: var(--shell-muted); font-size: .7rem; font-weight: 650; }
body.app-shell .workspace-create-panel input, body.app-shell .workspace-create-panel textarea, body.app-shell .workspace-create-panel select { width: 100%; min-height: 2.25rem; margin: 0; padding: .42rem .6rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); color: var(--shell-ink); font-size: .78rem; }
body.app-shell .workspace-create-panel > form > .form-actions { position: sticky; bottom: 0; z-index: 1; flex: 0 0 auto; margin-top: .35rem; padding: .6rem 0 calc(.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shell-line-soft); background: var(--shell-surface); }
body.app-shell .workspace-create-panel > form > button[type="submit"] { position: sticky; bottom: 0; z-index: 1; align-self: end; margin-top: .35rem; padding-block: .6rem; border-top: 1px solid var(--shell-line-soft); background-clip: padding-box; }
body.app-shell .calendar-booking-panel .form-actions, body.app-shell .revenue-drawer-panel .form-actions { position: sticky; bottom: 0; z-index: 1; margin-top: .35rem; padding: .6rem 0 calc(.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shell-line-soft); background: var(--shell-surface); }

/* Focused record/document surfaces use native dialogs so the list remains the
   user's context while the selected item gets a calm, bounded reading area. */
body.app-shell > dialog.detail-modal {
  width: min(44rem, calc(100dvw - 2rem));
  max-width: none;
  max-height: min(84dvh, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius-lg);
  background: var(--shell-surface);
  color: var(--shell-ink);
  box-shadow: var(--shell-shadow-lg);
  overflow: hidden;
}
body.app-shell > dialog.detail-modal::backdrop { background: var(--shell-overlay); }
body.app-shell .detail-modal-panel { position: relative; display: flex; flex-direction: column; max-height: min(84dvh, calc(100dvh - 2rem)); min-height: 0; padding: 1rem; background: var(--shell-surface); color: var(--shell-ink); }
body.app-shell .detail-modal-close { position: absolute; top: .65rem; right: .65rem; z-index: 4; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--shell-ink-soft); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
body.app-shell .detail-modal-close:hover { background: var(--shell-surface-sunken); color: var(--shell-ink); }
body.app-shell .detail-modal-close:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
body.app-shell .detail-modal-content { display: block !important; position: static !important; min-height: 0; max-height: calc(100dvh - 4rem); padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-y: auto !important; overscroll-behavior: contain; }
body.app-shell .detail-modal-content .workspace-detail-head { position: sticky; top: 0; z-index: 2; padding: .2rem 2.2rem .8rem 0; background: var(--shell-surface); }
body.app-shell .detail-modal-content .workspace-detail-section:last-child { padding-bottom: .35rem; }
body.app-shell .detail-modal-content .workspace-detail-actions { position: sticky; bottom: 0; z-index: 2; padding-bottom: .5rem; background: var(--shell-surface); }
body.app-shell .document-modal { width: min(58rem, calc(100dvw - 2rem)); }
body.app-shell .document-modal-panel { padding: .8rem; background: var(--shell-surface); color: var(--shell-ink); }
body.app-shell .document-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .15rem 2.2rem .7rem .2rem; border-bottom: 1px solid var(--shell-line-soft); }
body.app-shell .document-modal-head h2 { margin: 0; color: var(--shell-ink); font-size: 1rem; }
body.app-shell .document-modal-head p { margin: .15rem 0 0; }
body.app-shell .document-modal-frame { min-height: 0; flex: 1 1 auto; padding: .75rem 0; overflow: hidden; background: var(--shell-surface); }
body.app-shell .document-modal-frame iframe { display: block; width: 100%; height: min(70dvh, 48rem); min-height: 24rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: #fff; }
body.app-shell .document-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; padding: .7rem .2rem .15rem; border-top: 1px solid var(--shell-line-soft); }
body.app-shell .document-modal-actions .button { min-height: 2.25rem; }
body.app-shell .workspace-secondary-panel { padding: .8rem .9rem; }
body.app-shell .workspace-segmented { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .2rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); }
body.app-shell .workspace-segmented button { min-height: 2rem; padding: .32rem .72rem; border: 0 !important; border-radius: .35rem; background: transparent !important; color: var(--shell-muted) !important; font-size: .73rem; font-weight: 650; cursor: pointer; }
body.app-shell .workspace-segmented button[aria-pressed="true"] { background: var(--shell-surface) !important; color: var(--shell-accent-strong) !important; box-shadow: var(--shell-shadow-xs); }
body.app-shell .workspace-segmented-small { margin: .75rem .9rem; }
body.app-shell .workspace-filter-disclosure { position: relative; }
body.app-shell .workspace-filter-button { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .4rem .65rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); color: var(--shell-ink); font-size: .73rem; cursor: pointer; list-style: none; }
body.app-shell .workspace-filter-button::-webkit-details-marker { display: none; }
body.app-shell .workspace-filter-disclosure[open] .workspace-filter-form { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .5rem; width: min(28rem, calc(100dvw - 2rem)); padding: .7rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface); box-shadow: var(--shell-shadow-lg); }
body.app-shell .workspace-filter-form { display: none; }
body.app-shell .workspace-filter-form label { display: grid; gap: .2rem; color: var(--shell-muted); font-size: .7rem; }
body.app-shell .workspace-filter-form select { min-height: 2.15rem; padding: .3rem .5rem; border: 1px solid var(--shell-line); border-radius: var(--shell-radius-sm); background: var(--shell-surface-soft); color: var(--shell-ink); }
body.app-shell .workspace-legacy { display: none !important; }

@media (max-width: 1100px) { body.app-shell .workspace-content { grid-template-columns: minmax(0, 1fr) minmax(15rem, .72fr); } }
@media (max-width: 900px) { body.app-shell .workspace-content { grid-template-columns: minmax(0, 1fr); } body.app-shell .workspace-detail-panel, body.app-shell .quote-detail-panel { display: none; } }
@media (max-width: 760px) { body.app-shell .workspace-page { gap: .65rem; } body.app-shell .workspace-page-head h1 { font-size: 1.25rem; } body.app-shell .workspace-summary-strip { gap: .45rem; } body.app-shell .workspace-summary-card { padding: .6rem .65rem; } body.app-shell .workspace-summary-card strong { font-size: .95rem; } body.app-shell .workspace-summary-card > span:last-child { font-size: .64rem; } body.app-shell .workspace-toolbar { align-items: stretch; } body.app-shell .workspace-search { flex-basis: 100%; } body.app-shell .workspace-filter { flex: 1 1 8rem; } body.app-shell .workspace-filter select { width: 100%; } body.app-shell .workspace-reset { margin-left: auto; } }
@media (max-width: 560px) { body.app-shell .workspace-page-head { align-items: center; } body.app-shell .workspace-page-head h1 { font-size: 1.1rem; } body.app-shell .workspace-lead { max-width: 16rem; font-size: .7rem; } body.app-shell .workspace-primary-action { min-height: 2.1rem; padding: .35rem .6rem; font-size: .7rem; } body.app-shell .workspace-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.app-shell .workspace-summary-card { display: block; } body.app-shell .workspace-summary-icon { display: none; } body.app-shell .workspace-summary-card strong, body.app-shell .workspace-summary-card > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.app-shell .workspace-summary-card strong { margin-bottom: .15rem; } body.app-shell .workspace-panel-head { padding: .7rem .75rem; } body.app-shell .workspace-table-head { display: none; } body.app-shell .workspace-record-list > li.workspace-table-row { grid-template-columns: minmax(0, 1fr); padding: .72rem .75rem; } body.app-shell .workspace-record-list > li.workspace-record { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "meta" "actions"; padding: .72rem .75rem; } body.app-shell .workspace-record-list > li.recovery-item, body.app-shell .workspace-record-list > li.quote-card { padding: .72rem .75rem; } body.app-shell .workspace-table-cell { grid-template-columns: minmax(6rem, .7fr) minmax(0, 1.3fr); align-items: baseline; } body.app-shell .workspace-table-label { font-size: .62rem; } body.app-shell .workspace-record-actions { justify-content: flex-end; margin-left: 0; padding-top: .3rem; border-top: 1px solid var(--shell-line-soft); } body.app-shell .workspace-detail-panel { min-height: 14rem; padding: .75rem; } body.app-shell .workspace-create-drawer { top: calc(var(--shell-topbar-h) + .45rem); right: .55rem; width: calc(100dvw - 1.1rem); } }

@media (max-width: 560px) {
  body.app-shell .recovery-list > li.recovery-item { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .recovery-item .recovery-actions { justify-content: flex-start; padding-top: .3rem; border-top: 1px solid var(--shell-line-soft); }
  body.app-shell > dialog.detail-modal { width: calc(100dvw - .8rem); max-height: calc(100dvh - .8rem); border-radius: var(--shell-radius-md); }
  body.app-shell .detail-modal-panel { max-height: calc(100dvh - .8rem); padding: .8rem; padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  body.app-shell .detail-modal-content { max-height: calc(100dvh - 2.4rem); }
  body.app-shell .document-modal-panel { padding: .65rem; }
  body.app-shell .document-modal-frame iframe { height: calc(100dvh - 12rem); min-height: 18rem; }
  body.app-shell .document-modal-actions { justify-content: stretch; }
  body.app-shell .document-modal-actions .button { flex: 1 1 8rem; }
}

/* Recovery rows below desktop width (tablet portrait through phone: 390,
   412, 768) don't have room for the fixed 6-column
   identity/reason/priority/related/due/actions grid -- the labeled fields
   were colliding with each other and with the action footer. Stack each
   row into one column, in the same identity -> fields -> actions order
   already in the DOM, and stack every field's label above its value
   instead of squeezing them onto one line. This is scoped to
   .recovery-workspace / .recovery-item only, so Jobs/Enquiries/Customers/
   Quotes tables and the clean desktop Recovery layout above 1024px are
   unaffected. */
@media (max-width: 1024px) {
  body.app-shell .recovery-workspace .workspace-table-head { display: none; }
  body.app-shell .recovery-list > li.recovery-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .5rem;
    padding: .85rem .95rem;
  }
  body.app-shell .recovery-item .workspace-table-cell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .15rem;
  }
  body.app-shell .recovery-item .workspace-table-label { font-size: .68rem; }
  body.app-shell .recovery-item .workspace-record-value-line { flex-wrap: wrap; }
  /* .workspace-record-actions carries an unconditional `grid-area: actions`
     (shared with .workspace-record's "main actions" layout) that has no
     matching named area inside .recovery-item's own grid. With the row
     collapsed to a single explicit column above, that dangling named-line
     reference makes the browser fabricate implicit grid columns to satisfy
     it, silently reinstating a multi-column row and re-breaking the stack.
     Resetting the area back to auto here keeps it in normal row flow. */
  body.app-shell .recovery-item .workspace-record-actions {
    grid-area: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: .15rem;
    padding-top: .55rem;
    border-top: 1px solid var(--shell-line-soft);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --shell-sidebar-w: 13.5rem; }
  body.app-shell .dashboard-work-lower-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .dashboard-main-grid { grid-template-columns: minmax(0, 1fr); }
  /* The Today composition has a more-specific desktop two-column selector;
     repeat the mobile override at equal specificity so quiet/loading states
     cannot collapse the attention card into a 44px column. */
  body.app-shell .dashboard-main-grid.dashboard-work-lower-grid--today { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .calendar-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body.app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "main";
  }
  body.app-shell .app-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 70;
    width: min(16rem, calc(100% - 1rem));
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--shell-shadow-lg);
  }
  body[data-sidebar-open="true"] .app-sidebar { transform: none; }
  body[data-sidebar-open="true"]::after {
    content: "";
    position: fixed; inset: 0; z-index: 69;
    background: var(--shell-overlay);
  }
  body.app-shell .shell-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    /* Keep the accessible button name in the DOM without letting it overflow
       the compact icon control at mobile widths. */
    font-size: 0;
    line-height: 0;
    padding: 0;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-surface);
    color: var(--shell-ink);
    cursor: pointer;
  }
  body.app-shell main { padding: 1rem 1rem 2rem; }
  body.app-shell .global-search { max-width: none; }
  body.app-shell .settings-activity-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .settings-surface { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .settings-surface > .settings-subnav,
  body.app-shell .settings-surface > .settings-group,
  body.app-shell .settings-surface > .settings-edit-disclosure { grid-column: 1; }

  /* Revenue rows use six desktop columns. Collapse them before the tablet
     canvas becomes narrower than those columns so actions remain reachable. */
  body.app-shell .revenue-table-head { display: none; }
  body.app-shell .revenue-record-card { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .75rem; border-top: 1px solid var(--shell-line); border-radius: 0; }
  body.app-shell .revenue-record-card:first-of-type { border-radius: var(--shell-radius-lg) var(--shell-radius-lg) 0 0; }
  body.app-shell .revenue-record-card:last-child { border-radius: 0 0 var(--shell-radius-lg) var(--shell-radius-lg); }
  body.app-shell .revenue-table-label { display: inline-block; }
  body.app-shell .revenue-table-cell { grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr); align-items: baseline; }
  body.app-shell .revenue-record-actions { justify-content: flex-start; padding-top: .3rem; border-top: 1px solid var(--shell-line-soft); }
}

@media (max-width: 560px) {
  body.app-shell .settings-subnav { gap: .15rem; overflow-x: auto; flex-wrap: nowrap; }
  body.app-shell .settings-subnav a { flex: 0 0 auto; font-size: .72rem; }
  body.app-shell .settings-communications-card, body.app-shell .settings-appearance-control { align-items: stretch; flex-direction: column; }
  body.app-shell .settings-profile-form { grid-template-columns: 1fr; }
  body.app-shell .settings-profile-form small, body.app-shell .settings-profile-form .form-actions { grid-column: 1; }

  /* Team's owner action gets its own row on phones. Keeping it in the same
     flex line as the long lead text makes the page's intrinsic width exceed
     the viewport before the table is even laid out. */
  body.app-shell .team-page > .page-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .65rem; }
  body.app-shell .team-page > .page-head > div { width: 100%; }
  body.app-shell .team-page > .page-head-disclosure { width: fit-content; max-width: 100%; margin-left: 0; }
  body.app-shell .team-page > .page-head-disclosure > summary { max-width: 100%; }

  /* Team tables become labelled cards so email addresses and access actions
     can wrap without introducing a page-level horizontal scroll. */
  body.app-shell .team-page table { display: block; width: 100%; }
  body.app-shell .team-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.app-shell .team-page table tbody { display: grid; width: 100%; }
  body.app-shell .team-page table tbody tr { display: grid; gap: .25rem; width: 100%; box-sizing: border-box; padding: .7rem .75rem; border-bottom: 1px solid var(--shell-line-soft); }
  body.app-shell .team-page table tbody tr:last-child { border-bottom: 0; }
  body.app-shell .team-page table tbody td { display: grid; grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1.3fr); align-items: baseline; gap: .75rem; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  body.app-shell .team-page table tbody td::before { color: var(--shell-muted); font-size: .62rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
  body.app-shell [data-members-table] tbody td:nth-child(1)::before,
  body.app-shell [data-invitations-table] tbody td:nth-child(1)::before { content: 'Email'; }
  body.app-shell [data-members-table] tbody td:nth-child(2)::before,
  body.app-shell [data-invitations-table] tbody td:nth-child(2)::before { content: 'Role'; }
  body.app-shell [data-members-table] tbody td:nth-child(3)::before,
  body.app-shell [data-invitations-table] tbody td:nth-child(3)::before { content: 'Status'; }
  body.app-shell [data-members-table] tbody td:nth-child(4)::before { content: 'Access'; }
  body.app-shell [data-invitations-table] tbody td:nth-child(4)::before { content: 'Action'; }
  body.app-shell .team-page table tbody td button { justify-self: start; max-width: 100%; margin: 0; }
}

/* Inline text actions become real touch targets on any touch device — tablets
   included — without loosening desktop density. Keyed on pointer type rather
   than width alone, since a 768px tablet is still a finger. */
@media (pointer: coarse), (max-width: 900px) {
  body.app-shell .text-action,
  body.app-shell .summary-link,
  body.app-shell .attention-footer-link,
  body.app-shell .activity-footer-link,
  body.app-shell .dashboard-support-links a,
  body.app-shell .dashboard-intro-actions a {
    min-height: 44px;
    align-items: center;
  }
  body.app-shell .dashboard-support-links { gap: 0 1rem; }
  body.app-shell .sidebar-link,
  body.app-shell .sidebar-support,
  body.app-shell .sidebar-logout { min-height: 2.5rem; }
}

@media (max-width: 760px) {
  /* Queue rows become two lines rather than four cramped columns. */
  body.app-shell .queue-list > li { flex-wrap: wrap; row-gap: .25rem; }
  body.app-shell .queue-list > li > .text-action { margin-left: auto; }

  /* The workspace name yields space before it clips the actions. */
  body.app-shell .topbar-workspace { max-width: 9rem; flex: 0 1 auto; }

  body.app-shell .global-search { display: none; }
  body.app-shell .topbar-action span.label { display: none; }
  body.app-shell .dashboard-intro { flex-direction: column; align-items: stretch; gap: .625rem; }
  body.app-shell .dashboard-intro-tools,
  body.app-shell .dashboard-intro-actions { flex-wrap: wrap; }
  body.app-shell .dashboard-support-links { margin-left: 0; }
  body.app-shell form { max-width: none; }
  body.app-shell .form-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .page-head-actions { width: 100%; }
  body.app-shell .page-head-actions .button { flex: 1 1 auto; }
  body.app-shell .drawer { width: 100%; }
  body.app-shell .calendar-month { padding-right: 0; }
  body.app-shell .calendar-agenda { min-height: 0; margin-top: 1rem; padding: 1rem 0 0; border-top: 1px solid var(--shell-line-soft); border-left: 0; }
  body.app-shell .calendar-booking-panel { position: fixed; top: calc(var(--shell-topbar-h) + .5rem); right: .875rem; left: .875rem; width: auto; max-height: calc(100vh - var(--shell-topbar-h) - 1.5rem); max-height: calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom)); overflow: hidden; }
  body.app-shell .revenue-drawer-panel { position: fixed; top: calc(var(--shell-topbar-h) + .5rem); right: .875rem; left: .875rem; width: auto; max-width: none; max-height: calc(100vh - var(--shell-topbar-h) - 1.5rem); max-height: calc(100dvh - var(--shell-topbar-h) - 1.5rem - env(safe-area-inset-bottom)); overflow: hidden; }
  body.app-shell .revenue-record-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .revenue-table-head { display: none; }
  body.app-shell .revenue-record-card { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .75rem; border-top: 1px solid var(--shell-line); border-radius: 0; }
  body.app-shell .revenue-record-card:first-of-type { border-radius: var(--shell-radius-lg) var(--shell-radius-lg) 0 0; }
  body.app-shell .revenue-record-card:last-child { border-radius: 0 0 var(--shell-radius-lg) var(--shell-radius-lg); }
  body.app-shell .revenue-table-label { display: inline-block; }
  body.app-shell .revenue-table-cell { grid-template-columns: minmax(6rem, .7fr) minmax(0, 1.3fr); align-items: baseline; }
  body.app-shell .revenue-record-actions { justify-content: flex-start; padding-top: .3rem; border-top: 1px solid var(--shell-line-soft); }
  body.app-shell .revenue-filter-row select { flex: 1 1 8rem; }
  body.app-shell .document-view-head { align-items: flex-start; flex-direction: column; }
  body.app-shell .document-view-actions { width: 100%; }
  body.app-shell .document-view-actions .button { flex: 1 1 9rem; }
  body.app-shell .document-preview-frame { min-height: calc(100dvh - var(--shell-topbar-h) - 11rem); }
  body.app-shell .document-preview-frame iframe { height: calc(100dvh - var(--shell-topbar-h) - 11rem); min-height: 28rem; }
}

@media (max-width: 560px) {
  body.app-shell { font-size: .875rem; }
  body.app-shell main { padding: .875rem .875rem 2rem; }
  body.app-shell h1 { font-size: 1.15rem; }
  body.app-shell .today-inline-summary { align-items: flex-start; gap: .45rem .7rem; }
  body.app-shell .today-inline-summary > span { flex: 1 1 calc(50% - .7rem); }
  body.app-shell .today-inline-summary > span + span { padding-left: 0; border-left: 0; }
  .dashboard-kpi-strip { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .dashboard-kpi { padding: .625rem .7rem; }
  body.app-shell .dashboard-kpi-copy strong { font-size: 1.15rem; }
  body.app-shell .card { padding: .8125rem .875rem; }
  body.app-shell .table-wrap { margin: 0 -.875rem; padding: 0 .875rem; }

  /* Stacked table rows read as cards on small screens. */
  body.app-shell table.responsive-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.app-shell table.responsive-cards tbody tr {
    display: grid;
    gap: .1875rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--shell-line-soft);
  }
  body.app-shell table.responsive-cards tbody td { display: flex; justify-content: space-between; gap: .75rem; padding: 0; border: 0; }
  body.app-shell table.responsive-cards tbody td::before {
    content: attr(data-label);
    color: var(--shell-muted);
    font-size: .72rem;
    font-weight: 600;
  }
  body.app-shell .revenue-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-shell .revenue-summary-strip { gap: .45rem; }
  body.app-shell .revenue-summary-strip article { padding: .6rem .65rem; }
  body.app-shell .revenue-summary-strip article strong { font-size: .95rem; }
  body.app-shell .revenue-summary-strip article span { font-size: .65rem; }
  body.app-shell .revenue-page-head { gap: .65rem; }
  body.app-shell .revenue-page-head h1 { font-size: 1.18rem; }
  body.app-shell .revenue-page-head .lead { font-size: .72rem; }
  body.app-shell .revenue-create-drawer > summary { padding-inline: .7rem; }
  body.app-shell .dashboard-support { flex-direction: column; align-items: flex-start; }
  body.app-shell .settings-readonly { grid-template-columns: 1fr; gap: .125rem; }
  body.app-shell .settings-readonly dd { padding-bottom: .375rem; border-bottom: 1px solid var(--shell-line-soft); }
  body.app-shell .creation-disclosure > summary.creation-summary { align-items: flex-start; }
  body.app-shell .calendar-day { min-height: 3.2rem; padding: .1rem; }
  body.app-shell .calendar-day-number { width: 2rem; height: 2rem; font-size: .75rem; }
  body.app-shell .calendar-month-toolbar { grid-template-columns: 2rem minmax(0, 1fr) 2rem; }
  body.app-shell .calendar-agenda-item { grid-template-columns: 3.4rem minmax(0, 1fr); }

  /* The workspace name is already in the sidebar account block; at this width
     the topbar keeps only navigation and the single primary action. */
  body.app-shell .topbar-workspace { display: none; }
  body.app-shell .topbar-action:not(.topbar-action-primary) { display: none; }
  body.app-shell .topbar-action-primary .label { display: inline; }
  body.app-shell .topbar-actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell *,
  body.app-shell *::before,
  body.app-shell *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Workspace access-limited notice (trial ended, suspended, cancelled, awaiting activation).
   Rendered once per page by shell-context.js; uses the theme warning tokens in light and dark. */
.access-notice {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warning-ink) 35%, transparent);
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--warning-ink);
}
.access-notice p { margin: 0; color: inherit; }
.access-notice a {
  justify-self: start;
  min-height: 24px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.access-notice a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }