/* ==========================================================================
   SHOP OS — canonical design system
   Powered by Chris AI Mechanic · tenant: Anything Automotive
   --------------------------------------------------------------------------
   Loaded AFTER shop-theme.css and release-fit-hotfix.css. shop-theme.css is
   already token-driven (115 var() usages), so this file re-points those tokens
   at the approved Shop OS palette rather than rewriting 2,400 lines of rules.
   That keeps every existing layout, component and JS DOM hook intact.

   Design philosophy: MECHANIC + AI, SIDE BY SIDE.
   The shell is a dark shop-floor instrument: coal ground, graphite panels,
   steel edges. Electric orange means CHRIS IS INVOLVED -- it is an activity
   signal, never a danger signal. Vehicle and system urgency is carried only by
   the semantic state colours below.

   Dark is the launch identity. The palette is applied to :root and to BOTH
   body.theme-light and body.theme-dark, so an owner whose browser still has
   themeMode:"light" in localStorage from the old portal still gets Shop OS.
   ========================================================================== */

:root {
  /* --- canonical palette ------------------------------------------------ */
  --coal: #0A0B0D;
  --graphite: #16181C;
  --steel: #3C4147;
  --ink: #EEF0F2;
  --chris-signal: #FF7A1A;
  --amber-glow: #FFB020;
  --state-good: #3DDC84;
  --state-attention: #F5A623;
  --state-critical: #FF4D4D;

  /* Derived surfaces. Kept few and named for what they are. */
  --graphite-raised: #1E2127;
  --graphite-sunken: #101216;
  --steel-soft: #2A2E34;
  --ink-soft: #A7AFB8;
  --ink-faint: #6E767F;

  /* --- typography ------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Re-point the existing shop-theme tokens. Every rule already written against
   these keeps working and simply renders in the Shop OS palette. */
:root,
body.theme-light,
body.theme-dark {
  --bg: var(--coal);
  --bg-panel: var(--graphite);
  --bg-panel-muted: var(--graphite-raised);
  --bg-dark: var(--graphite-sunken);
  --bg-dark-soft: var(--graphite);
  --line: var(--steel-soft);
  --line-strong: var(--steel);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  /* "Inverse" here means text on the darkest surfaces (--bg-dark, the
     topbar, .btn-dark, .code-tag), so it stays light. */
  --text-inverse: var(--ink);

  /* Orange = Chris/AI activity. */
  --brand: var(--chris-signal);
  --brand-deep: #D9600B;
  --brand-soft: rgba(255, 122, 26, 0.14);

  /* Semantic vehicle/system state, deliberately separate from Chris orange. */
  --ok: var(--state-good);
  --ok-soft: rgba(61, 220, 132, 0.14);
  --warn: var(--state-attention);
  --warn-soft: rgba(245, 166, 35, 0.14);
  --danger: var(--state-critical);
  --danger-soft: rgba(255, 77, 77, 0.14);

  --shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --radius-sm: 10px;
}

/* The shell: near-black ground with a restrained Chris keylight. Instrument
   panel, not a gradient poster. */
body,
body.theme-light,
body.theme-dark {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -8%, rgba(255, 122, 26, 0.10), transparent 34rem),
    linear-gradient(180deg, #0C0E11 0%, var(--coal) 44%, #07080A 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* --- display type -------------------------------------------------------- */
h1, h2, h3,
.section-title,
.card-title {
  font-family: var(--font-display);
  letter-spacing: 0.012em;
}

h1 { font-weight: 700; }

/* Structured technical values read as instrument readouts: VIN, DTC codes,
   part numbers, timestamps, identifiers, measurements. */
.mono,
.vin,
.dtc-code,
.part-number,
.timestamp,
code,
kbd,
pre,
samp,
input[type="number"],
.chip-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Brand block — SHOP OS / Powered by Chris AI Mechanic / tenant / role
   ========================================================================== */

.shopos-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.shopos-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--steel);
  background: linear-gradient(160deg, var(--graphite-raised), var(--graphite-sunken));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shopos-mark svg { width: 26px; height: 26px; display: block; }

.shopos-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.shopos-wordmark .shopos-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.shopos-wordmark .shopos-poweredby {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.shopos-wordmark .shopos-poweredby strong {
  font-weight: 600;
  color: var(--chris-signal);
}

/* Tenant + role. Anything Automotive appears here as the shop being operated,
   never as the name of the software. */
.shopos-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shopos-tenant,
.shopos-role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--steel-soft);
  background: var(--graphite-sunken);
  font-size: 0.75rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.shopos-tenant::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chris-signal);
  box-shadow: 0 0 7px rgba(255, 122, 26, 0.75);
}

.shopos-role {
  font-weight: 600;
  color: var(--ink);
  border-color: var(--steel);
}

.shop-topbar .topbar-inner {
  gap: 0.85rem;
}

.shop-topbar .header-nav-menu {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

.shop-topbar .header-nav-menu > summary {
  min-width: 7.5rem;
}

.shop-header-status {
  flex-wrap: nowrap;
  gap: 0.55rem;
}

.shop-header-status .status-card {
  min-width: 0;
  padding: 0.55rem 0.7rem;
  box-shadow: none;
}

.shop-header-status .status-label {
  margin-bottom: 0.15rem;
  font-size: 0.64rem;
}

/* ==========================================================================
   Active job context strip — persists across Scanner / Diagnostics / Chris /
   Inventory / History / Reports so the product reads as one operating system.
   ========================================================================== */

.active-job-strip {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--steel-soft);
  border-left: 3px solid var(--chris-signal);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(255, 122, 26, 0.08), transparent 42%),
    var(--graphite);
}

.active-job-strip[hidden] { display: none; }

.active-job-field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.active-job-label {
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.active-job-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.active-job-value.is-identifier {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--amber-glow);
}

.active-job-empty {
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* Notifications stay compact and never carry persistent work-order data. */
.global-flash-shell {
  width: min(25rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.55rem;
}

.global-flash-shell .flash-global:not(.hidden) {
  justify-self: end;
  width: 100%;
}

.app-shell {
  padding-bottom: 1.6rem;
}

/* ==========================================================================
   Workspace drawers — independent overlays keep the main workbench stable.
   ========================================================================== */

.workspace-edge-tab {
  position: fixed;
  left: 0;
  top: 42%;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.65rem 0.8rem 0.65rem 0.62rem;
  border: 1px solid rgba(255, 122, 26, 0.42);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(38, 42, 49, 0.98), rgba(21, 23, 27, 0.98));
  box-shadow: 10px 12px 28px rgba(0, 0, 0, 0.34);
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.workspace-edge-tab:hover,
.workspace-edge-tab[aria-expanded="true"] {
  color: var(--amber-glow);
  border-color: var(--chris-signal);
}

.workspace-edge-tab-mark {
  font-size: 1rem;
  line-height: 1;
}

.drawer-heading,
.drawer-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.drawer-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.15rem 0 0.85rem;
  border-bottom: 1px solid var(--steel-soft);
  background: var(--bg-panel-muted);
}

.drawer-heading h2 {
  margin: 0;
  font-size: 1.9rem;
}

.tools-drawer-heading {
  flex: none;
}

.work-queue-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 122, 26, 0.08), transparent 30%),
    var(--bg-panel-muted);
  border-left: 1px solid rgba(255, 122, 26, 0.24);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.42);
  transform: translateX(105%);
  transition: transform 0.2s ease;
  overflow: hidden;
}

.work-queue-drawer.is-open {
  transform: translateX(0);
}

.work-queue-backdrop {
  z-index: 110;
}

.active-job-context {
  flex: none;
  display: grid;
  gap: 0.55rem;
}

.active-job-context .active-job-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.85rem;
  box-shadow: none;
}

.active-job-field-wide {
  grid-column: 1 / -1;
}

.active-job-context .active-job-value {
  overflow-wrap: anywhere;
}

.drawer-section-heading {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.drawer-count,
.header-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  color: var(--amber-glow);
  background: rgba(255, 122, 26, 0.13);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.work-queue-toggle-btn {
  gap: 0.5rem;
}

.work-queue-scroll {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 1.2rem;
  overflow-y: auto;
  padding-right: 0.2rem;
  scrollbar-gutter: stable;
}

.work-queue-section,
.work-queue-list {
  display: grid;
  gap: 0.65rem;
}

.work-queue-card {
  width: 100%;
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.9rem;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--steel-soft);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(30, 33, 39, 0.96), rgba(21, 23, 27, 0.98));
  cursor: pointer;
}

.work-queue-card:hover {
  border-color: rgba(255, 122, 26, 0.52);
  transform: translateY(-1px);
}

.work-queue-card.is-active {
  border-color: var(--chris-signal);
  box-shadow: inset 3px 0 0 var(--chris-signal);
}

.work-queue-card-head,
.work-queue-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.work-queue-card-head strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.015em;
}

.work-queue-card-id,
.work-queue-card-time {
  color: var(--amber-glow);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.work-queue-card-copy,
.work-queue-card-meta,
.drawer-empty-state {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.drawer-empty-state {
  padding: 0.9rem;
  border: 1px dashed var(--steel-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.015);
}

body.drawer-open {
  overflow: hidden;
}

.demo-mode .demo-mode-banner.hidden {
  display: flex !important;
}

.demo-mode-banner {
  width: min(calc(100% - 2rem), var(--content-width));
  margin: 0.75rem auto 0;
  padding: 0.75rem 0.95rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 176, 32, 0.42);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: rgba(32, 25, 15, 0.92);
  font-size: 0.78rem;
  text-align: center;
}

.demo-mode-banner strong {
  color: var(--amber-glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Truthful vehicle/system state. No fabricated percentages or health scores.
   ========================================================================== */

.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.state-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.state-pill.is-normal      { color: var(--state-good);      background: var(--ok-soft); }
.state-pill.is-attention   { color: var(--state-attention); background: var(--warn-soft); }
.state-pill.is-critical    { color: var(--state-critical);  background: var(--danger-soft); }
.state-pill.is-unknown     { color: var(--ink-faint);       background: rgba(110, 118, 127, 0.14); }
.state-pill.is-not-tested  { color: var(--ink-faint);       background: transparent; border-style: dashed; }

/* Chris activity is orange and is NOT a state colour. */
.chris-active {
  color: var(--chris-signal);
  border-color: rgba(255, 122, 26, 0.5);
  background: var(--brand-soft);
}

/* ==========================================================================
   Operational iconography — one inline SVG family. No emoji, no Unicode
   glyphs standing in for controls (that is how the drag handle became
   mojibake in the first place).
   ========================================================================== */

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--ink-faint);
  cursor: grab;
}

.tile-drag-handle:active { cursor: grabbing; }
.tile-drag-handle:hover  { color: var(--chris-signal); }
.tile-drag-handle svg    { width: 14px; height: 16px; display: block; }

/* ==========================================================================
   Accessibility — the concept art does not get to cost usability.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--chris-signal);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Technician-friendly hit targets on shop tablets. */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  button,
  select,
  input[type="text"],
  input[type="password"],
  input[type="search"] {
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  .shopos-wordmark .shopos-name { font-size: 1.3rem; }
  .workspace-edge-tab { top: auto; bottom: 1rem; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem 1rem;
  }

  .topbar-inner .shopos-brand {
    width: 100%;
    flex-flow: row wrap;
  }

  .topbar-inner .header-nav-menu {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    min-width: 0;
    width: auto;
  }

  .topbar-inner .header-nav-menu > summary {
    width: auto;
    min-width: 8rem;
  }

  .topbar-inner .topbar-status {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
    width: 100%;
    align-items: stretch;
  }

  .topbar-inner .topbar-status .status-card {
    min-width: 0;
  }

}

@media (max-width: 640px) {
  .topbar-inner,
  .topbar-inner .topbar-status {
    width: 100%;
  }
}

/* ==========================================================================
   Owner Access stages — PIN gate, Supabase sign-in, forced password change.
   Three visually distinct steps, because they are three different things:
   a door, an identity, and a credential handover.
   ========================================================================== */

.access-stage[hidden] { display: none; }

.access-stage-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.access-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.4rem 0 0.6rem;
  text-align: left;
}

.access-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.access-field > span {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.access-field input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--steel);
  border-radius: var(--radius-sm);
  background: var(--graphite-sunken);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.access-field input:focus-visible {
  border-color: var(--chris-signal);
  outline: 2px solid var(--chris-signal);
  outline-offset: 1px;
}

.access-stage-note {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-faint);
}


/* ---------------------------------------------------------------------------
   Developer Console (UVP-only surface)

   Deliberately shares the Shop OS palette rather than getting a look of its
   own: it is part of the same platform, and a visually separate admin theme is
   how internal tooling drifts into feeling like a different product. What it
   does NOT share is identity -- no client logo, and the tenant is named as
   something being inspected.
   --------------------------------------------------------------------------- */
.admin-topbar .brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-topbar h1 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-topbar .console-word {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Reads as "which shop am I looking at", never as whose console this is. */
.tenant-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chris-signal);
  border-radius: 6px;
  background: var(--bg-dark);
}

.tenant-chip .status-label {
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tenant-chip strong {
  font-size: 0.86rem;
  color: var(--ink);
}

.admin-review-hub {
  border-top: 3px solid var(--chris-signal);
}

.admin-review-heading,
.developer-review-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-review-heading {
  margin-bottom: 1rem;
}

.admin-review-heading .section-copy {
  max-width: 68rem;
}

.admin-review-note,
.developer-review-notice {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--chris-signal) 38%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chris-signal) 8%, var(--graphite-sunken));
  color: var(--ink-soft);
}

.admin-review-note {
  margin-bottom: 1rem;
}

.developer-review-notice {
  margin-bottom: 1rem;
}

.developer-review-notice > div {
  display: grid;
  gap: 0.2rem;
}

.developer-review-notice strong {
  color: var(--ink);
}

.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}

.admin-module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--graphite-sunken);
}

.admin-module-card h3,
.admin-module-card p {
  margin: 0;
}

.admin-module-card p {
  flex: 1;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .admin-review-heading,
  .developer-review-notice {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Touch targets

   This is shop software. It gets used on a tablet on a bench, by someone
   wearing gloves, with their hands not clean and the tablet not steady. A
   38px nav row is comfortable with a mouse and genuinely difficult in a bay,
   so interactive controls get a 44px minimum wherever the pointer is coarse
   or the viewport is tablet-sized.

   Applied as min-height rather than height so nothing that already exceeds it
   is shrunk, and paired with inline-flex centring so the label stays centred
   in the taller box instead of sitting against the top edge.
   --------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1024px) {
  .btn,
  button.btn,
  .nav-link,
  .header-control-menu > summary,
  .soft-accordion > summary,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select {
    min-height: 44px;
  }

  .btn,
  button.btn,
  .nav-link,
  .header-control-menu > summary,
  .soft-accordion > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  /* Full-width actions stay full-width; inline-flex would otherwise shrink
     them to their content. */
  .btn-full,
  .btn.btn-full {
    display: flex;
    width: 100%;
  }

  .nav-link {
    justify-content: flex-start;
  }
}
/* Internal planning remnants never render in the shop-owner workstation. */
.internal-only {
  display: none !important;
}