/* SCI quiet layer: Operations and CNC brought to the shared standard
   (DESIGN.md, shared/sci-tokens.css). Loaded LAST by index.html and
   cnc/index.html, so removing the two <link> tags undoes all of it.

   Scope: signed-in pages only (body.sci-shell). The shared shop clock kiosk
   never gets body.sci-shell, so its big clock stays exactly as it is. PDF
   previews (.pdf-preview, .pdf-export-document) are drawn from the screen
   before they are emailed, so they keep their own print styling. */

/* Selectors start with body.sci-shell:not(#q):not(#q): the two :not(#q)
   match every page and only lift specificity above the older #sidePanel
   rules, so this layer wins without a longer chain of !important fixes. */

/* 1. Old variable names point at the shared tokens. Every older rule that
      uses var(--shadow-*) or var(--r-*) goes flat and small with them. */
:root,
:root[data-theme="dark"] {
  --text: var(--sci-ink);
  --text-2: var(--sci-ink);
  --muted: var(--sci-muted);
  --faint: var(--sci-muted);
  --bg: var(--sci-ground);
  --white: var(--sci-surface);
  --panel-solid: var(--sci-surface);
  --surface: var(--sci-surface);
  --surface-2: var(--sci-surface-2);
  --border: var(--sci-line);
  --border-strong: var(--sci-line-strong);
  --red: var(--sci-accent);
  --red-dark: var(--sci-accent-hover);
  --red-light: var(--sci-pale);
  --red-bg: var(--sci-red-bg);
  --green: var(--sci-green);
  --green-bg: var(--sci-green-bg);
  --blue: var(--sci-blue);
  --blue-bg: var(--sci-blue-bg);
  --amber: var(--sci-amber);
  --amber-bg: var(--sci-amber-bg);
  --brand-text: var(--sci-ink);
  --brand-muted: var(--sci-muted);
  --brand-border: var(--sci-line);
  --brand-bg: var(--sci-ground);
  --brand-surface: var(--sci-surface);
  --brand-surface-soft: var(--sci-surface);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --r-xs: var(--sci-radius-control);
  --r-sm: var(--sci-radius-control);
  --r: var(--sci-radius);
  --r-md: var(--sci-radius);
  --r-lg: var(--sci-radius);
  --r-xl: var(--sci-radius);
}
/* 2. A flat page: one plain ground, no gradient wash, no frosted glass. */
html body.sci-shell:not(#q):not(#q) {
  background: var(--sci-ground) !important;
  background-attachment: scroll !important;
  color: var(--sci-ink);
  font-family: var(--sci-font);
}
body.sci-shell:not(#q):not(#q) :not(.pdf-preview, .pdf-export-document, .pdf-preview *, .pdf-export-document *) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* 3. One typeface. Inter replaces Barlow Condensed and the system stacks.
      Its two faces (sci-tokens.css) render any weight as 400 or 600. */
body.sci-shell:not(#q):not(#q) :not(svg, svg *, code, pre, kbd, samp, .shell-logo, .pdf-preview, .pdf-export-document, .pdf-preview *, .pdf-export-document *) {
  font-family: var(--sci-font) !important;
}
body.sci-shell:not(#q):not(#q) :is(input, select, textarea, button) { font-family: var(--sci-font) !important; }

/* 4. Sentence case, normal tracking. Page titles keep a slight tighten. */
body.sci-shell:not(#q):not(#q) :not(.shell-logo, .pdf-preview, .pdf-export-document, .pdf-preview *, .pdf-export-document *) {
  text-transform: none !important;
  letter-spacing: normal !important;
}
body.sci-shell:not(#q):not(#q) :is(h1, h2, .shell-title, .shell-hello) { letter-spacing: -.01em !important; }

/* 5. Two weights. Headings, strong text and buttons are semibold (600);
      everything that was medium (500) reads as regular. */
body.sci-shell:not(#q):not(#q) :is(h1, h2, h3, h4, h5, h6, strong, b, th, legend, .btn, .shell-title, .shell-me-btn):not(.pdf-preview *, .pdf-export-document *) {
  font-weight: var(--sci-strong) !important;
}

/* 6. No shadows. Floating layers (menus, dialogs, search results) keep one
      soft shadow so they separate from the page under them. */
body.sci-shell:not(#q):not(#q) :not(dialog, dialog *, [role="dialog"], [role="menu"], #shellMe, .shell-search-results, .job-log-more-menu, .menu-content, .pdf-preview *, .pdf-export-document *) {
  box-shadow: none !important;
}
body.sci-shell:not(#q):not(#q) :is(#shellMe:not([hidden]), .shell-search-results, .job-log-more-menu, dialog[open]) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}
/* Keyboard focus stays visible without a glow. */
body.sci-shell:not(#q):not(#q) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sci-focus) !important;
  outline-offset: 2px !important;
}

/* 7. Small corners: 6px for controls and labels, 8px for panels and lists.
      Avatars and radio buttons stay round. */
body.sci-shell:not(#q):not(#q) :where(button, .btn, a.btn, input:not([type="checkbox"], [type="radio"]), select, textarea,
  [class*="pill"], [class*="chip"], [class*="badge"], [class*="tag"], [class*="severity"], [class*="count"],
  .theme-toggle, .shell-search, .shell-search input):not(.shell-me-btn, .shell-row, .shell-tile, .shell-clock, [class*="avatar"], [class*="dot"], .pdf-preview *, .pdf-export-document *) {
  border-radius: var(--sci-radius-control) !important;
}
body.sci-shell:not(#q):not(#q) :where(.panel, #sidePanel, form, section, article, details, .nor-parts, .status-line, .table-wrap,
  [class*="card"], [class*="panel"], [class*="section"], [class*="menu"], [class*="rows"], [class*="tile"],
  .shell-clock, .shell-all-clear, .approval-actions):not([class*="avatar"], [class*="dot"], .shell-me-btn, .pdf-preview, .pdf-export-document, .pdf-preview *, .pdf-export-document *) {
  border-radius: var(--sci-radius) !important;
}
body.sci-shell:not(#q):not(#q) input[type="checkbox"] { border-radius: 4px !important; }

/* Text fields get their whole 1px outline back: an early layer removed the
   bottom border of every input ("rogue underlines"), leaving fields open at
   the bottom. The outline is a 3:1 gray so a field reads in sunlight. */
body.sci-shell:not(#q):not(#q) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea):not([aria-invalid="true"], .is-invalid, .invalid, .pdf-preview *, .pdf-export-document *) {
  border: 1px solid var(--sci-control-border) !important;
}

/* 8. Buttons: flat. Red only for the one primary action. */
body.sci-shell:not(#q):not(#q) .btn.primary,
body.sci-shell:not(#q):not(#q) button.primary {
  background: var(--sci-accent) !important;
  border-color: var(--sci-accent) !important;
  color: #fff !important;
}
body.sci-shell:not(#q):not(#q) .btn.primary:hover,
body.sci-shell:not(#q):not(#q) button.primary:hover { background: var(--sci-accent-hover) !important; border-color: var(--sci-accent-hover) !important; }

/* 9. Type scale. Page title, section title, body. */
body.sci-shell:not(#q):not(#q) .shell-title { font-size: var(--sci-text-xl) !important; }
body.sci-shell:not(#q):not(#q) #sidePanel h2 { font-size: 20px; }
body.sci-shell:not(#q):not(#q) #sidePanel h3 { font-size: var(--sci-text-lg); }
body.sci-shell:not(#q):not(#q) #sidePanel h4 { font-size: var(--sci-text-md); }

/* 10. One card level. The page panel is the card, so sections inside a
       sales form are plain groups split by a hairline, not boxes in a box. */
body.sci-shell:not(#q):not(#q) #sidePanel .sf-section {
  border: 0 !important;
  border-top: var(--sci-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.sci-shell:not(#q):not(#q) #sidePanel .sf-section:first-of-type { border-top: 0 !important; }

/* 11. Readable in sunlight (L5). The status colors above are the darker
       shared tones, which pass 4.5:1 on their tinted labels. */

/* Phones: body text and fields at 16px (also stops iPhone zoom on focus);
   labels and secondary lines no smaller than 14px. */
@media (max-width: 760px) {
  body.sci-shell:not(#q):not(#q) #sidePanel :is(p, li, dd, input:not([type="checkbox"], [type="radio"]), select, textarea) {
    font-size: var(--sci-text-lg) !important;
  }
  body.sci-shell:not(#q):not(#q) #sidePanel :is(small, th, label, summary, .status-line, .muted, .hint, .cell-sub, .sales-tag, [class*="pill"], [class*="chip"], [class*="badge"], [class*="meta"], [class*="sub"], [class*="note"], [class*="eyebrow"], [class*="count"], [class*="severity"]):not(h1, h2, h3, h4) {
    font-size: max(14px, 1em) !important;
  }
}

/* Dark mode: SCI red text (logo, current menu item, danger links) uses the
   lifted red so it stays readable on the dark ground. */
:root[data-theme="dark"] body.sci-shell:not(#q):not(#q) :is(.shell-logo, .shell-nav-item.is-active, .shell-tab.is-active, .btn.danger, .signature-empty) {
  color: var(--sci-accent-ink) !important;
}

/* Home "Start" forms: one plain list like the Office list under it, not a
   grid of boxed tiles. Same buttons, same order, same taps. */
body.sci-shell:not(#q):not(#q) .shell-tiles {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--sci-line) !important;
  border-radius: var(--sci-radius) !important;
  background: var(--sci-surface) !important;
}
body.sci-shell:not(#q):not(#q) .shell-tile {
  display: flex !important;
  align-items: center !important;
  justify-items: initial !important;
  gap: 14px !important;
  min-height: 56px !important;
  aspect-ratio: auto !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--sci-line) !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: var(--sci-text-lg) !important;
  font-weight: var(--sci-strong) !important;
  text-align: left !important;
}
body.sci-shell:not(#q):not(#q) .shell-tile:first-child { border-top: 0 !important; }
body.sci-shell:not(#q):not(#q) .shell-tile:hover { background: var(--sci-hover) !important; }
body.sci-shell:not(#q):not(#q) .shell-tile > * { margin: 0 !important; }

/* iPhone/iPad Safari (r74): date and time fields get a fixed native width
   and centered text, so they ran past their card. Keep them inside their box
   and left-aligned like every other field. Applies on every page (the kiosk
   has no date fields). */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit, input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; }

.cnc-closeout-confirmation {
  box-sizing: border-box;
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: clamp(1rem, 4vw, 1.25rem);
  overflow: auto;
  overflow-wrap: anywhere;
  background: var(--sci-surface);
  color: var(--sci-ink);
  border: 1px solid var(--sci-line-strong);
  border-radius: 12px;
  font: var(--sci-text-lg)/var(--sci-leading) var(--sci-font);
}
.cnc-closeout-confirmation::backdrop { background: rgba(0, 0, 0, .58); }
.cnc-closeout-confirmation h2, .cnc-closeout-confirmation h3 { margin: 0; }
.cnc-closeout-confirmation p { margin: .5rem 0 1rem; }
.cnc-closeout-confirmation section { margin: .75rem 0; padding: .75rem; border: 1px solid var(--sci-line-strong); border-radius: 8px; }
.cnc-closeout-confirmation section p { margin-bottom: 0; }
.cnc-closeout-confirmation dl { margin: .5rem 0 0; }
.cnc-closeout-confirmation dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem; padding: .2rem 0; }
.cnc-closeout-confirmation dt { color: var(--sci-muted); }
.cnc-closeout-confirmation dd { margin: 0; font-weight: var(--sci-strong); }
.cnc-closeout-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.cnc-closeout-confirmation-actions .btn { min-height: 44px; white-space: normal; }