:root {
  color-scheme: light;
  --color-ink: #17211b;
  --color-muted: #526158;
  --color-canvas: #f4f7f5;
  --color-surface: #fff;
  --color-surface-subtle: #edf2ef;
  --color-border: #c6d1ca;
  --color-brand: #205f3d;
  --color-brand-strong: #16462d;
  --color-danger: #9a2c25;
  --color-danger-subtle: #fff3f2;
  --color-success: #17633b;
  --color-success-subtle: #edf8f1;
  --color-warning: #795400;
  --color-warning-subtle: #fff7df;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: clamp(1.75rem, 5vw, 2.5rem);
  --line-height: 1.5;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --border-width: 1px;
  --shadow-card: 0 0.5rem 1.5rem rgb(23 33 27 / 8%);
  --shadow-sheet: 0 -0.75rem 2rem rgb(23 33 27 / 16%);
  --focus-ring: 0 0 0 3px #fff, 0 0 0 6px #28784e;
  --target-size: 2.75rem;
  --sidebar-width: 15rem;
  --phone-bar-height: 4.25rem;
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--line-height);
  color: var(--color-ink);
  background: var(--color-canvas);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; }
body { min-width: 0; margin: 0; overflow-x: clip; background: var(--color-canvas); }
button, input, select, textarea { font: inherit; }
a { color: var(--color-brand-strong); text-underline-offset: 0.18em; }
img, svg { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: var(--font-size-xl); line-height: 1.15; }
h2 { margin: 0; font-size: var(--font-size-lg); line-height: 1.25; }
p { max-width: 68ch; margin: var(--space-4) 0 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset: var(--space-3) auto auto var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--color-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.content-width { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.brand { color: var(--color-ink); font-size: var(--font-size-lg); font-weight: 800; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; }

.app-shell { min-height: 100vh; }
.sidebar { display: none; }
.workspace { min-width: 0; }
.main-content > *, .guest-main > *, .card, section, article { min-width: 0; }
.workspace-header, .guest-header {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}
.workspace-header { position: sticky; z-index: 10; top: 0; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.workspace-header nav { color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 700; }
.guest-header .content-width { padding-block: var(--space-3); }
.main-content, .guest-main { padding: var(--space-5) var(--space-4) calc(var(--phone-bar-height) + var(--space-8)); }
.guest-main { padding-block: var(--space-6); }

.desktop-navigation { display: grid; gap: var(--space-1); }
.desktop-navigation a {
  min-height: var(--target-size);
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-left: 0.25rem solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-weight: 650;
  text-decoration: none;
}
.desktop-navigation a:hover { background: var(--color-surface-subtle); }
.desktop-navigation a[aria-current="page"] { border-left-color: var(--color-brand); color: var(--color-brand-strong); background: var(--color-surface-subtle); }
.sidebar-account { margin-top: auto; padding: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.sidebar-account form, .more-menu form { margin: var(--space-2) 0 0; }
.display-name { display: block; color: var(--color-muted); overflow-wrap: anywhere; }

.phone-navigation {
  position: fixed;
  z-index: 30;
  inset: auto 0 0;
  min-height: var(--phone-bar-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -0.25rem 1rem rgb(23 33 27 / 8%);
}
.phone-navigation > a, .more-menu > summary {
  min-width: 0;
  min-height: var(--target-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.phone-navigation [aria-current="page"] { color: var(--color-brand-strong); background: var(--color-surface-subtle); }
.more-menu > summary { list-style: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.sheet {
  position: fixed;
  z-index: 40;
  inset: auto 0 var(--phone-bar-height);
  display: grid;
  gap: var(--space-2);
  max-height: calc(100vh - var(--phone-bar-height) - 1rem);
  padding: var(--space-5) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  overflow: auto;
}
.sheet a, .sheet .button { min-height: var(--target-size); display: flex; align-items: center; padding-inline: var(--space-3); border-radius: var(--radius-sm); }

.button, .primary-button, .status-button {
  min-height: var(--target-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--color-brand-strong);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .primary-button:hover, .status-button:hover { background: var(--color-brand); }
.button--secondary { border-color: var(--color-border); color: var(--color-ink); background: var(--color-surface); }
.button--secondary:hover { background: var(--color-surface-subtle); }
.button--quiet { justify-content: flex-start; padding-inline: var(--space-2); border-color: transparent; color: var(--color-brand-strong); background: transparent; }
.button--quiet:hover { background: var(--color-surface-subtle); }
.button--destructive { background: var(--color-danger); }
.button--destructive:hover { background: #77211c; }
:where(.button, .primary-button, .status-button):disabled,
:where(.button, .primary-button, .status-button)[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
:where(.button, .primary-button, .status-button)[aria-busy="true"] { cursor: progress; }

.field { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
.field label, .field-label { font-weight: 700; }
.field-hint { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.field :where(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-height: var(--target-size);
  padding: 0.65rem var(--space-3);
  border: var(--border-width) solid #8b9a91;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: var(--color-surface);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.field :where(input, select, textarea):disabled { color: var(--color-muted); background: var(--color-surface-subtle); cursor: not-allowed; }
.field :where(input, textarea)[readonly] { border-style: dashed; color: var(--color-muted); background: var(--color-surface-subtle); }
.checkbox-field { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target-size); padding-block: var(--space-2); }
.checkbox-field input { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--color-brand); }
.field-error { margin: 0; color: var(--color-danger); font-size: var(--font-size-sm); font-weight: 650; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.filter-bar .field { flex: 1 1 12rem; margin: 0; }
.card, .setup-card, .auth-card, .panel-state {
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.setup-card { max-width: 68rem; margin-inline: auto; }
.auth-card { max-width: 32rem; margin: var(--space-6) auto; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-brand); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.summary { color: #284b37; font-size: var(--font-size-lg); }
.status-check { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.status-panel { margin-top: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.status-panel p { margin-top: var(--space-1); }
.status-label { display: flex; align-items: center; gap: var(--space-2); font-weight: 750; }
.status-marker { width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-radius: 50%; background: var(--color-surface); }
.status-result--connected .status-label { color: var(--color-success); }
.status-result--unavailable .status-label { color: var(--color-danger); }

.dashboard { display: grid; gap: var(--space-6); }
.dashboard-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.dashboard-header .summary { margin-top: var(--space-3); }
.dashboard-primary-action { flex: 0 0 auto; }
.dashboard-quick-actions { display: grid; gap: var(--space-3); }
.quick-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dashboard-sections { display: grid; gap: var(--space-5); align-items: start; }
.dashboard-section { min-width: 0; padding: var(--space-5); }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.intervention-preview-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.intervention-preview { min-height: var(--target-size); display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; }
.intervention-preview:hover { border-color: var(--color-brand); background: var(--color-surface-subtle); }
.intervention-preview-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--font-size-sm); }
.preview-detail { color: var(--color-muted); font-size: var(--font-size-sm); }

.badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: var(--space-1) var(--space-2); border-radius: 999px; color: var(--color-ink); background: var(--color-surface-subtle); font-size: var(--font-size-sm); font-weight: 750; }
.badge--success { color: var(--color-success); background: var(--color-success-subtle); }
.badge--error { color: var(--color-danger); background: var(--color-danger-subtle); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-subtle); }
.definition-list { display: grid; grid-template-columns: minmax(7rem, 0.5fr) minmax(0, 1fr); margin: 0; }
.definition-list div { display: contents; }
.definition-list dt, .definition-list dd { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.definition-list dt { color: var(--color-muted); font-weight: 700; }
.definition-list dd { margin: 0; }

.data-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.data-table th, .data-table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); text-align: left; vertical-align: top; }
.data-table th { color: var(--color-muted); font-size: var(--font-size-sm); }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.pagination p { margin: 0; color: var(--color-muted); }
.pagination-actions { display: flex; gap: var(--space-2); }

.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; }
.muted { color: var(--color-muted); }
.preserve-lines { white-space: pre-wrap; }
.customer-workflow { display: grid; gap: var(--space-5); }
.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.page-header .summary { margin-top: var(--space-2); }
.page-actions, .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.page-actions form { margin: 0; }
.button-row, .section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.stack-form { display: grid; gap: var(--space-4); }
.input-with-suffix { display: flex; align-items: center; gap: var(--space-2); }
.input-with-suffix input { min-width: 0; }
.settings-page { width: min(100%, 56rem); margin-inline: auto; }
.settings-form { max-width: 34rem; margin-top: var(--space-5); }
.settings-status { margin-block: var(--space-5); }
.metadata-list, .compact-financial-summary {
  display: grid;
  gap: 0;
  margin: var(--space-4) 0 0;
}
.metadata-list div, .compact-financial-summary div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}
.metadata-list dt, .compact-financial-summary dt {
  color: var(--color-muted);
  font-weight: 700;
}
.metadata-list dd, .compact-financial-summary dd { min-width: 0; margin: 0; }
.compact-financial-summary {
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}
.compact-financial-summary div {
  display: block;
  padding-block: var(--space-1);
  border: 0;
}
.compact-financial-summary dt, .compact-financial-summary dd { display: inline; }
.compact-financial-summary dt::after { content: ": "; }
.intervention-table-wrap { overflow-x: auto; }
.intervention-table { min-width: 62rem; }
.customer-card-list, .record-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.customer-card { display: grid; gap: var(--space-3); padding: var(--space-4); box-shadow: none; }
.customer-card-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.customer-contact { margin: 0; color: var(--color-muted); }
.customer-table-wrap { display: none; }
.customer-form-page { max-width: 64rem; margin-inline: auto; }
.customer-form { padding: clamp(var(--space-4), 4vw, var(--space-6)); }
.customer-form > header { margin-bottom: var(--space-5); }
.form-grid { display: grid; gap: 0 var(--space-4); }
.form-section { margin: var(--space-6) 0 0; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.form-section legend { padding-inline: var(--space-2); font-size: var(--font-size-lg); font-weight: 750; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.filter-actions input { flex: 1 1 14rem; }
.selection-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
.selection-list a { display: grid; gap: var(--space-1); color: inherit; text-decoration: none; }
.selection-list a:hover, .selection-list a:focus-visible, .selection-list a.is-selected { border-color: var(--color-brand); }
.choice { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-size); }
.choice-grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.choice-card {
  min-height: var(--target-size);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.choice-card:hover { border-color: var(--color-brand); background: var(--color-surface-subtle); }
.choice-card input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--color-brand); }
.choice-card--archived { background: var(--color-warning-subtle); }
.choice-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice-grid.tag-choice-grid { display: flex; flex-wrap: wrap; align-items: center; }
.tag-choice {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
}
.tag-choice span { min-width: 0; overflow-wrap: anywhere; }
.tag-choice:has(input:checked) { border-color: var(--color-brand); background: var(--color-surface-subtle); }
.tag-choice.choice-card--archived:has(input:checked) { border-color: #d7b04e; background: var(--color-warning-subtle); }
.catalog-grid { display: grid; gap: var(--space-5); }
.catalog-section { align-content: start; box-shadow: none; }
.catalog-section > header p { margin-top: var(--space-2); }
.catalog-create-form, .catalog-rename-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.catalog-create-form .field, .catalog-rename-form .field { flex: 1 1 12rem; margin-block: var(--space-3); }
.catalog-list { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.catalog-entry { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.catalog-entry-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.catalog-entry--archived { color: var(--color-muted); }
.catalog-empty { margin-bottom: 0; }
.library-table-wrap { min-width: 0; }
.library-table { table-layout: fixed; }
.library-table th:nth-child(1) { width: 16%; }
.library-table th:nth-child(2) { width: 18%; }
.library-table th:nth-child(3) { width: 12%; }
.library-table th:nth-child(4), .library-table th:nth-child(5) { width: 16%; }
.library-table th:nth-child(6) { width: 22%; }
.library-table td { min-width: 0; overflow-wrap: anywhere; }
.library-table .tag-list { margin-top: 0; }
.library-item-link { color: var(--color-ink); text-decoration: none; }
.library-item-link:hover strong { text-decoration: underline; }
.library-price-pair { display: grid; gap: var(--space-2); margin: 0; }
.library-price-pair div { display: grid; gap: var(--space-1); }
.library-price-pair dt { color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 700; }
.library-price-pair dd { margin: 0; font-variant-numeric: tabular-nums; }
.library-row-actions { display: grid; align-items: start; gap: var(--space-2); }
.library-row-actions form { margin: 0; }
.library-row-actions .button { width: 100%; white-space: normal; }
.invoice-line-table, .invoice-line-table tbody, .invoice-line-table tr, .invoice-line-table td {
  display: block;
}
.invoice-line-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.invoice-line-table tr {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.invoice-line-table td {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border: 0;
}
.invoice-line-table td::before {
  content: attr(data-label);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 750;
}
.detail-grid { display: grid; gap: var(--space-4); }
.customer-definition-list address { font-style: normal; }
.archive-notice { padding: var(--space-4); border: var(--border-width) solid #d7b04e; border-radius: var(--radius-md); background: var(--color-warning-subtle); }
.archive-notice p { margin-top: var(--space-2); }
.vehicle-section { box-shadow: none; }
.record-list { margin-top: var(--space-4); }
.record-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.record-list li > * { min-width: 0; }
.record-list a { min-width: 0; display: grid; color: var(--color-ink); text-decoration: none; }
.record-list a:hover strong { text-decoration: underline; }
.record-list a span { color: var(--color-muted); font-size: var(--font-size-sm); }
.record-metadata { padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.record-metadata .definition-list { margin-top: var(--space-3); }
.archive-customer { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
.archive-customer > summary { width: fit-content; color: var(--color-danger); list-style: none; }
.archive-customer > summary::-webkit-details-marker { display: none; }
.archive-confirmation { max-width: 44rem; margin-top: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-subtle); }
.archive-confirmation p { margin-top: var(--space-2); }
.archive-confirmation form { margin-top: var(--space-4); }
.vehicle-filter-form { display: grid; gap: var(--space-4); }
.filter-details > summary { min-height: var(--target-size); display: flex; align-items: center; font-weight: 750; cursor: pointer; }
.filter-details .form-grid { margin-top: var(--space-3); }
.cancelled-record { color: var(--color-muted); background: var(--color-danger-subtle); }
.metadata-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.metadata-actions > a, .metadata-actions summary, .data-table a {
  min-height: var(--target-size);
  display: inline-flex;
  align-items: center;
}
.delete-metadata > summary { color: var(--color-danger); cursor: pointer; }
.knowledge-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.knowledge-result { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; }
.knowledge-result:hover { border-color: var(--color-brand); background: var(--color-surface-subtle); }
.knowledge-result-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.knowledge-context, .knowledge-meta { color: var(--color-muted); font-size: var(--font-size-sm); }
.knowledge-excerpt { max-width: 72ch; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.tag-list li { padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--color-surface-subtle); font-weight: 700; }
.tag-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: 999px; color: var(--color-brand-strong); background: var(--color-surface-subtle); font-size: var(--font-size-sm); font-weight: 700; }
.tag-chip button { min-width: var(--target-size); min-height: var(--target-size); padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.tag-chip button:hover { background: var(--color-border); }
.technical-note-body { max-width: 76ch; overflow-wrap: anywhere; }

.panel-state { margin-block: var(--space-4); box-shadow: none; text-align: center; }
.panel-state > * { margin-inline: auto; }
.panel-state--error { border-color: var(--color-danger); background: var(--color-danger-subtle); }
.error-summary { margin-top: var(--space-5); padding: var(--space-4); border: 2px solid var(--color-danger); border-radius: var(--radius-md); color: var(--color-danger); background: var(--color-danger-subtle); }
.error-summary p { margin-top: var(--space-1); }
.notification { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-left: 0.3rem solid var(--color-brand); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card); }
.notification--success { border-left-color: var(--color-success); }
.notification--error { border-left-color: var(--color-danger); }
.notification-region { position: fixed; z-index: 50; inset: var(--space-4) var(--space-4) auto auto; width: min(calc(100% - 2rem), 26rem); }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.htmx-request .button-label { display: none; }
.loading-indicator { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.loading-indicator::before { content: ""; width: 1rem; height: 1rem; border: 2px solid var(--color-border); border-top-color: var(--color-brand); border-radius: 50%; animation: spin 0.8s linear infinite; }

.calendar-page { min-width: 0; display: grid; gap: var(--space-5); }
.calendar-header { align-items: center; }
.calendar-toolbar {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.calendar-period-navigation, .calendar-view-navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.calendar-view-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calendar-toolbar .button { min-width: 0; padding-inline: var(--space-2); }
.calendar-toolbar [aria-current="page"] {
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
  background: var(--color-surface-subtle);
}
.calendar-period-heading { min-width: 0; text-align: center; }
.calendar-period-heading h2, .calendar-period-heading p { margin: 0; }
.calendar-period-heading p { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--font-size-sm); }
.calendar-loading { margin: 0; }
.calendar-wide { display: none; }
.calendar-focused { min-width: 0; display: grid; gap: var(--space-4); }
.calendar-focused-weekdays, .calendar-date-selector {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-focused-weekdays span {
  min-width: 0;
  padding-block: var(--space-1);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 750;
  text-align: center;
}
.calendar-date {
  min-width: 0;
  min-height: var(--target-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.calendar-date small { color: var(--color-brand-strong); font-size: 0.7rem; font-weight: 800; }
.calendar-date-state {
  color: var(--color-brand-strong);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
}
.calendar-date:hover { border-color: var(--color-border); background: var(--color-surface-subtle); }
.calendar-date--outside { color: var(--color-muted); }
.calendar-date--selected { border-color: var(--color-brand); background: var(--color-surface-subtle); font-weight: 800; }
.calendar-selected-day { min-width: 0; }
.calendar-selected-day h2 { overflow-wrap: anywhere; font-size: var(--font-size-lg); }
.calendar-day-entries, .calendar-overflow-entries, .calendar-selected-entries,
.calendar-week-positioned-entries, .calendar-week-stacked-entries,
.calendar-dst-entries ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.calendar-selected-entries { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.calendar-selected-empty { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.calendar-entry {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-left: 0.3rem solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}
.calendar-entry--completed { border-left-color: var(--color-success); background: var(--color-success-subtle); }
.calendar-entry p { margin: 0; font-size: var(--font-size-sm); }
.calendar-entry-status { font-weight: 800; }
.calendar-entry-continuation { color: var(--color-brand-strong); font-weight: 700; }
.calendar-information { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.calendar-week-selector {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-week-date {
  min-width: 0;
  min-height: var(--target-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.calendar-week-date strong { font-size: 0.75rem; }
.calendar-week-date small { color: var(--color-brand-strong); font-weight: 800; }
.calendar-week-date:hover { border-color: var(--color-border); background: var(--color-surface-subtle); }
.calendar-week-date--selected { border-color: var(--color-brand); background: var(--color-surface-subtle); }
.calendar-focused-timeline {
  max-height: 24rem;
  margin-top: var(--space-3);
  overflow-y: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.calendar-time-row {
  min-height: 3rem;
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.75rem;
}
.calendar-time-row:nth-child(even) { border-bottom-style: dashed; }
.calendar-week-stacked-entries { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

dialog { width: min(calc(100% - 2rem), 36rem); padding: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-sheet); }
dialog::backdrop { background: rgb(23 33 27 / 55%); }
.dialog-content { padding: var(--space-5); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.component-fixture { margin-top: var(--space-6); }
.component-fixture > summary { min-height: var(--target-size); display: flex; align-items: center; font-weight: 750; cursor: pointer; }
.fixture-grid { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.fixture-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 63.99rem) {
  .library-table, .library-table tbody, .library-table tr, .library-table td { display: block; }
  .library-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .library-table tr {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .library-table td {
    display: grid;
    grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
  }
  .library-table td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 750;
  }
}

@media (max-width: 42rem) {
  .dashboard-header { align-items: stretch; }
  .dashboard-header > *, .dashboard-primary-action { width: 100%; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .data-table tr { margin-top: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .data-table td { display: grid; grid-template-columns: minmax(6rem, 0.45fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border: 0; }
  .data-table td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 750; }
  .definition-list { grid-template-columns: 1fr; }
  .definition-list div { display: block; border-bottom: var(--border-width) solid var(--color-border); }
  .definition-list dt, .definition-list dd { border: 0; }
  .definition-list dd { padding-top: 0; }
  .metadata-list div { grid-template-columns: 1fr; gap: var(--space-1); }
  .intervention-table { min-width: 0; }
  .intervention-table-wrap { overflow: visible; }
}

@media (min-width: 42.01rem) {
  .customer-table-wrap { display: block; overflow-x: auto; }
  .customer-card-list { display: none; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--address { grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1.3fr) minmax(8rem, 0.7fr); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Sidebar appears only when at least 64rem of CSS-pixel width remains after zoom. */
@media (min-width: 64rem) {
  .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: var(--border-width) solid var(--color-border); background: var(--color-surface); }
  .sidebar-brand { display: flex; align-items: center; min-height: 4rem; padding-inline: var(--space-5); }
  .desktop-navigation { padding: var(--space-3); }
  .workspace-header { padding-inline: var(--space-6); }
  .phone-brand, .phone-navigation { display: none; }
  .main-content { width: min(100%, 80rem); margin-inline: auto; padding: var(--space-6); }
  .dashboard-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recent-interventions { grid-column: 1 / -1; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-toolbar { grid-template-columns: auto minmax(12rem, 1fr) auto; align-items: center; }
  .calendar-period-navigation { grid-template-columns: repeat(3, auto); }
  .calendar-view-navigation { grid-template-columns: repeat(2, auto); }
  .calendar-wide { min-width: 0; display: block; }
  .calendar-focused { display: none; }
  .calendar-weekdays, .calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .calendar-weekdays span {
    min-width: 0;
    padding: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 750;
    text-align: center;
  }
  .calendar-month-grid { border-top: var(--border-width) solid var(--color-border); border-left: var(--border-width) solid var(--color-border); }
  .calendar-day {
    min-width: 0;
    min-height: 10rem;
    padding: var(--space-2);
    border-right: var(--border-width) solid var(--color-border);
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }
  .calendar-day--outside { background: var(--color-surface-subtle); }
  .calendar-day--selected { box-shadow: inset 0 0 0 2px var(--color-brand); }
  .calendar-day h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin: 0; font-size: var(--font-size-sm); }
  .calendar-day h3 a {
    min-width: var(--target-size);
    min-height: var(--target-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
  }
  .calendar-day h3 a:hover { background: var(--color-surface-subtle); }
  .calendar-selected-label, .calendar-today-label {
    color: var(--color-brand-strong);
    font-size: 0.7rem;
    font-weight: 750;
  }
  .calendar-day-entries { min-width: 0; display: grid; gap: var(--space-2); }
  .calendar-day .calendar-entry { padding: var(--space-2); }
  .calendar-day .calendar-entry p { font-size: 0.75rem; }
  .calendar-overflow { min-width: 0; }
  .calendar-overflow summary { min-height: var(--target-size); display: flex; align-items: center; color: var(--color-brand-strong); font-size: var(--font-size-sm); font-weight: 750; cursor: pointer; }
  .calendar-overflow-entries { min-width: 0; display: grid; gap: var(--space-2); }
  .calendar-week-scroll {
    max-height: 70vh;
    overflow: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .calendar-week-grid {
    --calendar-minute-height: 0.1rem;
    min-width: 0;
    display: grid;
    grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr));
  }
  .calendar-week-corner, .calendar-week-day-heading {
    position: sticky;
    z-index: 5;
    top: 0;
    min-width: 0;
    min-height: var(--target-size);
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }
  .calendar-week-corner {
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 750;
  }
  .calendar-week-day-heading { border-left: var(--border-width) solid var(--color-border); }
  .calendar-week-day-heading--selected { box-shadow: inset 0 -3px 0 var(--color-brand); }
  .calendar-week-day-heading a {
    min-height: var(--target-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    color: var(--color-ink);
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }
  .calendar-week-day-heading span, .calendar-week-day-heading small { color: var(--color-muted); }
  .calendar-week-day-heading small { font-size: 0.65rem; }
  .calendar-week-time-axis { grid-column: 1; }
  .calendar-week-day-column {
    position: relative;
    min-width: 0;
    border-left: var(--border-width) solid var(--color-border);
  }
  .calendar-week-background div { height: 3rem; border-bottom: var(--border-width) solid var(--color-border); }
  .calendar-week-background div:nth-child(even) { border-bottom-style: dashed; }
  .calendar-week-positioned-entries { position: absolute; inset: 0; }
  .calendar-week-entry-position {
    position: absolute;
    z-index: 2;
    top: calc(var(--calendar-start) * var(--calendar-minute-height));
    left: calc((100% / var(--calendar-lanes)) * var(--calendar-lane));
    width: calc(100% / var(--calendar-lanes));
    min-height: max(calc(var(--calendar-span) * var(--calendar-minute-height)), var(--target-size));
  }
  .calendar-week-entry {
    min-height: inherit;
    padding: var(--space-1);
  }
  .calendar-week-entry p { font-size: 0.68rem; line-height: 1.25; }
  .calendar-dst-entries {
    position: absolute;
    z-index: 3;
    inset: var(--space-2) var(--space-1) auto;
  }
  .calendar-dst-entries ol { display: grid; gap: var(--space-2); }
  .calendar-dst-entries .calendar-entry { padding: var(--space-1); }
  .calendar-dst-entries .calendar-entry p { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}