:root {
  /* THClearing design tokens  -  must match index.html and thcplanner/index.html */
  --bg: #121212;
  --surface: #1E1E1E;
  --elevated: #2A2A2A;
  --text-primary: #F0F0F0;
  --text-secondary: #999999;
  --border: #333333;
  --input-bg: #2A2A2A;
  --input-border: #444;
  --accent: #D4A03A;
  --accent-hover: #E0B04A;
  --error: #C62828;
  --warning: #D4A03A;
  --success: #2E7D32;
  /* Gold dot-grid, matches the accent. Inline splash markup hardcodes the
     same rgba value because it renders before the SPA's CSS-variable scope
     mounts. */
  --dot-color: rgba(212, 160, 58, 0.28);

  /* Product category swatches  -  match legacy verifier coding so users
     get the same visual language across views. */
  --cat-flower: #2E7D32;
  --cat-preroll: #1565C0;
  --cat-vape: #7B1FA2;
  --cat-edible: #E65100;
  --cat-extract: #C62828;
  --cat-tincture: #00838F;
  --cat-topical: #9E9D24;
  --cat-uncategorized: #616161;

  /* Shell-specific layout tokens */
  --shell-header-h: 60px;
  --shell-sidebar-w: 240px;
}

/* Design-system primitive: category pill + dot. Used everywhere a product
   surfaces in a list (inventory, requests, reports). Same swatches as the
   manifest verifier so the visual language stays consistent. */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat-uncategorized);
  flex-shrink: 0;
}
.cat-dot--flower      { background: var(--cat-flower); }
.cat-dot--pre-roll    { background: var(--cat-preroll); }
.cat-dot--vape        { background: var(--cat-vape); }
.cat-dot--edible      { background: var(--cat-edible); }
.cat-dot--concentrate { background: var(--cat-extract); }
.cat-dot--tincture    { background: var(--cat-tincture); }
.cat-dot--topical     { background: var(--cat-topical); }
[data-theme="light"] {
  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --elevated: #F0EFEB;
  --text-primary: #1A1A1A;
  --text-secondary: #555555;
  --border: #D8D5CE;
  --input-bg: #FFFFFF;
  --input-border: #CCC;
  /* Higher opacity in light mode  -  gold on cream needs more saturation
     to register at the same texture density as it does on dark. */
  --dot-color: rgba(212, 160, 58, 0.32);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

/* Stack the demo banner above the shell so the banner reserves its own space
   instead of overlapping the header when the page scrolls. The shell fills the
   remaining viewport and main scrolls internally. */
body {
  display: flex;
  flex-direction: column;
}

/* Global keyboard-focus ring. Many component styles set `outline: none` on
   :focus (which also kills it for keyboard users); restore a visible ring for
   keyboard navigation only via :focus-visible. !important overrides those
   per-component resets without affecting mouse-click focus. */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

.shell {
  display: grid;
  grid-template-rows: var(--shell-header-h) 1fr;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  grid-template-areas: "header header" "sidebar main";
  flex: 1 1 auto;
  min-height: 0;
}
.shell-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.shell-header__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  --logo-accent: var(--accent);
  color: var(--text-primary);
}
.shell-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 26px;
}
.shell-header__logo svg { display: block; }
/* The molecule paths are thin filled silhouettes; at 26px tall in an 800-unit
   viewBox each "tube" reduces to a sub-pixel hairline. Add an outline stroke
   that paints behind the fill so the lines weight up without distorting the
   shape. .cls-1 (amber accent) gets its own colored stroke. */
.shell-header__logo svg :is(path, polygon) {
  stroke: currentColor;
  stroke-width: 28;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
.shell-header__logo svg .cls-1 {
  stroke: var(--logo-accent);
}
.shell-header__wordmark {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
.shell-header__controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* Hamburger + drawer backdrop: hidden on desktop, shown at <= 1024px. */
.shell-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  margin-left: -0.25rem;
}
.shell-nav-overlay { display: none; }
.shell-sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem 0.5rem;
}
.shell-sidebar__item {
  display: block;
  padding: 0.625rem 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  margin-bottom: 0.125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}
.shell-sidebar__item:hover {
  background: var(--elevated);
  color: var(--text-primary);
}
.shell-sidebar__item.is-active {
  background: var(--elevated);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: calc(0.875rem - 2px);
}
.shell-main {
  grid-area: main;
  padding: 1.5rem;
  overflow: auto;
  min-height: 0;
  background: var(--bg);
}

/* Form controls (selects, buttons)  -  match existing design system */
.shell-select, .shell-button {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.shell-select:hover, .shell-button:hover {
  border-color: var(--accent);
}
.shell-select:focus, .shell-button:focus {
  outline: none;
  border-color: var(--accent);
}
.shell-store-static {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-left: 2px solid var(--accent);
}

/* Demo banner  -  public-facing "this is a prototype, runs locally" notice. */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  background: var(--accent);
  color: #000;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.demo-banner strong { letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; }
.demo-banner-close {
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.3rem;
  line-height: 1;
  opacity: 0.7;
}
.demo-banner-close:hover { opacity: 1; }
.demo-banner.hidden { display: none; }
@media (max-width: 640px) {
  .demo-banner { font-size: 0.74rem; padding: 0.4rem 0.6rem; }
  .shell-header { padding: 0 0.75rem; }
  .shell-header__controls { gap: 0.4rem; }
  .shell-header__controls .shell-select { max-width: 128px; padding: 0.4rem 0.5rem; }
  .shell-main { padding: 1rem 0.75rem; }
}

/* Display-type accents  -  match legacy apps' character. */
.view-title {
  font-family: 'Saira Condensed', 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: 0.005em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.view-title__sep {
  color: var(--text-secondary);
  font-weight: 400;
}
/* Cannabinoid brand mark: a small accent tag that rides above the plain
   function title (THCV, CBG, CBD, CBN). */
.view-mark {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
  cursor: help;
}
.view-title__scope {
  color: var(--accent);
}
/* Pattern B: spelled-out cannabinoid acronym subline (e.g. "Tactical Hub Clearing Verification") */
.view-title__sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  text-transform: none;
}
.view-title__sub .acro-letter {
  color: var(--accent);
  font-weight: 700;
}
.view-title__sub .view-title__sep {
  margin: 0 0.35rem;
}
.tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Theme toggle button (in header) */
.shell-theme-toggle {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.shell-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.shell-theme-toggle--floating {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 50;
  background: var(--surface);
}

@media (max-width: 1024px) {
  /* Sidebar leaves the grid and becomes an off-canvas drawer; main is full width. */
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .shell-nav-toggle { display: inline-flex; align-items: center; }
  .shell-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    max-width: 82vw;
    padding-top: 1.25rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1100;
  }
  .shell--nav-open .shell-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .shell-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .shell--nav-open .shell-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-sidebar, .shell-nav-overlay { transition: none; }
}