/* Coda reference bridge. The four supplied files in design/coda stay verbatim.
   Operational states keep their semantic colours; brand accents use the source tokens. */
:root {
  color-scheme: light;
  --font-display: 'Calibre-R', 'Manrope', var(--font-inter);
  --font: var(--font-inter);
  --ink: var(--color-ink-black);
  --muted: var(--color-graphite);
  --graphite: var(--color-carbon);
  --accent: var(--color-carbon);
  --accent-soft: var(--color-cream-paper);
  --green: var(--color-carbon);
  --lime: var(--color-cream-paper);
  --line: var(--color-ash-border);
  --input-line: var(--color-ash-border);
  --soft: var(--color-cream-paper);
  --white: var(--color-pure-white);
  --radius: var(--radius-cards);
  --shadow: var(--shadow-lg);
  --focus: var(--color-ink-black);
}
html { scroll-padding-block: var(--spacing-24); }
body {
  background: var(--color-pure-white);
  color: var(--color-ink-black);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
}
body :is(button, input, select, textarea) { font-family: var(--font-inter); }
body :is(h3, h4) { font-family: var(--font-inter); font-weight: var(--font-weight-bold); }
body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 4px;
}
body :is(.ops-workspace, .ops-dialog, .staff, .staff-dialog, .jp-workspace, .hm-manager, .hm-dialog, .hwm-manager, .hwm-dialog, .hotel-engine) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 4px;
}
body ::selection { background: var(--color-cream-paper); color: var(--color-carbon); }
body .icon { stroke-width: 1.5; }
body :is(.main-shell, .content, .panel, .form-panel, .field) { min-width: 0; }

/* 44px targets retain comfortable touch access while matching the reference. */
body .btn,
body :is(.ops-workspace, .ops-jewellery, .pc-root, .pc-dialog, .ops-dialog) .btn,
body :is(.jtr-button, .hm-button, .hwm-button, .jp-primary, .jp-subtle) {
  min-height: var(--theme-control-height, 44px);
  padding: var(--spacing-12) var(--spacing-20);
  gap: var(--spacing-8);
  border: 0;
  border-radius: var(--radius-buttons);
  background: var(--color-pure-white);
  color: var(--color-ink-black);
  box-shadow: var(--shadow-subtle-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
body .btn:hover:not(:disabled),
body :is(.ops-workspace, .ops-jewellery, .pc-root, .pc-dialog, .ops-dialog) .btn:hover:not(:disabled),
body :is(.jtr-button, .hm-button, .hwm-button, .jp-subtle):hover:not(:disabled) {
  background: var(--color-cream-paper);
  box-shadow: var(--shadow-subtle);
  color: var(--color-ink-black);
  transform: none;
}
body .btn.primary,
body :is(.ops-workspace, .ops-jewellery, .pc-root, .pc-dialog, .ops-dialog) .btn.primary,
body :is(.jtr-button-primary, .hm-primary, .hwm-primary, .jp-primary),
body :is(.hm-manager, .hm-dialog) .hm-button.hm-primary,
body :is(.hwm-manager, .hwm-dialog) .hwm-button.hwm-primary,
body .jp-workspace .jp-primary,
body :is(.ops-workspace, .ops-jewellery) .jtr-button-primary,
body .pc-root button[data-pc="new"] {
  background: var(--color-carbon);
  color: var(--color-pure-white);
  box-shadow: var(--shadow-subtle);
}
body .btn.primary:hover:not(:disabled),
body :is(.ops-workspace, .ops-jewellery, .pc-root, .pc-dialog, .ops-dialog) .btn.primary:hover:not(:disabled),
body :is(.jtr-button-primary, .hm-primary, .hwm-primary, .jp-primary):hover:not(:disabled),
body :is(.hm-manager, .hm-dialog) .hm-button.hm-primary:hover:not(:disabled),
body :is(.hwm-manager, .hwm-dialog) .hwm-button.hwm-primary:hover:not(:disabled),
body .jp-workspace .jp-primary:hover:not(:disabled),
body :is(.ops-workspace, .ops-jewellery) .jtr-button-primary:hover:not(:disabled),
body .pc-root button[data-pc="new"]:hover:not(:disabled) {
  background: var(--color-ink-black);
  color: var(--color-pure-white);
  box-shadow: var(--shadow-subtle);
}
body .btn.small,
body :is(.ops-workspace, .ops-jewellery, .pc-root) .btn.small {
  min-height: var(--theme-control-height, 44px);
  padding: var(--spacing-8) var(--spacing-12);
}
body .btn.ghost { background: transparent; box-shadow: none; color: var(--color-ink-black); }
body .hero-card .btn.ghost { color: var(--color-pure-white); box-shadow: inset 0 0 0 1px currentColor; }
body .btn.danger { color: #9f2828; }
body :is(.icon-btn, .hm-close, .hwm-close) {
  min-width: 44px;
  min-height: var(--theme-control-height, 44px);
  border-radius: var(--radius-buttons);
  color: var(--color-ink-black);
}
body :is(.icon-btn, .hm-close, .hwm-close):hover { background: var(--color-cream-paper); }
body :is(.link-btn, .feed-open, .feed-toggle) { color: var(--color-ink-black); text-underline-offset: 4px; }
body :is(.link-btn, .feed-open, .feed-toggle):hover { text-decoration: underline; }
body :is(button, input, select, textarea):disabled { cursor: not-allowed; }

/* Native fields preserve their semantics, including date and number controls. */
body :is(.content, dialog, .access-screen) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  min-height: var(--theme-control-height, 44px);
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  border-radius: var(--radius-buttons);
  background: var(--color-pure-white);
  color: var(--color-ink-black);
  box-shadow: var(--shadow-subtle-2);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
}
body :is(.content, dialog, .access-screen) :is(input, select, textarea):focus-visible {
  box-shadow: var(--shadow-subtle);
}
body :is(.content, dialog, .access-screen) :is(input, select, textarea)[aria-invalid=true] {
  box-shadow: inset 0 0 0 1.5px #9f2828;
}
body :is(input, textarea)::placeholder { color: var(--color-graphite); opacity: 1; }
body :is(input[type=checkbox], input[type=radio]) { accent-color: var(--color-carbon); }
body :is(.search-input, .feed-search) { background: var(--color-pure-white); border-color: var(--color-ash-border); border-radius: var(--radius-buttons); }
body :is(.search-input, .feed-search) input { box-shadow: none; background: transparent; }
body .field { gap: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-graphite); }
body .field label { color: var(--color-ink-black); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
body .field small { color: var(--color-graphite); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
body .form-grid { gap: var(--spacing-20); }
body .form-actions { gap: var(--spacing-8); margin-top: var(--spacing-24); padding-top: var(--spacing-20); border-color: var(--color-ash-border); }

/* Common records and tables. Status badges keep their pre-existing meaning. */
body :is(.panel, .form-panel, .location-card, .asset-card, .setup-card) {
  border: 1px solid var(--color-ash-border);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
  box-shadow: none;
}
body .panel-header { padding: var(--spacing-24); gap: var(--spacing-16); }
body :is(.panel-header h2, .panel-heading h2, .form-panel h2, .subheading) {
  font-family: var(--font-inter);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
body :is(.panel-header p, .panel-heading small, .form-panel > p) {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-graphite);
}
body :is(.table-wrap, .ops-table-wrap, .jtr-table-wrap) { scrollbar-color: var(--color-ash-border) var(--color-pure-white); }
body th { background: var(--color-cream-paper); color: var(--color-graphite); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
body td { color: var(--color-ink-black); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); line-height: var(--leading-body-sm); }
body :is(th, td) { border-color: var(--color-ash-border); padding: var(--spacing-16) var(--spacing-20); }
body tbody tr:hover { background: var(--color-cream-paper); }
body :is(.item-title, .inventory-table .item-title) { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
body :is(.item-subtitle, .inventory-table .item-subtitle, .table-footer) { font-size: var(--text-body-sm); color: var(--color-graphite); }
body :is(.badge, .chip, .ops-badge) { border-radius: 9999px; }
body :is(.badge.gray, .chip) { color: var(--color-graphite); background: var(--color-cream-paper); border-color: var(--color-ash-border); }
body :is(.demo-banner, .info-strip, .drawer-note, .quote-total, .access-role) {
  background: var(--color-cream-paper);
  border-color: var(--color-ash-border);
  border-radius: var(--radius-cards);
  color: var(--color-graphite);
}
body .empty { padding: var(--spacing-40) var(--spacing-24); color: var(--color-graphite); }
body :is(.record-row, .settings-row, .search-result) { border-color: var(--color-ash-border); }
body :is(.record-row b, .settings-row b, .search-result b) { color: var(--color-ink-black); font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
body :is(.record-row p, .settings-row p, .search-result small) { color: var(--color-graphite); font-size: var(--text-body-sm); }
body :is(.item-art, .details-art, .asset-visual, .stat-icon) { background: var(--color-cream-paper); border-color: var(--color-ash-border); color: var(--color-ink-black); border-radius: var(--radius-images); }

/* Dialog geometry remains native so focus, Escape and modal isolation survive. */
body dialog {
  color: var(--color-ink-black);
  border: 1px solid var(--color-ash-border);
  border-radius: var(--radius-cards);
  background: var(--color-pure-white);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-24);
}
body dialog::backdrop { background: rgb(0 0 0 / .44); backdrop-filter: none; }
body :is(.dialog-top h2, .details-hero h2) { font-family: var(--font-inter); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
body .details-hero { gap: var(--spacing-20); padding-bottom: var(--spacing-24); margin-bottom: var(--spacing-24); border-color: var(--color-ash-border); }
body .detail-grid { gap: var(--spacing-24); }
body .detail-field small { font-size: var(--text-body-sm); color: var(--color-graphite); }
body .detail-field span { font-size: var(--text-body); color: var(--color-ink-black); }
body #toast { background: var(--color-carbon); color: var(--color-pure-white); border: 0; border-radius: var(--radius-buttons); box-shadow: var(--shadow-lg); }
body .access-screen { background: var(--color-cream-paper); }
body .access-screen h1 { font-family: var(--font-display); font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }

@media (max-width: 600px) {
  /* The phone header already names the business. Keep the semantic heading
     and any store warning without repeating an empty business banner. */
  body .shell .ops-product-view > .ops-hero { padding: 0; margin: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
  body .shell .ops-product-view > .ops-hero h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body :is(.btn, .btn.small) { padding: var(--spacing-12) var(--spacing-16); }
  body .panel-header { padding: var(--spacing-16); }
  body .form-grid { gap: var(--spacing-16); }
  body dialog { padding: var(--spacing-16); max-width: calc(100vw - var(--spacing-24)); max-height: calc(100dvh - var(--spacing-24)); }
  body .detail-grid { gap: var(--spacing-16); }
  body .settings-row { padding: var(--spacing-16); }
  body :is(.dialog-top, .details-hero) { gap: var(--spacing-16); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body *, body *::before, body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: white; }
  body :is(.panel, .stat, .overview-business, dialog) { box-shadow: none; }
}

/* The map placement banner is carbon; its keyboard ring needs contrast. */
body .im-placing :is(button, a, [tabindex]):focus-visible { outline-color: var(--color-pure-white); }

/* The catalogue supplies its own editorial heading. Keep business/store
   context compact without displacing the search and first product row. */
@media screen and (min-width: 601px) {
  body .shell .ops-product-view > .ops-hero { padding: var(--spacing-16) var(--spacing-24); }
  body .shell .ops-product-view > .ops-hero h1 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); margin: 0; }
  body .shell .ops-product-view > .ops-hero :is(.ops-kicker, .ops-hero-meta, .ops-hero-art),
  body .shell .ops-product-view > .ops-hero > div:first-child > p:not(.ops-store-context) { display: none; }
  body .shell .ops-product-view:has(#product-catalog-mount) > .ops-section-heading > div:first-child { display: none; }
  body .shell .ops-product-view:has(#product-catalog-mount) > .ops-section-heading { justify-content: flex-end; margin-block: var(--spacing-16); }
}

/* Shared designer controls connect extra layout knobs to actual components. */
@media screen {
  body .shell :is(.panel, .form-panel, .location-card, .asset-card, .setup-card, .pc-card, .pc-section, .coda-overview-heading, .overview-quicklink), body .pc-dialog .pc-section { border-width: var(--theme-border-width, 1px); }
  body .coda-overview .panel-header { padding: var(--card-padding, 24px); }
  body .shell :is(.nav-item, .nav-group-icon) > .icon { width: var(--theme-icon-size, 20px); height: var(--theme-icon-size, 20px); }
  body .shell .nav-group-icon { flex-basis: var(--theme-icon-size, 20px); }
  body .shell .nav-group-title > .icon { width: calc(var(--theme-icon-size, 20px) * .8); height: calc(var(--theme-icon-size, 20px) * .8); }
  body .shell .content > .coda-overview .overview-lower { gap: var(--card-padding, 24px); }
  body .shell :is(.ops-actions, .pc-actions, .head-actions) { gap: var(--element-gap, 8px); }
  body .coda-overview .overview-intro { margin-bottom: calc(var(--section-gap, 96px) / 3); }
}