/* ═══════════════════════════════════════════════════════════════
   THE FABLED PIG — GUILD HALL
   Design System: Dark Oak, Brass, Parchment, Iron
   ═══════════════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ── */
:root {
  /* Core palette */
  --bg-void:        #0E0804;
  --bg-primary:     #1A0E06;
  --bg-walnut:      #231208;
  --bg-oak:         #2C1A0A;
  --bg-panel:       #38200E;
  --bg-plaque:      #4A2C14;
  --bg-lighter:     #5C3820;

  /* Parchment */
  --parchment:      #F4E4C0;
  --parchment-dark: #E2C88A;
  --parchment-aged: #D4B870;
  --bone:           #EDE0C4;

  /* Accents */
  --brass:          #C9A84C;
  --brass-light:    #E8C14A;
  --brass-dim:      #8B7340;
  --iron:           #6A6460;
  --iron-dark:      #3C3835;

  /* Collection colors */
  --forest:         #2D4A28;
  --forest-light:   #3D6636;
  --burgundy:       #6B2424;
  --burgundy-light: #8B3030;
  --teal:           #1A3D3A;
  --teal-light:     #245450;
  --amber:          #C47A1E;
  --amber-light:    #E8A030;

  /* Text */
  --text-bright:    #F4E4C0;
  --text-primary:   #D4C090;
  --text-secondary: #A88C60;
  --text-muted:     #6A5A3A;
  --text-brass:     #C9A84C;

  /* Shadows & glows */
  --shadow-deep:    rgba(0,0,0,0.8);
  --shadow-medium:  rgba(0,0,0,0.5);
  --shadow-light:   rgba(0,0,0,0.3);
  --glow-brass:     rgba(201,168,76,0.25);
  --glow-amber:     rgba(244,166,62,0.2);
  --glow-candle:    rgba(250,200,100,0.15);

  /* Layout */
  --nav-width:      260px;
  --nav-collapsed:  64px;
  --border-brass:   1px solid rgba(201,168,76,0.3);
  --border-oak:     1px solid rgba(92,56,32,0.6);
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med:  300ms ease;
  --transition-slow: 500ms ease;

  /* Typography */
  --font-display:   'Cinzel Decorative', serif;
  --font-heading:   'Cinzel', serif;
  --font-body:      'IM Fell English', serif;
  --font-data:      'Libre Baskerville', serif;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Text selection — brass wax over the words, ink beneath.
   (Without this, the browser's pale blue behind parchment text is unreadable.) */
::selection {
  background: var(--brass);
  color: #1A0E06;
  text-shadow: none;
}
::-moz-selection {
  background: var(--brass);
  color: #1A0E06;
  text-shadow: none;
}

html { scroll-behavior: smooth; }

body.guild-body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── WOOD GRAIN TEXTURE (CSS only) ── */
.wood-grain {
  background-image:
    repeating-linear-gradient(
      93deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 14px,
      rgba(255,255,255,0.012) 14px,
      rgba(255,255,255,0.012) 16px
    );
}

/* ── PARCHMENT TEXTURE ── */
.parchment-tex {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #F4E4C0 0%, #E8D4A8 50%, #F0DEB8 100%);
}

/* ═══════════════════════════════════════════════════════════════
   AMBIENT LAYER
   ═══════════════════════════════════════════════════════════════ */

#ambient-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dust-mote {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: var(--size, 2px);
  height: var(--size, 2px);
  background: rgba(201,168,76,0.6);
  border-radius: 50%;
  animation: dustFloat var(--dur, 20s) var(--delay, 0s) ease-in-out infinite;
  filter: blur(0.5px);
}

@keyframes dustFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(-50vh) translateX(20px); opacity: 0.5; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-100vh) translateX(-10px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

#guild-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--nav-width);
  background: var(--bg-walnut);
  background-image:
    repeating-linear-gradient(
      92deg,
      transparent 0, transparent 2px,
      rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0, transparent 18px,
      rgba(255,255,255,0.015) 18px, rgba(255,255,255,0.015) 20px
    ),
    linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-walnut) 30%, var(--bg-primary) 100%);
  border-right: 2px solid var(--brass-dim);
  box-shadow: 4px 0 20px var(--shadow-deep), inset -1px 0 0 rgba(201,168,76,0.1);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--transition-med);
}

#guild-nav::-webkit-scrollbar { width: 4px; }
#guild-nav::-webkit-scrollbar-track { background: var(--bg-primary); }
#guild-nav::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 2px; }

/* Nav Header */
.nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  border-bottom: var(--border-brass);
  background: linear-gradient(180deg, rgba(201,168,76,0.08) 0%, transparent 100%);
}

.guild-crest {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  flex-shrink: 0;
}

/* Real pig logo in nav header — the crest keeps its TRUE colors.
   (The old sepia gilding turned the whole logo gold; a real crest
   is the one mark in the Hall that should never be re-inked.) */
.guild-crest-img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

/* Pig logo in nav list item */
.nav-icon-pig {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-pig img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter:
    sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.9)
    drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.guild-title-block { display: flex; flex-direction: column; }

.guild-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brass-light);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  line-height: 1.2;
}

.guild-subtitle {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Nav Candle */
.nav-candle {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}

.candle-body {
  width: 8px;
  height: 24px;
  background: linear-gradient(180deg, #F4E4C0 0%, #E8C890 100%);
  border-radius: 2px;
  position: relative;
}

.candle-flame {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 80%, #FFF 0%, #FFD700 30%, #FF8C00 70%, transparent 100%);
  border-radius: 50% 50% 30% 30%;
  animation: flicker 2s ease-in-out infinite alternate;
}

.candle-glow {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(255,200,50,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: candleGlow 2s ease-in-out infinite alternate;
}

@keyframes flicker {
  0%   { transform: translateX(-50%) scaleX(1)   scaleY(1)   rotate(-1deg); opacity: 1; }
  25%  { transform: translateX(-52%) scaleX(0.9) scaleY(1.1) rotate(2deg);  opacity: 0.9; }
  50%  { transform: translateX(-48%) scaleX(1.1) scaleY(0.95) rotate(-2deg); opacity: 1; }
  75%  { transform: translateX(-50%) scaleX(0.95) scaleY(1.05) rotate(1deg); opacity: 0.95; }
  100% { transform: translateX(-50%) scaleX(1.05) scaleY(1.02) rotate(-1deg); opacity: 1; }
}

@keyframes candleGlow {
  0%   { opacity: 0.6; transform: translateX(-50%) translateY(5px) scale(1); }
  100% { opacity: 1;   transform: translateX(-50%) translateY(5px) scale(1.2); }
}

/* Nav List */
.nav-list {
  list-style: none;
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim), transparent);
  margin: 6px 16px;
  opacity: 0.5;
}

.nav-item { position: relative; }

.nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: left;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at left center, var(--glow-candle) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-med);
}

.nav-btn:hover::before { opacity: 1; }

.nav-btn:hover {
  color: var(--parchment);
  text-shadow: 0 0 8px var(--glow-brass);
}

.nav-btn:hover .nav-icon { filter: drop-shadow(0 0 4px var(--brass)); }

/* Active nav item */
.nav-item.active .nav-btn {
  color: var(--brass-light);
  background: linear-gradient(90deg, rgba(201,168,76,0.12) 0%, transparent 100%);
}

.nav-item.active .nav-btn::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brass);
  box-shadow: 0 0 8px var(--brass);
}

.nav-icon {
  font-size: 1.1rem;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  transition: filter var(--transition-fast);
}

.nav-label { font-size: 0.78rem; }

/* Nav Footer */
.nav-footer {
  padding: 12px 16px;
  border-top: var(--border-brass);
  text-align: center;
}

.nav-clock {
  font-family: var(--font-data);
  font-size: 1rem;
  color: var(--text-brass);
  letter-spacing: 0.08em;
}

.nav-date {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: var(--bg-panel);
  border: var(--border-brass);
  color: var(--brass);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 90;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */

#guild-content {
  margin-left: var(--nav-width);
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-primary) 8%, var(--bg-void) 100%);
}

#guild-content::-webkit-scrollbar { width: 6px; }
#guild-content::-webkit-scrollbar-track { background: var(--bg-void); }
#guild-content::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 3px; }

/* ── Sections ── */
.guild-section {
  display: none;
  min-height: 100%;
  padding: 32px 40px 60px;
  animation: sectionFadeIn 400ms ease forwards;
}

.guild-section.active { display: block; }

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section Headers ── */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: var(--border-brass);
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--brass-light);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
}

.section-byline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
}

/* ── Row Headings ── */
.row-heading {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-brass);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.row-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-dim), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   GUILD HALL (SPLASH)
   ═══════════════════════════════════════════════════════════════ */

#section-guild-hall {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,168,76,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-primary) 20%, var(--bg-void) 100%);
  padding: 0;
}

#section-guild-hall.active { display: flex; }

.splash-container {
  text-align: center;
  max-width: 600px;
  padding: 60px 40px;
}

.splash-crest {
  font-size: 5rem;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(201,168,76,0.4));
  animation: crestFloat 4s ease-in-out infinite;
}

/* Real logo on splash page */
.splash-crest-img {
  display: block;
  width: 160px;
  height: 140px;
  margin: 0 auto 16px;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 18px rgba(201,168,76,0.5))
    sepia(1) saturate(3) hue-rotate(5deg) brightness(0.88);
  animation: crestFloat 4s ease-in-out infinite;
}

@keyframes crestFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.splash-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--brass-light);
  text-shadow: 0 4px 20px rgba(201,168,76,0.5), 0 2px 4px rgba(0,0,0,0.8);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.splash-subtitle {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-secondary);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.splash-tagline {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 24px;
  opacity: 0.85;
}

.splash-divider {
  font-size: 1.5rem;
  color: var(--brass);
  margin: 0 0 24px;
  display: block;
}

.splash-welcome {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--parchment);
  margin-bottom: 4px;
}

.splash-date {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.splash-quote-block {
  background: rgba(0,0,0,0.3);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin-bottom: 32px;
}

.splash-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.btn-enter {
  background: linear-gradient(180deg, var(--brass) 0%, var(--amber) 100%);
  color: var(--bg-void);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 12px 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all var(--transition-fast);
  margin-bottom: 24px;
}

.btn-enter:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}

.splash-ornament {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: var(--brass-dim);
  font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════ */

/* Welcome banner */
.dash-welcome {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-oak));
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.dash-welcome::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

.dash-welcome-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--brass-light);
  margin-bottom: 2px;
}

.dash-welcome-role {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Stat Grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-plaque {
  background: var(--bg-panel);
  background-image:
    repeating-linear-gradient(92deg, transparent 0, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 3px);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-med);
  cursor: default;
}

.stat-plaque::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--stat-color, var(--brass));
  opacity: 0.6;
}

.stat-plaque:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-medium), 0 0 0 1px var(--brass-dim);
}

.stat-icon {
  font-size: 1.4rem;
  margin-bottom: 8px;
  display: block;
}

.stat-value {
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--stat-color, var(--brass-light));
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Dashboard lower */
.dash-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

/* Current Quest */
.quest-panel {
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
}

.quest-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--forest), var(--brass), var(--forest));
}

.quest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.quest-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.quest-id {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--brass);
  font-weight: 700;
}

.quest-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--parchment);
}

.quest-status-badge {
  background: var(--forest);
  color: var(--parchment);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(61,102,54,0.6);
}

.quest-objective {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 16px;
}

/* Workflow stages */
.workflow-stages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.2);
  transition: background var(--transition-fast);
}

.stage-row.done {
  background: rgba(45,74,40,0.3);
}

.stage-row.active-stage {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.25);
}

.stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--iron-dark);
  flex-shrink: 0;
  transition: all var(--transition-med);
}

.stage-row.done .stage-dot {
  background: var(--forest-light);
  box-shadow: 0 0 6px var(--forest-light);
}

.stage-row.active-stage .stage-dot {
  background: var(--brass);
  box-shadow: 0 0 8px var(--brass);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 6px var(--brass); }
  50%       { box-shadow: 0 0 14px var(--brass-light); }
}

.stage-name {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stage-row.done .stage-name { color: var(--text-secondary); }
.stage-row.active-stage .stage-name { color: var(--brass); }

.stage-arrow {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Guild Log */
.log-panel {
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 20px;
}

.log-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brass-dim);
  opacity: 0.4;
}

.log-entries { display: flex; flex-direction: column; gap: 2px; }

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: logAppear 400ms ease forwards;
}

@keyframes logAppear {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.log-entry:last-child { border-bottom: none; }

.log-time {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 45px;
  padding-top: 1px;
}

.log-icon { font-size: 0.85rem; flex-shrink: 0; }

.log-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.35;
  flex: 1;
}

.log-text strong { color: var(--parchment); font-style: normal; }

/* Collections banners */
.collections-row { margin-bottom: 28px; }

.collections-banners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.collection-banner {
  background: var(--bg-panel);
  border: 1px solid var(--banner-color, var(--brass-dim));
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-med);
  position: relative;
  overflow: hidden;
}

.collection-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--banner-color, var(--brass));
}

.collection-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--shadow-medium), 0 0 0 1px var(--banner-color, var(--brass));
  background: rgba(255,255,255,0.03);
}

.banner-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }

.banner-name {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.banner-count {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Inventory shelf preview */
.inventory-preview { margin-bottom: 28px; }

.shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
}

.shelf-row::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, var(--bg-oak), var(--bg-panel));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.shelf-item {
  background: var(--bg-plaque);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  position: relative;
}

.shelf-item-icon { font-size: 1.5rem; display: block; margin-bottom: 6px; }

.shelf-item-name {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.shelf-item-qty {
  font-family: var(--font-data);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--parchment);
}

.wax-seal {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--seal-color, var(--forest));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   WORKSHOP
   ═══════════════════════════════════════════════════════════════ */

.workshop-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--bg-panel);
  border: var(--border-brass);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover, .filter-btn.active {
  background: rgba(201,168,76,0.12);
  color: var(--brass-light);
  border-color: var(--brass);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--bg-panel);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-med);
  position: relative;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--shadow-deep), 0 0 0 1px var(--brass);
}

.product-card-image {
  height: 130px;
  background: var(--bg-oak);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

.product-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 100%);
}

.product-card-body { padding: 12px 14px; }

.product-card-id {
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--brass);
  font-weight: 700;
  margin-bottom: 4px;
}

.product-card-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--parchment);
  margin-bottom: 6px;
}

.product-card-collection {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.product-stage-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.stage-pip {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--iron-dark);
  transition: background var(--transition-med);
}

.stage-pip.done { background: var(--forest-light); }
.stage-pip.current { background: var(--brass); }

.product-card-status {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-block;
}

.status-concept   { background: rgba(107,36,36,0.4); color: #D4726C; border: 1px solid rgba(180,80,80,0.4); }
.status-prototype { background: rgba(45,74,40,0.4); color: #7AB86E; border: 1px solid rgba(80,150,70,0.4); }
.status-production{ background: rgba(26,61,58,0.4); color: #6ABDB0; border: 1px solid rgba(60,140,130,0.4); }
.status-legendary { background: rgba(201,168,76,0.2); color: var(--brass-light); border: 1px solid rgba(201,168,76,0.4); }
.status-mold      { background: rgba(106,100,96,0.3); color: #C8C0B0; border: 1px solid rgba(150,140,130,0.4); }

/* ═══════════════════════════════════════════════════════════════
   ASSET LIBRARY
   ═══════════════════════════════════════════════════════════════ */

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.asset-card {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-med);
}

.asset-card:hover {
  border-color: var(--brass-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-medium);
}

.asset-preview {
  height: 100px;
  background: var(--bg-oak);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.asset-info { padding: 10px; }

.asset-id {
  font-family: var(--font-data);
  font-size: 0.58rem;
  color: var(--brass);
  margin-bottom: 2px;
}

.asset-name {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--parchment);
  margin-bottom: 3px;
}

.asset-category {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
}

.asset-usage {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   AI FORGE
   ═══════════════════════════════════════════════════════════════ */

.forge-categories {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.prompt-card {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.prompt-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--prompt-color, var(--brass-dim));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.prompt-card:hover {
  border-color: var(--brass-dim);
  background: rgba(255,255,255,0.02);
}

.prompt-category-tag {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--prompt-color, var(--brass));
  margin-bottom: 6px;
}

.prompt-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--parchment);
  margin-bottom: 8px;
}

.prompt-preview {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prompt-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: var(--border-oak);
}

.prompt-version {
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.btn-copy {
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-copy:hover {
  background: rgba(201,168,76,0.2);
  color: var(--brass-light);
}

/* ═══════════════════════════════════════════════════════════════
   KILN
   ═══════════════════════════════════════════════════════════════ */

.kiln-lanes {
  /* The kanban grid retired with the lanes (2.0 step 3a; dead column
     bug found 2026-09-07 — it shoved the decks off-screen). The room
     deals decks now; they flow as blocks. */
  display: block;
}

.kiln-lane {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 300px;
}

.kiln-lane-header {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lane-color, var(--text-muted));
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kiln-lane-header::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lane-color, var(--iron));
  box-shadow: 0 0 6px var(--lane-color, transparent);
  flex-shrink: 0;
}

.kiln-card {
  background: var(--bg-plaque);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kiln-card:hover {
  border-color: var(--brass-dim);
  transform: translateX(2px);
}

.kiln-card-name {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--parchment);
  margin-bottom: 3px;
}

.kiln-card-id {
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--brass);
}

.kiln-card-qty {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

.kiln-lane-count {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   STOREROOM
   ═══════════════════════════════════════════════════════════════ */

.storeroom-shelves { display: flex; flex-direction: column; gap: 24px; }

.shelf-unit {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.shelf-unit-header {
  padding: 12px 16px;
  background: var(--bg-oak);
  border-bottom: var(--border-oak);
  display: flex;
  align-items: center;
  gap: 10px;
}

.shelf-unit-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-brass);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.shelf-unit-icon { font-size: 1rem; }

.shelf-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
}

.storeroom-item {
  background: var(--bg-plaque);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  padding: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.storeroom-item-icon { font-size: 1.4rem; flex-shrink: 0; }

.storeroom-item-info { flex: 1; min-width: 0; }

.storeroom-item-name {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--parchment);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storeroom-item-qty {
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brass-light);
}

.storeroom-item-unit {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-left: 2px;
}

.storeroom-status {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-good    { background: #3D8B2E; box-shadow: 0 0 4px #3D8B2E; }
.status-low     { background: #B8840F; box-shadow: 0 0 4px #B8840F; }
.status-critical{ background: #8B2020; box-shadow: 0 0 6px #8B2020; animation: pulse 1.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   MERCHANT STALL
   ═══════════════════════════════════════════════════════════════ */

.merchant-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.merchant-panel {
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 20px;
}

.merchant-panel-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-brass);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: var(--border-oak);
}

/* ═══════════════════════════════════════════════════════════════
   FAIRE PLANNER
   ═══════════════════════════════════════════════════════════════ */

.faire-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.faire-event-card {
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faire-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-medium);
}

.faire-event-date {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--brass);
  font-weight: 700;
  margin-bottom: 6px;
}

.faire-event-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--parchment);
  margin-bottom: 4px;
}

.faire-event-location {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   LORE LIBRARY
   ═══════════════════════════════════════════════════════════════ */

.lore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.lore-tome {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition-med);
  position: relative;
  overflow: hidden;
}

.lore-tome::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--tome-color, var(--brass-dim));
}

.lore-tome:hover {
  transform: translateX(4px);
  border-color: var(--brass-dim);
}

/* "New collection" tile — an invitation to add your own. */
.lore-tome--new {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 120px;
  background: transparent;
  border: 1px dashed var(--iron-dark, rgba(255,255,255,0.18));
  color: var(--text-muted); font-family: var(--font-body);
}
.lore-tome--new::before { content: none; }
.lore-tome--new:hover { transform: none; border-color: var(--brass, #c9a84c); color: var(--text-brass); }
.lore-new-plus { font-size: 1.6rem; line-height: 1; }
.lore-new-label { font-size: 0.85rem; }

.lore-collection-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brass-light);
  margin-bottom: 8px;
}

.lore-excerpt {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lore-meta {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.lore-tag {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   GLAZE BOOK
   ═══════════════════════════════════════════════════════════════ */

.glaze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.glaze-card {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.glaze-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px var(--shadow-medium);
}

.glaze-swatch {
  height: 60px;
  background: var(--glaze-color, #666);
  position: relative;
}

.glaze-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
}

.glaze-info { padding: 12px; }

.glaze-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--parchment);
  margin-bottom: 3px;
}

.glaze-id {
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--brass);
  margin-bottom: 8px;
}

.glaze-recipe {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glaze-temp {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--amber);
  margin-top: 6px;
}

/* ── Tab toggle ── */
.tab-toggle {
  display: flex;
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 7px 14px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--bg-plaque);
  color: var(--brass);
}
.tab-btn:hover:not(.active) {
  color: var(--parchment);
  background: var(--bg-panel);
}

/* ── Glaze toolbar ── */
.glaze-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.glaze-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  background: var(--bg-oak);
  border: 1px solid var(--iron-dark);
  border-radius: 20px;
  padding: 5px 14px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.filter-chip:hover { color: var(--parchment); border-color: var(--brass-dim); }
.filter-chip.active {
  background: var(--bg-plaque);
  border-color: var(--brass);
  color: var(--brass);
}

/* ── Glaze group ── */
.glaze-group {
  margin-bottom: 28px;
}
.glaze-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--iron-dark);
}
.glaze-group-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.glaze-group-count {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* ── Swatch grid ── */
.glaze-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

/* ── Individual swatch card ── */
.sc-swatch {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  background: var(--bg-panel);
  user-select: none;
}
.sc-swatch:hover {
  border-color: var(--brass-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.sc-swatch.in-stock {
  border-color: var(--brass);
}

.sc-color-block {
  position: relative;
  height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px;
}
.sc-color-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.sc-code {
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* Hide native checkbox — use the visual check icon */
.sc-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sc-check-icon {
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.5;
  position: relative;
  z-index: 1;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.sc-swatch.in-stock .sc-check-icon {
  opacity: 1;
  background: rgba(0,0,0,0.25);
}
.sc-swatch:not(.in-stock) .sc-check-icon::before {
  content: '';
}

.sc-name {
  padding: 5px 7px 6px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.3;
  text-align: center;
}
.sc-swatch.in-stock .sc-name {
  color: var(--parchment);
}

/* ── Search input override for glaze ── */
.glaze-search {
  min-width: 180px;
}

/* ═══════════════════════════════════════════════════════════════
   FAIRE & FESTIVAL PORTAL
   ═══════════════════════════════════════════════════════════════ */

/* Faire card */
.faire-card {
  background: var(--bg-panel);
  border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.faire-card:hover {
  border-color: var(--brass-dim);
}
.faire-card.is-tracked {
  border-color: var(--brass);
}

.faire-card-header {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  gap: 0;
}
.faire-banner {
  flex: 1;
  padding: 12px 14px;
}
.faire-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.faire-name {
  font-family: var(--font-heading);
  font-size: 1.0rem;
  color: var(--parchment);
}
.faire-nick {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.faire-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.faire-location {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.faire-status {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.faire-pill {
  font-family: var(--font-data);
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.faire-pill.pill-yes {
  background: rgba(122,184,110,0.15);
  color: #7AB86E;
  border: 1px solid rgba(122,184,110,0.3);
}
.faire-pill.pill-no {
  background: rgba(180,90,80,0.12);
  color: #B45A50;
  border: 1px solid rgba(180,90,80,0.25);
}
.faire-type-pill { background: rgba(160,130,80,0.12); color: #B09050; border: 1px solid rgba(160,130,80,0.28); font-weight: 600; }
.faire-temp-pill { font-weight: 600; }
.faire-temp-pill.temp-cool  { background: rgba(106,189,176,0.15); color: #6ABDB0; border: 1px solid rgba(106,189,176,0.35); }
.faire-temp-pill.temp-warm  { background: rgba(230,190,80,0.15);  color: #C9A84C; border: 1px solid rgba(230,190,80,0.3); }
.faire-temp-pill.temp-hot   { background: rgba(200,80,60,0.15);   color: #C85040; border: 1px solid rgba(200,80,60,0.3); }
.faire-temp-pill.temp-mixed { background: rgba(100,140,200,0.15); color: #6A90C8; border: 1px solid rgba(100,140,200,0.3); }

.faire-track-wrap {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--iron-dark);
}
.faire-track-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.faire-track-label input[type="checkbox"] { display: none; }
.faire-track-label span {
  font-family: var(--font-data);
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.faire-card.is-tracked .faire-track-label span {
  color: var(--brass);
}
.faire-track-label::before {
  content: '☆';
  font-size: 1.2rem;
  color: var(--iron);
  line-height: 1;
}
.faire-card.is-tracked .faire-track-label::before {
  content: '★';
  color: var(--brass);
}

.faire-expand-icon {
  padding: 12px 12px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
}
.faire-card.expanded .faire-expand-icon {
  transform: rotate(180deg);
}

/* Card body (expandable) */
.faire-card-body {
  display: none;
  border-top: 1px solid var(--iron-dark);
  padding: 16px;
}
.faire-card.expanded .faire-card-body {
  display: block;
}

.faire-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fi-section {
  /* Was var(--bg-oak) (dark) — but .fi-section lives inside .faire-card, a
     parchment paper container whose scope forces child text to dark --ink.
     Dark ink on a dark panel is unreadable (the booth-type ladder vanished).
     A light panel lets the ink show; the border keeps the panels distinct. */
  background: rgba(122,90,28,0.08);
  border: 1px solid #C9B182;
  border-radius: var(--radius-sm);
  padding: 12px;
}
.fi-section-wide {
  grid-column: 1 / -1;
}
.fi-section-title {
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass-dim);
  margin-bottom: 8px;
}

.fi-table {
  width: 100%;
  border-collapse: collapse;
}
.fi-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--iron-dark);
}
.fi-label {
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 5px 10px 5px 0;
  width: 110px;
  vertical-align: top;
  white-space: nowrap;
}
.fi-val {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 5px 0;
  vertical-align: top;
}
.fi-deadline {
  color: var(--brass);
  font-weight: 600;
}
.fi-attend {
  color: #7AB86E;
}
.fi-temp {
  color: #6ABDB0;
}
.fi-note {
  font-family: var(--font-body);
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.4;
}
.fi-list {
  margin: 0;
  padding-left: 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.fi-notes {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* My event card */
.my-event-card {
  background: var(--bg-panel);
  border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color var(--transition-fast);
}
.my-event-card:hover {
  border-color: var(--brass-dim);
}

/* Pack list */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.pack-category {
  background: var(--bg-panel);
  border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md);
  padding: 14px;
}
.pack-cat-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--brass);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--iron-dark);
}
.pack-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
  border-bottom: 1px solid rgba(60,56,53,0.4);
  transition: color var(--transition-fast);
}
.pack-item:last-child { border-bottom: none; }
.pack-item input[type="checkbox"] { display: none; }
.pack-item::before {
  content: '☐';
  color: var(--iron);
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.pack-item.checked {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--iron);
}
.pack-item.checked::before {
  content: '☑';
  color: var(--brass);
}

/* ── YEAR CALENDAR ──────────────────────────────────────────── */
.cal-legend { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 2px 14px; font-size:11px; color:var(--parchment); opacity:0.82; }
.cal-leg-swatch { display:inline-block; width:11px; height:11px; border-radius:2px; flex-shrink:0; }
.cal-leg-txt { margin-right:10px; }
.cal-outer { overflow-x:auto; border-radius:8px; border:1px solid rgba(255,255,255,0.07); }
.cal-timeline { position:relative; width:100%; min-width:560px; }
.cal-month-col { position:absolute; top:0; border-right:1px solid rgba(255,255,255,0.05); box-sizing:border-box; }
.cal-month-label { display:block; padding:5px 0 4px; text-align:center; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass); opacity:0.85; }
.cal-hdr-line { position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,0.07); }
.cal-bar {
  position:absolute; border-radius:3px; padding:0 5px;
  font-size:9px; font-weight:600; line-height:20px;
  color:rgba(255,255,255,0.9); overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; cursor:pointer; opacity:0.88;
  transition:filter 0.12s, opacity 0.12s;
}
.cal-bar:hover { filter:brightness(1.4); opacity:1; z-index:30; overflow:visible; text-overflow:clip; }
.cal-tip { font-size:11px; color:var(--parchment); opacity:0.5; margin-top:10px; font-style:italic; }

/* ── RECURRING SEASONS ───────────────────────────────────────────────────────
   A band is a season you RETURN to; a bar is an event you ATTEND. They must not
   look alike, because they are not alike: a solid bar across mid-May to
   mid-October would tell a grower the La Veta market runs continuously for five
   months. It runs two hours a week. So a band is hollow — the weeks inside it
   are visibly not claimed — and it carries its cadence in the label rather than
   leaving the shape to imply one.

   `.cal-band-approx` fades the ends because the source said "mid-May", and
   mid-May is not the 15th. A hard edge would be a precision we were never
   given. The softness IS the honesty. */
.cal-band {
  position:absolute; border-radius:3px; cursor:pointer;
  border:1.5px dashed var(--band-c, #3D6B2A);
  background:color-mix(in srgb, var(--band-c, #3D6B2A) 18%, transparent);
  box-sizing:border-box; overflow:hidden; white-space:nowrap;
  transition:filter 0.12s, opacity 0.12s; opacity:0.9;
}
.cal-band-txt {
  display:block; padding:0 6px; line-height:17px;
  font-size:9px; font-weight:600; letter-spacing:0.01em;
  color:rgba(255,255,255,0.92); text-overflow:ellipsis; overflow:hidden;
}
.cal-band:hover { filter:brightness(1.35); opacity:1; z-index:30; overflow:visible; }
.cal-band-approx {
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.cal-leg-band {
  border:1.5px dashed var(--brass, #C9A84C);
  background:color-mix(in srgb, var(--brass, #C9A84C) 18%, transparent);
  border-radius:2px; box-sizing:border-box;
}

/* ── WHAT NOBODY MAPPED ──────────────────────────────────────────────────────
   Styled like a note in the margin, not like an error. Nothing has gone wrong
   here: the work simply has not been done, and the maker is the one person who
   might know. Muted enough to sit under the timeline, legible enough to read. */
.cal-unmapped {
  margin-top:14px; padding:12px 14px; border-radius:8px;
  border:1px solid rgba(201,168,76,0.18);
  background:rgba(255,255,255,0.02);
}
/* This panel has no paper under it — it sits on the Hall's dark wood, like the
   timeline above it. So every token here is a WOOD-side token (--text-primary,
   --parchment, --brass). `--ink` would be #2A2012 on #4A2C14: invisible. v4's
   nuclear ink rule only reaches paper containers, and this is not one. */
.cal-unmapped-head { font-size:12px; color:var(--text-primary, #E2D2A8); opacity:0.9; margin:0 0 9px; }
.cal-unmapped-list { list-style:none; margin:0; padding:0; }
.cal-unmapped-row {
  padding:7px 8px; border-radius:5px; cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
  transition:background 0.12s;
}
.cal-unmapped-row:hover { background:rgba(255,255,255,0.04); }
.cal-unmapped-row strong { font-size:12px; color:var(--parchment, #F4E4C0); font-weight:700; }
.cal-unmapped-cadence { font-size:11px; color:var(--brass, #C9A84C); }
.cal-unmapped-why { font-size:11px; color:var(--text-muted, #A99878); line-height:1.45; }
.cal-unmapped-foot { font-size:11px; color:var(--text-muted, #A99878); font-style:italic; margin:9px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   PHOTOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.photo-content {}

.photo-drop-zone {
  border: 2px dashed var(--brass-dim);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  margin-bottom: 24px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.photo-drop-zone:hover, .photo-drop-zone.dragover {
  border-color: var(--brass);
  background: rgba(201,168,76,0.05);
}

.photo-drop-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }

.photo-drop-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.photo-thumb {
  aspect-ratio: 1;
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.photo-thumb:hover {
  transform: scale(1.03);
  border-color: var(--brass-dim);
  box-shadow: 0 8px 20px var(--shadow-deep);
}

/* ═══════════════════════════════════════════════════════════════
   TREASURY
   ═══════════════════════════════════════════════════════════════ */

.treasury-content { display: flex; flex-direction: column; gap: 20px; }

.treasury-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.treasury-card {
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.treasury-value {
  font-family: var(--font-data);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--brass-light);
  display: block;
  margin-bottom: 4px;
}

.treasury-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.treasury-transactions {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.transaction-header {
  padding: 12px 16px;
  background: var(--bg-oak);
  border-bottom: var(--border-oak);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-brass);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.transaction-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}

.transaction-row:last-child { border-bottom: none; }
.transaction-row:hover { background: rgba(255,255,255,0.02); }

.transaction-date {
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.transaction-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.transaction-amount {
  font-family: var(--font-data);
  font-size: 0.85rem;
  font-weight: 700;
}

.amount-in  { color: #5CAF50; }
.amount-out { color: #CF6679; }

/* ═══════════════════════════════════════════════════════════════
   COB GOBLIN FUND
   ═══════════════════════════════════════════════════════════════ */

.cob-goblin-content {}

.cob-hero {
  background: linear-gradient(135deg, var(--bg-panel), var(--teal));
  border: 1px solid var(--teal-light);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cob-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-light), transparent);
}

.cob-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--parchment);
  margin-bottom: 8px;
}

.cob-mission {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.cob-chest {
  font-size: 4rem;
  display: block;
  margin-bottom: 16px;
  animation: chestFloat 3s ease-in-out infinite;
}

@keyframes chestFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

.cob-total {
  font-family: var(--font-data);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--teal-light);
  display: block;
  text-shadow: 0 2px 10px rgba(26,93,88,0.6);
}

.cob-total-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Fund progress bar */
.cob-progress-section {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.cob-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cob-progress-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.cob-progress-pct {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--teal-light);
  font-weight: 700;
}

.cob-progress-bar {
  height: 16px;
  background: var(--bg-oak);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.cob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  border-radius: 8px;
  transition: width 1s ease;
  position: relative;
  overflow: hidden;
}

.cob-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════════ */

.settings-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.settings-group {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.settings-group-header {
  padding: 12px 16px;
  background: var(--bg-oak);
  border-bottom: var(--border-oak);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-brass);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.settings-row:last-child { border-bottom: none; }

.settings-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.settings-sublabel {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--iron-dark);
  border-radius: 22px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 3px;
  left: 3px;
  transition: all var(--transition-fast);
}

.toggle input:checked + .toggle-slider {
  background: var(--brass);
}

.toggle input:checked + .toggle-slider::after {
  transform: translateX(18px);
  background: var(--bg-void);
}

.settings-select {
  background: var(--bg-plaque);
  border: var(--border-brass);
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   CHARACTER SHEETS
   ═══════════════════════════════════════════════════════════════ */

.character-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.character-sheet-card {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-med);
}

.character-sheet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px var(--shadow-deep);
  border-color: var(--brass-dim);
}

.cs-views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
  background: var(--bg-oak);
}
/* Flat-work trades (painters, printmakers, illustrators) get a face + detail —
   two slots, not six. Two columns keeps them square and avoids empty cells. */
.cs-views--flat { grid-template-columns: repeat(2, 1fr); }

.cs-view {
  aspect-ratio: 1;
  background: var(--bg-void);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.cs-info { padding: 12px 14px; }

.cs-product-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--parchment);
  margin-bottom: 4px;
}

.cs-product-id {
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: var(--brass);
  margin-bottom: 8px;
}

.cs-shrink {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
  background: linear-gradient(180deg, rgba(201,168,76,0.2) 0%, rgba(201,168,76,0.08) 100%);
  border: 1px solid var(--brass-dim);
  color: var(--brass-light);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-primary:hover {
  background: linear-gradient(180deg, rgba(201,168,76,0.3) 0%, rgba(201,168,76,0.15) 100%);
  border-color: var(--brass);
  box-shadow: 0 0 12px var(--glow-brass);
}

.btn-secondary {
  background: transparent;
  border: var(--border-oak);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--brass-dim);
  color: var(--text-primary);
}

.btn-danger {
  background: rgba(107,36,36,0.3);
  border: 1px solid rgba(139,48,48,0.5);
  color: #D4726C;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-danger:hover { background: rgba(107,36,36,0.5); }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.field-input,
.field-select,
.field-textarea {
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 9px 12px;
  transition: border-color var(--transition-fast);
  width: 100%;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--brass-dim);
  box-shadow: 0 0 0 2px var(--glow-brass);
}

.field-textarea { resize: vertical; min-height: 100px; }

.field-select { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  animation: overlayFadeIn 200ms ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-overlay[hidden] { display: none; }

.modal-panel {
  background: var(--bg-panel);
  background-image:
    repeating-linear-gradient(92deg, transparent 0, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 3px);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(201,168,76,0.1);
  animation: modalSlideIn 250ms ease;
}

.modal-wide { max-width: 800px; }

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: var(--border-brass);
  background: var(--bg-oak);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--brass-light);
  letter-spacing: 0.04em;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition-fast);
  line-height: 1;
}

.modal-close:hover { color: var(--parchment); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: var(--bg-oak); }
.modal-body::-webkit-scrollbar-thumb { background: var(--brass-dim); }

.modal-footer {
  padding: 14px 20px;
  border-top: var(--border-oak);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-panel);
  border: var(--border-brass);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  color: var(--parchment);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  box-shadow: 0 8px 24px var(--shadow-deep);
  z-index: 1000;
  animation: toastIn 300ms ease;
}

.toast[hidden] { display: none; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

.text-brass    { color: var(--brass-light); }
.text-parchment{ color: var(--parchment); }
.text-muted    { color: var(--text-muted); }

.font-cinzel   { font-family: var(--font-heading); }
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }
.font-data     { font-family: var(--font-data); }

.mt-4  { margin-top: 16px; }
.mb-4  { margin-bottom: 16px; }
.gap-4 { gap: 16px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.empty-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5; }

/* Scrollable in modals */
.scroll-thin::-webkit-scrollbar { width: 4px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root { --nav-width: 220px; }
  .dash-lower { grid-template-columns: 1fr; }
  .kiln-lanes { grid-template-columns: repeat(3, 1fr); }
  .treasury-summary { grid-template-columns: repeat(2, 1fr); }
  .merchant-content { grid-template-columns: 1fr; }
  .settings-content { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  #guild-nav {
    transform: translateX(-100%);
    transition: transform var(--transition-med);
    z-index: 200;
  }

  #guild-nav.open {
    transform: translateX(0);
  }

  .nav-overlay.open {
    display: block;
  }

  .nav-toggle { display: flex; }

  #guild-content {
    margin-left: 0;
    padding-top: 60px;
  }

  .guild-section { padding: 20px 16px 40px; }

  .kiln-lanes { grid-template-columns: repeat(2, 1fr); }
  .faire-content { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .splash-title { font-size: 1.8rem; }
  .spice-blend-grid { grid-template-columns: 1fr; }
  .spice-costing-layout { flex-direction: column; }
  .spice-label-layout { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   SPICE GRIMOIRE
══════════════════════════════════════════════════════════════ */

.spice-content { padding: 0 0 3rem; }

.spice-header { margin-bottom: 1.5rem; }

/* ── Blend Grid ── */
.spice-blend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.spice-blend-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,220,100,0.15);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.spice-blend-card:hover {
  border-color: rgba(255,220,100,0.35);
  background: rgba(255,255,255,0.06);
}
.spice-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.spice-type-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass);
  background: rgba(200,160,40,0.12);
  border: 1px solid rgba(200,160,40,0.25);
  border-radius: 12px;
  padding: 2px 10px;
}
.spice-card-actions { display: flex; gap: 4px; }
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.btn-icon:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.spice-card-name {
  font-family: var(--font-cinzel);
  font-size: 1.05rem;
  color: var(--parchment);
  margin: 0 0 0.4rem;
}
.spice-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.spice-card-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--brass);
  opacity: 0.8;
  margin-bottom: 0.75rem;
}
.spice-ingredients-list {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spice-ing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.79rem;
  line-height: 1.4;
}
.spice-ing-name { color: var(--parchment); }
.spice-ing-amounts { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.spice-ing-sep { margin: 0 4px; opacity: 0.4; }
.spice-card-notes {
  font-size: 0.75rem;
  color: var(--brass);
  opacity: 0.75;
  margin: 0.6rem 0 0;
  font-style: italic;
  line-height: 1.45;
}

/* ── Blend Editor ── */
.spice-blend-editor {
  margin-top: 1.5rem;
  background: rgba(20,14,6,0.85);
  border: 1px solid rgba(255,220,100,0.25);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 720px;
}
.spice-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.spice-editor-header h3 {
  font-family: var(--font-cinzel);
  color: var(--brass);
  margin: 0;
  font-size: 1rem;
}
.spice-editor-row { margin-bottom: 1rem; }
.spice-editor-row label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  opacity: 0.85;
  margin-bottom: 4px;
}
.spice-optional { text-transform: none; font-weight: 400; opacity: 0.6; font-size: 0.7rem; }
.spice-editor-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.guild-input, .guild-select, .guild-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,220,100,0.2);
  border-radius: 6px;
  color: var(--parchment);
  font-size: 0.85rem;
  padding: 7px 10px;
  font-family: var(--font-baskerville);
  transition: border-color 0.15s;
}
.guild-input:focus, .guild-select:focus, .guild-textarea:focus {
  outline: none;
  border-color: rgba(255,220,100,0.5);
  background: rgba(255,255,255,0.07);
}
.guild-select option { background: #1c1008; color: var(--parchment); }
.guild-textarea { resize: vertical; }

.spice-ing-table { margin-bottom: 0.5rem; }
.spice-ing-header {
  display: grid;
  grid-template-columns: 2fr 70px 80px 80px 32px;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 0 4px;
}
.spice-ing-row-edit {
  display: grid;
  grid-template-columns: 2fr 70px 80px 80px 32px;
  gap: 6px;
  margin-bottom: 5px;
  align-items: center;
}
.spice-editor-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Label Tab ── */
.spice-label-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.spice-label-controls label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  opacity: 0.8;
  white-space: nowrap;
}
.spice-label-controls .guild-select { max-width: 320px; }

.spice-label-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.spice-label-preview { flex: 0 0 auto; }
.spice-label-sidebar {
  flex: 1;
  min-width: 260px;
}
.spice-label-sidebar h4 {
  font-family: var(--font-cinzel);
  font-size: 0.85rem;
  color: var(--brass);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.spice-label-text-block {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  max-height: 360px;
  overflow-y: auto;
}
.spice-label-pre {
  margin: 0;
  font-size: 0.75rem;
  color: var(--parchment);
  white-space: pre-wrap;
  font-family: var(--font-baskerville);
  line-height: 1.5;
}
.spice-label-tip {
  margin-top: 1rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-left: 2px solid rgba(200,160,40,0.3);
  padding-left: 0.6rem;
}

/* Label card */
.label-card {
  width: 300px;
  background: #fdf9f0;
  border: 1px solid #c8a020;
  border-radius: 8px;
  padding: 1rem;
  color: #1a0e04;
  font-family: Georgia, serif;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.label-header-band {
  text-align: center;
  border-bottom: 2px solid #c8a020;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.label-brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b2020;
}
.label-tagline { font-size: 0.6rem; color: #5a4a30; letter-spacing: 0.04em; }
.label-name {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin: 0.4rem 0 0.2rem;
  color: #1a0e04;
}
.label-type-tag {
  text-align: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b2020;
  margin-bottom: 0.4rem;
}
.label-desc {
  font-size: 0.7rem;
  color: #3a2a14;
  line-height: 1.4;
  margin: 0 0 0.4rem;
  font-style: italic;
}
.label-divider { text-align: center; color: #c8a020; margin: 0.4rem 0; font-size: 0.8rem; }
.label-ingredients-section { margin-bottom: 0.4rem; }
.label-ing-title {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a0e04;
  margin-bottom: 2px;
}
.label-ing-list { font-size: 0.65rem; color: #2a1a08; line-height: 1.45; }
.label-allergens { font-size: 0.65rem; color: #6b2020; font-weight: 700; margin: 0.3rem 0; }
.label-footer-row {
  border-top: 1px solid #c8a020;
  padding-top: 0.4rem;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.label-net-wt { font-size: 0.65rem; font-weight: 700; color: #1a0e04; }
.label-storage { font-size: 0.6rem; color: #5a4a30; }
.label-maker { font-size: 0.6rem; color: #6b2020; text-align: center; margin-top: 0.5rem; font-style: italic; }

/* ── Pantry Tab ── */
.spice-pantry-alert {
  background: rgba(200,80,40,0.15);
  border: 1px solid rgba(200,80,40,0.35);
  border-radius: 7px;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: #ff9966;
  margin-bottom: 1rem;
}
.spice-pantry-count { font-size: 0.82rem; color: var(--text-muted); }
.spice-pantry-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,220,100,0.18);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.spice-pantry-add-form .guild-input,
.spice-pantry-add-form .guild-select { width: auto; }

.spice-pantry-table-wrap { overflow-x: auto; }
.spice-pantry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.spice-pantry-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  border-bottom: 1px solid rgba(255,220,100,0.2);
  white-space: nowrap;
}
.spice-pantry-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
  color: var(--parchment);
}
.pantry-row.pantry-low td:first-child { border-left: 2px solid #f0a030; }
.pantry-row.pantry-out td:first-child { border-left: 2px solid #cc4422; }
.pantry-used-in { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

.pantry-status-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.pantry-status-ok  { background: rgba(40,160,80,0.15); color: #60c080; }
.pantry-status-low { background: rgba(200,120,20,0.15); color: #f0a030; }
.pantry-status-out { background: rgba(200,40,20,0.15);  color: #ff6644; }

/* ── Costing Tab ── */
.spice-costing-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.spice-costing-left  { flex: 0 0 380px; }
.spice-costing-right { flex: 1; }

.spice-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass);
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.spice-cost-ing-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.5rem; }
.spice-cost-ing-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.spice-cost-ing-row .guild-input,
.spice-cost-ing-row .guild-select { width: auto; }
.spice-cost-ing-name { color: var(--parchment); min-width: 120px; }
.spice-cost-ing-sub  { font-size: 0.65rem; color: var(--text-muted); display: none; }
.spice-cost-ing-row span { color: var(--text-muted); white-space: nowrap; }

.spice-cost-pkg-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.spice-cost-pkg-grid .guild-input { width: 100px; }

.spice-cost-summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,220,100,0.18);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.25rem;
}
.spice-cost-summary h4 {
  font-family: var(--font-cinzel);
  font-size: 0.9rem;
  color: var(--brass);
  margin: 0 0 1rem;
}
.spice-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.83rem;
  color: var(--text-muted);
  padding: 3px 0;
}
.spice-cost-row strong { color: var(--parchment); font-variant-numeric: tabular-nums; }
.spice-cost-total strong { font-size: 1rem; color: var(--brass); }
.spice-cost-highlight { padding: 6px 0; }
.spice-cost-highlight strong { font-size: 1.1rem; color: #90e080; }
.spice-cost-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 0; }

.spice-margin-controls {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.spice-margin-controls label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.spice-markup-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.spice-markup-row input[type=range] {
  flex: 1;
  accent-color: var(--brass);
}
#cost-markup-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brass);
  min-width: 48px;
  text-align: right;
}
.spice-margin-note {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  font-style: italic;
  min-height: 1.2em;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCTION PLANNER
═══════════════════════════════════════════════════════════ */

.production-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* ── Legend / intro ── */
.prod-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.prod-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.prod-small  { background: #1a3320; color: #6dbe8a; border: 1px solid #2d5a3d; }
.prod-medium { background: #1e2d4a; color: #7aabf7; border: 1px solid #2b4170; }
.prod-large  { background: #3a1a1a; color: #e07070; border: 1px solid #5a2a2a; }
.prod-legend-note { font-size: 0.78rem; color: var(--text-muted); }

.prod-instruction {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.prod-instruction strong { color: var(--text-primary); }

/* ── Products table ── */
.prod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.prod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.prod-table th {
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.prod-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.prod-table tbody tr:last-child td { border-bottom: none; }
.prod-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.prod-name-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.prod-icon { font-size: 1.4rem; line-height: 1; margin-top: 2px; }
.prod-name { font-weight: 600; color: var(--text-primary); }
.prod-note { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; font-style: italic; }
.prod-center { text-align: center; }

.prod-goal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.prod-goal-total {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 36px;
}

.prod-save-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.prod-save-note { font-size: 0.8rem; color: var(--text-muted); }

/* ── Bundle cards ── */
.bun-intro {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.bun-intro strong { color: var(--text-primary); }

.bun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.bun-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.2s;
}
.bun-card:hover { border-color: var(--accent-warm); }

.bun-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.bun-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.bun-card-header { flex: 1; }
/* "Make prints of this" on a finished original's card — the action belongs
   where the finished work is, not buried at the foot of a scrolling sheet. */
.product-card-repro { margin: 6px 0 2px; font-size: 0.7rem; padding: 4px 8px; }

/* ── Guild Vitals — the Home HUD, read like a game's resource meters ─────────
   Coffers is gold; the Dream fills a gold bar. Meters glow at the fill
   edge. (The personal goal retired 2026-07-25 — the dream is enough.) (Owner 2026-07-23: mana/power/in-game
   money on a video-game UI.) */
.home-card--vitals { display: flex; flex-direction: column; gap: 10px; }
.gv-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.gv-rune { font-size: 1.1rem; line-height: 1; }
.gv-rune--gold   { color: #E9C56A; text-shadow: 0 0 6px rgba(233,197,106,0.55); }
.gv-label { flex: 1; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-secondary); }
.gv-value { font-family: var(--font-data); font-weight: 700; }
.gv-value--gold   { color: #E9C56A; text-shadow: 0 0 8px rgba(233,197,106,0.4); }
.gv-coffers .gv-value--gold { font-size: 1.15rem; }

.gv-pulse { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-data);
  font-size: 0.72rem; padding: 0 0 4px 2px; }
.gv-up   { color: #7AB86E; }
.gv-down { color: #C07A5C; }
.gv-net  { margin-left: auto; font-weight: 700; }
.gv-net--pos { color: #7AB86E; }
.gv-net--neg { color: #C07A5C; }

.gv-goal { cursor: pointer; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
.gv-goal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.gv-goal-name { flex: 1; font-family: var(--font-heading); font-size: 0.82rem; color: var(--parchment); }
.gv-goal-name--muted { color: var(--text-muted); font-style: italic; }
.gv-goal-pct { font-family: var(--font-data); font-weight: 700; font-size: 0.78rem; }
.gv-goal-meta { font-family: var(--font-data); font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

/* The meter: a sunken track with a glowing fill, like an RPG bar. */
.gv-meter { position: relative; height: 12px; border-radius: 7px; overflow: hidden;
  background: rgba(0,0,0,0.38); box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05); }
.gv-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; transition: width 0.5s ease; }
.gv-fill--gold   { background: linear-gradient(90deg,#8A6A22,#E9C56A 70%,#FFF0B8);
  box-shadow: 0 0 10px rgba(233,197,106,0.6), inset 0 1px 0 rgba(255,255,255,0.35); }
.gv-glow { position: absolute; top: -3px; bottom: -3px; width: 6px; border-radius: 50%; filter: blur(3px); }
.gv-glow.gv-fill--gold   { background: #FFF0B8; }
.gv-goal--empty { opacity: 0.9; }

/* The folded "coming soon" partners — present and honest, just not leading. */
.conn-soon-group { margin-top: 14px; }
.conn-soon-group > summary {
  cursor: pointer; font-family: var(--font-heading); font-size: 0.8rem;
  letter-spacing: 0.03em; color: var(--brass); padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.08); list-style: revert;
}
.conn-soon-group > summary:hover { color: var(--brass-light); }
.conn-soon-group[open] > summary { margin-bottom: 4px; }

.bun-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
/* Which of the three kinds this is — deal, boxed set, or suite. */
.bun-kind { font-family: var(--font-data); font-size: 0.7rem; color: var(--brass);
  letter-spacing: 0.03em; margin: 2px 0 3px; }
.bun-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.bun-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

.bun-items { display: flex; flex-direction: column; gap: 4px; }
.bun-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bun-item-qty  { font-weight: 700; color: var(--accent-warm); min-width: 20px; }
.bun-item-name { flex: 1; color: var(--text-secondary); }
/* A piece that is no longer in the Hall: shown, never hidden, but plainly
   marked so the set is not read as complete. */
.bun-item-row--missing .bun-item-name { text-decoration: line-through; opacity: 0.7; }
.bun-item-missing { font-style: italic; color: #B85C5C; font-size: 0.75rem; }
/* A set's own vessel — one box for the whole set, not one per piece. */
.bun-packaging { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.bun-pack-title { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 5px; }
.bun-pack-row { display: flex; align-items: baseline; gap: 7px; font-size: 0.78rem; padding: 2px 0; }
.bun-pack-mark { min-width: 12px; color: var(--text-muted); }
.bun-pack-mark.is-done { color: #7AB86E; }
.bun-pack-label { color: var(--text-secondary); }
.bun-pack-note { color: var(--text-muted); font-style: italic; font-size: 0.72rem; }
.bun-item-price { color: var(--text-muted); font-size: 0.78rem; }

.bun-pricing { display: flex; flex-direction: column; gap: 4px; }
.bun-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.bun-price-strike { text-decoration: line-through; color: var(--text-muted); }
.bun-price-main   { font-size: 0.9rem; }
.bun-price-val    { color: #6dbe8a; font-size: 1rem; }
.bun-savings      { color: var(--text-muted); font-size: 0.77rem; }

.bun-reserve-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bun-reserve-label { font-size: 0.77rem; color: var(--text-muted); }
.bun-reserve-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.bun-small  { background: #1a3320; color: #6dbe8a; border: 1px solid #2d5a3d; }
.bun-medium { background: #1e2d4a; color: #7aabf7; border: 1px solid #2b4170; }
.bun-large  { background: #3a1a1a; color: #e07070; border: 1px solid #5a2a2a; }

.bun-note {
  font-size: 0.77rem;
  color: var(--accent-warm);
  font-style: italic;
  line-height: 1.4;
}

/* ── Bundle editor ── */
.bun-editor {
  margin-top: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--accent-warm);
  border-radius: 10px;
  overflow: hidden;
}
.bun-ed-item-hdr {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 30px;
  gap: 6px;
  padding: 4px 2px;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.bun-item-edit {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 30px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

/* ── Build List ── */
/* FUTURE NEEDS — "before your next show" strip (maker arc #9). */
.fn-strip {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--brass, #C9A84C);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.fn-strip--penciled { border-left-style: dashed; }
.fn-strip-head { display: flex; align-items: center; gap: 10px; }
.fn-strip-icon { font-size: 1.4rem; line-height: 1; }
.fn-strip-show { font-family: var(--font-display, serif); font-size: 1rem; color: var(--ink, #2B2118); }
.fn-strip-when { color: var(--brass, #C9A84C); font-weight: 600; font-size: 0.85rem; }
.fn-strip-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.fn-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fn-signal {
  display: flex; align-items: baseline; gap: 7px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fn-signal:hover { border-color: var(--brass, #C9A84C); transform: translateY(-1px); }
.fn-signal-n { font-family: var(--font-data, monospace); font-size: 1.1rem; font-weight: 700; color: var(--ink, #2B2118); }
.fn-signal-l { font-size: 0.75rem; color: var(--text-muted); }
.fn-signal--low .fn-signal-n { color: #B8840F; }
.fn-clear { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.fn-note { font-size: 0.68rem; color: var(--text-muted); margin-top: 9px; }
.fn-strip--empty {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; border-left-style: dashed;
}
.fn-strip--empty:hover { border-color: var(--brass, #C9A84C); }
.fn-strip-text { font-size: 0.82rem; color: var(--text-muted); }

.build-plan-bar {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.build-plan-section { display: flex; flex-direction: column; gap: 6px; }
.build-plan-section > label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.build-show-inputs { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.build-show-input-group { display: flex; align-items: center; gap: 6px; }
.build-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer; }

.build-summary-chips {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.build-chip {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.build-chip-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.build-chip-val   { font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.build-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.build-num { text-align: center; font-size: 0.9rem; }
.build-bundle { color: #7aabf7; }
.build-buf    { color: var(--text-muted); }
.build-grand  { font-size: 1rem; }
.build-grand-hdr { color: var(--accent-warm) !important; }
.build-value  { color: #6dbe8a; }
.build-per-design { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }

.build-notes {
  margin-top: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.build-notes strong { color: var(--text-secondary); }

/* ── Responsive ── */
@media (max-width: 700px) {
  .bun-grid { grid-template-columns: 1fr; }
  .build-plan-bar { flex-direction: column; align-items: flex-start; }
  .build-show-inputs { gap: 0.5rem; }
  .bun-item-edit { grid-template-columns: 1fr 55px 1fr 26px; }
}

/* ═══════════════════════════════════════════════════════════
   SHOW BUDGET TAB
═══════════════════════════════════════════════════════════ */

.budget-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.budget-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.budget-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.budget-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.budget-row:last-child { margin-bottom: 0; }

.budget-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.budget-field-sm { flex: 0 0 auto; min-width: 110px; max-width: 160px; }
.budget-field label {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.budget-calc-val {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #6dbe8a;
}

.budget-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.5rem;
}

/* ── Travel mode buttons ── */
.budget-mode-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.budget-mode-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.budget-mode-btn:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.budget-mode-btn.active {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: #fff;
  font-weight: 700;
}

/* ── No lodging ── */
.budget-no-lodging-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  color: var(--text-secondary);
  cursor: pointer;
  flex-wrap: wrap;
}
.budget-no-lodging-label input[type="checkbox"] {
  width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent-warm);
}
.budget-home-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  background: #1a3320;
  border: 1px solid #2d5a3d;
  color: #6dbe8a;
  font-size: 0.74rem;
  font-weight: 600;
}

/* ── Production cost grid ── */
.budget-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.budget-cost-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.budget-cost-item label {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.budget-cost-input {
  display: flex;
  align-items: center;
  gap: 4px;
}
.budget-cost-input span {
  color: var(--text-muted);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.budget-cost-input .guild-input { flex: 1; }

/* ── Summary card ── */
.budget-summary-card {
  background: linear-gradient(135deg, #1a1208 0%, #0d1a12 100%);
  border: 1px solid var(--accent-warm);
  border-radius: 12px;
  overflow: hidden;
}
.bgt-sum-title {
  background: rgba(210,160,80,0.15);
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-warm);
  border-bottom: 1px solid rgba(210,160,80,0.2);
}
.bgt-sum-body {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.bgt-sum-col {
  flex: 1;
  min-width: 260px;
  padding: 1rem 1.25rem;
}
.bgt-sum-divider {
  width: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0.75rem 0;
  flex-shrink: 0;
}
.bgt-sum-section-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.bgt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bgt-row:last-child { border-bottom: none; }
.bgt-row-total {
  font-size: 0.95rem;
  color: var(--text-primary);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
}
.bgt-row-profit {
  font-size: 0.92rem;
  padding: 6px 0;
}
.bgt-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}
.bgt-warning {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(224, 112, 112, 0.12);
  border: 1px solid rgba(224, 112, 112, 0.3);
  border-radius: 6px;
  font-size: 0.79rem;
  color: #e07070;
}
.bgt-good {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(109, 190, 138, 0.12);
  border: 1px solid rgba(109, 190, 138, 0.3);
  border-radius: 6px;
  font-size: 0.79rem;
  color: #6dbe8a;
}

.budget-action-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .bgt-sum-body { flex-direction: column; }
  .bgt-sum-divider { width: 100%; height: 1px; margin: 0; }
  .budget-cost-grid { grid-template-columns: 1fr 1fr; }
  .budget-field-sm { min-width: 90px; }
}

/* ═══════════════════════════════════════════════════
   PHASE 14 — GLAZE QUEUE & RECIPE ASSIGNMENT
   ═══════════════════════════════════════════════════ */

/* ── Queue header ── */
.glaze-queue-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.glaze-queue-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--parchment);
  margin: 0;
}
.glaze-queue-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Queue list ── */
.glaze-queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Queue card ── */
.glaze-queue-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.glaze-queue-card:hover { border-color: var(--gold-primary); }

.glaze-queue-pip {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 120px;
}

.glaze-queue-body {
  flex: 1;
  min-width: 0;
}
.glaze-queue-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--parchment);
  margin-bottom: 3px;
}
.glaze-queue-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* ── Assignment badge (on queue card) ── */
.glaze-assign-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(82,196,106,0.12);
  border: 1px solid rgba(82,196,106,0.3);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 0.72rem;
  color: #52C46A;
  margin-top: 4px;
}
.glaze-assign-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.glaze-unassign-btn {
  background: none;
  border: none;
  color: rgba(82,196,106,0.6);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.glaze-unassign-btn:hover { color: #E05A3A; }

/* ── Recipe-assigned products label (in My Recipes) ── */
.glaze-recipe-assigned {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
}

/* ── Assign recipe modal: recipe picker grid ── */
.glaze-assign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}
.glaze-assign-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-oak);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.glaze-assign-card:hover { border-color: var(--gold-primary); }
.glaze-assign-card.selected {
  border-color: #52C46A;
  background: rgba(82,196,106,0.08);
}
.glaze-assign-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}
.glaze-assign-rname {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--parchment);
}
.glaze-assign-rmeta {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
   PHASE 15 — PRICING INTELLIGENCE ENGINE
   ═══════════════════════════════════════════════════ */

/* ── Config bar ── */
.price-cfg-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.price-cfg-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.price-cfg-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}
.price-cfg-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-slider {
  flex: 1;
  accent-color: var(--gold-primary);
  cursor: pointer;
}
.price-cfg-val {
  font-family: var(--font-data);
  font-size: 0.9rem;
  color: var(--gold-primary);
  min-width: 44px;
  text-align: right;
}

/* ── Summary chips ── */
.price-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.price-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-family: var(--font-heading);
  border: 1px solid;
}
.price-chip--ok   { background: rgba(82,196,106,0.1);  color: #52C46A; border-color: rgba(82,196,106,0.3); }
.price-chip--low  { background: rgba(212,168,67,0.1);  color: #D4A843; border-color: rgba(212,168,67,0.3); }
.price-chip--loss { background: rgba(224,90,58,0.1);   color: #E05A3A; border-color: rgba(224,90,58,0.3); }
.price-chip--none { background: rgba(255,255,255,0.04); color: var(--text-muted); border-color: rgba(255,255,255,0.1); }

/* ── Table wrapper ── */
.price-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: var(--border-oak);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.price-table thead th {
  background: var(--bg-oak);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.price-table thead th.px-num { text-align: right; }
.price-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.price-table tbody tr:last-child { border-bottom: none; }
.price-row { transition: background 0.12s; }
.price-row:hover { background: rgba(255,255,255,0.025); }
.price-row--loss { background: rgba(224,90,58,0.06); }
.price-row--low  { background: rgba(212,168,67,0.05); }
.price-table td { padding: 10px 12px; vertical-align: middle; }
.px-num { text-align: right; font-family: var(--font-data); white-space: nowrap; }

/* Product name cell */
.price-name { display: flex; align-items: center; gap: 10px; }
.price-icon  { font-size: 1.2rem; flex-shrink: 0; }
.price-pname { font-family: var(--font-heading); color: var(--parchment); font-size: 0.82rem; }
.price-pmeta { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }

/* Value colors */
.price-val--ok   { color: #52C46A; font-weight: 600; }
.price-val--low  { color: #D4A843; font-weight: 600; }
.price-val--loss { color: #E05A3A; font-weight: 600; }
.price-nd        { color: var(--text-muted); opacity: 0.5; }

/* Target / faire / ws columns */
.price-target { color: var(--gold-primary); }
.price-faire  { color: #C4963C; }
.price-ws     { color: #9A5EE0; }

/* Comp & notes inputs */
.price-comp-cell { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.price-comp-input, .price-notes-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  width: 100%;
  transition: border-color 0.15s;
}
.price-comp-input:focus, .price-notes-input:focus {
  border-color: var(--gold-primary);
  outline: none;
  background: rgba(255,255,255,0.06);
}

/* Set price button */
.price-action-cell { white-space: nowrap; }
.price-set-btn {
  background: rgba(212,168,67,0.12);
  border: 1px solid rgba(212,168,67,0.35);
  border-radius: 6px;
  color: var(--gold-primary);
  font-size: 0.68rem;
  font-family: var(--font-heading);
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.price-set-btn:hover {
  background: rgba(212,168,67,0.22);
  border-color: var(--gold-primary);
}

/* ═══════════════════════════════════════════════════
   PHASE 16 — GLAZE TOME DEEP EXPANSION
   ═══════════════════════════════════════════════════ */

/* ── Reorder alert ── */
.gz-reorder-alert {
  padding: 6px 14px;
  background: rgba(212,168,67,0.12);
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: 20px;
  font-size: 0.75rem;
  color: #D4A843;
  font-family: var(--font-heading);
}

/* ── Glaze card badges ── */
.gz-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 4px;
}
.gz-badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  border: 1px solid;
}
.gz-badge--finish  { color: #4A9EE0; border-color: rgba(74,158,224,0.35); background: rgba(74,158,224,0.1); }
.gz-badge--opacity { color: #9A5EE0; border-color: rgba(154,94,224,0.35); background: rgba(154,94,224,0.1); }
.gz-badge--food    { color: #52C46A; border-color: rgba(82,196,106,0.35); background: rgba(82,196,106,0.1); }
.gz-badge--nofood  { color: #E05A3A; border-color: rgba(224,90,58,0.35);  background: rgba(224,90,58,0.1); }
.gz-badge--stock   { color: #52C46A; border-color: rgba(82,196,106,0.3);  background: rgba(82,196,106,0.08); }
.gz-badge--low     { color: #D4A843; border-color: rgba(212,168,67,0.4);  background: rgba(212,168,67,0.1); }

/* ── Layer hint on card ── */
.gz-layer-hint {
  font-size: 0.68rem;
  color: #9A5EE0;
  margin-top: 3px;
}

/* ── Card action buttons row ── */
.gz-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-end;
  flex-shrink: 0;
}

/* ── Detail modal header ── */
.gz-detail-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.gz-detail-swatch {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.gz-detail-title { flex: 1; }

/* ── Properties grid ── */
.gz-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.gz-prop {
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gz-prop--warn { border-color: rgba(212,168,67,0.5); background: rgba(212,168,67,0.07); }
.gz-prop-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gz-prop span:last-child {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Recipe block ── */
.gz-recipe-block {
  background: var(--bg-oak);
  border: var(--border-oak);
  border-radius: 4px;
  padding: 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ── Section subhead ── */
.gz-section-head {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 18px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 4px;
}

/* ── Linked products ── */
.gz-linked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.gz-linked-chip {
  background: rgba(74,158,224,0.1);
  border: 1px solid rgba(74,158,224,0.25);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.72rem;
  color: #4A9EE0;
}

/* ── Layering combos ── */
.gz-layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gz-layer-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.gz-layer-info { flex: 1; min-width: 0; }
.gz-layer-name   { font-size: 0.8rem; color: var(--parchment); font-family: var(--font-heading); }
.gz-layer-result { font-size: 0.72rem; color: var(--gold-primary); margin-top: 1px; }
.gz-layer-notes  { font-size: 0.68rem; color: var(--text-muted); font-style: italic; }
.gz-del-layer {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.gz-del-layer:hover { color: #E05A3A; background: rgba(224,90,58,0.1); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 17 — PHOTOGRAPHY SHOT LIST CHECKLISTS
   ═══════════════════════════════════════════════════════════════ */

/* Summary bar */
.ph-cl-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ph-cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.ph-cl-chip--ok   { background: #52C46A18; color: #52C46A; border-color: #52C46A30; }
.ph-cl-chip--low  { background: #D4A84318; color: #D4A843; border-color: #D4A84330; }
.ph-cl-chip--none { background: #55555518; color: #888;    border-color: #55555530; }

/* Card grid */
.ph-cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.ph-cl-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: center;
}
.ph-cl-card:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px #D4A84322;
  transform: translateY(-1px);
}
.ph-cl-card--active {
  border-color: #4A9EE0;
  box-shadow: 0 0 14px #4A9EE022;
}
.ph-cl-ring { flex-shrink: 0; }
.ph-cl-card-body { width: 100%; }
.ph-cl-icon  { font-size: 1.4rem; margin-bottom: 2px; }
.ph-cl-name  { font-family: var(--font-heading); font-size: 0.72rem; color: var(--parchment); line-height: 1.3; margin-bottom: 2px; }
.ph-cl-col   { font-size: 0.62rem; color: var(--text-muted); margin-bottom: 4px; }
.ph-cl-count { font-size: 0.68rem; font-family: monospace; font-weight: bold; }
.ph-cl-active-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #4A9EE018;
  color: #4A9EE0;
  border: 1px solid #4A9EE030;
  font-size: 0.62rem;
  font-family: var(--font-heading);
}

/* Checklist modal */
.ph-cl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}
.ph-cl-group-head {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  padding: 12px 0 6px;
  border-bottom: 1px solid #D4A84320;
  margin-bottom: 4px;
}
.ph-cl-shot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background 0.12s;
}
.ph-cl-shot-row:hover { background: #ffffff08; }
.ph-cl-shot--done { background: #52C46A0A; }
.ph-cl-shot--done .ph-cl-shot-label { color: #52C46A; text-decoration: line-through; opacity: 0.7; }

/* Custom checkbox */
.ph-cl-check {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
.ph-cl-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ph-cl-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.ph-cl-check input:checked + .ph-cl-check-box {
  background: #52C46A;
  border-color: #52C46A;
}
.ph-cl-check input:checked + .ph-cl-check-box::after {
  content: '✓';
  font-size: 10px;
  color: #000;
  font-weight: 900;
  line-height: 1;
}

.ph-cl-shot-icon  { font-size: 0.9rem; flex-shrink: 0; width: 20px; text-align: center; }
.ph-cl-shot-label {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-shot-url, .ph-shot-note {
  background: var(--input-bg, #1a1a1a);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.67rem;
  color: var(--text-secondary);
  transition: border-color 0.12s;
  font-family: monospace;
}
.ph-shot-url  { flex: 1;     min-width: 0; }
.ph-shot-note { width: 110px; flex-shrink: 0; }
.ph-shot-url:focus, .ph-shot-note:focus {
  outline: none;
  border-color: var(--accent-gold);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 18 — LORE LIBRARY WORLD BUILDER
   ═══════════════════════════════════════════════════════════════ */

/* Tome card enhancements */
.lore-tome-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.lore-wb-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.lore-wb-chip {
  background: var(--tome-color, #8B7340)18;
  color: var(--tome-color, #8B7340);
  border: 1px solid var(--tome-color, #8B7340)30;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-family: var(--font-heading);
}

/* World builder section */
.lore-wb-section { padding: 4px 0; }
.lore-wb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  padding-bottom: 8px;
  border-bottom: 1px solid #D4A84320;
  margin-bottom: 10px;
}

/* Entity cards (characters, places) */
.lore-entity-list { display: flex; flex-direction: column; gap: 8px; }
.lore-entity-card {
  background: #ffffff06;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.lore-entity-card:hover { border-color: var(--tome-color, #8B7340); }
.lore-entity-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lore-entity-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--parchment);
  flex: 1;
}
.lore-entity-role {
  font-size: 0.68rem;
  color: var(--accent-gold);
  font-style: italic;
}
.lore-entity-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.lore-entity-del:hover { color: #E05A3A; background: #E05A3A15; }
.lore-entity-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

/* Palette swatches */
.lore-palette-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.lore-swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lore-swatch {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid #ffffff18;
  transition: border-color 0.12s;
  cursor: pointer;
}
.lore-swatch:hover { border-color: var(--accent-gold); }
.lore-hex-input {
  width: 52px;
  background: #1A1A1A;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 0.62rem;
  color: var(--text-secondary);
  text-align: center;
  font-family: monospace;
}
.lore-hex-input:focus { outline: none; border-color: var(--accent-gold); }

/* Mood board */
.lore-mood-list { display: flex; flex-direction: column; gap: 6px; }
.lore-mood-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lore-mood-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* Product notes */
.lore-prod-note {
  resize: vertical;
  min-height: 38px;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 19 — SPICE GRIMOIRE: BATCHES + SHOW KIT
   ═══════════════════════════════════════════════════════════════ */

/* "What can I make?" strip */
.spice-can-make-strip {
  background: #ffffff05;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.spice-can-make-head {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.spice-can-make-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.spice-can-make-card {
  background: #ffffff06;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 100px;
}
.spice-can-make-name { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 2px; }
.spice-can-make-num  { font-size: 1.3rem; font-family: monospace; font-weight: bold; line-height: 1; }
.spice-can-make-jars { font-size: 0.65rem; margin-top: 1px; }

/* Supplier column in pantry */
.pantry-supplier-input { font-size: 0.7rem !important; }

/* Batches layout */
.spice-batches-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .spice-batches-layout { grid-template-columns: 1fr; } }

.spice-batch-preview {
  margin-top: 8px;
  font-size: 0.72rem;
}
.spice-batch-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #ffffff08;
  color: var(--text-secondary);
}
.spice-batch-preview-short { color: #E05A3A !important; }

.spice-batch-history-list { display: flex; flex-direction: column; gap: 8px; }
.spice-batch-card {
  background: #ffffff06;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
}
.spice-batch-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.spice-batch-date     { font-size: 0.65rem; color: var(--text-muted); }
.spice-batch-nums {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--parchment);
}
.spice-batch-deducted-tag {
  font-size: 0.62rem;
  background: #52C46A18;
  color: #52C46A;
  border: 1px solid #52C46A30;
  border-radius: 8px;
  padding: 1px 7px;
}
.spice-batch-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 5px;
  font-style: italic;
}

/* Show Kit layout */
.spice-showkit-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .spice-showkit-layout { grid-template-columns: 1fr; } }

.spice-showkit-help {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.spice-showkit-blend-list { display: flex; flex-direction: column; gap: 8px; }
.spice-showkit-blend-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.spice-showkit-blend-name {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spice-showkit-jars-note { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
.spice-showkit-placeholder { color: var(--text-muted); font-size: 0.82rem; padding: 24px 0; }

.spice-showkit-plan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.spice-showkit-plan-row {
  background: #ffffff06;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 8px 12px;
}
.spice-showkit-plan-blend { font-size: 0.78rem; color: var(--parchment); margin-bottom: 3px; }
.spice-showkit-plan-nums  { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-secondary); }

.spice-shopping-list { display: flex; flex-direction: column; gap: 4px; }
.spice-shopping-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  padding: 4px 0;
  border-bottom: 1px solid #ffffff06;
}
.spice-shopping-name  { flex: 1; color: var(--parchment); }
.spice-shopping-short { font-weight: bold; }
.spice-shopping-have  { font-size: 0.65rem; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 20 — DIGITAL ASSET LIBRARY
   ═══════════════════════════════════════════════════════════════ */

/* Search bar */
.dal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.dal-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.9rem;
  pointer-events: none;
  opacity: 0.6;
}
.dal-search-input {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 32px 8px 32px;
  font-size: 0.82rem;
  color: var(--text-primary);
  width: 240px;
  transition: border-color 0.15s;
}
.dal-search-input:focus { outline: none; border-color: var(--accent-gold); }
.dal-clear-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px;
}
.dal-clear-btn:hover { color: var(--parchment); }

/* File type chips */
.dal-type-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  background: #ffffff08;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.dal-chip:hover { border-color: var(--accent-gold); color: var(--parchment); }
.dal-chip--active {
  background: var(--chip-color, #D4A843)18;
  border-color: var(--chip-color, #D4A843)50;
  color: var(--chip-color, #D4A843);
}
.dal-chip-count {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Card grid */
.dal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.dal-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dal-card:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 14px #D4A84318;
  transform: translateY(-1px);
}

.dal-card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  align-self: flex-start;
}
.dal-card-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--parchment);
  line-height: 1.3;
}
.dal-card-thumb-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: italic;
}
.dal-card-location {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-family: monospace;
  background: #ffffff06;
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dal-tag-row { display: flex; gap: 4px; flex-wrap: wrap; }
.dal-tag {
  background: #D4A84314;
  color: #D4A843;
  border: 1px solid #D4A84325;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 0.6rem;
  font-family: var(--font-heading);
}
.dal-tag--more { opacity: 0.6; }
.dal-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid #ffffff08;
}
.dal-card-date { font-size: 0.6rem; color: var(--text-muted); }
.dal-linked-chip {
  font-size: 0.6rem;
  color: #4A9EE0;
  background: #4A9EE012;
  border: 1px solid #4A9EE025;
  border-radius: 8px;
  padding: 1px 7px;
}

/* Empty state */
.dal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* Detail modal */
.dal-detail { display: flex; flex-direction: column; gap: 2px; }
.dal-detail-type { font-size: 0.72rem; letter-spacing: 0.08em; font-family: var(--font-heading); margin-bottom: 4px; }
.dal-detail-name { font-family: var(--font-heading); font-size: 1.1rem; color: var(--parchment); margin-bottom: 2px; }
.dal-detail-id   { font-size: 0.62rem; color: var(--text-muted); font-family: monospace; margin-bottom: 10px; }
.dal-detail-section { margin: 8px 0; }
.dal-detail-label { font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 4px; }
.dal-detail-val { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.dal-detail-notes { font-style: italic; }
.dal-linked-product-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dal-linked-product-chip {
  background: #4A9EE014;
  border: 1px solid #4A9EE030;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.72rem;
  color: #4A9EE0;
}

/* Form */
.dal-product-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
  padding: 4px;
}
.dal-product-link-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background 0.1s;
}
.dal-product-link-option:hover { background: #ffffff08; }
.dal-product-link-option input { accent-color: var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════
   PHASE 21 — AI FORGE  (lore intel + context generator)
   ═══════════════════════════════════════════════════════ */

/* ── Tab toggle (shared shell) ── */
.tab-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.tab-btn { background:var(--surface); color:var(--text-secondary); border:none; padding:7px 14px; cursor:pointer; font-size:0.8rem; font-weight:500; transition:background .15s,color .15s; white-space:nowrap; }
.tab-btn:hover { background:var(--surface-hover,#2a2520); color:var(--text); }
.tab-btn.active { background:var(--accent); color:#fff; }

/* ── Intel panel ── */
.forge-intel-panel-full { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
.forge-panel-head { font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.forge-panel-sub  { font-size:0.75rem; color:var(--text-secondary); margin-bottom:16px; }
.forge-intel-list { display:flex; flex-direction:column; gap:12px; }
.forge-intel-row  { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; padding:12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.forge-intel-product { display:flex; gap:10px; align-items:flex-start; font-size:1.3rem; }
.forge-intel-name  { font-weight:600; color:var(--text); font-size:0.88rem; }
.forge-intel-stage { font-size:0.75rem; font-weight:500; margin-top:2px; }
.forge-intel-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.forge-suggest-btn { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:5px 10px; font-size:0.78rem; color:var(--text); cursor:pointer; transition:background .12s,border-color .12s; }
.forge-suggest-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.forge-intel-no-match { font-size:0.78rem; color:var(--text-secondary); font-style:italic; }

/* ── Lore completeness dots ── */
.forge-lore-dots  { display:flex; align-items:center; gap:3px; margin-top:5px; }
.forge-lore-dot   { width:7px; height:7px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:inline-block; }
.forge-lore-dot--filled { background:#52C46A; border-color:#52C46A; }
.forge-lore-label { font-size:0.7rem; color:var(--text-secondary); margin-left:4px; }
.forge-lore-badge { display:inline-block; background:#2a3d26; color:#52C46A; font-size:0.68rem; font-weight:600; padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }

/* ── Library category row ── */
.forge-cat-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }

/* ── Context generator ── */
.forge-gen-layout { display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
@media (max-width:820px) { .forge-gen-layout { grid-template-columns:1fr; } }
.forge-gen-controls { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:0; }
.forge-gen-output-col { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.forge-gen-textarea { font-family:monospace; resize:vertical; }

/* ── Context preview ── */
.forge-context-preview { margin-top:16px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.forge-ctx-head  { background:var(--bg); padding:8px 12px; font-size:0.78rem; font-weight:700; color:var(--text); border-bottom:1px solid var(--border); }
.forge-ctx-row   { display:grid; grid-template-columns:130px 1fr; gap:8px; padding:6px 12px; border-bottom:1px solid var(--border); align-items:start; }
.forge-ctx-row:last-child { border-bottom:none; }
.forge-ctx-row--empty .forge-ctx-val { color:#E05A3A; font-size:0.72rem; }
.forge-ctx-label { font-size:0.72rem; font-weight:600; color:var(--text-secondary); font-family:monospace; word-break:break-all; }
.forge-ctx-val   { font-size:0.75rem; color:var(--text); line-height:1.4; }
.forge-ctx-tip   { background:#2a2010; border-top:1px solid #4a3820; padding:8px 12px; font-size:0.75rem; color:#C9A84C; }

/* ── Var hint bar ── */
.forge-var-hint { font-size:0.7rem; color:var(--text-secondary); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 10px; line-height:1.7; margin-top:6px; font-family:monospace; }

/* ── Prompt product context bar ── */
.forge-product-context { display:flex; gap:12px; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:1.4rem; }
.forge-ctx-name  { font-weight:700; color:var(--text); font-size:0.9rem; }
.forge-ctx-stage { font-size:0.75rem; font-weight:500; margin-top:2px; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 22 — CASCADE AUTOMATION ENGINE
   ═══════════════════════════════════════════════════════════════ */

/* ── Rule grid ── */
.cascade-rule-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }

.cascade-rule-card {
  display:grid; grid-template-columns:48px 1fr auto;
  gap:14px; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; transition:opacity .15s, border-color .15s;
}
.cascade-rule-card--off { opacity:.55; }
.cascade-rule-card--off .cascade-rule-name { color:var(--text-secondary); }

.cascade-rule-icon { font-size:1.6rem; line-height:1; padding-top:2px; text-align:center; }
.cascade-rule-name { font-weight:700; color:var(--text); font-size:0.88rem; margin-bottom:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cascade-rule-trigger { font-size:0.78rem; color:var(--text-secondary); margin-bottom:5px; }
.cascade-rule-trigger strong { color:var(--accent,#C9A84C); }
.cascade-rule-actions  { font-size:0.75rem; color:var(--text-secondary); }
.cascade-action-line   { padding:1px 0; }

.cascade-builtin-badge {
  display:inline-block; background:rgba(201,168,76,.15); color:#C9A84C;
  font-size:0.65rem; font-weight:600; padding:1px 7px; border-radius:4px;
  border:1px solid rgba(201,168,76,.3); letter-spacing:.03em;
}

/* ── Rule controls (toggle + edit/del) ── */
.cascade-rule-controls { display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:2px; }

/* Toggle switch */
.cascade-toggle { position:relative; display:inline-block; cursor:pointer; }
.cascade-toggle-input { position:absolute; opacity:0; width:0; height:0; }
.cascade-toggle-track {
  display:block; width:36px; height:20px; background:var(--border);
  border-radius:10px; position:relative; transition:background .2s;
}
.cascade-toggle-input:checked + .cascade-toggle-track { background:#52C46A; }
.cascade-toggle-thumb {
  position:absolute; top:3px; left:3px; width:14px; height:14px;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.cascade-toggle-input:checked + .cascade-toggle-track .cascade-toggle-thumb { transform:translateX(16px); }

.cascade-edit-btn, .cascade-del-btn {
  background:none; border:1px solid var(--border); border-radius:5px;
  color:var(--text-secondary); padding:2px 7px; font-size:0.78rem; cursor:pointer;
  transition:background .12s, color .12s;
}
.cascade-edit-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.cascade-del-btn:hover  { background:#CF6679; color:#fff; border-color:#CF6679; }

/* ── Hint bar ── */
.cascade-hint {
  font-size:0.73rem; color:var(--text-secondary); background:var(--bg);
  border:1px solid var(--border); border-radius:6px; padding:10px 14px; line-height:1.6;
}

/* ── Log badge on tab button ── */
.cascade-log-badge {
  display:inline-block; background:#C9A84C; color:#1a1410;
  font-size:0.62rem; font-weight:700; padding:0 5px; border-radius:8px;
  margin-left:4px; vertical-align:middle; line-height:1.6;
}

/* ── Log list ── */
.cascade-log-header {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:12px;
  font-size:0.78rem; color:var(--text-secondary);
}
.cascade-log-list { display:flex; flex-direction:column; gap:8px; }
.cascade-log-entry {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:10px 14px;
}
.cascade-log-meta { display:flex; gap:12px; align-items:center; margin-bottom:4px; flex-wrap:wrap; }
.cascade-log-time { font-size:0.68rem; color:var(--text-secondary); font-family:var(--font-data,monospace); }
.cascade-log-rule { font-size:0.78rem; font-weight:600; color:#C9A84C; }
.cascade-log-product { font-size:0.84rem; margin-bottom:4px; }
.cascade-log-stage { color:var(--text-secondary); font-size:0.75rem; margin-left:6px; }
.cascade-log-results { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.cascade-log-results code {
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:1px 6px; font-size:0.68rem; color:var(--text-secondary);
}

/* ── Rule action row in form ── */
.cascade-action-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 23 — LABELS & QR CODES
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.labels-layout { display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; }
@media (max-width:720px) { .labels-layout { grid-template-columns:1fr; } }
.labels-controls { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
.labels-preview-col { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; min-height:300px; }

/* ── Label type cards ── */
.label-type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px; }
.label-type-card {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 6px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.label-type-card:hover { border-color:var(--accent,#C9A84C); }
.label-type-card--active { border-color:var(--accent,#C9A84C); background:rgba(201,168,76,.1); }
.label-type-name { font-size:0.75rem; font-weight:600; color:var(--text); margin-top:4px; }
.label-type-size { font-size:0.65rem; color:var(--text-secondary); font-family:monospace; }

/* ── Hint ── */
.label-hint { font-size:0.72rem; color:var(--text-secondary); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px 10px; line-height:1.6; }
.label-hint code { background:rgba(201,168,76,.12); color:#C9A84C; padding:1px 4px; border-radius:3px; font-size:0.7rem; }

/* ── Preview area ── */
.label-preview-placeholder { padding:40px 20px; text-align:center; color:var(--text-secondary); font-size:0.85rem; font-style:italic; }

/* Label preview (screen approximation) */
#lbl-preview-inner .lbl {
  background:#F8F4E8; border:1.5px solid #8B7340; border-radius:6px;
  display:inline-flex; flex-direction:column; align-items:center;
  font-family:Georgia,serif; color:#1a1410;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
#lbl-preview-inner .lbl-hangtag  { width:200px; min-height:320px; padding:12px 10px 10px; }
#lbl-preview-inner .lbl-sticker  { width:240px; min-height:140px; flex-direction:row; align-items:stretch; padding:0; }
#lbl-preview-inner .lbl-booth    { width:320px; min-height:240px; flex-direction:row; align-items:stretch; padding:0; }
#lbl-preview-inner .lbl-sticker .lbl-sticker-left { flex:1; display:flex; flex-direction:column; justify-content:center; padding:10px 8px; }
#lbl-preview-inner .lbl-sticker .lbl-qr-right     { padding:8px; border-left:1px solid #8B7340; display:flex; align-items:center; }
#lbl-preview-inner .lbl-booth .lbl-booth-left  { flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px; }
#lbl-preview-inner .lbl-booth .lbl-booth-right { width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; border-left:1px solid #8B7340; }
#lbl-preview-inner .lbl-punch-hole { width:20px; height:20px; border-radius:50%; border:1.5px solid #8B7340; background:#fff; margin-bottom:6px; }
#lbl-preview-inner .lbl-collection { font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; padding:2px 6px; border-radius:3px; margin-bottom:4px; width:100%; text-align:center; }
#lbl-preview-inner .lbl-icon  { font-size:1.6rem; margin:4px 0; }
#lbl-preview-inner .lbl-icon--large { font-size:2rem; margin-bottom:6px; }
#lbl-preview-inner .lbl-name  { font-size:10px; font-weight:700; text-align:center; color:#1a1410; line-height:1.3; margin-bottom:2px; }
#lbl-preview-inner .lbl-name--large { font-size:13px; text-align:left; }
#lbl-preview-inner .lbl-price { font-family:monospace; font-size:11px; font-weight:700; color:#7A4010; margin-bottom:4px; }
#lbl-preview-inner .lbl-price--large { font-size:15px; }
#lbl-preview-inner .lbl-qr-wrap { display:flex; flex-direction:column; align-items:center; margin:4px 0; }
#lbl-preview-inner .lbl-qr-img { width:90px; height:90px; image-rendering:pixelated; }
#lbl-preview-inner .lbl-qr-fallback { width:90px; height:90px; display:flex; align-items:center; justify-content:center; border:1px dashed #8B7340; font-size:6px; font-family:monospace; text-align:center; color:#8B7340; }
#lbl-preview-inner .lbl-qr-hint { font-size:6px; font-family:monospace; color:#8B7340; margin-top:2px; }
#lbl-preview-inner .lbl-lore { font-size:7px; font-style:italic; color:#5a4020; text-align:center; line-height:1.5; margin:4px 2px; }
#lbl-preview-inner .lbl-brand { font-size:7px; font-weight:600; color:#8B7340; letter-spacing:.05em; text-transform:uppercase; margin-top:auto; padding-top:4px; }

/* ── Batch tab ── */
.label-batch-grid { display:flex; flex-direction:column; gap:4px; }
.label-batch-row {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.label-batch-row:hover { border-color:var(--accent,#C9A84C); }
.label-batch-row--checked { border-color:var(--accent,#C9A84C); background:rgba(201,168,76,.08); }
.label-batch-row input[type=checkbox] { accent-color:var(--accent,#C9A84C); width:16px; height:16px; flex-shrink:0; }
.label-batch-name  { flex:1; font-size:0.85rem; color:var(--text); font-weight:500; }
.label-batch-price { font-family:monospace; font-size:0.82rem; color:#C9A84C; }

/* ════════════════════════════════════════════════════════════
   PHASE 24 — ANALYTICS & BUSINESS INTELLIGENCE
   ════════════════════════════════════════════════════════════ */

/* Range pills */
.an-range-pills { display:flex; gap:4px; }
.an-range-pill {
  padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); cursor:pointer; transition:all .15s;
}
.an-range-pill.active, .an-range-pill:hover {
  background:var(--accent); color:#1C1008; border-color:var(--accent);
}

/* Metric cards */
.an-metric-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;
}
.an-metric-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
  position:relative; overflow:hidden;
}
.an-metric-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),#9A5EE0);
}
.an-metric-icon { font-size:1.4rem; }
.an-metric-value { font-size:1.5rem; font-weight:700; color:var(--text-bright); display:flex; align-items:center; gap:6px; }
.an-metric-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.an-metric-sub   { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }
.an-trend { font-size:0.75rem; font-weight:600; padding:2px 6px; border-radius:8px; }
.an-trend--up   { background:#52C46A22; color:#52C46A; }
.an-trend--down { background:#CF667922; color:#CF6679; }

/* Cards */
.an-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px;
}
.an-card-head {
  font-size:0.82rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent); margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.an-legend-inline { display:flex; align-items:center; gap:10px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-muted); font-size:0.75rem; }
.an-legend-inline span { display:inline-block; width:10px; height:10px; border-radius:2px; }

/* Two-column layout */
.an-two-col {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:700px) { .an-two-col { grid-template-columns:1fr; } }

/* Donut */
.an-donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.an-legend      { display:flex; flex-direction:column; gap:6px; flex:1; min-width:120px; }
.an-legend-row  { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--text-muted); }
.an-legend-row strong { color:var(--text-bright); margin-left:auto; }
.an-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Horizontal bars */
.an-hbar-list { display:flex; flex-direction:column; gap:8px; }
.an-hbar-row  { display:grid; grid-template-columns:minmax(120px,2fr) 1fr auto; align-items:center; gap:10px; }
.an-hbar-label { font-size:0.8rem; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.an-hbar-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.an-hbar-fill  { height:100%; border-radius:4px; transition:width .4s ease; }
.an-hbar-val   { font-size:0.78rem; color:var(--text-muted); text-align:right; white-space:nowrap; min-width:60px; }

/* Table */
.an-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.an-table th {
  text-align:left; padding:6px 10px; border-bottom:1px solid var(--border);
  color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.an-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text); }
.an-table tr:last-child td { border-bottom:none; }
.an-table tr:hover td { background:rgba(255,255,255,.03); }
.an-num { text-align:right; font-variant-numeric:tabular-nums; }

/* Insights */
.an-insight-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.an-insight-row:last-child { border-bottom:none; }
.an-insight-icon    { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.an-insight-product { font-weight:600; color:var(--text-bright); font-size:0.85rem; }
.an-insight-reason  { font-size:0.78rem; color:var(--text-muted); margin-top:2px; }
.an-insight-type {
  margin-left:auto; flex-shrink:0; font-size:0.68rem; font-weight:600;
  padding:3px 8px; border-radius:8px; text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
}
.an-insight-type--make_more     { background:#52C46A22; color:#52C46A; }
.an-insight-type--review_pricing { background:#C9A84C22; color:#C9A84C; }
.an-insight-type--reduce        { background:#CF667922; color:#CF6679; }

/* Collection chip */
.an-col-chip {
  display:inline-block; padding:2px 7px; border-radius:8px;
  font-size:0.68rem; font-weight:600; letter-spacing:.03em;
}

/* Empty state */
.an-empty { color:var(--text-muted); font-style:italic; font-size:0.85rem; padding:8px 0; }

/* ════════════════════════════════════════════════════════════
   PHASE 25 — GLOBAL SEARCH & CROSS-REFERENCE ENGINE
   ════════════════════════════════════════════════════════════ */

/* Nav search button + kbd hint */
.nav-item--search .nav-btn { opacity:.8; }
.nav-item--search .nav-btn:hover { opacity:1; }
.nav-kbd {
  display:inline-block; padding:0 5px; border-radius:4px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  font-size:.65rem; font-family:monospace; color:var(--text-muted);
  vertical-align:middle; margin-left:4px;
}

/* Search overlay */
#search-overlay {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:60px 16px 16px;
}
#search-overlay[hidden] { display:none !important; }

.srch-backdrop {
  position:fixed; inset:0;
  background:rgba(12,8,4,.78);
  backdrop-filter:blur(4px);
}

.srch-panel {
  position:relative; z-index:1;
  width:100%; max-width:660px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 80px);
  overflow:hidden;
  animation: srch-drop .15s ease;
}
@keyframes srch-drop {
  from { opacity:0; transform:translateY(-12px) scale(.97); }
  to   { opacity:1; transform:none; }
}

/* Header */
.srch-header {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.srch-slash-hint {
  font-size:1.1rem; color:var(--accent); font-weight:700;
  background:rgba(201,168,76,.12); width:26px; height:26px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.srch-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text-bright); font-size:1rem; font-family:inherit;
  caret-color:var(--accent);
}
.srch-input::placeholder { color:var(--text-muted); }
.srch-input::-webkit-search-cancel-button { display:none; }
.srch-close-btn {
  background:transparent; border:none; color:var(--text-muted);
  font-size:1rem; cursor:pointer; padding:4px 8px; border-radius:6px;
  transition:color .15s; flex-shrink:0;
}
.srch-close-btn:hover { color:var(--text-bright); background:rgba(255,255,255,.07); }

/* Tabs */
.srch-tabs-row {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.srch-tab {
  flex:1; background:transparent; border:none;
  padding:9px 12px; font-size:0.78rem; font-weight:600;
  color:var(--text-muted); cursor:pointer; transition:all .15s;
  border-bottom:2px solid transparent;
}
.srch-tab.active {
  color:var(--accent); border-bottom-color:var(--accent);
  background:rgba(201,168,76,.05);
}
.srch-tab:hover:not(.active) { color:var(--text); }

/* Body */
.srch-body {
  overflow-y:auto; padding:0 0 8px;
  flex:1; min-height:0;
}

/* Count line */
.srch-count {
  padding:10px 16px 4px; font-size:0.75rem; color:var(--text-muted);
}
.srch-count strong { color:var(--accent); }

/* Group */
.srch-group { padding:4px 0; }
.srch-group-head {
  padding:8px 16px 4px; font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted);
}

/* Result rows */
.srch-result {
  display:flex; align-items:center; gap:12px;
  padding:9px 16px; cursor:pointer; transition:background .1s;
}
.srch-result:hover, .srch-result:focus {
  background:rgba(255,255,255,.05); outline:none;
}
.srch-result-icon { font-size:1.1rem; flex-shrink:0; }
.srch-result-text { flex:1; min-width:0; }
.srch-result-title {
  font-size:0.88rem; color:var(--text-bright); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.srch-result-sub {
  font-size:0.74rem; color:var(--text-muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srch-result-arr { color:var(--text-muted); font-size:0.9rem; flex-shrink:0; }
.srch-hl { background:rgba(201,168,76,.3); color:var(--text-bright); border-radius:2px; }

/* Empty state */
.srch-empty {
  padding:32px 24px; text-align:center; color:var(--text-muted);
  font-size:0.88rem; line-height:1.6;
}
.srch-empty-icon { font-size:2.4rem; margin-bottom:12px; }
.srch-tip { font-size:0.78rem; margin-top:8px; color:#666; }
.srch-tip kbd {
  padding:1px 5px; border-radius:4px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  font-size:.75em; font-family:monospace;
}

/* ── Cross-reference panel ── */
.xref-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.xref-back {
  background:transparent; border:none; color:var(--accent);
  font-size:0.8rem; cursor:pointer; padding:4px 8px;
  border-radius:6px; flex-shrink:0; transition:background .15s;
}
.xref-back:hover { background:rgba(201,168,76,.1); }
.xref-title {
  font-size:0.95rem; font-weight:700; color:var(--text-bright);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Summary stat row */
.xref-summary-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.xref-stat {
  background:var(--card-bg); padding:10px 12px; text-align:center;
}
.xref-stat-val { font-size:0.95rem; font-weight:700; color:var(--text-bright); }
.xref-stat-lab { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* Xref sections */
.xref-section { border-bottom:1px solid rgba(255,255,255,.05); }
.xref-section:last-child { border-bottom:none; }
.xref-section-head {
  padding:8px 16px 4px; font-size:0.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted);
  display:flex; align-items:center; gap:8px;
}
.xref-count {
  background:rgba(255,255,255,.08); border-radius:8px;
  padding:1px 6px; font-size:0.68rem; color:var(--text-muted);
  font-weight:400; letter-spacing:0;
}
.xref-empty { padding:6px 16px 10px; font-size:0.78rem; color:#555; font-style:italic; }

/* Xref rows */
.xref-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 16px;
}
.xref-row--link { cursor:pointer; transition:background .1s; }
.xref-row--link:hover { background:rgba(255,255,255,.04); }
.xref-item-icon { font-size:1rem; flex-shrink:0; }
.xref-item-text { flex:1; min-width:0; }
.xref-item-title { font-size:0.83rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xref-item-sub   { font-size:0.72rem; color:var(--text-muted); }
.xref-arr        { color:var(--text-muted); font-size:0.85rem; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════
   PHASE 26 — FAIRE DAY MODE
   ════════════════════════════════════════════════════════════ */

/* ── Nav faire-day button ── */
.nav-item--faire-day .nav-btn { color:var(--accent); }
.nav-item--faire-day .nav-btn:hover { background:rgba(201,168,76,.12); }

/* ── Visual mode: body.faire-day ── */
body.faire-day #guild-nav {
  width:64px !important;
  padding:0 !important;
}
body.faire-day .nav-header { flex-direction:column; padding:12px 6px; gap:4px; }
body.faire-day .guild-crest-img { width:36px; height:36px; }
body.faire-day .guild-title-block { display:none; }
body.faire-day .nav-candle { display:none; }
body.faire-day .nav-label { display:none; }
body.faire-day .nav-icon  { font-size:1.5rem; }
body.faire-day .nav-btn   { justify-content:center; padding:12px 0; }
body.faire-day .nav-kbd   { display:none; }
body.faire-day .guild-main { margin-left:64px !important; }

/* Larger touch targets */
body.faire-day button:not(.fd-qty-btn):not(.fd-close):not(.fd-change-btn) {
  min-height:48px;
}
body.faire-day input, body.faire-day select {
  min-height:48px; font-size:1rem;
}

/* Golden border indicator */
body.faire-day #guild-nav {
  border-right:2px solid var(--accent) !important;
  box-shadow:2px 0 20px rgba(201,168,76,.15) !important;
}
body.faire-day::before {
  content:'🎪 FAIRE DAY';
  position:fixed; top:0; left:64px; right:0; z-index:899;
  background:rgba(201,168,76,.12);
  border-bottom:1px solid rgba(201,168,76,.3);
  padding:4px 16px;
  font-size:0.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--accent); text-align:center; pointer-events:none;
}

/* ── Overlay ── */
#fd-overlay {
  position:fixed; inset:0; z-index:1900;
  display:flex; align-items:flex-end; justify-content:center;
}
#fd-overlay[hidden] { display:none !important; }

.fd-backdrop {
  position:fixed; inset:0;
  background:rgba(10,6,2,.8);
  backdrop-filter:blur(3px);
}

.fd-panel {
  position:relative; z-index:1;
  width:100%; max-width:520px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  max-height:90vh;
  animation:fd-rise .2s ease;
}
@keyframes fd-rise {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:none; }
}

/* ── Panel header ── */
.fd-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.fd-header-left  { display:flex; align-items:center; gap:12px; }
.fd-header-icon  { font-size:1.8rem; }
.fd-header-title { font-size:1rem; font-weight:700; color:var(--text-bright); }
.fd-header-sub   { font-size:0.78rem; color:var(--text-muted); margin-top:2px; }
.fd-header-sub strong { color:var(--accent); }
.fd-header-right { display:flex; align-items:center; gap:10px; }

.fd-mode-toggle {
  padding:6px 12px; border-radius:20px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:0.75rem; cursor:pointer;
  transition:all .15s;
}
.fd-mode-toggle:hover, .fd-mode-toggle--on {
  background:rgba(201,168,76,.15); border-color:var(--accent); color:var(--accent);
}
.fd-close {
  background:transparent; border:none; color:var(--text-muted);
  font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.fd-close:hover { color:var(--text-bright); background:rgba(255,255,255,.07); }

/* ── Tabs ── */
.fd-tabs {
  display:flex; border-bottom:1px solid var(--border); flex-shrink:0;
}
.fd-tab {
  flex:1; background:transparent; border:none; border-bottom:2px solid transparent;
  padding:12px 8px; font-size:0.82rem; font-weight:600;
  color:var(--text-muted); cursor:pointer; transition:all .15s;
}
.fd-tab.active  { color:var(--accent); border-bottom-color:var(--accent); background:rgba(201,168,76,.05); }
.fd-tab:hover:not(.active) { color:var(--text); }

/* ── Body ── */
.fd-body {
  overflow-y:auto; flex:1; min-height:0; padding:16px;
}

/* ── Search input ── */
.fd-sale-search-row { margin-bottom:14px; }
.fd-search-input {
  width:100%; padding:12px 16px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text-bright); font-size:1rem; font-family:inherit;
  outline:none; box-sizing:border-box;
  transition:border-color .15s;
}
.fd-search-input:focus { border-color:var(--accent); }
.fd-search-input::placeholder { color:var(--text-muted); }

/* ── Product grid ── */
.fd-prod-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.fd-prod-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:12px; padding:14px 10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; transition:all .15s;
}
.fd-prod-card:hover, .fd-prod-card:focus {
  border-color:var(--accent); background:rgba(201,168,76,.08); outline:none;
}
.fd-prod-icon { font-size:1.8rem; }
.fd-prod-name { font-size:0.82rem; font-weight:600; color:var(--text-bright); }
.fd-prod-meta { font-size:0.72rem; color:var(--text-muted); }

/* ── Selected product view ── */
.fd-selected-card {
  display:flex; align-items:center; gap:12px;
  background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.2);
  border-radius:12px; padding:14px 16px; margin-bottom:20px;
}
.fd-sel-icon { font-size:2rem; flex-shrink:0; }
.fd-sel-info { flex:1; }
.fd-sel-name  { font-size:1rem; font-weight:700; color:var(--text-bright); }
.fd-sel-price { font-size:0.78rem; color:var(--text-muted); margin-top:2px; }
.fd-change-btn {
  padding:6px 12px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--text-muted); font-size:0.75rem;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.fd-change-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── Qty row ── */
.fd-qty-row {
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:8px 0 4px;
}
.fd-qty-btn {
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--border); background:var(--card-bg);
  color:var(--text-bright); font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.fd-qty-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.fd-qty-btn:disabled { opacity:.3; cursor:default; }
.fd-qty-val {
  font-size:2.5rem; font-weight:700; color:var(--text-bright);
  min-width:60px; text-align:center;
}
.fd-qty-label { text-align:center; font-size:0.78rem; color:var(--text-muted); margin-bottom:16px; }

/* ── Total ── */
.fd-total-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(255,255,255,.03);
  border-radius:10px; margin-bottom:16px;
}
.fd-total-label { font-size:0.85rem; color:var(--text-muted); font-weight:600; }
.fd-total-val   { font-size:1.5rem; font-weight:700; color:var(--accent); }

/* ── Action button ── */
.fd-action-row { margin-bottom:8px; }
.fd-log-btn {
  width:100%; padding:16px; border-radius:12px;
  background:linear-gradient(135deg,#C9A84C,#9A5EE0);
  border:none; color:#1C1008; font-size:1.1rem; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.fd-log-btn:hover { opacity:.9; }
.fd-sale-msg {
  padding:12px 16px; border-radius:10px;
  background:rgba(82,196,106,.12); border:1px solid rgba(82,196,106,.3);
  color:#52C46A; font-size:0.88rem; text-align:center; margin-top:10px;
}

/* ── Inventory adjust ── */
.fd-inv-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05);
}
.fd-inv-card:last-child { border-bottom:none; }
.fd-inv-icon { font-size:1.5rem; flex-shrink:0; }
.fd-inv-info { flex:1; min-width:0; }
.fd-inv-name { font-size:0.88rem; font-weight:600; color:var(--text-bright); }
.fd-inv-sub  { font-size:0.73rem; color:var(--text-muted); }
.fd-inv-controls {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.fd-inv-count {
  font-size:1.3rem; font-weight:700; color:var(--accent);
  min-width:36px; text-align:center;
}
.fd-inv-minus, .fd-inv-plus {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:transparent;
  color:var(--text-bright); font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.fd-inv-minus:hover { border-color:#CF6679; color:#CF6679; }
.fd-inv-plus:hover  { border-color:#52C46A; color:#52C46A; }

/* ── QR Scan ── */
.fd-scan-area { display:flex; flex-direction:column; gap:16px; }
.fd-cam-wrap {
  position:relative; border-radius:14px; overflow:hidden;
  background:#000; aspect-ratio:4/3;
}
.fd-cam-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.fd-cam-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; pointer-events:none;
}
.fd-scan-reticle {
  width:160px; height:160px; border:3px solid var(--accent);
  border-radius:16px; box-shadow:0 0 0 9999px rgba(0,0,0,.45);
}
.fd-cam-hint {
  background:rgba(0,0,0,.6); color:#fff; font-size:0.78rem;
  padding:6px 14px; border-radius:20px;
}
.fd-scan-start-btn {
  width:100%; padding:16px; border-radius:12px;
  background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.3);
  color:var(--accent); font-size:1rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.fd-scan-start-btn:hover { background:rgba(201,168,76,.2); }
.fd-scan-fallback {
  text-align:center; padding:24px 16px; color:var(--text-muted);
  font-size:0.85rem; line-height:1.7;
}
.fd-scan-fallback-icon { font-size:2.5rem; margin-bottom:12px; }
.fd-scan-tip { font-size:0.78rem; color:#555; margin-top:10px; }
.fd-scan-found { display:flex; flex-direction:column; gap:12px; }
.fd-scan-found-title { color:#52C46A; font-weight:700; font-size:0.9rem; }
.fd-scan-found-card { cursor:default; }
.fd-scan-found-actions { display:flex; flex-direction:column; gap:8px; }
.fd-scan-inv-btn, .fd-scan-again-btn {
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text); font-size:0.9rem;
  font-weight:600; cursor:pointer; transition:all .15s;
}
.fd-scan-inv-btn:hover   { border-color:var(--accent); color:var(--accent); }
.fd-scan-again-btn:hover { border-color:var(--text-muted); }

/* ── General empties ── */
.fd-empty {
  color:var(--text-muted); font-style:italic; font-size:0.85rem;
  text-align:center; padding:24px 16px;
}

/* ════════════════════════════════════════════════════════════
   PHASE 27 — CUSTOM ORDERS & CRM
   ════════════════════════════════════════════════════════════ */

/* Follow-up badge in tab */
.crm-badge-count {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#1C1008;
  border-radius:10px; font-size:0.68rem; font-weight:700;
  padding:1px 6px; margin-left:4px; vertical-align:middle;
}

/* List header */
.crm-list-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.crm-search {
  flex:1; min-width:180px; padding:9px 14px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text-bright); font-size:0.88rem; font-family:inherit; outline:none;
}
.crm-search:focus { border-color:var(--accent); }

/* CONTACT ROLES (owner 2026-09-25) — a contact is marked, not re-filed.
   The chip is a quiet tint, never a second badge competing with the card:
   the name still reads first. Colours follow the status vocabulary the
   card kit already uses — jade buys, brass supplies, teal collaborates,
   ivory holds the ground. */
.crm-role-filter {
  padding:9px 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text-bright); font-size:0.85rem; font-family:inherit; outline:none;
}
.crm-role-filter:focus { border-color:var(--accent); }
.crm-roles { display:inline-flex; gap:4px; margin-left:7px; vertical-align:middle; flex-wrap:wrap; }
.crm-role {
  display:inline-block; padding:1px 7px; border-radius:999px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; white-space:nowrap;
  border:1px solid currentColor; background:rgba(255,255,255,.05);
}
.crm-role--customer     { color:#7FBE9A; }
.crm-role--supplier     { color:#C9A84C; }
.crm-role--collaborator { color:#6FB0AC; }
.crm-role--venue        { color:#C8BCA0; }
.crm-rolebox {
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px 12px; margin:0; background:rgba(255,255,255,.02);
}
.crm-rolebox legend {
  padding:0 6px; font-size:0.78rem; font-weight:600; color:var(--text-dim);
}
.crm-role-check {
  display:flex; align-items:center; gap:8px; padding:5px 2px;
  cursor:pointer; font-size:0.85rem;
}
.crm-role-check input { accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto; }
.crm-role-hint { color:var(--text-dim); font-size:0.78rem; }
.crm-filter-select {
  padding:9px 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text); font-size:0.85rem; font-family:inherit; outline:none;
  cursor:pointer;
}
.crm-add-btn {
  padding:9px 16px; border-radius:10px;
  background:var(--accent); color:#1C1008; border:none;
  font-size:0.85rem; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:opacity .15s;
}
.crm-add-btn:hover { opacity:.85; }

/* Customer cards */
.crm-cards { display:flex; flex-direction:column; gap:8px; }
.crm-card {
  display:flex; align-items:center; gap:14px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; cursor:pointer;
  transition:all .15s;
}
.crm-card:hover { border-color:var(--accent); background:rgba(201,168,76,.04); }
.crm-avatar {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0;
}
.crm-card-info { flex:1; min-width:0; }
.crm-card-name { font-size:0.92rem; font-weight:600; color:var(--text-bright); }
.crm-card-meta { font-size:0.76rem; color:var(--text-muted); margin-top:2px; }
.crm-card-arrow { color:var(--text-muted); font-size:1.2rem; flex-shrink:0; }

/* Status badge */
.crm-badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:0.72rem; font-weight:700; border:1px solid; white-space:nowrap;
}

/* Detail header */
.crm-detail-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.crm-back {
  background:transparent; border:none; color:var(--accent);
  font-size:0.85rem; cursor:pointer; padding:6px 12px;
  border-radius:8px; transition:background .15s;
}
.crm-back:hover { background:rgba(201,168,76,.1); }
.crm-detail-actions { display:flex; gap:8px; }
.crm-secondary-btn {
  padding:7px 14px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--text); font-size:0.82rem;
  cursor:pointer; transition:all .15s;
}
.crm-secondary-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Customer detail profile */
.crm-detail-profile {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:16px;
}
.crm-profile-info { flex:1; }
.crm-profile-name { font-size:1.2rem; font-weight:700; color:var(--text-bright); margin:0 0 8px; }
.crm-profile-row  { font-size:0.82rem; color:var(--text-muted); margin-bottom:4px; }
.crm-profile-pref { font-size:0.82rem; color:var(--accent); margin-top:6px; }
.crm-notes-block {
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; font-size:0.83rem;
  color:var(--text-muted); margin-bottom:16px; line-height:1.5;
}
.crm-section-head {
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); margin:20px 0 10px;
}

/* Order rows */
.crm-order-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; cursor:pointer; margin-bottom:6px;
  transition:all .15s;
}
.crm-order-row:hover { border-color:var(--accent); background:rgba(201,168,76,.04); }
.crm-order-row-left { flex:1; min-width:0; }
.crm-order-title  { font-size:0.88rem; font-weight:600; color:var(--text-bright); }
.crm-order-meta   { font-size:0.76rem; color:var(--text-muted); margin-top:3px; }
.crm-order-due    { font-size:0.73rem; color:var(--accent); margin-top:3px; }
.crm-order-due--over { color:#CF6679; }
.crm-order-row-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.crm-dep-tag { color:#52C46A; }
.crm-dep-tag--unpaid { color:#C9A84C; }

/* Order detail card */
.crm-order-detail-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:14px; padding:20px;
}
.crm-order-detail-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.crm-order-detail-title {
  font-size:1.1rem; font-weight:700; color:var(--text-bright); margin:0 0 4px;
}
.crm-order-detail-cust {
  font-size:0.82rem; color:var(--accent); cursor:pointer;
}
.crm-order-detail-cust:hover { text-decoration:underline; }

.crm-order-detail-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px; margin-bottom:16px;
}
.crm-detail-field {}
.crm-field-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:3px; }
.crm-field-val   { font-size:0.9rem; color:var(--text-bright); }
.crm-field-val--warn { color:#CF6679; }

.crm-detail-section { margin-bottom:14px; }
.crm-detail-text    { font-size:0.85rem; color:var(--text); line-height:1.6; white-space:pre-wrap; }

.crm-order-actions { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.crm-action-btn {
  padding:13px 16px; border-radius:10px; border:none;
  font-size:0.92rem; font-weight:600; cursor:pointer; transition:opacity .15s;
  text-align:left;
}
.crm-action-btn--advance {
  background:linear-gradient(135deg,var(--accent),#9A5EE0); color:#1C1008;
}
.crm-action-btn--deposit {
  background:rgba(82,196,106,.15); border:1px solid rgba(82,196,106,.3); color:#52C46A;
}
.crm-action-btn:hover { opacity:.85; }

/* Forms */
.crm-form { max-width:640px; }
.crm-form-title { font-size:1rem; font-weight:700; color:var(--text-bright); margin:0 0 20px; }
.crm-form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:600px) { .crm-form-grid { grid-template-columns:1fr; } }
.crm-label { display:flex; flex-direction:column; gap:5px; font-size:0.78rem; font-weight:600; color:var(--text-muted); }
.crm-label--full { grid-column:1/-1; }
.crm-required { color:var(--accent); }
.crm-input {
  padding:9px 12px; border-radius:9px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text-bright);
  font-size:0.88rem; font-family:inherit; outline:none; transition:border-color .15s;
}
.crm-input:focus { border-color:var(--accent); }
.crm-textarea { resize:vertical; min-height:72px; }
.crm-form-actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.crm-save-btn {
  padding:11px 22px; border-radius:10px; border:none;
  background:var(--accent); color:#1C1008; font-size:0.92rem;
  font-weight:700; cursor:pointer; transition:opacity .15s;
}
.crm-save-btn:hover { opacity:.85; }
.crm-delete-btn {
  padding:11px 18px; border-radius:10px;
  border:1px solid rgba(207,102,121,.4); background:transparent;
  color:#CF6679; font-size:0.88rem; cursor:pointer; transition:all .15s;
}
.crm-delete-btn:hover { background:rgba(207,102,121,.1); }
.crm-form-error {
  margin-top:10px; padding:10px 14px; border-radius:8px;
  background:rgba(207,102,121,.1); border:1px solid rgba(207,102,121,.3);
  color:#CF6679; font-size:0.82rem;
}

/* Follow-ups */
.crm-followup-intro { padding:8px 0 16px; }
.crm-followup-count { font-size:0.85rem; color:var(--accent); font-weight:600; }
.crm-followup-clear { font-size:0.85rem; color:#52C46A; font-weight:600; }
.crm-followup-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; cursor:pointer; margin-bottom:8px;
  transition:all .15s;
}
.crm-followup-row:hover { border-color:var(--accent); }
.crm-followup-left { flex:1; min-width:0; }
.crm-followup-title  { font-size:0.88rem; font-weight:600; color:var(--text-bright); }
.crm-followup-meta   { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }
.crm-followup-reason { font-size:0.78rem; color:var(--accent); margin-top:4px; }
.crm-followup-right  { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Empty state */
.crm-empty { text-align:center; padding:40px 20px; color:var(--text-muted); }
.crm-empty-icon { font-size:2.2rem; margin-bottom:10px; }
.crm-empty p    { font-size:0.85rem; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 28 — WORKSHOP SCHEDULING & CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* ── Calendar Wrapper ── */
.sch-cal-wrap { padding: 0 0 1rem; }

.sch-cal-nav {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.25rem .75rem;
}
.sch-cal-title {
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--text-primary); flex: 1; text-align: center;
}
.sch-cal-nav-btn, .sch-cal-today-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 6px;
  padding: .3rem .7rem; cursor: pointer; font-size: .9rem;
  transition: background .15s;
}
.sch-cal-nav-btn:hover, .sch-cal-today-btn:hover { background: var(--bg-hover); }
.sch-cal-today-btn { font-size: .75rem; padding: .3rem .6rem; }

.sch-cal-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 .5rem; gap: 2px;
}
.sch-cal-head-cell {
  text-align: center; font-size: .68rem; font-weight: 600;
  color: var(--text-muted); padding: .3rem 0; letter-spacing: .04em;
}

.sch-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding: 0 .5rem;
}

.sch-cal-cell {
  min-height: 62px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .35rem .4rem; cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 2px;
}
.sch-cal-cell:hover { background: var(--bg-hover); border-color: var(--accent); }
.sch-cal-cell--other { opacity: .35; pointer-events: none; }
.sch-cal-cell--today { border-color: var(--accent) !important; }
.sch-cal-cell--today .sch-cal-day { color: var(--accent); font-weight: 700; }
.sch-cal-cell--sel { background: var(--accent-bg) !important; border-color: var(--accent) !important; }

.sch-cal-day { font-size: .78rem; font-weight: 600; color: var(--text-secondary); line-height: 1; }
.sch-cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.sch-cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sch-cal-dot-more { font-size: .6rem; color: var(--text-muted); line-height: 1; align-self: center; }

/* Day detail panel */
.sch-cal-day-detail {
  margin: .75rem 1.25rem 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem;
}
.sch-cal-day-title {
  font-family: var(--font-display); font-size: .95rem;
  color: var(--text-primary); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.sch-cal-day-add { display: flex; gap: .4rem; margin-left: auto; }
.sch-add-mini {
  background: var(--accent); color: #fff; border: none;
  border-radius: 6px; padding: .25rem .65rem; font-size: .72rem;
  cursor: pointer; font-weight: 600; white-space: nowrap;
}
.sch-add-mini:hover { opacity: .88; }

.sch-cal-event {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; margin-bottom: .35rem;
  background: var(--bg-main); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: 6px; cursor: pointer; font-size: .82rem;
  color: var(--text-primary); transition: background .12s;
}
.sch-cal-event:hover { background: var(--bg-hover); }
.sch-cal-no-ev { font-size: .82rem; color: var(--text-muted); font-style: italic; }

.sch-cal-hint {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem; color: var(--text-muted); font-size: .8rem;
}
.sch-legend { display: flex; gap: 1rem; }
.sch-legend span { display: flex; align-items: center; gap: .3rem; }

/* ── Class cards ── */
.sch-class-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: .5rem;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sch-class-card:hover { background: var(--bg-hover); border-color: var(--accent); }
.sch-class-card-left { display: flex; align-items: center; gap: .85rem; }
.sch-class-card-right { display: flex; align-items: center; gap: .5rem; }
.sch-class-type-icon { font-size: 1.5rem; }
.sch-class-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; font-size: .9rem; }
.sch-class-meta { font-size: .75rem; color: var(--text-muted); }

/* ── Detail card ── */
.sch-detail-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;
}
.sch-detail-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.sch-detail-title {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--text-primary); margin: 0 0 .25rem;
}
.sch-detail-meta { font-size: .8rem; color: var(--text-muted); }

/* ── Reg rows ── */
.sch-reg-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: .7rem 1rem; margin-bottom: .4rem;
}
.sch-reg-left { flex: 1; min-width: 0; }
.sch-reg-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.sch-reg-name { font-weight: 600; color: var(--text-primary); font-size: .88rem; }
.sch-reg-meta { font-size: .73rem; color: var(--text-muted); }
.sch-reg-check {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.sch-reg-check input { cursor: pointer; accent-color: var(--accent); }

/* ── Kiln rows ── */
.sch-kiln-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: .5rem;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sch-kiln-row:hover { background: var(--bg-hover); border-color: var(--accent); }
.sch-kiln-row-left { flex: 1; }
.sch-kiln-type { font-weight: 600; color: var(--text-primary); font-size: .9rem; margin-bottom: 2px; }

.sch-kiln-legend { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ── Shared badge ── */
.sch-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .55rem; border-radius: 20px;
  border: 1px solid; font-size: .72rem; font-weight: 600;
  white-space: nowrap; line-height: 1;
}

/* ── Responsive calendar ── */
@media (max-width: 480px) {
  .sch-cal-cell { min-height: 48px; }
  .sch-cal-title { font-size: .9rem; }
  .sch-cal-head-cell { font-size: .6rem; }
  .sch-cal-day { font-size: .7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 29 — SYNC ENGINE & OFFLINE MODE
   ═══════════════════════════════════════════════════════════════ */

/* ── Sync dot in nav ── */
.sync-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: background .3s, box-shadow .3s;
  flex-shrink: 0;
}
.sync-dot--online {
  background: #52C46A;
  box-shadow: 0 0 6px #52C46A88;
}
.sync-dot--offline {
  background: #CF6679;
  box-shadow: 0 0 6px #CF667988;
}
.sync-dot--syncing {
  background: #C9A84C;
  box-shadow: 0 0 8px #C9A84C88;
  animation: sync-pulse 1s ease-in-out infinite;
}
@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.sync-queue-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #CF6679; color: #fff;
  border-radius: 20px; font-size: .6rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 4px; line-height: 1;
}

/* ── Sync panel overlay ── */
.sync-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 900;
}

#sync-overlay {
  position: fixed; inset: 0; z-index: 901;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
#sync-overlay[hidden] { display: none; }

.sync-panel {
  position: relative; z-index: 902;
  width: min(420px, 95vw);
  height: 100vh;
  background: var(--bg-main);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: sync-slide-in .2s ease-out;
}
@keyframes sync-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.sync-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sync-panel-title {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--text-primary); margin: 0;
}
.sync-panel-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 1.1rem;
  cursor: pointer; padding: .25rem; border-radius: 4px;
  transition: color .15s;
}
.sync-panel-close:hover { color: var(--text-primary); }

.sync-panel-body {
  flex: 1; overflow-y: auto; padding: 1rem 1.25rem 2rem;
}

/* ── Status row ── */
.sync-status-row {
  display: flex; align-items: center; gap: .85rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1.25rem;
}
.sync-status-icon { font-size: 1.6rem; }
.sync-status-label { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.sync-status-sub { font-size: .73rem; color: var(--text-muted); margin-top: 2px; }
.sync-idb-badge {
  margin-left: auto; font-size: .68rem; font-weight: 600;
  background: #52C46A22; color: #52C46A; border: 1px solid #52C46A44;
  border-radius: 20px; padding: .15rem .5rem;
}

/* ── Section heads ── */
.sync-section-head {
  font-family: var(--font-display); font-size: .72rem;
  color: var(--text-muted); letter-spacing: .07em;
  text-transform: uppercase; margin: 1.25rem 0 .5rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}

/* ── Log rows ── */
.sync-log-list {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.sync-log-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; font-size: .75rem;
  border-bottom: 1px solid var(--border);
}
.sync-log-row:last-child { border-bottom: none; }
.sync-log-key { flex: 1; color: var(--text-secondary); font-family: monospace; font-size: .7rem; }
.sync-log-action {
  font-size: .65rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 4px;
  border: 1px solid;
}
.sync-log-action--set { background: #4A9EE022; color: #4A9EE0; border-color: #4A9EE044; }
.sync-log-action--del { background: #CF667922; color: #CF6679; border-color: #CF667944; }
.sync-log-ts { color: var(--text-muted); font-size: .68rem; white-space: nowrap; }

/* ── Session log ── */
.sync-sess-row {
  padding: .6rem .75rem; border-bottom: 1px solid var(--border); font-size: .78rem;
}
.sync-sess-row:last-child { border-bottom: none; }
.sync-sess-header {
  display: flex; justify-content: space-between; gap: .5rem;
  color: var(--text-primary); font-weight: 600; margin-bottom: .2rem;
}
.sync-sess-keys { color: var(--text-muted); font-size: .68rem; font-family: monospace; }

/* ── Backup buttons ── */
.sync-backup-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.sync-action-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 8px;
  padding: .55rem 1rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.sync-action-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.sync-import-label { cursor: pointer; }

.sync-backup-note {
  font-size: .73rem; color: var(--text-muted); line-height: 1.5;
}

.sync-empty {
  padding: .75rem; color: var(--text-muted);
  font-size: .8rem; font-style: italic; text-align: center;
}

/* ── body.faire-day override: sync dot still visible ── */
body.faire-day .sync-dot { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 30 — MULTI-STUDIO ARCHITECTURE
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav studio indicator ── */
.studio-indicator {
  display: flex; align-items: center; gap: 5px;
  font-size: .65rem; font-weight: 600;
  color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 140px;
}
.studio-indicator[hidden] { display: none; }
.studio-ind-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.studio-ind-name {
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Active studio banner ── */
.stm-active-banner { margin-bottom: 1.25rem; }
.stm-active-inner {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid; border-radius: 12px; padding: 1rem 1.1rem;
  flex-wrap: wrap;
}
.stm-active-icon {
  font-size: 2rem; width: 48px; height: 48px;
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.stm-active-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.stm-active-name {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
}
.stm-active-desc { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.stm-active-badge {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  border: 1px solid; border-radius: 20px; padding: .2rem .65rem;
  white-space: nowrap;
}

/* ── Studio cards grid ── */
.stm-studios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .6rem; margin-bottom: 1.5rem;
}

.stm-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 10px; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .15s;
}
.stm-card--active { box-shadow: 0 0 0 2px currentColor; }
.stm-card:hover { border-color: var(--accent); }

.stm-card-top { display: flex; align-items: flex-start; gap: .75rem; }
.stm-card-icon {
  font-size: 1.5rem; width: 40px; height: 40px;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.stm-card-name { font-weight: 600; color: var(--text-primary); font-size: .88rem; }
.stm-card-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.stm-card-desc { font-size: .72rem; color: var(--text-muted); margin-top: 3px; font-style: italic; }

.stm-card-actions {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .1rem;
}
.stm-card-current {
  font-size: .75rem; font-weight: 600; color: var(--accent);
}
.stm-card-delete {
  margin-left: auto; background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: .25rem .5rem; cursor: pointer;
  color: var(--text-muted); font-size: .8rem;
  transition: border-color .15s, color .15s;
}
.stm-card-delete:hover { border-color: #CF6679; color: #CF6679; }

/* ── Section head ── */
.stm-section-head {
  font-family: var(--font-display); font-size: .72rem;
  color: var(--text-muted); letter-spacing: .07em;
  text-transform: uppercase; margin: 1.25rem 0 .75rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}

/* ── Create form ── */
.stm-create-form {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.stm-form-row {
  display: grid; grid-template-columns: 1fr auto; gap: .75rem;
  align-items: end;
}

/* ── Icon picker ── */
.stm-icon-picker { display: flex; flex-direction: column; gap: .4rem; }
.stm-icon-picker-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.stm-icon-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.stm-icon-btn {
  width: 34px; height: 34px; font-size: 1.1rem;
  background: var(--bg-main); border: 1.5px solid var(--border);
  border-radius: 7px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.stm-icon-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.stm-icon-btn--sel { border-color: var(--accent) !important; background: var(--accent-bg) !important; }

/* ── Info note ── */
.stm-note {
  font-size: .75rem; color: var(--text-muted); line-height: 1.55;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: .75rem 1rem; margin-top: .5rem;
}
.stm-note strong { color: var(--text-secondary); }

/* ── Responsive ── */
@media (max-width: 540px) {
  .stm-studios-grid { grid-template-columns: 1fr; }
  .stm-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   APPLICATION CALENDAR (faire.js — Apply tab)
   ═══════════════════════════════════════════════════════════════ */

.app-intro {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.app-intro em { color: var(--teal-light); font-style: normal; }

/* Month grid */
.app-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.app-month-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.app-month-card--now  { border-color: #C04040; box-shadow: 0 0 0 1px #C04040; }
.app-month-card--next { border-color: var(--brass); }

.app-month-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
}
.app-month-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--parchment);
  flex: 1;
}
.app-month-count {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 7px;
  border-radius: 10px;
}
.app-urgent-badge {
  font-family: var(--font-data);
  font-size: 0.62rem;
  font-weight: 600;
  color: #ff7070;
  background: rgba(192,64,64,0.15);
  border: 1px solid rgba(192,64,64,0.3);
  padding: 2px 7px;
  border-radius: 10px;
}
.app-urgent-badge--next {
  color: var(--brass);
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.3);
}

/* Faire rows inside each card */
.app-faire-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.app-faire-row:last-child { border-bottom: none; }
.app-faire-row:hover { background: rgba(255,255,255,0.04); }

.app-faire-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.app-faire-info { flex: 1; min-width: 0; }
.app-faire-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--parchment);
  margin-bottom: 3px;
  line-height: 1.3;
}
.app-faire-nick {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: 4px;
}
.app-faire-note {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.app-faire-deadline {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--teal-light);
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.app-next-yr {
  font-size: 0.6rem;
  color: var(--brass);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  font-family: var(--font-data);
}
.app-type-chip {
  font-size: 0.72rem;
  margin-right: 2px;
}

/* Rolling section */
.app-rolling-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.app-rolling-group {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.app-rolling-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--brass);
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

/* Timeline bars (extends .cal-bar) */
.app-cal-bar {
  opacity: 0.82;
  font-size: 0.58rem;
}
.app-cal-bar:hover { opacity: 1; filter: brightness(1.15); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — APP SHELL (docs/APP-SHELL.md) + HOME
   Header · grouped navigation · Home cards.
   Typography warmth pass: two families, no decorative medieval faces.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-heading: 'Libre Baskerville', Georgia, serif;
  --font-body:    Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-data:    'Libre Baskerville', Georgia, serif;
  --header-height: 56px;
}

/* ── Header ── */
#guild-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-walnut) 100%);
  border-bottom: 1px solid var(--brass-dim);
  box-shadow: 0 2px 12px var(--shadow-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 60;
}
.hdr-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hdr-brand {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--text-bright); padding: 4px 6px; border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.hdr-brand:hover { background: rgba(201,168,76,0.08); }
.hdr-brand:focus-visible { outline: 1px solid var(--brass); }
.hdr-crest { font-size: 1.3rem; line-height: 1; }
.hdr-wordmark {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.04em;
  color: var(--text-bright);
}
.hdr-divider { width: 1px; height: 22px; background: var(--brass-dim); opacity: 0.5; }
.hdr-guild-name {
  font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw;
}
.hdr-right { display: flex; align-items: center; gap: 6px; }
.hdr-clock-block { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8px; }
.hdr-clock { font-family: var(--font-data); font-size: 0.78rem; color: var(--text-secondary); }
.hdr-date  { font-family: var(--font-body); font-size: 0.62rem; color: var(--text-muted); }
.hdr-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 36px; height: 36px; padding: 0 8px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 0.95rem; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hdr-btn:hover { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.25); }
.hdr-btn:focus-visible { outline: 1px solid var(--brass); }
.hdr-btn--wide { font-family: var(--font-body); font-size: 0.8rem; max-width: 180px; }
.hdr-btn--wide span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-caret { font-size: 0.6rem; color: var(--text-muted); }
.hdr-badge, .sync-queue-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--burgundy-light); color: var(--parchment);
  border-radius: 7px; font-size: 0.58rem; line-height: 14px; text-align: center;
  font-family: var(--font-data);
}

/* ── Header dropdown ── */
.hdr-dropdown {
  position: absolute; top: calc(var(--header-height) - 6px); right: 12px;
  width: 300px; max-height: 60vh; overflow-y: auto;
  background: var(--bg-plaque);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px var(--shadow-deep);
  padding: 8px;
  z-index: 70;
}
.hdd-title {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-brass); padding: 6px 8px 8px;
}
.hdd-sub { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-secondary); padding: 0 8px 8px; }
.hdd-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 8px; border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.8rem;
  transition: background var(--transition-fast);
}
.hdd-row:hover { background: rgba(201,168,76,0.1); }
.hdd-row--active { border: 1px solid var(--brass-dim); }
.hdd-row--muted { color: var(--text-muted); }
.hdd-icon { flex: 0 0 auto; }
.hdd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdd-empty { padding: 14px 8px; color: var(--text-muted); font-family: var(--font-body); font-size: 0.8rem; }

/* ── Shell offsets: header above nav + content ── */
#guild-nav {
  top: var(--header-height);
  padding-top: 8px;
}
#guild-content {
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
}

/* ── Grouped navigation ── */
.nav-group { list-style: none; }
.nav-children {
  list-style: none;
  margin: 0; padding: 0 0 4px 0;
  display: none;
}
.nav-group.expanded .nav-children { display: block; }
.nav-children .nav-item .nav-btn {
  padding-left: 42px;
  font-size: 0.78rem;
  opacity: 0.9;
}
.nav-group.active-group > .nav-item .nav-btn { color: var(--text-bright); }

/* ── Home ── */
.home { max-width: 1180px; margin: 0 auto; }
.home-greeting { margin-bottom: 18px; }
.home-hello {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  color: var(--text-bright); margin: 0 0 2px;
}
.home-date { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); }

.home-intention { margin: 0 0 24px; }
.home-intention-label {
  display: block;
  font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-brass); margin-bottom: 6px;
}
.home-intention-input {
  width: 100%; max-width: 640px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-md);
  color: var(--parchment);
  font-family: var(--font-body); font-size: 0.95rem;
  padding: 10px 14px;
  transition: border-color var(--transition-fast);
}
.home-intention-input:focus { outline: none; border-color: var(--brass); }
.home-intention-input::placeholder { color: var(--text-muted); font-style: italic; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}
.home-card {
  background: var(--bg-panel);
  border: var(--border-oak);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 2px 8px var(--shadow-light);
}
.home-card-title {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-brass);
  margin-bottom: 12px;
}
.home-card-title[data-section] { cursor: pointer; }
.home-card-title[data-section]:hover { color: var(--brass-light); }
.home-rows { list-style: none; margin: 0; padding: 0; }
.home-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-body); font-size: 0.85rem; color: var(--text-primary);
}
.home-row:last-child { border-bottom: none; }
.home-row--link { cursor: pointer; }
.home-row--link:hover .home-row-text { color: var(--text-bright); }
.home-row-icon { flex: 0 0 auto; font-size: 0.85rem; }
.home-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-row-meta { flex: 0 0 auto; font-family: var(--font-data); font-size: 0.68rem; color: var(--text-muted); }
.home-empty {
  padding: 10px 0; color: var(--text-muted);
  font-family: var(--font-body); font-size: 0.82rem; font-style: italic;
}
.home-empty-action {
  background: none; border: none; cursor: pointer;
  color: var(--text-brass); font-family: var(--font-body); font-size: 0.82rem;
  padding: 0 0 0 4px;
}
.home-empty-action:hover { color: var(--brass-light); }

/* First-run interview + cold-start guidance ------------------------------- */
.home-card--start {
  border: 1px solid var(--brass, #c9a84c);
  background: linear-gradient(180deg, rgba(201,168,76,0.08), var(--bg-panel));
  margin-bottom: 4px;
}
.gs-lede {
  font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary);
  margin: 0 0 14px; line-height: 1.5;
}
.gs-q { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.gs-q:first-of-type { border-top: none; }
.gs-ask {
  font-family: var(--font-body); font-size: 0.92rem; color: var(--text-bright, var(--text-primary));
  margin-bottom: 10px;
}
.gs-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-opt {
  cursor: pointer; font-family: var(--font-body); font-size: 0.82rem;
  color: var(--text-primary); background: var(--bg-oak, rgba(255,255,255,0.03));
  border: 1px solid var(--iron-dark, rgba(255,255,255,0.12));
  border-radius: var(--radius-md, 8px); padding: 8px 14px; transition: all 0.15s ease;
}
.gs-opt:hover { border-color: var(--brass, #c9a84c); background: rgba(201,168,76,0.12); color: var(--text-bright, #fff); }
.gs-q--done {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary);
}
.gs-check { color: var(--brass, #c9a84c); font-weight: 700; }

/* Clickable icon picker (new-product form) -------------------------------- */
.icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-opt {
  cursor: pointer; font-size: 1.15rem; line-height: 1;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-oak, rgba(255,255,255,0.03));
  border: 1px solid var(--iron-dark, rgba(255,255,255,0.12));
  border-radius: var(--radius-md, 8px); transition: all 0.12s ease;
}
.icon-opt:hover { border-color: var(--brass, #c9a84c); background: rgba(201,168,76,0.12); transform: translateY(-1px); }
.icon-opt.is-selected {
  border-color: var(--brass, #c9a84c); background: rgba(201,168,76,0.22);
  box-shadow: 0 0 0 1px var(--brass, #c9a84c) inset;
}

/* Pinned "Start here" rows read in full — never truncated to one line. */
.home-row--start { align-items: flex-start; }
.home-row--start .home-row-text {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45;
}
.home-row--start .home-row-icon { color: var(--brass, #c9a84c); }

.home-card--ledger .home-balance {
  font-family: var(--font-data); font-size: 1.8rem; font-weight: 700;
  color: var(--parchment); margin-bottom: 14px;
}
.home-dream { cursor: pointer; }
.home-dream-label { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.home-dream-bar {
  height: 8px; background: rgba(0,0,0,0.35);
  border: 1px solid var(--brass-dim); border-radius: 4px; overflow: hidden;
}
.home-dream-fill { height: 100%; background: var(--brass); transition: width 600ms ease; }
.home-dream-meta { font-family: var(--font-data); font-size: 0.66rem; color: var(--text-muted); margin-top: 6px; }

/* ── Mobile ── */
@media (max-width: 900px) {
  .hdr-guild-name, .hdr-clock-block, .hdr-divider { display: none; }
  .hdr-btn--wide { max-width: 120px; }
  .nav-toggle { top: calc(var(--header-height) + 10px); }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — WORKFLOWS (board · builder · templates)
   ═══════════════════════════════════════════════════════════════ */

.wf-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid rgba(201,168,76,0.2); }
.wf-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text-secondary); padding: 8px 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}
.wf-tab:hover { color: var(--text-bright); }
.wf-tab.active { color: var(--text-brass); border-bottom-color: var(--brass); }

.wfb-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.wfb-label { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.wfb-meta { font-family: var(--font-data); font-size: 0.7rem; color: var(--text-muted); }

.wfb-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.wfb-col {
  flex: 0 0 200px; background: var(--bg-panel);
  border: var(--border-oak); border-radius: var(--radius-md);
}

/* ── The road, walked downward ──────────────────────────────────────────────
   A road with ten stages ran off the side of the screen, so the end of the
   journey — the finished work — was the part you could not see without
   scrolling sideways. Down the page there is no horizon: every stage is
   visible at once, it reads like a road actually walked, and it fits a narrow
   window. Horizontal stays for makers who want the wide kanban.
   (Owner 2026-07-22.) */
.wfb-board--down { flex-direction: column; overflow-x: visible; align-items: stretch; }
.wfb-board--down .wfb-col { flex: 0 0 auto; width: 100%; }
.wfb-board--down .wfb-col-head {
  border-top: none; border-left: 3px solid var(--brass-dim);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
/* Cards sit in a row inside each stage, so a stage holding several pieces
   stays one band of the road rather than a long column. */
.wfb-board--down .wfb-col-body {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wfb-board--down .wfb-card { flex: 1 1 210px; margin-bottom: 0; }
.wfb-board--down .wfb-col-empty { opacity: 0.5; }
/* The join between Pre-Production and Production reads as a rung, not a wall. */
.wfb-board--down .wfb-join { width: 100%; margin: 2px 0; }
.wfb-dir-btn { margin-left: auto; }
.wfb-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-top: 3px solid var(--brass-dim);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.wfb-col-name { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); }
.wfb-col-count { font-family: var(--font-data); font-size: 0.65rem; color: var(--text-muted); }
.wfb-col-body { padding: 8px; min-height: 40px; }
.wfb-col-empty { text-align: center; color: var(--text-muted); font-size: 0.75rem; padding: 8px 0; }
.wfb-card {
  background: #F4E4C0; border: 1px solid #7A5A2E; border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 8px;
}
/* Explicit hex, not theme vars: on some guild palettes --parchment/--text-primary
   remap to dark values, which rendered the card name near-invisible on the board.
   Dark ink on light parchment matches the crisp column headers and is theme-proof. */
.wfb-card-name { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: #2E1B0C; margin-bottom: 6px; }
.wfb-card-actions { display: flex; justify-content: space-between; }
.wfb-move {
  background: none; border: 1px solid var(--brass-dim); border-radius: var(--radius-sm);
  color: var(--text-brass); cursor: pointer; font-size: 0.65rem; padding: 2px 10px;
}
.wfb-move:disabled { opacity: 0.25; cursor: default; }
.wfb-move:not(:disabled):hover { background: rgba(201,168,76,0.12); }

.wfl-list { display: flex; flex-direction: column; gap: 10px; }
.wfl-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-md);
  padding: 12px 16px;
}
.wfl-name { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-bright); }
.wfl-version { font-family: var(--font-data); font-size: 0.62rem; color: var(--text-muted); margin-left: 8px; }
.wfl-process {
  font-family: var(--font-data); font-size: 0.6rem; color: var(--teal-light);
  border: 1px solid var(--teal-light); border-radius: 3px; padding: 1px 6px; margin-left: 8px;
}
.wfl-stages { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.wfl-stage-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wfl-stage-count { font-family: var(--font-data); font-size: 0.62rem; color: var(--text-muted); margin-left: 6px; }
.wfl-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wfl-btn {
  background: none; border: 1px solid var(--brass-dim); border-radius: var(--radius-sm);
  color: var(--text-primary); cursor: pointer;
  font-family: var(--font-body); font-size: 0.72rem; padding: 5px 10px;
  transition: background var(--transition-fast);
}
.wfl-btn:hover { background: rgba(201,168,76,0.1); }
.wfl-btn--muted { color: var(--text-muted); border-color: var(--iron-dark); }
.wfl-import-label { display: inline-flex; align-items: center; cursor: pointer; }
.wfl-archived-head { font-family: var(--font-heading); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 20px 0 8px; }
.wfl-list--archived { opacity: 0.6; }

.wfe { max-width: 720px; }
.wfe-head { display: flex; gap: 10px; margin-bottom: 10px; }
.wfe-name { flex: 2; font-size: 1rem; }
.wfe-process { flex: 1; }
.wfe-desc { width: 100%; min-height: 54px; margin-bottom: 14px; resize: vertical; }
.wfe-stages { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wfe-stage { display: flex; align-items: center; gap: 6px; }
.wfe-stage-name { flex: 1; }
.wfe-stage-color { width: 34px; height: 30px; border: var(--border-oak); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.wfe-optional { font-family: var(--font-body); font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.wfe-reorder, .wfe-stage-del {
  background: none; border: 1px solid var(--iron-dark); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; font-size: 0.6rem; padding: 4px 6px;
}
.wfe-reorder:not(:disabled):hover, .wfe-stage-del:hover { color: var(--text-bright); border-color: var(--brass-dim); }
.wfe-reorder:disabled { opacity: 0.25; cursor: default; }
.wfe-stage-del:hover { color: var(--burgundy-light); }
.wfe-footer { display: flex; gap: 10px; margin-top: 16px; }
.wfe-reassign {
  background: rgba(139,48,48,0.08); border: 1px solid var(--burgundy-light);
  border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px;
}
.wfe-reassign-title { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--parchment); margin-bottom: 4px; }
.wfe-reassign-sub { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 12px; }
.wfe-reassign-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.8rem; color: var(--text-primary); }
.wfe-reassign-row .field-input { max-width: 220px; }
#wfe-reassign-save { margin-top: 12px; margin-right: 8px; }

.wfp { background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; }
.wfp-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.wfp-name { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.wfp-desc { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 14px; }
.wfp .wfl-row { background: var(--bg-plaque); }
.wfp-installed { font-family: var(--font-data); font-size: 0.68rem; color: var(--forest-light); }

.wfa-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-primary); cursor: pointer; }
#wfa-apply { margin-top: 14px; }

/* ── Workflow Interview — plain questions, no Builder vocabulary ── */
.wfi { max-width: 720px; margin: 0 auto; }
.wfi-progress {
  font-family: var(--font-data); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px;
}
.wfi-q { font-family: var(--font-heading); font-size: 1.25rem; color: var(--text-bright); margin: 0 0 6px; }
.wfi-hint { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 18px; }
.wfi-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.wfi-opt {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md); padding: 14px 16px;
  cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast);
  font-family: var(--font-body); color: var(--text-primary);
}
.wfi-opt:hover { border-color: var(--brass); transform: translateX(3px); }
.wfi-opt-icon { grid-row: 1 / 3; font-size: 1.4rem;
  filter: grayscale(1) sepia(0.85) saturate(1.7) brightness(1.05) drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.wfi-opt-label { font-size: 0.95rem; color: var(--text-bright); }
.wfi-opt-sub { grid-column: 2; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.wfi-nav { display: flex; gap: 10px; }
.wfi-review {
  background: var(--bg-panel); border: var(--border-oak);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px;
}
.wfi-review-name { font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-brass); margin-bottom: 10px; }
.wfi-review-stages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wfi-review-stage {
  font-family: var(--font-data); font-size: 0.68rem; color: var(--text-primary);
  border: 1px solid; border-left-width: 4px; border-radius: 4px; padding: 3px 8px;
  background: rgba(0,0,0,0.2); white-space: nowrap;
}
.wfi-review-arrow { color: var(--text-muted); font-size: 0.7rem; }
.wfi-invite {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--bg-panel); border: 1px solid var(--brass-dim);
  border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 18px;
}
.wfi-invite-text { flex: 1; min-width: 240px; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary); }
.wfi-invite-text strong { display: block; color: var(--text-bright); font-size: 0.95rem; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — ONBOARDING + MEMBERS
   ═══════════════════════════════════════════════════════════════ */

#onboarding-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 8, 4, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ob-panel {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px var(--shadow-deep);
  padding: 32px 36px;
}
.ob-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iron-dark); }
.ob-dot.done { background: var(--brass-dim); }
.ob-dot.active { background: var(--brass); }
.ob-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--text-bright); text-align: center; margin: 0 0 10px;
}
.ob-lede { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-secondary); text-align: center; line-height: 1.7; margin-bottom: 24px; }
.ob-sub  { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.ob-label { display: block; font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-brass); margin-bottom: 14px; }
.ob-label .field-input, .ob-label input[type="color"] { display: block; width: 100%; margin-top: 6px; font-size: 0.9rem; }
.ob-label input[type="color"] { height: 38px; padding: 2px; cursor: pointer; }
.ob-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.ob-actions--stack { flex-direction: column; align-items: center; }
.ob-actions--stack .btn-primary { width: 100%; max-width: 300px; }
.ob-later { background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 0.75rem; cursor: pointer; margin-top: 4px; }
.ob-later:hover { color: var(--text-secondary); }
.ob-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ob-type {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-plaque); border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md); padding: 12px 6px; cursor: pointer;
  transition: border-color var(--transition-fast);
}
.ob-type:hover { border-color: var(--brass-dim); }
.ob-type.selected { border-color: var(--brass); background: rgba(201,168,76,0.08); }
.ob-type-icon { font-size: 1.4rem; }
.ob-type-label { font-family: var(--font-body); font-size: 0.7rem; color: var(--text-primary); text-align: center; }
.ob-crests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ob-crest {
  width: 42px; height: 42px; font-size: 1.2rem;
  background: var(--bg-plaque); border: 1px solid var(--iron-dark);
  border-radius: var(--radius-md); cursor: pointer;
}
.ob-crest:hover { border-color: var(--brass-dim); }
.ob-crest.selected { border-color: var(--brass); background: rgba(201,168,76,0.1); }
.ob-colors { display: flex; gap: 10px; }
.ob-colors .ob-label { flex: 1; }
.ob-summary { text-align: center; padding: 10px 0 4px; }
.ob-summary-crest { font-size: 3rem; margin-bottom: 8px; }
.ob-summary-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-bright); }
.ob-summary-sub { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; }
.ob-summary-motto { font-family: var(--font-body); font-style: italic; font-size: 0.85rem; color: var(--parchment-dark); margin-top: 12px; }
.ob-summary-pack { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-muted); margin-top: 14px; }

/* ── Members ── */
.mem-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.mem-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-panel); border: var(--border-oak);
  border-radius: var(--radius-md); padding: 12px 16px;
}
.mem-row--me { border-color: var(--brass-dim); }
.mem-avatar { font-size: 1.4rem; flex: 0 0 auto; }
.mem-main { flex: 1; min-width: 0; }
.mem-name { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-bright); }
.mem-owner, .mem-you {
  font-family: var(--font-data); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--brass-dim); border-radius: 3px; padding: 1px 5px; margin-left: 6px; color: var(--text-brass);
}
.mem-you { border-color: var(--teal-light); color: var(--teal-light); }
.mem-sub { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.mem-role {
  font-family: var(--font-body); font-size: 0.72rem; color: var(--text-primary);
  border: 1px solid; border-radius: var(--radius-sm); padding: 3px 10px; white-space: nowrap;
}
.mem-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mem-role-sel { max-width: 150px; font-size: 0.72rem; padding: 4px 6px; }
.mem-add { background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 24px; }
.mem-add-fields { display: grid; grid-template-columns: 1fr 1fr 160px auto; gap: 10px; align-items: center; }
.mem-note { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); font-style: italic; margin-top: 10px; }
.mem-roles { background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-lg); padding: 18px 20px; }
.mem-role-line { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mem-role-line:last-child { border-bottom: none; }
.mem-role-desc { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-secondary); }
@media (max-width: 800px) { .mem-add-fields { grid-template-columns: 1fr; } }

/* ── The two inventories (Home strip) ── */
.home-inv-strip { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.home-inv-stat {
  flex: 1; min-width: 220px; text-align: left; cursor: pointer;
  background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-lg);
  padding: 14px 18px; transition: border-color var(--transition-fast);
}
.home-inv-stat:hover { border-color: var(--brass-dim); }
.home-inv-number { font-family: var(--font-data); font-size: 1.6rem; font-weight: 700; color: var(--parchment); display: block; }
.home-inv-label { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-brass); display: block; margin-top: 2px; }
.home-inv-sub { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 4px; }

/* ── Next Best Actions dismiss ── */
.home-nba-dismiss {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.7rem; padding: 2px 4px;
  border-radius: var(--radius-sm); opacity: 0.5;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.home-row:hover .home-nba-dismiss { opacity: 1; }
.home-nba-dismiss:hover { color: var(--burgundy-light); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 7 — COMMUNICATIONS (Town Crier)
   Quiet consistency. Subtle cues, never noise.
   ═══════════════════════════════════════════════════════════════ */

.comm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.comm-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-panel); border: var(--border-oak);
  border-radius: var(--radius-md); padding: 12px 16px;
}
.comm-row[data-camp-open] { cursor: pointer; transition: border-color var(--transition-fast); }
.comm-row[data-camp-open]:hover { border-color: var(--brass-dim); }
.comm-row-icon { font-size: 1.2rem; flex: 0 0 auto; }
.comm-row-main { flex: 1; min-width: 0; }
.comm-row-name { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-bright); }
.comm-row-sub { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.comm-status {
  font-family: var(--font-body); font-size: 0.68rem; color: var(--text-primary);
  border: 1px solid; border-radius: var(--radius-sm); padding: 3px 10px; white-space: nowrap;
}
.comm-awaiting-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); margin-left: 4px; vertical-align: middle;
}
.comm-section-title {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-brass);
  margin: 22px 0 10px;
}
.comm-quiet {
  font-family: var(--font-body); font-size: 0.78rem; font-style: italic;
  color: var(--text-secondary); padding: 8px 0;
}
.comm-launch-mark {
  font-family: var(--font-data); font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--forest-light);
  border: 1px solid var(--forest-light); border-radius: 3px; padding: 1px 6px; margin-left: 8px;
}
.comm-ready-mark { font-family: var(--font-data); font-size: 0.62rem; color: var(--forest-light); }
.comm-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }

.comm-editor { max-width: 860px; }
.comm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.comm-panel {
  background: var(--bg-panel); border: var(--border-oak);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 4px;
}
.comm-checklist { max-height: 180px; overflow-y: auto; }
.comm-note { font-family: var(--font-body); font-size: 0.68rem; font-style: italic; color: var(--text-muted); margin-top: 8px; }
.comm-body { width: 100%; min-height: 80px; resize: vertical; margin: 8px 0; }
#comm-headline, #comm-cta { width: 100%; }
#comm-headline { margin-bottom: 0; }

.comm-lifecycle {
  background: var(--bg-panel); border: 1px solid var(--brass-dim);
  border-radius: var(--radius-md); padding: 14px 16px; margin: 14px 0;
}
.comm-lifecycle-note { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 10px; }
.comm-lifecycle-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.comm-btn-forward { border-color: var(--brass); color: var(--text-brass); }
.comm-history { margin-top: 16px; }

.comm-row--season .comm-phase-label {
  font-family: var(--font-body); font-size: 0.7rem; font-style: italic;
  color: var(--text-muted); white-space: nowrap;
}
.comm-phase-produce .comm-phase-label { color: var(--amber); }
.comm-phase-market .comm-phase-label { color: var(--teal-light); }
.comm-phase-imminent .comm-phase-label { color: var(--burgundy-light); }

/* ── Trade Relationships (Connections) — Connected Guild v1 ── */
.conn-svc-imports { font-size: 0.78rem; color: var(--text-muted, #8a8073); margin: 0.25rem 0 0; font-style: italic; }
.conn-svc-sync { font-size: 0.82rem; color: var(--text-muted, #8a8073); margin: 0.4rem 0 0; }
.conn-interest-note { margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--brass, #b08d57); background: rgba(176,141,87,0.07); border-radius: 4px; font-size: 0.85rem; color: var(--text-muted, #6b6257); }
.conn-badge--interest { background: rgba(176,141,87,0.15); color: var(--brass, #8a6d3b); border: 1px solid rgba(176,141,87,0.4); border-radius: 3px; padding: 0 0.35rem; font-size: 0.68rem; }

/* ── Trade Relationships — Ledger (faire-directory style) ── */
.conn-header-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: 0.7rem;
  padding: 4px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(122,184,110,0.12); color: #7AB86E;
  border: 1px solid rgba(122,184,110,0.3);
}
.conn-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7AB86E; }

.conn-empty-state {
  text-align: center; padding: 28px 16px; margin-bottom: 4px;
  border: 1px dashed var(--iron-dark); border-radius: var(--radius-md);
}
.conn-empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.conn-empty-state h2 { font-family: var(--font-heading); font-size: 1rem; color: var(--parchment); margin: 0 0 6px; }
.conn-empty-state p { font-size: 0.82rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; }

.conn-card .faire-banner { min-width: 0; }
.conn-card-glyph { font-size: 1rem; }
.conn-card--soon .faire-banner { opacity: 0.65; }

.conn-pill-soon { background: rgba(140,140,140,0.1); color: var(--text-muted); border: 1px solid rgba(140,140,140,0.25); }
.conn-pill-open { background: rgba(122,184,110,0.1); color: #7AB86E; border: 1px solid rgba(122,184,110,0.25); }
.conn-pill-interest { background: rgba(176,141,87,0.15); color: var(--brass); border: 1px solid rgba(176,141,87,0.4); }

.conn-quick-wrap { gap: 6px; }
.conn-quick-soon {
  font-family: var(--font-data); font-size: 0.62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}

.conn-svc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-svc-log { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.conn-log-line { font-size: 0.75rem; color: var(--text-secondary); }
.conn-log-time { color: var(--text-muted); font-size: 0.68rem; margin-left: 6px; font-family: var(--font-data); }
.ob-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ob-partner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border, #3a342b); border-radius: 6px; cursor: pointer; transition: border-color 0.15s; }
.ob-partner:hover { border-color: var(--brass-dim, #8a6d3b); }
.ob-partner.selected { border-color: var(--brass, #c9a84c); background: rgba(201,168,76,0.1); }
.ob-partner input { accent-color: var(--brass, #c9a84c); }
.ob-partner-icon { font-size: 1.1rem; }
.ob-partner-name { font-size: 0.85rem; }

/* ── Tool Rack ── */
.tr-add { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tr-add .field-input { max-width: 260px; }
.tr-add input.field-input { flex: 1; min-width: 220px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tr-tool { border: 1px solid var(--border, #3a342b); border-radius: 8px; padding: 12px 14px; background: var(--surface-raised, rgba(255,255,255,0.02)); }
.tr-tool--retired { opacity: 0.55; }
.tr-tool-head { display: flex; align-items: center; gap: 8px; }
.tr-tool-icon { font-size: 1.3rem; }
.tr-tool-name { font-weight: 600; }
.tr-tool-kind { font-size: 0.75rem; color: var(--text-muted, #8a8073); margin: 2px 0 6px; }
.tr-tool-caps { margin-bottom: 6px; }
.tr-cap { display: inline-block; font-size: 0.7rem; border: 1px solid var(--brass-dim, #8a6d3b); border-radius: 10px; padding: 0 8px; margin: 1px 2px 1px 0; color: var(--brass, #c9a84c); }
.tr-tool-notes { font-size: 0.8rem; color: var(--text-muted, #8a8073); font-style: italic; margin-bottom: 6px; }
.tr-caps { margin-top: 14px; font-size: 0.85rem; color: var(--text-muted, #8a8073); }
.tr-retired { margin-top: 18px; }
.tr-retired summary { cursor: pointer; color: var(--text-muted, #8a8073); font-size: 0.85rem; margin-bottom: 8px; }
.comm-life-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--border, #3a342b); border-radius: 8px; font-size: 0.85rem; color: var(--text-muted, #8a8073); }
.comm-life-stat strong { color: var(--brass, #c9a84c); font-size: 1rem; }
.comm-life-sep { opacity: 0.5; }
.wfp-suggested { font-size: 0.72rem; color: var(--brass, #c9a84c); border: 1px solid var(--brass-dim, #8a6d3b); border-radius: 10px; padding: 1px 8px; margin-left: 8px; }

/* ── Journeys ── */
.jr-available { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.jr-invite { border: 1px solid var(--border, #3a342b); border-radius: 8px; padding: 14px 16px; }
.jr-invite-head, .jr-active-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jr-icon { font-size: 1.3rem; }
.jr-name { font-weight: 600; font-size: 1.05rem; }
.jr-desc { font-size: 0.85rem; color: var(--text-muted, #8a8073); margin: 0 0 4px; }
.jr-count { font-size: 0.75rem; color: var(--text-muted, #8a8073); font-style: italic; margin: 0 0 10px; }
.jr-active { border: 1px solid var(--brass-dim, #8a6d3b); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.jr-setdown { margin-left: auto; background: none; border: none; color: var(--text-muted, #8a8073); cursor: pointer; font-size: 0.8rem; }
.jr-setdown:hover { color: var(--brass, #c9a84c); }
.jr-walked { margin: 8px 0; }
.jr-step--done { font-size: 0.85rem; color: var(--text-muted, #8a8073); padding: 2px 0; }
.jr-current { border-left: 3px solid var(--brass, #c9a84c); padding: 8px 14px; margin: 10px 0; }
.jr-current-title { font-weight: 600; margin-bottom: 6px; }
.jr-current-guidance { font-size: 0.9rem; line-height: 1.5; color: var(--text, #d8d2c6); margin: 0 0 10px; }
.jr-more { font-size: 0.8rem; font-style: italic; color: var(--text-muted, #8a8073); }
.jr-aside { margin: 14px 0; }
.jr-aside summary { cursor: pointer; color: var(--text-muted, #8a8073); font-size: 0.85rem; }
.jr-aside-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.9rem; }
.jr-done { padding: 8px 0; font-size: 0.9rem; color: var(--text-muted, #8a8073); }

/* ── Growth Engine panel ── */
.gw-panel { border: 1px solid var(--border, #3a342b); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.gw-ask-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gw-lede { font-style: italic; color: var(--text-muted, #8a8073); }
.gw-field { display: flex; align-items: center; gap: 4px; color: var(--text-muted, #8a8073); }
.gw-field .field-input { width: 70px; }
#gw-goal { max-width: 240px; }
.gw-rec { border-left: 3px solid var(--brass, #c9a84c); padding: 8px 14px; margin-top: 12px; }
.gw-rec-text { font-weight: 600; margin-bottom: 4px; }
.gw-rec-reason { font-size: 0.85rem; color: var(--text-muted, #8a8073); margin-bottom: 8px; }
.gw-rec-actions { display: flex; gap: 10px; align-items: center; }
.gw-rest { background: none; border: none; color: var(--text-muted, #8a8073); cursor: pointer; font-size: 0.8rem; }
.gw-rest:hover { color: var(--brass, #c9a84c); }
.gw-quiet { margin-top: 12px; font-style: italic; color: var(--text-muted, #8a8073); }

/* ── The Trade Map (Classic) ── */
.conn-view-toggle { display: flex; gap: 6px; margin: 14px 0; }
.conn-view-btn { background: none; border: 1px solid var(--border, #3a342b); border-radius: 6px; padding: 6px 14px; color: var(--text-muted, #8a8073); cursor: pointer; font-family: inherit; }
.conn-view-btn--active { border-color: var(--brass, #c9a84c); color: var(--brass, #c9a84c); }
.conn-map-wrap { border: 1px solid var(--border, #3a342b); border-radius: 12px; overflow: hidden; }
.tmap { display: block; width: 100%; height: auto; }
.tmap-parchment { fill: rgba(201,168,76,0.03); }
.tmap-route { fill: none; stroke: var(--brass, #c9a84c); opacity: 0.55; stroke-linecap: round; }
.tmap-route--quiet { opacity: 0.22; stroke-dasharray: 6 5; }
.tmap-hall-ring { fill: rgba(201,168,76,0.10); stroke: var(--brass, #c9a84c); stroke-width: 2; }
.tmap-hall-crest { font-size: 30px; }
.tmap-hall-name { font-size: 13px; fill: var(--text, #d8d2c6); font-weight: 600; }
.tmap-seal { cursor: pointer; }
.tmap-seal-ring { fill: rgba(20,18,14,0.85); stroke-width: 2; }
.tmap-seal-icon { font-size: 20px; }
.tmap-seal-name { font-size: 11px; fill: var(--text, #d8d2c6); }
.tmap-pencil { cursor: pointer; opacity: 0.5; }
.tmap-pencil-ring { fill: none; stroke: var(--text-muted, #8a8073); stroke-width: 1; stroke-dasharray: 3 3; }
.tmap-pencil-icon { font-size: 13px; }
.tmap-pencil-name { font-size: 10px; fill: var(--text-muted, #8a8073); }
.tmap-road { fill: none; stroke: var(--text-muted, #8a8073); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; opacity: 0.7; }
.tmap-road-label { font-size: 10px; fill: var(--text-muted, #8a8073); font-style: italic; }
.tmap-pin-mark { fill: rgba(138,128,115,0.5); stroke: var(--text-muted, #8a8073); }
.tmap-pin-mark--sold { fill: rgba(201,168,76,0.55); stroke: var(--brass, #c9a84c); }
.tmap-pin-name { font-size: 10px; fill: var(--text, #d8d2c6); }
.tmap-empty-note { font-size: 13px; fill: var(--text-muted, #8a8073); font-style: italic; }
.conn-map-legend { padding: 10px 16px; margin: 0; font-size: 0.8rem; color: var(--text-muted, #8a8073); border-top: 1px solid var(--border, #3a342b); }

/* ── The Trade Map (Classic) ── */

/* ── Laws & Licenses ── */
.reg-disclaimer { border: 1px solid var(--brass-dim, #8a6d3b); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.88rem; color: var(--text, #d8d2c6); background: rgba(176,141,87,0.06); }
.reg-verified { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted, #8a8073); }
.reg-state-row { margin-bottom: 14px; }
.reg-state-label { color: var(--text-muted, #8a8073); }
.reg-state-entry { border-left: 3px solid var(--brass, #c9a84c); padding: 8px 14px; margin-bottom: 16px; }
.reg-state-entry--absent { border-left-color: var(--border, #3a342b); }
.reg-state-name { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.1rem; margin-bottom: 6px; }
.reg-badge { font-size: 0.7rem; border: 1px solid var(--brass-dim, #8a6d3b); color: var(--brass, #c9a84c); border-radius: 10px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; }
.reg-card { border: 1px solid var(--border, #3a342b); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.reg-card-title { cursor: pointer; font-weight: 600; }
.reg-plain { font-size: 0.92rem; line-height: 1.55; margin: 8px 0 4px; }
.reg-deeper { margin: 6px 0 2px; }
.reg-deeper summary { cursor: pointer; font-size: 0.8rem; color: var(--brass, #c9a84c); font-style: italic; }
.reg-deeper p { font-size: 0.88rem; line-height: 1.55; color: var(--text-muted, #a89e8f); margin: 8px 0 4px; }
.reg-sources { font-size: 0.75rem; }
.reg-sources a { color: var(--brass-dim, #8a6d3b); }
.reg-footer { margin-top: 16px; font-size: 0.85rem; font-style: italic; color: var(--text-muted, #8a8073); }
.mp-listings { margin-top: 8px; }
.mp-listing { border-left: 2px solid var(--brass-dim, #8a6d3b); padding: 6px 12px; margin: 6px 0; }
.mp-listing summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.mp-state { font-size: 0.7rem; color: var(--text-muted, #8a8073); border: 1px solid var(--border, #3a342b); border-radius: 8px; padding: 0 6px; }
.mp-field { font-size: 0.87rem; line-height: 1.5; margin: 6px 0; }
.mp-none { font-size: 0.82rem; font-style: italic; color: var(--text-muted, #8a8073); margin: 8px 0 2px; }
.ob-type { position: relative; }
.ob-type-primary { position: absolute; top: -7px; right: -7px; font-size: 0.6rem; background: var(--brass, #c9a84c); color: #1e1a14; border-radius: 8px; padding: 1px 7px; font-weight: 700; }
.ob-crafts-note { color: var(--brass, #c9a84c); }

/* ── The Guild's own colors on the banners (friction fix #2) ──
   --guild-primary/accent/surface are set by GuildConfig.applyColors();
   every use falls back to the house brass, so an unthemed Guild loses nothing. */
#guild-header { border-top: 3px solid var(--guild-accent, var(--brass)); }
.nav-item.active .nav-btn::after { background: var(--guild-accent, var(--brass)); }
.btn-primary {
  background: var(--guild-primary, var(--bg-plaque));
  border-color: var(--guild-accent, var(--brass));
  color: var(--guild-primary-ink, var(--parchment));
}
.hdr-brand:focus-visible { outline-color: var(--guild-accent, var(--brass)); }
.home-inv-stat { border-top: 2px solid var(--guild-accent, var(--brass-dim)); }
.jr-active { border-color: var(--guild-accent, var(--brass-dim)); }
.tmap-guild-seal, .tm-guild-seal { stroke: var(--guild-accent, var(--brass)); }

/* ── The raised mark (uploaded crest) ── */
.guild-crest-img { border-radius: 50%; object-fit: cover; vertical-align: middle; }
.guild-crest-img--hdr { width: 28px; height: 28px; }
.guild-crest-img--preview { width: 96px; height: 96px; border: 2px solid var(--guild-accent, var(--brass)); }
.guild-crest-img--summary { width: 64px; height: 64px; }
.ob-crest-preview { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ob-upload-label { display: block; margin-top: 10px; }
.ob-upload { display: block; margin-top: 4px; color: var(--text-muted, #8a8073); }

.s-crest-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-crest-current { font-size: 1.6rem; line-height: 1; }
.guild-crest-img--settings { width: 40px; height: 40px; }
.s-upload-btn { cursor: pointer; }
.s-color { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-muted, #8a8073); }

.settings-row--stack { flex-direction: column; align-items: flex-start; gap: 8px; }
.ob-types--settings { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); width: 100%; }
.ob-types--settings .ob-type { padding: 6px 4px; font-size: 0.75rem; }

/* Live sample while picking colors — see readability before committing */
.color-sample { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; }
.color-sample .btn-primary { pointer-events: none; }
.color-sample-band { width: 60px; height: 10px; border-radius: 3px; background: var(--guild-accent, var(--brass)); }

.mp-near { border: 1px solid var(--guild-accent, var(--brass-dim)); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.mp-near-title { font-family: 'Libre Baskerville', Georgia, serif; margin-bottom: 6px; }
.mp-open { font-size: 0.7rem; color: #7FB069; border: 1px solid #7FB069; border-radius: 8px; padding: 0 7px; margin-left: 6px; }
.mp-closed { font-size: 0.7rem; color: var(--text-muted, #8a8073); border: 1px solid var(--border, #3a342b); border-radius: 8px; padding: 0 7px; margin-left: 6px; }
.jr-current-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.jr-faires { margin: 8px 0 10px; }
.jr-faire { font-size: 0.85rem; padding: 4px 0; color: var(--text-muted, #a89e8f); }
.jr-faire-name { color: var(--text, #d8d2c6); font-weight: 600; }
.jr-faire a { color: var(--guild-accent, var(--brass)); }

.mp-cal-doors { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.comm-near-deadlines { margin-top: 8px; font-size: 0.82rem; color: var(--text-muted, #8a8073); }
.comm-quiet .wfl-btn { margin: 6px 8px 2px 0; }

/* ═══════════════════════════════════════════════════════════════
   ENRICHMENT LAYER — deeper wood, aged parchment, brass fittings
   (Additive pass, 2026-07-07. Owner: "more visually rich."
    Remove this block to return to the flat surfaces.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fine paper/canvas grain — near-invisible, felt more than seen */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Broad warm mottling — the unevenness of real hide and old boards */
  --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.016' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.79  0 0 0 0 0.66  0 0 0 0 0.3  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.07'/%3E%3C/svg%3E");
  /* Long-fiber wood grain for the dark shell */
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.085' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ── The hall itself: planked, vignetted, lit from above ── */
body.guild-body {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, var(--glow-candle), transparent 60%),
    var(--tex-wood),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 110px),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(165deg, var(--bg-walnut), var(--bg-primary) 55%, var(--bg-void));
  background-attachment: fixed;
}

/* ── Nav: real grain over the planks, brass rail on the edge ── */
#guild-nav {
  background-image:
    var(--tex-wood),
    repeating-linear-gradient(92deg, transparent 0, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px),
    repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(255,255,255,0.015) 18px, rgba(255,255,255,0.015) 20px),
    linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-walnut) 30%, var(--bg-primary) 100%);
  border-right: 2px solid var(--brass-dim);
  box-shadow:
    4px 0 20px var(--shadow-deep),
    inset -1px 0 0 rgba(201,168,76,0.22),
    inset -4px 0 0 rgba(201,168,76,0.06);
}

/* ── Every major surface gets tooth: grain + warm mottle ── */
.settings-group,
.home-card,
.product-card,
.faire-card,
.modal-content,
.wfb-col,
.stat-card {
  background-image: var(--tex-grain), var(--tex-mottle);
  box-shadow: 0 2px 10px var(--shadow-medium), inset 0 1px 0 rgba(244,228,192,0.05);
}

/* ── Section headers: an engraved rule with a fleuron at rest ── */
.section-header { position: relative; border-bottom: none; }
.section-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass-dim), rgba(201,168,76,0.05) 70%, transparent);
}
.section-title::after {
  content: ' ❧';
  color: var(--brass-dim);
  font-size: 0.7em;
  vertical-align: middle;
}

/* ── Buttons: from tinted glass to worked brass ── */
.btn-primary {
  background: linear-gradient(180deg, rgba(232,193,74,0.32) 0%, rgba(201,168,76,0.14) 45%, rgba(139,115,64,0.22) 100%);
  border: 1px solid var(--brass-dim);
  box-shadow: inset 0 1px 0 rgba(244,228,192,0.18), 0 1px 3px var(--shadow-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgba(232,193,74,0.45) 0%, rgba(201,168,76,0.22) 45%, rgba(139,115,64,0.3) 100%);
  box-shadow: inset 0 1px 0 rgba(244,228,192,0.25), 0 0 14px var(--glow-brass);
}

/* ── Toast: a scrap of parchment, not a chip of plastic ── */
.toast {
  background-image: var(--tex-grain), var(--tex-mottle);
  border: 1px solid var(--brass-dim);
  box-shadow: 0 6px 18px var(--shadow-deep), inset 0 0 18px rgba(139,115,64,0.12);
}

/* ── Brass scrollbars throughout ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brass-dim), rgba(139,115,64,0.6)) !important;
}

/* Faire Day mode keeps its stripped-down speed — no textures there */
body.faire-day.guild-body { background-image: linear-gradient(165deg, var(--bg-walnut), var(--bg-primary)); }

/* ── Arrival (Builder's Bible v3.x) — small additions atop existing .ob- styles ── */
#onboarding-overlay .ob-arrival-note { opacity: .72; font-size: .85em; margin-top: .6rem; }
#onboarding-overlay .ob-name-preview { margin-top: .45rem; min-height: 1.2em; }
#onboarding-overlay .ob-clear-custom { background: none; border: 0; color: var(--guild-accent, #B8860B); cursor: pointer; text-decoration: underline; font: inherit; padding: 0 .25rem; }

/* ── THE RUN: penciled plans, inked bookings ── */
.run-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 12px; }
.run-table th { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-brass); text-align: left; padding: 8px 10px;
  border-bottom: var(--border-brass); }
.run-table td { padding: 10px; border-bottom: var(--border-oak); vertical-align: top; }
.run-row.run-penciled td { border-left: none; }
.run-row.run-penciled > td:first-child { border-left: 3px dashed var(--brass-dim); font-style: italic; }
.run-row.run-inked > td:first-child { border-left: 3px solid var(--brass); }
.run-row.run-declined { opacity: 0.45; }
.run-row.run-declined > td:first-child { border-left: 3px solid var(--iron-dark); text-decoration: line-through; }
.run-open { color: var(--amber-light); font-style: normal; }
.run-net-pos { color: var(--forest-light); font-weight: bold; }
.run-net-neg { color: var(--burgundy-light); font-weight: bold; }
.run-totals { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem;
  color: var(--text-primary); padding: 10px 12px; border: var(--border-brass);
  border-radius: var(--radius-md); background-image: var(--tex-grain), var(--tex-mottle); margin-bottom: 10px; }
.run-clash { color: var(--amber-light); font-size: 0.85rem; margin-bottom: 12px; }
.run-suggest summary { cursor: pointer; color: var(--text-brass); font-family: var(--font-heading);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 10px 0; }
.run-deck { border: var(--border-oak); border-radius: var(--radius-md); padding: 12px 14px;
  margin: 10px 0; background-image: var(--tex-grain), var(--tex-mottle); }
.run-deck-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.run-deck-show { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px dashed rgba(139,115,64,0.3); }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v2 — real surfaces: lit wood, toothed parchment,
   woven linen, brushed brass, ink, and pencil.
   (Owner direction 2026-07-09: "truly handcrafted, not another
    spreadsheet." Relief comes from SVG diffuse lighting — noise lit
    from an angle — so grain and tooth catch light like real material.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Wood with raking light: long fibers, real relief */
  --mat-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='2.4' diffuseConstant='1.05' lighting-color='%23a97f3c'%3E%3CfeDistantLight azimuth='235' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.20'/%3E%3C/svg%3E");
  /* Handmade paper tooth: fine noise, lit softly from above */
  --mat-parchment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='0.9' diffuseConstant='1.1' lighting-color='%23e8d9b4'%3E%3CfeDistantLight azimuth='60' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.10'/%3E%3C/svg%3E");
  /* Brushed brass: horizontal streaks under light */
  --mat-brass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='80'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='1.4' diffuseConstant='1.15' lighting-color='%23e3c169'%3E%3CfeDistantLight azimuth='90' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='0.24'/%3E%3C/svg%3E");
  /* Woven linen: warp and weft */
  --mat-linen:
    repeating-linear-gradient(0deg,  rgba(244,228,192,0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(244,228,192,0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  transparent 0 6px, rgba(0,0,0,0.05) 6px 7px),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 7px);
  --ink-shadow: 0 0 1px rgba(14,8,4,0.9), 0 1px 2px rgba(0,0,0,0.55);
  --graphite: #b3ab99;
}

/* The hall: lit planks instead of tinted stripes */
body.guild-body {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, var(--glow-candle), transparent 60%),
    var(--mat-wood),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.20) 0 2px, transparent 2px 110px),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(165deg, var(--bg-walnut), var(--bg-primary) 55%, var(--bg-void));
}
#guild-nav {
  background-image:
    var(--mat-wood),
    repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(255,255,255,0.015) 18px, rgba(255,255,255,0.015) 20px),
    linear-gradient(180deg, var(--bg-oak) 0%, var(--bg-walnut) 30%, var(--bg-primary) 100%);
}

/* Documents: every card gets paper tooth over its color */
.settings-group, .home-card, .product-card, .faire-card,
.modal-content, .wfb-col, .stat-card, .run-deck, .run-totals {
  background-image: var(--mat-parchment), var(--tex-mottle);
  background-blend-mode: overlay, normal;
}

/* Cloth: what you type into is linen, not plastic */
.field-input, .settings-select, textarea.field-input, .search {
  background-image: var(--mat-linen);
  background-color: rgba(14,8,4,0.35);
}

/* Metal: worked brass with brushing and a struck edge */
.btn-primary {
  background-image: var(--mat-brass),
    linear-gradient(180deg, rgba(232,193,74,0.34) 0%, rgba(201,168,76,0.15) 45%, rgba(139,115,64,0.24) 100%);
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(122,90,28,0.85);
  box-shadow: inset 0 1px 0 rgba(244,228,192,0.28), inset 0 -1px 0 rgba(0,0,0,0.35), 0 1px 3px var(--shadow-medium);
}
.brass-plate, .tab-btn.active {
  background-image: var(--mat-brass);
  background-blend-mode: overlay;
}

/* Ink: headings sit in the page like letterpress */
.section-title, .settings-group-header, .home-card-title {
  text-shadow: var(--ink-shadow);
}

/* Pencil: tentative things look drawn, not typed */
.run-row.run-penciled > td:first-child strong,
.run-row.run-penciled td {
  color: var(--graphite);
}
.run-row.run-penciled > td:first-child {
  border-left: 3px dashed rgba(179,171,153,0.55);
}
.run-row.run-inked td { color: var(--text-primary); }

/* Faire Day keeps its speed: no material layers in the fast lane */
body.faire-day .settings-group, body.faire-day .home-card { background-image: none; }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v3 — BOLD. (Owner, seeing v2 on screen: "not seeing
   those visual upgrades." Diagnosis: texture cannot live on
   near-black. Surfaces lift into the mid-tones where light can
   play; grain triples; brass becomes metal. The Faire Ledger's
   plates are the reference.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --mat-wood-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='3.4' diffuseConstant='1.15' lighting-color='%23b98a44'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.5'/%3E%3C/svg%3E");
  --mat-parchment-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='1.6' diffuseConstant='1.15' lighting-color='%23dcc491'%3E%3CfeDistantLight azimuth='60' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.30'/%3E%3C/svg%3E");
  --brass-plate-grad: linear-gradient(180deg, #e8cd7e 0%, #c9a84c 45%, #8a6a28 100%);
}

/* The hall: planks you can see, seams and all */
body.guild-body {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, var(--glow-candle), transparent 60%),
    var(--mat-wood-bold),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 3px, rgba(255,255,255,0.03) 3px 4px, transparent 4px 120px),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(165deg, #2E1A0C, var(--bg-primary) 55%, var(--bg-void));
}
#guild-nav {
  background-image:
    var(--mat-wood-bold),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.30) 0 2px, rgba(255,255,255,0.035) 2px 3px, transparent 3px 46px),
    linear-gradient(180deg, #3A2210 0%, var(--bg-walnut) 30%, var(--bg-primary) 100%);
  border-right: 3px solid var(--brass-dim);
}

/* Documents lift out of the dark: readable brown, visible tooth */
.settings-group, .home-card, .product-card, .faire-card,
.modal-content, .wfb-col, .stat-card, .run-deck, .run-totals {
  background-color: #3B2412;
  background-image: var(--mat-parchment-bold), var(--tex-mottle);
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(201,168,76,0.35);
  box-shadow: 0 3px 12px var(--shadow-medium), inset 0 1px 0 rgba(244,228,192,0.08), inset 0 0 34px rgba(0,0,0,0.35);
}

/* Brass you would polish: active tabs and primary buttons are METAL */
.tab-btn.active, .btn-primary {
  background-image: var(--mat-brass), var(--brass-plate-grad);
  background-blend-mode: overlay, normal;
  color: #241a08 !important;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,236,180,0.5);
  border: 1px solid #6a4f1c;
  box-shadow: inset 0 1px 0 rgba(255,240,190,0.55), inset 0 -2px 3px rgba(0,0,0,0.30), 0 2px 5px var(--shadow-medium);
}
.btn-primary:hover, .tab-btn.active:hover { filter: brightness(1.08); }

/* Table headers: a carved rail, not a spreadsheet row */
.run-table thead tr, .run-table th {
  background-image: var(--mat-wood-bold), linear-gradient(180deg, #45280F, #2E1A0C);
  background-blend-mode: overlay, normal;
  color: var(--brass-light);
  border-bottom: 2px solid var(--brass-dim);
}
.run-table td { background: rgba(59,36,18,0.5); }

/* Ink & pencil, unmistakable */
.section-title { text-shadow: 0 0 1px rgba(14,8,4,0.95), 0 2px 3px rgba(0,0,0,0.6); }
.run-row.run-penciled td, .run-row.run-penciled strong { color: #c9c2b2; font-style: italic; }
.run-row.run-penciled > td:first-child { border-left: 3px dashed #a49b87; }
.run-row.run-inked td { font-style: normal; }

/* Faire Day still travels light */
body.faire-day .settings-group, body.faire-day .home-card,
body.faire-day .tab-btn.active, body.faire-day .btn-primary { background-image: none; }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v4 — INK ON PARCHMENT
   (Owner: "easily legible with some olde world styling." Both at
    once: the Hall's walls stay dark wood, but every DOCUMENT —
    card, table, panel — becomes light parchment written in ink.
    Dark ink on pale paper is the most legible pairing in
    typography and the oldest. Legibility first; age as seasoning.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F0E4C6;
  --paper-deep: #E4D3A9;
  --ink:        #2A2012;
  --ink-soft:   #5C4A30;
  --ink-faint:  #7A6748;
  --rule:       rgba(92,74,48,0.45);
  --pencil:     #6E675C;
}

/* ── Documents: paper on the desk ── */
.settings-group, .home-card, .product-card, .faire-card,
.modal-content, .wfb-col, .stat-card, .run-deck, .run-totals, .toast {
  background-color: var(--paper);
  background-image:
    var(--mat-parchment-bold),
    radial-gradient(ellipse at 50% 40%, var(--paper) 55%, var(--paper-deep) 100%);
  background-blend-mode: multiply, normal;
  color: var(--ink);
  border: 1px solid #B49A66;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 0 26px rgba(122,90,28,0.14);
}

/* Ink for everything written on paper — accents included */
.settings-group *, .home-card *, .product-card *, .faire-card *,
.modal-content *, .wfb-col *, .stat-card *, .run-deck *, .run-totals *, .toast * {
  color: var(--ink);
}
.settings-group .settings-sublabel, .home-card .settings-sublabel,
.faire-card .settings-sublabel, .run-deck .settings-sublabel,
.modal-content .settings-sublabel,
.settings-group small, .home-card small {
  color: var(--ink-soft);
}
.settings-group .settings-group-header, .home-card .home-card-title,
.modal-content h2, .modal-content h3 {
  color: var(--ink);
  font-family: var(--font-heading);
  text-shadow: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 6px;
}

/* Fields on paper: pale linen, ink writing */
.settings-group .field-input, .settings-group .settings-select,
.modal-content .field-input, .modal-content .settings-select,
.run-deck .field-input {
  background-color: #E9DCB8;
  background-image: var(--mat-linen);
  color: var(--ink);
  border: 1px solid #A8905E;
}
.settings-group .field-input::placeholder { color: var(--ink-faint); }

/* Secondary buttons on paper: inked outline */
.settings-group .btn-secondary, .run-deck .btn-secondary, .modal-content .btn-secondary {
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
}
.settings-group .btn-secondary:hover, .run-deck .btn-secondary:hover {
  border-color: var(--ink); color: var(--ink);
}
/* Brass buttons keep their metal (dark engraving already legible) */

/* ── The Run: a real ledger page ── */
.run-table {
  background-color: var(--paper);
  background-image: var(--mat-parchment-bold);
  background-blend-mode: multiply;
  border: 1px solid #B49A66;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
.run-table thead tr, .run-table th {
  background: none;
  background-image: none;
  color: var(--ink);
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
  border-bottom: 3px double var(--ink-soft);   /* the ledger's double rule */
}
.run-table td {
  background: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.run-table td .settings-sublabel { color: var(--ink-soft); }
.run-table .field-input {
  background-color: #E9DCB8; background-image: var(--mat-linen);
  color: var(--ink); border: 1px solid #A8905E;
}
.run-table .settings-select {
  background-color: #E9DCB8; color: var(--ink); border: 1px solid #A8905E;
}

/* Pencil is finally pencil: graphite on paper */
.run-row.run-penciled td, .run-row.run-penciled strong,
.run-row.run-penciled td .settings-sublabel { color: var(--pencil); }
.run-row.run-penciled > td:first-child { border-left: 3px dashed #9C937F; }
.run-row.run-inked td, .run-row.run-inked strong { color: var(--ink); font-style: normal; }
.run-row.run-declined td { color: var(--ink-faint); }
.run-row.run-past td { opacity: 0.6; }
.run-past-note { color: var(--ink-faint); font-style: italic; }
.run-open { color: #8B3030; font-style: normal; font-weight: bold; }
.run-net-pos { color: #2F5D33 !important; }
.run-net-neg { color: #8B3030 !important; }
.run-clash { color: #8B3030; }

/* Suggested-runs summary reads as a chapter heading on the wall (dark side) */
.run-suggest summary { color: var(--brass-light); }

/* Nav wood: solid timber, not veneer — quieter grain, deeper tone */
#guild-nav {
  background-image:
    var(--mat-wood),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0 2px, rgba(255,255,255,0.02) 2px 3px, transparent 3px 52px),
    linear-gradient(180deg, #331E0D 0%, var(--bg-walnut) 30%, var(--bg-primary) 100%);
}

/* Faire Day: plain and fast, always */
body.faire-day .settings-group, body.faire-day .home-card, body.faire-day .run-table {
  background-image: none;
}

/* ── Pencil, properly: darker graphite, thin hand-set hand (owner 2026-07-09) ── */
.run-row.run-penciled td, .run-row.run-penciled strong,
.run-row.run-penciled td .settings-sublabel {
  color: #4E483E;                       /* darker pencil grey — reads clearly on parchment */
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;                   /* the Fell italic: a hand writing quickly */
  font-weight: 400;
  letter-spacing: 0.015em;
}
.run-row.run-penciled strong { font-size: 1.02em; }
.run-row.run-penciled .settings-select,
.run-row.run-penciled .field-input { font-family: 'IM Fell English', Georgia, serif; font-style: italic; color: #4E483E; }
.run-row.run-penciled > td:first-child { border-left: 3px dashed #7A7264; }

/* ── Pencil legibility (owner: "still hard to read") + the eraser ── */
.run-row.run-penciled td,
.run-row.run-penciled td .settings-sublabel,
.run-row.run-penciled .settings-select,
.run-row.run-penciled .field-input {
  font-family: var(--font-data), Georgia, serif;  /* Baskerville italic: clearly a hand, clearly readable */
  font-style: italic;
  color: #453F35;                                  /* darker graphite still */
  font-size: 0.92rem;
}
.run-row.run-penciled strong {
  font-family: 'IM Fell English', Georgia, serif;  /* the old hand survives in the title, where size affords it */
  font-size: 1.08em;
  color: #3E382E;
}
.run-erase {
  background: none; border: none; cursor: pointer;
  color: #8C8272; font-size: 1rem; margin-left: 8px; padding: 2px 6px;
  border-radius: 4px;
}
.run-erase:hover { color: #4E483E; background: rgba(78,72,62,0.12); }

/* ── Attend vs vend, and honest hedging ── */
.run-intent {
  background: none; border: 1px dashed var(--rule, #8C8272); cursor: pointer;
  font-family: inherit; font-size: 0.72rem; color: inherit;
  padding: 2px 8px; border-radius: 999px; opacity: 0.85;
}
.run-intent:hover { opacity: 1; border-style: solid; }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v5 — THE FORGED HALL (owner: "WETA studio beautiful")
   Real baked textures from tools/build-textures.js — one light
   direction everywhere (warm key upper-left, cool fill lower-right),
   forged iron where iron belongs, and a cinematic grade over all.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tex-wood-img:  url('../assets/tex/wood-dark.png');
  --tex-paper-img: url('../assets/tex/parchment.png');
  --tex-iron-img:  url('../assets/tex/iron.png');
  --rivet: radial-gradient(circle at 38% 32%, #8a7a56 0 22%, #3a332a 55%, #17130e 100%);
}

/* The hall: real planks, one light story */
body.guild-body {
  background-image:
    radial-gradient(ellipse 100% 60% at 28% -10%, rgba(255,190,110,0.16), transparent 62%),
    linear-gradient(205deg, rgba(16,26,38,0.28), transparent 45%),
    radial-gradient(ellipse at 50% 115%, rgba(0,0,0,0.62), transparent 60%),
    var(--tex-wood-img);
  background-size: auto, auto, auto, 512px 512px;
  background-attachment: fixed;
}
/* Cinematic vignette — subtle, fixed, touches nothing */
body.guild-body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9990;
  background: radial-gradient(ellipse 130% 110% at 50% 40%, transparent 74%, rgba(8,5,2,0.16) 100%);
}

/* Nav: a timber upright with iron strap-bands top and bottom */
#guild-nav {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 12%, transparent 82%, rgba(0,0,0,0.45) 100%),
    var(--tex-wood-img);
  background-size: auto, 512px 512px;
  border-right: 3px solid #16110c;
  box-shadow: 7px 0 26px rgba(0,0,0,0.75), inset -1px 0 0 rgba(201,168,76,0.22);
}
.nav-header {
  background-image: var(--tex-iron-img);
  background-size: 256px;
  border-bottom: 2px solid #0e0b08;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,160,0.08);
  position: relative;
}
.nav-header::before, .nav-header::after {
  content: ''; position: absolute; bottom: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--rivet);
}
.nav-header::before { left: 8px; } .nav-header::after { right: 8px; }

/* Documents: the forged paper itself */
.settings-group, .home-card, .product-card, .faire-card,
.modal-content, .wfb-col, .stat-card, .run-deck, .run-totals, .toast {
  background-image: var(--tex-paper-img);
  background-size: 512px 512px;
  background-color: var(--paper);   /* ink NEVER sits on dark: solid paper under the image */
  box-shadow: 0 6px 18px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5), inset 0 0 30px rgba(122,90,28,0.12);
}
.run-table {
  background-image: var(--tex-paper-img);
  background-size: 512px 512px;
  background-color: var(--paper);
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.65);
}
/* The ledger is clamped to the desk with forged iron corners */
.run-table { position: relative; }
.run-table::before, .run-table::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
  background-image: var(--tex-iron-img); background-size: 128px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5);
}
.run-table::before { top: -4px; left: -4px; clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 100%, 0 100%); }
.run-table::after  { bottom: -4px; right: -4px; clip-path: polygon(100% 100%, 0 100%, 0 70%, 70% 70%, 70% 0, 100% 0); }

/* Brass plates and buttons stay metal; give them the key light's angle */
.tab-btn.active, .btn-primary {
  box-shadow: inset 1px 1px 0 rgba(255,240,190,0.55), inset -1px -2px 3px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.55);
}

/* Faire Day carries no textures — speed is its material */
body.faire-day.guild-body { background-image: linear-gradient(165deg, var(--bg-walnut), var(--bg-primary)); }
body.faire-day.guild-body::after { display: none; }
body.faire-day .settings-group, body.faire-day .home-card, body.faire-day .run-table { background-image: none; background-color: var(--paper, #F0E4C6); }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v6 — THE OWNER'S PLATES
   (Owner supplied photographic textures 2026-07-12: barn planks +
    torn handmade paper, with the pro tip that sampling DIFFERENT
    REGIONS of one plate hides the repeat. Each surface below crops
    its own region. Photos layer OVER the forge textures — if the
    files aren't present yet, the layer paints nothing and the
    forge shows through. Drop files at:
      assets/tex/wood-photo.jpg   assets/tex/paper-photo.jpg )
   ═══════════════════════════════════════════════════════════════ */

/* The hall: full plate, slightly darkened for text on the dark side */
body.guild-body {
  background-image:
    radial-gradient(ellipse 100% 60% at 28% -10%, rgba(255,190,110,0.14), transparent 62%),
    linear-gradient(205deg, rgba(16,26,38,0.30), rgba(10,6,3,0.42)),
    url('../assets/tex/wood-photo.jpg'),
    var(--tex-wood-img);
  background-size: auto, auto, 1400px auto, 512px 512px;
  background-position: 0 0, 0 0, left top, 0 0;
}
/* Nav: a DIFFERENT region of the same planks — the repeat disappears */
#guild-nav {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(8,5,2,0.55) 100%),
    url('../assets/tex/wood-photo.jpg'),
    var(--tex-wood-img);
  background-size: auto, 1400px auto, 512px 512px;
  background-position: 0 0, -880px -260px, 0 0;
}

/* Documents: each kind of paper samples its own corner of the sheet
   (cover-cropped inside the torn edges) */
.settings-group, .home-card, .product-card, .faire-card, .modal-content,
.wfb-col, .stat-card, .run-deck, .run-totals, .toast {
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  background-position: 32% 38%, 0 0;
}
.home-card    { background-position: 62% 30%, 0 0; }
.settings-group { background-position: 20% 65%, 0 0; }
.run-deck     { background-position: 75% 55%, 0 0; }
.run-totals   { background-position: 45% 80%, 0 0; }
.run-table {
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  background-position: 50% 45%, 0 0;
}

/* Faire Day: still bare */
body.faire-day.guild-body, body.faire-day #guild-nav { background-image: linear-gradient(165deg, var(--bg-walnut), var(--bg-primary)); }

/* ═══════════════════════════════════════════════════════════════
   MATERIALS v7 — THE FULL PLATE SET
   (Owner delivered seven more photographic plates 2026-07-12:
    scratched brass, black forged iron, dark leather, raw linen,
    tan hide, red sealing wax, verdigris bronze. Same rule as v6:
    every surface samples a DIFFERENT REGION of its plate so the
    repeat disappears, and every photo layers OVER a solid color
    or forge texture so nothing breaks if a file goes missing.
    verdigris-photo.jpg is saved but unassigned — awaiting a home.)
   ═══════════════════════════════════════════════════════════════ */

/* BLACK IRON — the nav header band is hammered iron now */
.nav-header {
  background-color: #17130f;
  background-image:
    linear-gradient(180deg, rgba(255,220,160,0.06), transparent 30%, rgba(0,0,0,0.35) 100%),
    url('../assets/tex/iron-photo.jpg');
  background-size: auto, 700px auto;
  background-position: 0 0, 18% 12%;
}
/* …and the ledger's corner braces, each clamped from a different scrap */
.run-table::before {
  background-color: #17130f;
  background-image: url('../assets/tex/iron-photo.jpg');
  background-size: 500px auto; background-position: 70% 65%;
}
.run-table::after {
  background-color: #17130f;
  background-image: url('../assets/tex/iron-photo.jpg');
  background-size: 500px auto; background-position: 25% 80%;
}

/* SCRATCHED BRASS — polished by thumbs, lifted warm so engraving reads */
.tab-btn.active, .btn-primary {
  background-color: #8a6d35;
  background-image:
    linear-gradient(180deg, rgba(255,224,150,0.55), rgba(230,180,90,0.30) 55%, rgba(140,100,40,0.28)),
    url('../assets/tex/brass-photo.jpg');
  background-size: auto, 620px auto;
  background-position: 0 0, 30% 35%;
  background-blend-mode: normal, normal;
}
.btn-primary { background-position: 0 0, 68% 60%; }

/* RAW LINEN — every field you write in is cloth under the hand */
.settings-group .field-input, .settings-group .settings-select,
.modal-content .field-input, .modal-content .settings-select,
.run-deck .field-input, .run-table .field-input, .run-table .settings-select {
  background-color: #E9DCB8;
  background-image: linear-gradient(rgba(233,220,184,0.55), rgba(233,220,184,0.55)),
    url('../assets/tex/linen-photo.jpg');
  background-size: auto, 480px auto;
  background-position: 0 0, 22% 30%;
  color: var(--ink);
}
.settings-select { background-position: 0 0, 60% 55%; }

/* DARK LEATHER — the Treasury counts coin on leather-topped desks */
.treasury-card {
  background-color: #241812;
  background-image:
    linear-gradient(180deg, rgba(255,210,150,0.05), rgba(0,0,0,0.25)),
    url('../assets/tex/leather-photo.jpg');
  background-size: auto, 760px auto;
  border: 1px solid rgba(201,168,76,0.4);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,180,0.07);
}
.treasury-card:nth-child(1) { background-position: 0 0, 8% 15%; }
.treasury-card:nth-child(2) { background-position: 0 0, 55% 20%; }
.treasury-card:nth-child(3) { background-position: 0 0, 20% 70%; }
.treasury-card:nth-child(4) { background-position: 0 0, 70% 65%; }

/* TAN HIDE — aged stock is for what's BEHIND you: past shows sink
   into darker, older paper, and the set-aside drawer rests on hide.
   (Owner 2026-07-13: starter runs must stay on fresh parchment —
   dark paper reads as "already happened.") */
.run-row.run-past {
  background-image: url('../assets/tex/paper-dark-photo.jpg');
  background-size: cover;
  background-position: 40% 50%;
}
.run-row.run-past + .run-row.run-past { background-position: 70% 60%; }
.run-aside-drawer {
  background-color: #C9AE85;
  background-image: url('../assets/tex/paper-dark-photo.jpg');
  background-size: cover;
  background-position: 25% 65%;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 10px 0;
}
.run-aside-drawer summary { color: var(--ink-soft); }
.run-aside-drawer .run-deck-show, .run-aside-drawer strong { color: var(--ink); }

/* SEALING WAX — the totals line carries the guild's seal */
.run-totals { position: relative; padding-left: 40px; }
.run-totals::before {
  content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background-color: #7a1f1a;
  background-image: url('../assets/tex/wax-photo.jpg');
  background-size: 300px auto; background-position: 45% 40%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,200,180,0.35), inset 0 -1px 2px rgba(0,0,0,0.4);
}

/* ═══ v7.1 — ONE WALL (owner: "does not look like one panel,
   mismatched tones behind text"). The fix: the wood is ONE
   fixed, viewport-covering plate. The nav and the content area
   stop painting their own backgrounds and let the wall show
   through — so plank lines run unbroken from nav into the room. ═══ */

body.guild-body {
  background-image:
    linear-gradient(180deg, rgba(12,7,3,0.10), rgba(10,6,3,0.24)),
    url('../assets/tex/wood-photo.jpg'),
    var(--tex-wood-img);
  /* Owner's dark horizontal-plank plate (2026-07-13): already calm
     and pre-shaded, so it covers 1:1 with only a whisper of grade */
  background-size: auto, cover, 512px 512px;
  background-position: center, center, 0 0;
  background-attachment: fixed, fixed, fixed;
}
#guild-content { background: transparent; }
#guild-nav {
  /* same wall, gently shaded so nav text reads — no second plank pattern */
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(8,5,2,0.34), rgba(8,5,2,0.44));
  background-size: auto;
  background-position: 0 0;
}

/* BLACK IRON on the header the maker actually sees — the top band */
#guild-header {
  background-color: #17130f;
  background-image:
    linear-gradient(180deg, rgba(255,220,160,0.06), transparent 40%, rgba(0,0,0,0.30) 100%),
    url('../assets/tex/iron-photo.jpg');
  background-size: auto, cover;
  background-position: 0 0, 40% 25%;
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,236,180,0.06);
}

/* ═══ v7.2 — LEGIBILITY (owner: "fonts are small and not easy
   to read"). Larger root, larger paper text. ═══ */
html { font-size: 17.5px; }
.run-table td, .run-table th { font-size: 0.95rem; }
.settings-group .field-input, .settings-group .settings-select,
.modal-content .field-input, .modal-content .settings-select,
.run-table .field-input, .run-table .settings-select { font-size: 0.9rem; }
.run-row.run-penciled td,
.run-row.run-penciled td .settings-sublabel,
.run-row.run-penciled .settings-select,
.run-row.run-penciled .field-input { font-size: 0.98rem; }
.settings-sublabel { font-size: 0.85rem; }
.nav-btn { font-size: 0.92rem; }

/* Pottery/Spices pills were pale green for the old dark cards —
   on parchment they read as "weird green coloring" (owner 2026-07-13).
   Ink-dark stamps now, and big enough to read. */
.faire-pill { font-size: 0.8rem; }
.faire-pill.pill-yes {
  color: #2F5D33;
  background: rgba(47,93,51,0.10);
  border: 1px solid rgba(47,93,51,0.5);
}
.faire-pill.pill-no {
  color: #8B3030;
  background: rgba(139,48,48,0.08);
  border: 1px solid rgba(139,48,48,0.45);
}
/* Weather cues, same disease, same cure (owner 2026-07-13: "not
   reading on the parchment") — pale dark-theme tints become ink */
.faire-type-pill { color: #6B5220; background: rgba(107,82,32,0.10); border: 1px solid rgba(107,82,32,0.45); }
.faire-temp-pill.temp-cool  { color: #1F5B52; background: rgba(31,91,82,0.10);  border: 1px solid rgba(31,91,82,0.5); }
.faire-temp-pill.temp-warm  { color: #7A5A10; background: rgba(122,90,16,0.10); border: 1px solid rgba(122,90,16,0.5); }
.faire-temp-pill.temp-hot   { color: #8B3030; background: rgba(139,48,48,0.10); border: 1px solid rgba(139,48,48,0.5); }
.faire-temp-pill.temp-mixed { color: #2E4A78; background: rgba(46,74,120,0.10); border: 1px solid rgba(46,74,120,0.5); }
.faire-status { color: var(--ink-soft, #4A4237); font-size: 0.85rem; }

/* The clock on the iron band: readable at a glance (owner 2026-07-13) */
.hdr-clock { font-size: 1.05rem; color: #EADFC4; font-weight: 700; }
.hdr-date  { font-size: 0.82rem; color: #C9BFA4; }

/* The GUILD leads the header — crest large, name bright and carved;
   "Guild Hall" steps back to a maker's mark (owner 2026-07-13:
   "the fabled pig is small, and since that is a guild name it
   should be prominent") */
.guild-crest-img--hdr { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(201,168,76,0.45), 0 2px 5px rgba(0,0,0,0.5); }
.hdr-crest { font-size: 1.9rem; }
.hdr-guild-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-bright, #F0E6CC);
  letter-spacing: 0.05em;
  max-width: 42vw;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
/* Crest and pig stand together as the brand; Guild Hall keeps a
   proud second billing after the divider (owner 2026-07-13) */
.hdr-wordmark {
  font-family: var(--font-heading);
  font-size: 0.95rem; font-weight: 700;
  color: var(--brass-light, #D9C07A);
  letter-spacing: 0.09em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Linen fields: frayed patches of cloth, not static boxes
   (owner 2026-07-13). A ragged clip-path chews the edges, a soft
   woven shadow replaces the hard border. */
.settings-group .field-input, .settings-group .settings-select,
.modal-content .field-input, .modal-content .settings-select,
.run-deck .field-input, .run-table .field-input, .run-table .settings-select {
  border: none;
  border-radius: 0;
  clip-path: polygon(
    0.8% 12%, 0.2% 30%, 1.1% 48%, 0.4% 66%, 1.2% 84%, 2.5% 97%,
    9% 99.5%, 18% 98%, 27% 100%, 36% 98.4%, 45% 99.8%, 54% 98.2%,
    63% 100%, 72% 98.5%, 81% 99.6%, 90% 98%, 97% 99%,
    99.3% 88%, 98.6% 70%, 99.6% 52%, 98.8% 34%, 99.5% 16%, 98% 3%,
    91% 0.5%, 82% 2%, 73% 0.2%, 64% 1.8%, 55% 0.4%, 46% 2%,
    37% 0.6%, 28% 1.9%, 19% 0.3%, 10% 1.6%, 3% 0.8%);
  box-shadow: inset 0 0 0 3px rgba(122,101,62,0.28), inset 0 0 10px rgba(122,101,62,0.22);
  padding: 7px 12px;
}
.settings-group .field-input:focus, .settings-group .settings-select:focus,
.modal-content .field-input:focus, .modal-content .settings-select:focus,
.run-deck .field-input:focus, .run-table .field-input:focus, .run-table .settings-select:focus {
  outline: none;
  background-color: #F2E7C6;
  box-shadow: inset 0 0 0 3px rgba(122,90,28,0.55), inset 0 0 10px rgba(122,101,62,0.25);
}

/* Settings card headers: chapter headings inked on the page, not
   oak-brown bands floating on parchment (owner 2026-07-13) */
.settings-group-header {
  background: transparent;
  border-bottom: 3px double var(--ink-soft, #4A4237);
  color: var(--ink, #2A241C);
  font-size: 0.85rem;
  text-shadow: none;
}
.settings-row { border-bottom: 1px solid var(--rule, rgba(90,76,54,0.35)); }
.settings-row:last-child { border-bottom: none; }

/* ═══ ICONS AS HARDWARE (owner 2026-07-13: "all the icons seem
   weak") — raw emoji read as stickers on these materials. Nav and
   header icons become brass-toned engravings: monochromed, warmed,
   shadowed like everything else the light touches; and larger. ═══ */
.nav-icon {
  font-size: 1.25rem;
  filter: grayscale(1) sepia(0.85) saturate(1.7) brightness(1.02)
          drop-shadow(0 1px 1px rgba(0,0,0,0.65));
}
.nav-item.active .nav-icon {
  filter: grayscale(1) sepia(0.9) saturate(2.1) brightness(1.22)
          drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
/* Header: only the emoji fallback crest is engraved — a real crest
   image keeps its true colors, and hdr buttons keep their red badge */
.hdr-crest:not(:has(img)) {
  filter: grayscale(1) sepia(0.85) saturate(1.7) brightness(1.05)
          drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}

/* ═══ WORDS ON THE WOOD (owner 2026-07-13: "some things are not
   reading well on the wood") — anything sitting directly on the
   dark wall must be bright enough to read by firelight. ═══ */
.home-date { color: #C9BFA4; font-size: 0.95rem; }
.home-intention-label { color: #D9C07A; font-size: 0.78rem; }
.home-intention-input {
  background: rgba(0,0,0,0.38);
  color: #F0E6CC;
  border-color: rgba(201,168,76,0.55);
}
.home-intention-input::placeholder { color: rgba(222,209,178,0.66); }

/* ═══ EVERY PAGE IS EITHER WOOD OR PAPER (owner 2026-07-13, three
   screenshots in a row: "hard to read the details / some bits /
   some things"). The rule from here on: WORDS LIVE ON PAPER.
   Modules that still floated thin text on the dark wall — the
   Marketplaces panels, the Schedule calendar — get real parchment,
   and all parchment gets a cream wash so the mottling never fights
   the ink. ═══ */

/* A cream wash calms every document's foxing (mottled stains) */
.settings-group, .home-card, .product-card, .faire-card, .modal-content,
.wfb-col, .stat-card, .run-deck, .run-totals, .toast, .run-table, .home-inv-stat {
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45),
              inset 0 0 0 999px rgba(243,232,205,0.45);
}

/* Marketplaces: panels become documents, text becomes ink */
.reg-disclaimer, .gw-panel, .reg-card {
  background-color: var(--paper, #F0E4C6);
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  border: none;
  color: var(--ink, #2A241C);
  box-shadow: 0 5px 15px rgba(0,0,0,0.6), inset 0 0 0 999px rgba(243,232,205,0.5);
}
.reg-disclaimer { background-position: 20% 30%, 0 0; }
.gw-panel       { background-position: 70% 25%, 0 0; }
.reg-card       { background-position: 40% 60%, 0 0; }
.reg-card + .reg-card { background-position: 65% 75%, 0 0; }
.reg-card-title { color: var(--ink, #2A241C); font-size: 1.05rem; }
.reg-plain, .mp-field { color: var(--ink, #2A241C); font-size: 0.95rem; }
.reg-deeper summary { color: #6B3F1E; }
.reg-deeper p { color: var(--ink-soft, #4A4237); }
.reg-verified, .mp-none { color: var(--ink-faint, #6E6350); }
.gw-lede, .gw-quiet { color: var(--ink-soft, #4A4237); }
.gw-rec-text { color: var(--ink, #2A241C); }
.gw-rec-reason { color: var(--ink-soft, #4A4237); }
.mp-listing summary { color: var(--ink, #2A241C); }
.mp-state { color: var(--ink-soft, #4A4237); border-color: rgba(90,76,54,0.5); }
.mp-open { color: #2F5D33; border-color: rgba(47,93,51,0.55); background: rgba(47,93,51,0.08); }
.mp-closed { color: var(--ink-faint, #6E6350); border-color: rgba(90,76,54,0.5); }
.mp-near { border-color: rgba(90,76,54,0.4); }
.reg-card a, .gw-panel a, .reg-disclaimer a { color: #6B3F1E; }
.reg-footer { color: #C9BFA4; }
.module-subtitle { color: #C9BFA4; font-size: 1rem; }

/* Schedule: the month is a paper calendar pinned to the wall */
.sch-cal-wrap {
  background-color: var(--paper, #F0E4C6);
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  background-position: 45% 35%, 0 0;
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 0 0 999px rgba(243,232,205,0.5);
  color: var(--ink, #2A241C);
}
.sch-cal-wrap .sch-cal-head-cell { color: var(--ink-soft, #4A4237); font-size: 0.8rem; }
.sch-cal-cell { background: rgba(255,250,236,0.5); border: 1px solid rgba(122,101,62,0.4); }
.sch-cal-cell:hover { background: rgba(255,250,236,0.85); border-color: #7A5A1C; }
.sch-cal-day { color: var(--ink, #2A241C); font-size: 0.88rem; }
.sch-cal-cell--today { border-color: #8B3030 !important; box-shadow: inset 0 0 0 1px #8B3030; }
.sch-cal-cell--today .sch-cal-day { color: #8B3030; }
.sch-cal-wrap .sch-legend, .sch-cal-wrap .sch-cal-hint { color: var(--ink-soft, #4A4237); }
.sch-cal-nav-btn, .sch-cal-today-btn { color: var(--ink, #2A241C); border: 1px solid rgba(122,101,62,0.5); background: rgba(255,250,236,0.5); }
.sch-cal-dot-more { color: var(--ink-faint, #6E6350); }

/* Faire cards: the details step forward */
.faire-location { color: var(--ink, #2A241C); font-size: 0.95rem; }
.faire-nick { color: var(--ink-faint, #6E6350); }
.faire-pill { font-size: 0.85rem; font-weight: 600; }

/* Iron-bar icons: engraved like the nav, except when they carry a
   live signal (red badge, sync dot) — signals keep their color */
.hdr-btn {
  filter: grayscale(1) sepia(0.85) saturate(1.7) brightness(1.08)
          drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}
.hdr-btn:has(.hdr-badge:not([hidden])), .hdr-btn:has(.sync-dot) { filter: none; }

/* Icons ON PAPER print as ink stamps — dark, deliberate */
.home-row-icon, .fi-section-title, .home-card-title, .settings-group-header,
.faire-expand-icon {
  filter: grayscale(0.9) sepia(0.5) saturate(1.1) brightness(0.72) contrast(1.15);
}

/* The two inventory plaques become parchment slips like the rest of
   the desk — dark number-on-dark-panel read as leftovers of the old
   dark theme */
.home-inv-stat {
  background-color: var(--paper, #F0E4C6);
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  background-position: 58% 22%, 0 0;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5), inset 0 0 30px rgba(122,90,28,0.12);
}
.home-inv-stat + .home-inv-stat { background-position: 15% 75%, 0 0; }
.home-inv-number { color: var(--ink, #2A241C); }
.home-inv-label  { color: #6B5220; font-size: 0.78rem; }
.home-inv-sub    { color: var(--ink-soft, #4A4237); font-size: 0.82rem; }

/* ═══ v7.3 — READ BY FIRELIGHT (owner 2026-07-13: "honestly almost
   every page has stuff that can not be easily read"). ROOT CAUSE:
   the dark-side text tokens were tuned for the old flat near-black
   theme. On real mid-brown wood, --text-muted #6A5A3A is camouflage.
   Brighter tokens lift every wood surface app-wide at once; paper
   surfaces are unaffected because v4's nuclear rule forces ink there. ═══ */
:root {
  --text-primary:   #E2D2A8;
  --text-secondary: #C8B48A;
  --text-muted:     #A99878;
}

/* New paper containers get the same nuclear ink rule as v4's */
.reg-card *, .gw-panel *, .reg-disclaimer *, .sch-cal-wrap *,
.treasury-panel *, .treasury-transactions * { color: var(--ink, #2A241C); }
/* …then the deliberate colors re-assert themselves */
.reg-card .mp-open { color: #2F5D33; }
.reg-card .mp-closed, .reg-card .reg-verified, .reg-card .mp-none { color: var(--ink-faint, #6E6350); }
.reg-card .reg-deeper summary, .reg-card a, .gw-panel a, .reg-disclaimer a { color: #6B3F1E; }
.reg-card .reg-deeper p, .gw-panel .gw-lede, .gw-panel .gw-quiet,
.gw-panel .gw-rec-reason, .reg-card .mp-state { color: var(--ink-soft, #4A4237); }

/* A product's saved sale checkpoint — law in the Atlas, maker declarations on
   the record. It should feel like a threshold, not a buried settings form. */
.product-compliance {
  margin-top: 18px;
  padding: 0;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.055);
}
.product-compliance > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  font-family: var(--font-heading);
  color: var(--parchment);
}
.product-compliance[open] > summary { border-bottom: 1px solid rgba(201, 168, 76, 0.2); }
.product-compliance > :not(summary) { margin-left: 15px; margin-right: 15px; }
.compliance-badge {
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--brass);
  font: 0.66rem var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}
.compliance-badge--recorded { color: var(--forest-light, #6B9B4A); }
.compliance-badge--action_required,
.compliance-badge--unresolved,
.compliance-badge--unrecorded { color: #d98d74; }
.compliance-lede {
  color: var(--text-secondary);
  font: 0.85rem/1.5 var(--font-body);
}
.compliance-classify {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.compliance-classify label:nth-child(3) { grid-column: 1 / -1; }
.compliance-classify label,
.compliance-small-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-secondary);
  font: 0.72rem var(--font-data);
}
.compliance-check {
  margin: 12px 15px 12px 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.13);
}
.compliance-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--parchment);
}
.compliance-check__head .field-select { width: auto; min-width: 190px; }
.compliance-check p {
  color: var(--text-secondary);
  font: 0.82rem/1.5 var(--font-body);
}
.compliance-small-label { margin-top: 9px; }
.compliance-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 10px;
}
.compliance-disclaimer {
  padding-bottom: 13px;
  color: var(--text-muted);
  font: 0.7rem/1.45 var(--font-body);
}
.compliance-empty {
  padding: 12px;
  border: 1px dashed rgba(201, 168, 76, 0.35);
  color: var(--text-secondary);
}
.merchant-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.merchant-product-row--pending { opacity: 0.9; }
.merchant-checkpoint {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 168, 76, 0.28);
}
.compliance-listing-note {
  margin-top: 3px;
  color: #d9a18d;
  font: 0.65rem var(--font-data);
}
@media (max-width: 760px) {
  .compliance-classify { grid-template-columns: 1fr; }
  .compliance-check__head { align-items: flex-start; flex-direction: column; }
  .compliance-check__head .field-select { width: 100%; min-width: 0; }
}
.sch-cal-wrap .sch-cal-cell--today .sch-cal-day { color: #8B3030; }
.sch-cal-wrap .sch-cal-dot-more { color: var(--ink-faint, #6E6350); }

/* ═══ TREASURY: one hide, one ledger (owner 2026-07-13: "the leather
   looks odd… disjointed"). All four cards sample the SAME fixed
   plate — cut from one hide, seams aligned — and the panels beneath
   become the paper ledger they always were. ═══ */
.treasury-card,
.treasury-card:nth-child(1), .treasury-card:nth-child(2),
.treasury-card:nth-child(3), .treasury-card:nth-child(4) {
  background-color: #241812;
  background-image:
    linear-gradient(180deg, rgba(255,210,150,0.05), rgba(0,0,0,0.22)),
    url('../assets/tex/leather-photo.jpg');
  background-size: auto, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  border: 1px solid rgba(20,12,8,0.9);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,180,0.08);
}
.treasury-value { color: #E8C97A; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.treasury-label { color: #C9BFA4; font-size: 0.72rem; }
.treasury-panel, .treasury-transactions {
  background-color: var(--paper, #F0E4C6);
  background-image: url('../assets/tex/paper-photo.jpg'), var(--tex-paper-img);
  background-size: cover, 512px 512px;
  background-position: 35% 45%, 0 0;
  border: none;
  border-radius: var(--radius-md, 8px);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 0 0 999px rgba(243,232,205,0.5);
}
.treasury-transactions { background-position: 70% 70%, 0 0; padding: 0; overflow: hidden; }
.treasury-panel-title {
  font-family: var(--font-heading); font-size: 0.9rem; color: var(--ink, #2A241C);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 3px double var(--ink-soft, #4A4237); padding-bottom: 6px;
}
.transaction-header { background: transparent; color: var(--ink, #2A241C); border-bottom: 3px double var(--ink-soft, #4A4237); }
.transaction-row { border-bottom: 1px solid rgba(90,76,54,0.35); background: transparent; }
.transaction-row:hover { background: rgba(255,250,236,0.5); }
.transaction-date { color: var(--ink-soft, #4A4237); }
.transaction-desc { color: var(--ink, #2A241C); }
.amount-in  { color: #2F5D33 !important; font-weight: 700; }
.amount-out { color: #8B3030 !important; font-weight: 700; }

/* ═══ THE HEARTH BREATHES — candle-warm glow, rebuilt with the motes ═══ */
.hearth-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 25% -8%, rgba(255,180,95,0.10), transparent 60%);
  animation: hearthBreathe 7s ease-in-out infinite;
}
@keyframes hearthBreathe {
  0%, 100% { opacity: 0.75; }
  38%      { opacity: 1; }
  52%      { opacity: 0.85; }
  70%      { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .dust-mote, .hearth-glow { animation: none; }
}

/* ═══ v7.4 — NO BARE BUTTONS (owner 2026-07-13: "these type of
   white boxes in our app bothers me" — Connections, spice recipes,
   members, onboarding all carried unstyled browser buttons).
   Every button class no stylesheet had claimed now wears guild
   dress: a parchment chip with ink lettering. ═══ */
.gh-btn, .conn-btn, .btn-sm, .mem-actas, .mem-remove, .ob-back, .ob-next,
.spice-edit-btn, .spice-delete-btn, .pantry-del-btn, .se-del-ing,
.bun-edit-btn, .bun-del-btn, .be-del-item {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 0.8rem;
  color: var(--ink, #2A241C);
  background-color: #EFE3C2;
  border: 1px solid #8a6d3b;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,250,236,0.6);
  transition: filter 0.15s, border-color 0.15s;
}
.gh-btn:hover, .conn-btn:hover, .btn-sm:hover, .mem-actas:hover,
.ob-back:hover, .ob-next:hover, .spice-edit-btn:hover, .bun-edit-btn:hover {
  filter: brightness(1.05); border-color: #6a4f1c;
}
/* the destructive ones speak in burgundy */
.conn-btn--danger, .mem-remove, .spice-delete-btn, .pantry-del-btn,
.se-del-ing, .bun-del-btn, .be-del-item {
  color: #8B3030; border-color: rgba(139,48,48,0.55);
}
.conn-btn--danger:hover, .mem-remove:hover, .spice-delete-btn:hover,
.pantry-del-btn:hover, .se-del-ing:hover, .bun-del-btn:hover, .be-del-item:hover {
  filter: none; background-color: #EAD6C2; border-color: #8B3030;
}
/* small work-buttons */
.gh-btn--sm, .btn-sm, .se-del-ing, .be-del-item { padding: 2px 9px; font-size: 0.72rem; }
/* ghosts stay quiet but legible */
.conn-btn--ghost { background: transparent; color: var(--text-secondary, #C8B48A); box-shadow: none; }
/* the onboarding's forward step is brass, like every primary act */
.ob-next {
  background-color: #8a6d35;
  background-image: linear-gradient(180deg, rgba(255,224,150,0.55), rgba(230,180,90,0.30) 55%, rgba(140,100,40,0.28)), url('../assets/tex/brass-photo.jpg');
  background-size: auto, 620px auto;
  background-position: 0 0, 40% 45%;
  color: #241a08; font-weight: bold;
  border-color: #6a4f1c;
}

/* Faire Day travels light — no plates, no leather, no wax, no motes */
body.faire-day .nav-header, body.faire-day .treasury-card,
body.faire-day .run-deck, body.faire-day .tab-btn.active,
body.faire-day .btn-primary, body.faire-day #guild-header,
body.faire-day .treasury-panel, body.faire-day .treasury-transactions { background-image: none; }
body.faire-day .run-totals { padding-left: 12px; }
body.faire-day .run-totals::before { display: none; }
body.faire-day #ambient-layer { display: none !important; }
body.faire-day.guild-body { background-attachment: scroll; }

/* ═══════════════════════════════════════════════════════════════
   HOVER ON PAPER — STAY IN INK
   (The brighten-on-hover rules were written for cream text on dark
    wood. On parchment documents, brightening turns letters white
    and unreadable. On paper, hover feedback is a firmer ink and an
    underline instead.)
   ═══════════════════════════════════════════════════════════════ */

.home-card .home-row--link:hover .home-row-text,
.home-card .home-row--link:hover .home-row-meta,
.home-card .home-row--link:hover .home-row-icon {
  color: var(--ink);
}
.home-card .home-row--link:hover .home-row-text {
  text-decoration: underline;
  text-decoration-color: rgba(122,90,28,0.6);
  text-underline-offset: 2px;
}
.home-card .home-card-title[data-section]:hover,
.home-card .home-empty-action:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(122,90,28,0.6);
  text-underline-offset: 2px;
}
.modal-content .modal-close:hover {
  color: var(--ink);
}

/* Treasury balance: was cream-on-dark; on paper it must be ink. */
.home-card--ledger .home-balance {
  color: var(--ink);
}

/* ── The rest of the sweep (2026-07-13, same bug class as the home rows).
   Every hover rule below was written for cream-on-wood and fires inside a
   parchment container, where it turns the letters white on white. Each is
   scoped to the paper container ONLY — the same class on the wood side
   (a spice card, a member row) keeps its bright hover. ── */

/* Home: the getting-started answers sit in .home-card--start (a parchment
   card). The base .gs-opt paints a DARK oak background, but the paper-scope
   rule (.home-card *) forces its text to dark --ink — dark-on-dark, invisible.
   On paper the chip must be light: faint warm tint, dark ink, visible border. */
.home-card .gs-opt {
  background: rgba(122,90,28,0.06);
  color: var(--ink);
  border: 1px solid #B49A66;
}
.home-card .gs-opt:hover {
  color: var(--ink);
  border-color: #7A5A1C;
  background: rgba(122,90,28,0.16);
}

/* Connections: every partner card IS a .faire-card. The danger button's
   near-white hover (#EAD6C2) vanished into the paper. Ink, and a red bed. */
.faire-card .conn-btn--danger:hover {
  color: #8B3030;
  background: rgba(139,48,48,0.10);
  border-color: rgba(139,48,48,0.55);
}

/* Secondary buttons on paper: the inked-outline hover existed for
   .settings-group and .run-deck only. Give it to every paper container,
   so a "Cancel" in a card never brightens into the page. */
.home-card .btn-secondary:hover, .product-card .btn-secondary:hover,
.faire-card .btn-secondary:hover, .modal-content .btn-secondary:hover,
.stat-card .btn-secondary:hover, .run-totals .btn-secondary:hover,
.run-table .btn-secondary:hover, .treasury-panel .btn-secondary:hover,
.treasury-transactions .btn-secondary:hover, .reg-card .btn-secondary:hover,
.gw-panel .btn-secondary:hover, .sch-cal-wrap .btn-secondary:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(122,90,28,0.08);
}
/* …and they need the inked outline at rest, too, or they read as
   ink-on-dark-button before the pointer ever arrives. */
.home-card .btn-secondary, .product-card .btn-secondary,
.faire-card .btn-secondary, .stat-card .btn-secondary,
.run-totals .btn-secondary, .run-table .btn-secondary,
.treasury-panel .btn-secondary, .treasury-transactions .btn-secondary,
.reg-card .btn-secondary, .gw-panel .btn-secondary,
.sch-cal-wrap .btn-secondary {
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
}

/* ═══ THE BENCH SHOWS THE ROAD (owner 2026-07-13: "production is just
   listed as production vs greenware, bisque/fire/glaze/fire"). The card
   now names the piece's real stage and the road it walks. ═══ */
.product-card-road {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.8;
  margin-bottom: 4px;
}
.product-card-money {
  font-family: var(--font-data), Georgia, serif;
  font-size: 0.82rem;
  color: var(--ink);
  margin-top: 6px;
}
.product-card-money .pc-cost { color: var(--ink-faint); font-size: 0.74rem; }
/* The stage chip wears its stage's color as an inked edge */
.product-card .product-card-status { padding-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   PRE-PRODUCTION, THE JOINED BOARD, AND THE TOOLING SHELF
   (Owner 2026-07-13: "if a piece needs two workflows joined to
    complete the first sample, show it" · "the molds made for that
    piece should be accounted for somewhere" · "we could call the
    mold making pre production")

   Pre-Production is walked ONCE per design and ends with tooling on
   a shelf. Production is walked for EVERY batch. The board draws
   both as one journey with a rule at the join.
   ═══════════════════════════════════════════════════════════════ */

.wfb-chain-note {
  background: rgba(122,90,28,0.10);
  border-left: 3px solid var(--brass, #C9A84C);
  padding: 10px 14px; margin-bottom: 14px; border-radius: 3px;
  font-family: var(--font-body); font-size: 0.85rem;
  color: var(--text-secondary);
}
.wfb-chain-note strong { color: var(--text-bright); }
.wfb-chain-note em { color: var(--brass-light); font-style: normal; }

/* Pre-Production columns: the road already walked. Present, quieter. */
.wfb-col--pre { opacity: 0.82; }
.wfb-col--pre .wfb-col-head { border-top-style: dashed; }

/* The rule at the join — where tooling becomes pieces */
.wfb-join {
  flex: 0 0 auto; width: 0; align-self: stretch;
  border-left: 2px solid var(--brass-dim, #8B7340);
  margin: 0 18px; position: relative;
}
.wfb-join span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-heading); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass, #C9A84C); opacity: 0.75;
  background: var(--bg-primary); padding: 8px 2px;
}

/* A piece that cannot run: it says why, rather than sitting silently */
.wfb-card--blocked { border-left: 3px solid #8B3030; }
.wfb-card-need {
  font-size: 0.68rem; color: #C56B5C;
  font-style: italic; margin-top: 3px;
}
.wfb-card--found {
  outline: 2px solid var(--brass, #C9A84C);
  outline-offset: 2px;
}
.wfb-open {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.75rem; padding: 2px 5px;
}
.wfb-open:hover { color: var(--brass-light); }

/* A pack is a shelf of suggestions, not a set */
.wfp-note {
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--text-muted); font-style: italic;
  margin: 6px 0 10px; display: flex; align-items: center; gap: 10px;
}
.wfp-note .wfl-btn { font-style: normal; flex: 0 0 auto; }

/* ═══ TWO TABS, NOT THREE (owner 2026-07-14: "I feel like we could just have
   board and templates — I don't understand why we need the builder page.")
   The Builder's list duplicated the Board's road picker, and editing belongs
   to the road you are looking at. The board carries its own tools now. ═══ */
.wfb-toolbar .wfl-btn { margin-left: 8px; }

/* The rare things wait behind "…" — available, never in the way */
.wfb-more { position: relative; display: inline-block; margin-left: 8px; }
.wfb-more > summary {
  list-style: none; cursor: pointer; display: inline-block;
  padding: 4px 10px;
}
.wfb-more > summary::-webkit-details-marker { display: none; }
.wfb-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 210px; padding: 8px;
  background-color: var(--paper, #F0E4C6);
  background-image: var(--mat-parchment-bold);
  background-blend-mode: multiply;
  border: 1px solid #B49A66; border-radius: 3px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), inset 0 0 0 999px rgba(243,232,205,0.5);
}
.wfb-more-menu .wfl-btn {
  margin: 0; text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent;
  color: var(--ink) !important;
}
.wfb-more-menu .wfl-btn:hover {
  border-color: var(--ink-soft); background: rgba(122,90,28,0.10);
}
.wfb-more-head {
  font-family: var(--font-heading); font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 6px;
}

/* Shaping a road: you never lose your place — the way back is the first thing */
.wfe-crumb {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.wfe-crumb-note {
  font-family: var(--font-body); font-size: 0.8rem;
  color: var(--text-muted); font-style: italic;
}

/* The road picker sits quietly beside the three chips — one control, not a wall */
.workshop-road {
  margin-left: 10px;
  max-width: 230px;
  font-size: 0.8rem;
  vertical-align: middle;
}

/* The sheet's ladder is the JOINED journey: the mold road, a rule, the making
   road. (Owner: "no, I need to make the ranger spoon mold first — that part is
   correct." The mold is the first half of the journey, not a wrong turn.) */
.stage-row--pre .stage-name { font-style: italic; opacity: 0.92; }

/* LANES. Pre-Production is one road: the plaster lane makes a sprig mold, the
   printed lane makes a cutter and stamp. A design walks the lane it needs and
   skips the other. (Owner: "pre-production cutter and stamp is an optional lane
   of pre-production — some products will be formed by cutter and stamp, some
   products sprig mold.") */
.stage-row--lane { border-left: 2px dashed var(--rule, #8C8272); padding-left: 8px; }
.stage-row--lane .stage-dot { opacity: 0.55; }
.stage-lane {
  font-family: var(--font-body); font-size: 0.64rem; font-style: italic;
  color: var(--ink-faint, #7A6748); margin-left: auto; padding-left: 8px;
}
/* On the board, a lane column is plainly a lane and not a step you missed */
.wfb-col--lane .wfb-col-head { border-top-style: dotted; }
.wfb-col--lane .wfb-col-name::after {
  content: ' · lane'; font-size: 0.62rem; opacity: 0.6; letter-spacing: 0.06em;
}
.stage-join {
  font-family: var(--font-heading);
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass, #C9A84C);
  border-top: 1px solid var(--brass-dim, #8B7340);
  margin: 9px 0 7px; padding-top: 6px;
}

/* ═══ SAMPLES SAY WHAT THEY ARE (owner 2026-07-14: "the hall isn't lying when
   it says this is a sample for education"). An empty Hall is truthful and
   useless to someone who has never seen one. A badged example teaches the whole
   pipeline and counts toward nothing — the badge is what keeps it honest, so it
   is never subtle. ═══ */
.sample-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--font-heading); font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #F4E4C0;
  background: rgba(122,48,96,0.92);
  border: 1px solid rgba(244,228,192,0.5);
  border-radius: 2px; padding: 2px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.product-card--sample { border-style: dashed; }
.sample-note {
  grid-column: 1 / -1;
  background: rgba(122,48,96,0.10);
  border-left: 3px solid rgba(122,48,96,0.7);
  border-radius: 3px; padding: 11px 14px; margin-bottom: 14px;
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--text-secondary); line-height: 1.6;
}
.sample-note strong { color: var(--text-bright); }
.sample-note .wfl-btn { margin-left: 10px; }
.pc-adopt {
  display: block; margin-top: 4px;
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-family: var(--font-body); font-size: 0.72rem;
  color: #7A3060; text-decoration: underline;
  text-decoration-color: rgba(122,48,96,0.5); text-underline-offset: 2px;
}
.pc-adopt:hover { color: #5A2048; }

/* ── The bench card: where a design stands on tooling ── */
.pc-tooling {
  font-size: 0.72rem; margin-top: 5px;
  font-family: var(--font-body);
}
.pc-tooling--ready   { color: #4F6B4A; }
.pc-tooling--waiting { color: #8B5020; font-style: italic; }
.pc-board {
  background: none; border: none; cursor: pointer; padding: 4px 0 0;
  font-family: var(--font-body); font-size: 0.72rem;
  color: var(--ink-soft); text-decoration: underline;
  text-decoration-color: rgba(122,90,28,0.5); text-underline-offset: 2px;
}
.pc-board:hover { color: var(--ink); }

/* ── The Tooling Shelf: molds don't flow. They sit, and they wear. ── */
.tool-group { margin-bottom: 26px; }
.tool-group-head {
  font-family: var(--font-heading); font-size: 0.9rem;
  color: var(--brass-light); letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--brass-dim, #8B7340);
  padding-bottom: 5px; margin-bottom: 12px;
}
.tool-group-note {
  float: right; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: 0.75rem;
  color: var(--text-muted); font-style: italic;
}
.tool-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tool-card {
  background-color: var(--paper, #F0E4C6);
  background-image: var(--mat-parchment-bold);
  background-blend-mode: multiply;
  border: 1px solid #B49A66; border-radius: 3px;
  padding: 13px 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 0 0 999px rgba(243,232,205,0.45);
  color: var(--ink);
}
.tool-card * { color: var(--ink); }
.tool-card--retired { opacity: 0.55; }
.tool-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tool-card-name { font-family: var(--font-heading); font-size: 0.95rem; }
.tool-pill {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid;
}
.tool-pill--good    { color: #2F5D33 !important; border-color: rgba(47,93,51,0.5);  background: rgba(47,93,51,0.08); }
.tool-pill--worn    { color: #8B5020 !important; border-color: rgba(139,80,32,0.5);  background: rgba(139,80,32,0.08); }
.tool-pill--retired { color: #6E6350 !important; border-color: rgba(110,99,80,0.5); }
.tool-card-kind {
  font-size: 0.72rem; color: var(--ink-soft) !important;
  margin: 3px 0 9px; font-style: italic;
}
.tool-card-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-data), Georgia, serif; font-size: 0.74rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 7px 0; margin-bottom: 8px;
}
.tool-card-stats strong { font-size: 0.86rem; }
.tool-card-users { font-size: 0.74rem; color: var(--ink-soft) !important; margin-bottom: 9px; }
.tool-card-lineage {
  font-size: 0.68rem; font-style: italic;
  color: var(--ink-faint) !important; margin-bottom: 8px;
}
.tool-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-card .btn-secondary {
  background: transparent; border: 1px solid var(--ink-soft);
  color: var(--ink-soft) !important; font-size: 0.72rem; padding: 3px 9px;
}
.tool-card .btn-secondary:hover {
  color: var(--ink) !important; border-color: var(--ink);
  background: rgba(122,90,28,0.08);
}

/* ── The sheet: what one piece owes the tooling ── */
.sheet-tooling {
  border: 1px solid var(--rule); border-left: 3px solid var(--brass-dim, #8B7340);
  border-radius: 3px; padding: 11px 13px; margin-bottom: 16px;
  background: rgba(122,90,28,0.06);
}
.sheet-tooling.is-waiting { border-left-color: #8B5020; }
.sheet-tool-head { font-family: var(--font-heading); font-size: 0.82rem; margin-bottom: 8px; }
.sheet-tool-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.76rem; padding: 3px 0;
  border-bottom: 1px dotted var(--rule);
}
.sheet-tool-share { font-family: var(--font-data), Georgia, serif; text-align: right; }
.sheet-tool-share .settings-sublabel { display: block; font-size: 0.66rem; }
.sheet-tool-total { font-size: 0.78rem; margin-top: 8px; }
.sheet-tool-missing {
  font-size: 0.76rem; color: #8B5020; font-style: italic; margin-top: 8px;
}
.sheet-tooling .btn-secondary { margin-top: 10px; font-size: 0.74rem; }
.tlf-designs {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  max-height: 130px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--rule); border-radius: 3px;
}
.tlf-design { font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }

/* ═══ ICON SWEEP (owner: "sweep for ugly icons") — spots the
   hardware/ink-stamp treatment missed. Raw colored emoji read as
   stickers; engrave them like everything else the light touches. ═══ */

/* On paper: ink stamps (matches .home-row-icon treatment) */
.conn-card-glyph {
  filter: grayscale(0.9) sepia(0.5) saturate(1.1) brightness(0.72) contrast(1.15);
}

/* On dark wood: brass engravings (matches .nav-icon treatment) */
.empty-icon, .conn-empty-icon, .srch-empty-icon, .crm-empty-icon,
.comm-row-icon, .conn-view-btn {
  filter: grayscale(1) sepia(0.85) saturate(1.7) brightness(1.05)
          drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}


/* ── STOREROOM · WHERE TO BUY MORE ───────────────────────────────────────────
   Suppliers live in the Storeroom because "what I have" and "where I get more"
   are the same question from opposite ends of the shelf. The caveat is not
   decoration: these names are from 2025-05 and nobody rang them. It renders
   always, never on hover, never behind a toggle. */
/* RUNNING LOW — the reorder strip at the top of the Storeroom (#10). */
.storeroom-low-unit .shelf-unit-header { border-bottom-color: rgba(139,32,32,0.25); }
.storeroom-low-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.storeroom-low-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon name qty" "icon shelf shelf";
  align-items: center;
  column-gap: 8px;
  padding: 8px 10px;
  background: var(--parchment, #E8DCC0);
  border: 1px solid var(--edge, rgba(0, 0, 0, 0.14));
  border-left-width: 3px;
  border-radius: 3px;
}
.storeroom-low-critical { border-left-color: #8B2020; }
.storeroom-low-low      { border-left-color: #B8840F; }
.storeroom-low-icon  { grid-area: icon; font-size: 1.1rem; }
.storeroom-low-name  { grid-area: name; font-family: var(--font-display, serif); font-size: 0.82rem; color: var(--ink, #2B2118); }
.storeroom-low-qty   { grid-area: qty; font-family: var(--font-data, monospace); font-size: 0.72rem; font-weight: 600; }
.storeroom-low-critical .storeroom-low-qty { color: #8B2020; }
.storeroom-low-low      .storeroom-low-qty { color: #8a5f0a; }
.storeroom-low-shelf { grid-area: shelf; font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.storeroom-caveat {
  margin: 8px 0 4px;
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  border-left: 2px solid var(--brass, #C9A84C);
  border-radius: 2px;
}
.storeroom-caveat-low {
  border-left-color: #B0432D;   /* where we are shakiest, it looks different */
}
.storeroom-supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.storeroom-supplier {
  padding: 10px;
  background: var(--parchment, #E8DCC0);
  border: 1px solid var(--edge, rgba(0, 0, 0, 0.14));
  border-radius: 3px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.storeroom-supplier:hover {
  border-color: var(--brass, #C9A84C);
  transform: translateY(-1px);
}
/* Pin every color through hover. This is the third sweep for white-on-parchment;
   inheriting a hover color from a parent card is how it got in twice before. */
.storeroom-supplier-name,
.storeroom-supplier:hover .storeroom-supplier-name {
  font-family: var(--font-display, serif);
  font-size: 0.82rem;
  color: var(--ink, #2B2118);
  margin-bottom: 3px;
}
.storeroom-supplier-what,
.storeroom-supplier:hover .storeroom-supplier-what {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-muted, #6B5D4A);
}
.storeroom-supplier-link,
.storeroom-supplier:hover .storeroom-supplier-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.66rem;
  color: var(--ink-link, #4A6B8B);
  text-decoration: none;
}
.storeroom-supplier-link:hover { text-decoration: underline; }


/* ── EVENTS · NEAR YOU ───────────────────────────────────────────────────────
   The ZIP from Settings > Charter, finally doing something. Every line carries
   its distance and its source, because a market that turns out to be 200 miles
   away or to have closed costs a maker a Saturday. */
.faire-near-you {
  margin-top: 20px;
  padding: 14px;
  background: var(--parchment, #E8DCC0);
  border: 1px solid var(--edge, rgba(0, 0, 0, 0.14));
  border-radius: 3px;
}
.faire-near-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.faire-near-title {
  font-family: var(--font-display, serif);
  font-size: 0.95rem;
  color: var(--ink, #2B2118);
}
.faire-near-place { font-size: 0.7rem; color: var(--text-muted, #6B5D4A); }
.faire-near-source {
  margin-left: auto;
  font-family: var(--font-data, monospace);
  font-size: 0.6rem;
  color: var(--text-muted, #6B5D4A);
}
.faire-near-note {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted, #6B5D4A);
  margin: 6px 0 10px;
}
.faire-near-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.faire-near-card {
  padding: 10px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--edge, rgba(0, 0, 0, 0.12));
  border-radius: 3px;
  transition: border-color 0.15s ease;
}
.faire-near-card:hover { border-color: var(--brass, #C9A84C); }
/* Colors pinned through hover — same bug class as the storeroom cards. */
.faire-near-name,
.faire-near-card:hover .faire-near-name {
  font-family: var(--font-display, serif);
  font-size: 0.8rem;
  color: var(--ink, #2B2118);
  margin-bottom: 4px;
}
.faire-near-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.faire-near-kind,
.faire-near-card:hover .faire-near-kind {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6B5D4A);
}
.faire-near-miles,
.faire-near-card:hover .faire-near-miles {
  margin-left: auto;
  font-family: var(--font-data, monospace);
  font-size: 0.64rem;
  color: var(--ink, #2B2118);
}
.faire-near-detail,
.faire-near-card:hover .faire-near-detail {
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--text-muted, #6B5D4A);
}
.faire-near-src,
.faire-near-card:hover .faire-near-src {
  margin-top: 5px;
  font-family: var(--font-data, monospace);
  font-size: 0.58rem;
  color: var(--text-muted, #6B5D4A);
  opacity: 0.85;
}
.faire-near-foot {
  margin-top: 9px;
  font-size: 0.65rem;
  color: var(--text-muted, #6B5D4A);
}


/* ── FILTER & TAB STRIPS ─────────────────────────────────────────────────────
   The buttons were styled; the strips that hold them never were. `.filter-btn`
   has had rules since forever, but `.asset-filters`, `.forge-filters` and
   spice's `.glaze-filter-strip` had ZERO between them — so every filter row in
   the Hall was unstyled browser default. The owner found it in Spice Blends
   ("the kinds of spices mulling etc"), where the type pills sat as raw white
   boxes. Same wound in Assets and the Forge; nobody had looked.

   `.glaze-tabs` / `.glaze-filter-strip` are debris — spice.js was copied from
   glaze.js, glaze moved on, and its CSS was deleted out from under spice. The
   names stay only because spice is the sole caller; the rules below are what
   they always should have pointed at. */
.glaze-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
  border-bottom: 1px solid var(--border, rgba(201,168,76,0.18));
  padding-bottom: 6px;
}
.glaze-filter-strip,
.asset-filters,
.forge-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}


/* The directory says when it is filtered, and offers the way back. A short list
   that looks like the whole list is the same lie as a market that pretends to
   take carrots — it just costs a maker an opportunity instead of a drive. */
.faire-circuit-note {
  margin: 8px 0 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted, #6B5D4A);
}
/* --ink is #2A2012 and this note hangs on the Hall's wood, not on paper: 1.26:1,
   which is not "dim" but GONE. The count is the whole point of the sentence —
   "Showing 7 of 69" is what keeps the filter from being a silent deletion — and
   it was the one word you could not read. v4's nuclear ink rule covers
   `.faire-card *`; this note sits above the list and never entered a paper
   container. Same shape as the white buttons: a paper token borrowed onto wood. */
.faire-circuit-note strong { color: var(--parchment, #F4E4C0); }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-size: 0.72rem;
  color: var(--ink-link, #4A6B8B);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--brass, #C9A84C); }

/* ── The horizon reading (Ticket 1.3C) — quiet groups within one card ── */
.home-horizon-group {
  font-family: var(--font-data, inherit);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 2px;
}
.home-horizon-parent { color: var(--text-muted); }
/* A long event name in the reason must never crush the work's own name:
   the meta may shrink and ellipsize; the name keeps its room. */
.home-card--horizon .home-row-meta {
  flex: 0 1 auto; min-width: 0; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-horizon-setdown { margin-top: 10px; }
.home-horizon-setdown summary {
  font-family: var(--font-body, inherit);
  font-style: italic;
  font-size: 0.74rem;
  color: var(--text-muted);
  cursor: pointer;
}

/* ── The Undertaking sheet (Ticket 1.3D) — a folio, not a panel ── */
.us-parent {
  font-family: var(--font-body); font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 12px; line-height: 1.5;
}
.us-parent-branch { color: var(--text-muted); opacity: 0.7; }
.us-section-title {
  font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-brass);
  margin: 16px 0 8px;
}
.us-aim-note {
  font-family: var(--font-body); font-style: italic; font-size: 0.72rem;
  color: var(--text-muted); margin: 2px 0 10px;
}
.us-members { list-style: none; margin: 0 0 6px; padding: 0; }
.us-member {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.us-member:last-child { border-bottom: none; }
.us-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-member-kind, .us-member-detail {
  flex: 0 1 auto; font-family: var(--font-data); font-size: 0.64rem; color: var(--text-muted);
  white-space: nowrap;
}
.us-member--gone .us-member-name { font-style: italic; color: var(--text-muted); }
.us-standing-row { margin-top: 14px; }
.us-standing {
  font-family: var(--font-body); font-style: italic; font-size: 0.78rem;
  color: var(--text-muted);
}
.us-standing-note {
  font-family: var(--font-body); font-style: italic; font-size: 0.78rem;
  color: var(--text-muted); align-self: center;
}
.us-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px;
}
.us-actions-gap { flex: 1; }
.us-act-quietest { opacity: 0.75; }

/* ── Beginning an undertaking (Ticket 1.3E) — the Hall's one creation door ── */
.home-horizon-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.home-horizon-begin {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--text-muted); letter-spacing: 0.01em;
}
.home-horizon-begin:hover { color: var(--brass-light); }

/* The creation folio's checkable recognition rows — grouped, calm, no ids. */
.us-pick-group { margin: 10px 0 4px; }
.us-pick-group-title {
  font-family: var(--font-body); font-size: 0.7rem; color: var(--text-muted);
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.us-picks { list-style: none; margin: 0 0 8px; padding: 0; }
.us-pick { border-bottom: 1px solid rgba(255,255,255,0.05); }
.us-pick:last-child { border-bottom: none; }
.us-pick-label {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--text-primary);
}
.us-pick-box { flex: 0 0 auto; align-self: center; }

/* ═══════════════════════════════════════════════════
   MOOD BOARD — the maker's own brand (arc #13)
═══════════════════════════════════════════════════ */
.mb-wrap { max-width: 900px; }
.mb-section {
  margin-bottom: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.mb-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mb-section-head h3 { margin: 0; font-family: var(--font-display, serif); font-size: 1.05rem; color: var(--ink, #2B2118); }
.mb-count { font-family: var(--font-data, monospace); font-size: 0.7rem; color: var(--text-muted); }
.mb-empty { font-size: 0.85rem; color: var(--text-muted); font-style: italic; padding: 14px 4px; }

.mb-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.mb-swatch {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--border-color);
  border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mb-swatch:hover { border-color: var(--brass, #C9A84C); transform: translateY(-1px); }
.mb-swatch-chip {
  width: 42px; height: 42px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.mb-swatch-meta { display: flex; flex-direction: column; min-width: 0; }
.mb-swatch-label { font-size: 0.8rem; color: var(--ink, #2B2118); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-swatch-hex { font-family: var(--font-data, monospace); font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; }

.mb-pin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.mb-pin {
  position: relative; margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px; overflow: hidden;
  background: var(--card-bg);
}
.mb-pin-img { display: block; width: 100%; height: 130px; object-fit: cover; }
.mb-pin-noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; background: rgba(0,0,0,0.04);
}
.mb-pin-cap { padding: 8px 10px; }
.mb-pin-cat { display: block; font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mb-pin-note { display: block; font-size: 0.8rem; color: var(--ink, #2B2118); margin-top: 2px; }

.mb-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 1rem;
  opacity: 0; transition: opacity 0.15s ease;
}
.mb-swatch:hover .mb-del, .mb-pin:hover .mb-del { opacity: 1; }

.mb-add-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.mb-color-input {
  width: 44px; height: 38px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 6px; background: none;
}
.mb-upload-btn { position: relative; cursor: pointer; }
.mb-fineprint { font-size: 0.66rem; color: var(--text-muted); margin-top: 8px; }

/* THIS WEEK — progress over time (arc #8). */
.hw-moved { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.hw-chip {
  font-size: 0.72rem; color: var(--text-muted);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border-color);
  border-radius: 20px; padding: 3px 10px;
}
.hw-chip b { color: var(--ink, #2B2118); font-family: var(--font-data, monospace); font-weight: 700; }
.hw-chip--good { border-color: rgba(82,196,106,0.35); }
.hw-chip--good b { color: #3f9d55; }
.hw-chip--gold { border-color: rgba(201,168,76,0.4); }
.hw-chip--gold b { color: #a6811f; }
.hw-stalled-head {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 12px 0 4px;
  padding-top: 10px; border-top: 1px solid var(--border-color);
}

/* ── The growing strip (Growing Knowledge, 2026-07-24) — the land's calendar,
      read quietly beneath the maker's own ── */
.sch-grow {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-panel); border: var(--border-oak); border-radius: var(--radius-lg);
}
.sch-grow-title {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-brass);
  margin-bottom: 6px;
}
.sch-grow-anchors {
  font-family: var(--font-data); font-size: 0.68rem; color: var(--text-secondary);
  margin-bottom: 8px;
}
.sch-grow-source { color: var(--text-muted); }
.sch-grow-edit-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-family: var(--font-body); font-style: italic; font-size: 0.68rem;
  text-decoration: underline; padding: 0 0 0 6px;
}
.sch-grow-row {
  display: flex; gap: 10px; align-items: baseline; padding: 4px 0;
  font-family: var(--font-body); font-size: 0.78rem; color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sch-grow-row:last-of-type { border-bottom: none; }
.sch-grow-kind { flex: 0 0 auto; color: var(--text-secondary); font-size: 0.72rem; }
.sch-grow-crops { flex: 1; min-width: 0; }
.sch-grow-quiet {
  font-family: var(--font-body); font-style: italic; font-size: 0.76rem;
  color: var(--text-muted); padding: 6px 0;
}
.sch-grow-form { margin-top: 10px; }
.sch-grow-form-note {
  font-family: var(--font-body); font-style: italic; font-size: 0.74rem;
  color: var(--text-muted); margin-bottom: 8px;
}
.sch-grow-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.sch-grow-fields label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-data); font-size: 0.64rem; color: var(--text-muted);
}
.sch-grow-shelters { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.sch-grow-shelters-label {
  font-family: var(--font-data); font-size: 0.64rem; color: var(--text-muted);
  align-self: center;
}
.sch-grow-shelter {
  font-family: var(--font-body); font-size: 0.74rem; color: var(--text-primary);
  display: flex; gap: 5px; align-items: center;
}
.sch-grow-caveat {
  margin-top: 10px; font-family: var(--font-body); font-style: italic;
  font-size: 0.68rem; color: var(--text-muted);
}

/* Its nature (ruling 2026-07-25) — the maker's declaration on a finished piece */
.pe-nature--active {
  border-color: var(--brass) !important; color: var(--text-brass) !important;
  box-shadow: 0 0 6px rgba(201,168,76,0.35);
}
.kiln-card-run { font-family: var(--font-data); font-size: 0.62rem; color: var(--text-muted); }

/* Campaign assets — gathered from the pieces and the Brand Board (2026-07-25) */
.comm-asset-src {
  font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin: 6px 0 4px;
}
.comm-asset-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comm-asset-row:last-of-type { border-bottom: none; }
.comm-asset-thumb {
  width: 34px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
}
.comm-asset-name { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-primary); flex: 1; min-width: 0; }
.comm-asset-row--missing .comm-asset-name { color: var(--text-muted); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   ARRIVAL CINEMA — the threshold, staged
   (Owner 2026-08-19: "it needs some lovely cinematic animation
   during orientation.") Doors part, candlelight blooms, each truth
   rises in its turn; when the charter is raised, wax takes the
   seal, the name inks in, and light floods the Hall. Ceremony is
   EARNED here — founding a business is the realest thing the Hall
   ever witnesses (DELIGHT.md: earned and true, never confetti).
   Fully quieted under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

#onboarding-overlay { overflow: hidden; }

/* The doors: dark oak with a brass seam, parting on arrival. */
#onboarding-overlay::before,
#onboarding-overlay::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 40%),
    url('../assets/tex/wood-photo.jpg'),
    linear-gradient(#2a1709, #170c05);
  background-size: auto, cover, auto;
  pointer-events: none;
}
#onboarding-overlay::before { left: 0;  border-right: 2px solid rgba(201,168,76,.3); box-shadow: -18px 0 40px rgba(0,0,0,.55) inset; }
#onboarding-overlay::after  { right: 0; border-left:  2px solid rgba(201,168,76,.3); box-shadow:  18px 0 40px rgba(0,0,0,.55) inset; }
.arrival-open::before { animation: arrival-door-l 1.7s cubic-bezier(.66,0,.22,1) .35s forwards; }
.arrival-open::after  { animation: arrival-door-r 1.7s cubic-bezier(.66,0,.22,1) .35s forwards; }
@keyframes arrival-door-l { from { transform: translateX(0); } to { transform: translateX(-103%); } }
@keyframes arrival-door-r { from { transform: translateX(0); } to { transform: translateX(103%); } }

/* Candlelight behind the charter — blooms as the doors part, then breathes. */
.arrival-glow {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 46%,
    rgba(255,190,90,.17), rgba(255,150,50,.05) 45%, transparent 70%);
  animation: arrival-glow-in 2.2s ease .6s forwards,
             arrival-breathe 5.5s ease-in-out 2.8s infinite;
}
@keyframes arrival-glow-in { to { opacity: 1; } }
@keyframes arrival-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }

/* The charter panel rises out of the dark as the doors clear it. */
#onboarding-overlay .ob-panel { position: relative; z-index: 2; animation: arrival-panel .9s ease .55s both; }
@keyframes arrival-panel { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Each truth rises in its turn. First render waits for the doors;
   once the overlay is settled, later steps rise almost at once. */
#onboarding-overlay .ob-panel > * { animation: arrival-rise .5s ease both; }
@keyframes arrival-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#onboarding-overlay .ob-panel > *:nth-child(1) { animation-delay: .9s; }
#onboarding-overlay .ob-panel > *:nth-child(2) { animation-delay: 1.05s; }
#onboarding-overlay .ob-panel > *:nth-child(3) { animation-delay: 1.2s; }
#onboarding-overlay .ob-panel > *:nth-child(4) { animation-delay: 1.32s; }
#onboarding-overlay .ob-panel > *:nth-child(5) { animation-delay: 1.42s; }
#onboarding-overlay .ob-panel > *:nth-child(6) { animation-delay: 1.5s; }
.arrival-settled .ob-panel { animation-delay: 0s; animation-duration: .45s; }
.arrival-settled .ob-panel > *:nth-child(1) { animation-delay: .06s; }
.arrival-settled .ob-panel > *:nth-child(2) { animation-delay: .14s; }
.arrival-settled .ob-panel > *:nth-child(3) { animation-delay: .22s; }
.arrival-settled .ob-panel > *:nth-child(4) { animation-delay: .3s; }
.arrival-settled .ob-panel > *:nth-child(5) { animation-delay: .37s; }
.arrival-settled .ob-panel > *:nth-child(6) { animation-delay: .43s; }

/* A craft chosen presses in like a die into wax. */
.ob-type { transition: transform .18s ease; }
.ob-type:active { transform: scale(.96); }
.ob-type.selected { animation: arrival-press .28s ease; }
@keyframes arrival-press { 0% { transform: scale(1.06); } 60% { transform: scale(.97); } 100% { transform: scale(1); } }

/* ── The crossing: wax, name, light ─────────────────────────── */
.arrival-crossing {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
}
.arrival-crossing-on .ob-panel { opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .5s ease, transform .5s ease; }
.arrival-seal {
  width: 110px; height: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 3.1rem;
  background: radial-gradient(circle at 35% 30%, #8c2f24, #5a150e 72%);
  box-shadow: 0 6px 30px rgba(0,0,0,.6), inset 0 2px 6px rgba(255,255,255,.18),
              inset 0 -6px 14px rgba(0,0,0,.45), 0 0 0 3px rgba(201,168,76,.35),
              0 0 46px rgba(255,180,80,.22);
  animation: arrival-stamp .7s cubic-bezier(.2,1.6,.3,1) .25s both;
}
@keyframes arrival-stamp {
  0%   { opacity: 0; transform: scale(2.1) rotate(-10deg); }
  55%  { opacity: 1; transform: scale(.94) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0); }
}
.arrival-charter-name {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: .04em;
  animation: arrival-ink 1s ease 1.05s both;
}
.arrival-word {
  font-family: var(--font-body); font-style: italic;
  color: var(--text-secondary); font-size: .95rem;
  animation: arrival-ink .9s ease 1.75s both;
}
@keyframes arrival-ink {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); letter-spacing: .14em; }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Light floods; the threshold dissolves into the Hall. */
#onboarding-overlay { transition: background .9s ease, opacity .8s ease .25s; }
#onboarding-overlay.arrival-flood { background: rgba(255, 212, 148, .5); opacity: 0; }

/* The quiet version: same truths, no theater. */
@media (prefers-reduced-motion: reduce) {
  #onboarding-overlay::before, #onboarding-overlay::after, .arrival-glow { display: none; }
  #onboarding-overlay .ob-panel, #onboarding-overlay .ob-panel > *,
  .ob-type.selected, .arrival-seal, .arrival-charter-name, .arrival-word { animation: none !important; }
  #onboarding-overlay { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   THE HALL IN YOUR HAND — mobile polish (owner 2026-08-20:
   "we need this to work on a phone and it needs to look cool")
   The drawer becomes a wooden door with a brass seam; the dim
   behind it is candlelit, not gray. Touch targets grow to fingers,
   iOS keeps its zoom to itself, and the notch is respected.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {

  /* ── The header, decluttered: crest, the essentials, nothing else ── */
  #guild-header { padding: 0 10px 0 56px; }        /* room for the ☰ at left */
  .hdr-wordmark { display: none; }                  /* the crest carries it */
  .hdr-guild-name { display: block; max-width: 34vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
  .hdr-btn--wide { max-width: 60px; }
  .hdr-btn--wide .hdr-caret { display: none; }
  .hdr-right { gap: 4px; }
  .hdr-btn { min-width: 40px; min-height: 40px; }

  /* ── The hamburger joins the header bar, brass on oak ── */
  .nav-toggle {
    top: calc((var(--header-height) - 40px) / 2);
    left: 10px;
    z-index: 210;
    background: linear-gradient(180deg, rgba(201,168,76,.12), rgba(0,0,0,.15)), var(--bg-panel);
    box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,236,180,.12);
  }

  /* ── The drawer is a DOOR: wood, brass seam, real shadow ──
     Real planks (wood-photo), not the procedural tile — the generated
     grain shows ring artifacts when it stands alone (owner 2026-08-21:
     "weird rings"). Same recipe as the desktop nav, different region. */
  #guild-nav {
    width: min(300px, 84vw);
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(8,5,2,.6)),
      url('../assets/tex/wood-photo.jpg');
    background-size: auto, 1400px auto;
    background-position: 0 0, -420px -180px;
    border-right: 2px solid rgba(201,168,76,.35);
    box-shadow: 24px 0 60px rgba(0,0,0,.6);
    transition: transform .32s cubic-bezier(.32,.72,.24,1);
    top: 0; height: 100vh; height: 100dvh;
    padding-top: calc(var(--header-height) + 8px);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* The dim behind the door is candlelight failing, not office gray. */
  .nav-overlay { background: rgba(14, 8, 4, 0.68); backdrop-filter: blur(2px); }

  /* ── Fingers, not cursors ── */
  .nav-btn { padding-top: 12px; padding-bottom: 12px; font-size: .92rem; }
  .nav-children .nav-item .nav-btn { padding-top: 10px; padding-bottom: 10px; }
  button, .wfl-btn, .btn-primary { min-height: 40px; }
  .ob-type { min-height: 46px; }

  /* iOS zooms any input under 16px on focus. It may not. */
  input.field-input, .field-input, select, textarea { font-size: 16px !important; }

  /* Wide tables scroll sideways instead of breaking the room. */
  .module-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Arrival on a phone: the charter fills the hand, doors still part. */
  #onboarding-overlay { padding: 12px; }
  .ob-panel { padding: 22px 18px; max-height: 94vh; max-height: 94dvh; }
  .ob-title { font-size: 1.3rem; }
  .arrival-seal { width: 92px; height: 92px; font-size: 2.6rem; }
  .arrival-charter-name { font-size: 1.35rem; }

  /* The notch and the home bar are architecture; build around them. */
  #guild-header { padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); }
  #guild-content { margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .nav-toggle { top: calc(env(safe-area-inset-top, 0px) + (var(--header-height) - 40px) / 2); }
}

/* Small phones: two-column stat grids give way entirely. */
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .kiln-lanes { grid-template-columns: 1fr; }
  .hdr-guild-name { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE READABILITY + THE SCROLL BECKON (owner 2026-08-21:
   "hard to read, especially on the canvas fabric background" and
   "an indicator suggesting more to scroll down to")
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {
  /* The linen keeps its weave, but as a whisper — words win on a
     small bright screen. Overlay up from .55 to .84. */
  .settings-group .field-input, .settings-group .settings-select,
  .modal-content .field-input, .modal-content .settings-select,
  .run-deck .field-input, .run-table .field-input, .run-table .settings-select {
    background-image: linear-gradient(rgba(238,226,192,0.84), rgba(238,226,192,0.84)),
      url('../assets/tex/linen-photo.jpg');
  }

  /* Paper panels calm down the same way: texture stays, contrast rises. */
  .treasury-panel, .treasury-transactions {
    background-image:
      linear-gradient(rgba(242,230,200,0.55), rgba(242,230,200,0.55)),
      url('../assets/tex/paper-photo.jpg'),
      var(--tex-paper-img);
    background-size: auto, cover, 512px 512px;
  }
}

/* The beckon: a small brass "more below" that leaves when you arrive. */
#scroll-hint {
  position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 55; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1; color: var(--brass);
  background: radial-gradient(circle at 50% 35%, rgba(20,12,6,.85), rgba(10,6,3,.65));
  border: 1px solid rgba(201,168,76,.35);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .45s ease;
}
#scroll-hint.on { opacity: .85; animation: hint-beckon 2.4s ease-in-out infinite; }
@keyframes hint-beckon {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}
@media (min-width: 681px) { #scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { #scroll-hint.on { animation: none; } }

/* ═══ THE ICON PLATE — one engraved hand, brass on oak ═══
   (Owner 2026-08-21: "our own set of icons instead of the ones that are
   part of texting… simple to understand, and from same hand crafted land.")
   One stroke weight everywhere = one hand. currentColor = the room decides
   the metal. Unmapped rooms keep their emoji until the plate grows. */
.gh-icon {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#guild-nav .nav-icon { color: var(--brass); display: flex; align-items: center; }
#guild-nav .nav-item.active .nav-icon,
#guild-nav .nav-btn:hover .nav-icon { color: var(--text-bright); }
.nav-children .nav-btn .gh-icon { width: 16px; height: 16px; }
.hdr-btn .gh-icon { width: 18px; height: 18px; margin: 0 auto; color: var(--brass); }

/* ═══ TYPE YOU CAN ACTUALLY READ (owner 2026-08-21: "i can barely make
   out the 'can you read me' in settings — too small or too thin") ═══
   The colour sample exists to test readability; a test printed too small
   to read tests nothing. And primary buttons everywhere take a heavier
   cut — Cinzel at regular weight goes spidery at small sizes, worst on
   a phone in daylight. */
.btn-primary { font-weight: 700; }
.color-sample .btn-primary {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 10px 22px;
}
.color-sample-band { height: 14px; width: 72px; }

/* ═══ CONNECTIONS: PER-ACCOUNT CARDS (UI pass, ticket 2026-08-21) ═══
   One provider, many shops — each answering: which shop, is it working,
   when did the Hall last hear from it. */
.conn-account {
  border: var(--border-oak); border-left: 3px solid var(--brass-dim);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px;
  background: rgba(0,0,0,0.18);
}
.conn-account--attention { border-left-color: #B0532E; }
.conn-account-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conn-account-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--text-bright); }
.conn-account-status { font-size: 0.78rem; color: var(--text-secondary); }
.conn-account-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px;
  font-size: 0.76rem; color: var(--text-muted); }
.conn-account-conflict { color: #C9A84C; }
.conn-account-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.conn-add-account { margin-top: 2px; }
.conn-account-manage { margin-top: 10px; border-top: 1px dashed var(--brass-dim); padding-top: 8px; }

@media (max-width: 680px) {
  .conn-account-acts { flex-direction: column; align-items: stretch; }
  .conn-account-acts .conn-btn { min-height: 42px; }
  .conn-account-head { flex-direction: column; gap: 2px; }
}

/* ═══ THE HALL'S OWN ASKING (GuildPrompt) ═══ */
.ghp-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14, 8, 4, 0.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ghp-panel {
  width: 100%; max-width: 420px;
  background: var(--bg-panel); border: 1px solid var(--brass-dim);
  border-radius: var(--radius-lg); box-shadow: 0 20px 60px var(--shadow-deep);
  padding: 22px 22px 18px;
  animation: arrival-panel .35s ease both;
}
.ghp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--text-bright); margin-bottom: 8px; }
.ghp-text { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 14px; }
.ghp-input { width: 100%; margin-bottom: 14px; }
.ghp-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ghp-option {
  text-align: left; padding: 12px 14px; min-height: 46px; cursor: pointer;
  background: rgba(201,168,76,0.07); border: 1px solid var(--brass-dim);
  border-radius: var(--radius-sm); color: var(--text-bright);
  font-family: var(--font-body); font-size: 0.9rem;
  display: flex; flex-direction: column; gap: 2px;
}
.ghp-option:hover { background: rgba(201,168,76,0.14); }
.ghp-option-sub { font-size: 0.74rem; color: var(--text-muted); }
.ghp-acts { display: flex; justify-content: flex-end; gap: 10px; }
.ghp-acts button { min-height: 42px; }
@media (prefers-reduced-motion: reduce) { .ghp-panel { animation: none; } }

/* The photo-area placeholder: the plate's empty frame, not an emoji.
   (Owner 2026-08-21.) Sized to sit quietly where a portrait will live. */
.product-card-image .gh-icon--placeholder,
.cs-view .gh-icon--placeholder {
  width: 42px; height: 42px; margin: 0 auto;
  color: var(--brass-dim); opacity: 0.75; stroke-width: 1.4;
}
.cs-view .gh-icon--placeholder { width: 30px; height: 30px; }
/* Default placeholder size anywhere else it appears (e.g. the sheet's view
   boxes, which style themselves inline). */
.gh-icon--placeholder { width: 34px; height: 34px; color: var(--brass-dim); opacity: 0.75; }

/* ═══ READABILITY, ROUND TWO (owner 2026-08-21: "some text is still too
   small or thin to easily read") — the SYSTEMATIC fix, phone-scoped.
   The stylesheet holds ~230 declarations at or under 0.75rem: fine under a
   desk lamp at 27", punishing on glass in a hand. Three moves, no
   whack-a-mole:
     1. the root grows — every rem in the Hall scales together, hierarchy
        intact;
     2. the muted inks get more pigment — #6A5A3A on dark wood was the
        whisper doing a label's job;
     3. the micro-labels (ids, pills, section titles) get a floor and the
        heavier Cinzel cut, because thin + tiny + uppercase is the exact
        recipe for squinting. ═══ */
@media (max-width: 680px) {
  html { font-size: 17.5px; }

  :root {
    --text-muted:     #8F7B54;
    --text-secondary: #BCA477;
  }

  .stat-label, .quest-label, .product-card-id, .product-card-status,
  .kiln-card-id, .cs-product-id, .glaze-id, .sc-code,
  .fi-section-title, .fi-label, .treasury-label, .field-label,
  .transaction-date, .log-time, .shelf-item-name, .asset-category,
  .storeroom-item-unit, .lore-tag, .faire-pill, .faire-track-label span,
  .settings-sublabel, .settings-label, .ob-label,
  .conn-account-meta, .conn-account-status, .comm-section-title,
  .module-subtitle, .home-inv-label, .home-inv-sub {
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
}

/* ═══ BRAND BOARD LEGIBILITY (owner screenshot 2026-08-21): the Palette and
   Brand Assets headers wore parchment ink (--ink) painted straight onto
   dark wood — engraved into invisibility. They speak in the Hall's bright
   voice now, and the empty-state whispers gain pigment. ═══ */
.mb-section-head h3 { color: var(--text-bright); }
.mb-count { color: var(--text-brass); }
.mb-empty { color: var(--text-secondary); }

/* ═══ THE HEADER, FINISHED (owner punch list: "Mai…" and "Susa…" look
   broken rather than abbreviated; the red/green dots are ambiguous) ═══ */
.hdr-btn { position: relative; }
#hdr-notif-badge { position: absolute; top: 4px; right: 4px; }
#sync-dot-btn .sync-dot { position: absolute; bottom: 5px; right: 5px; width: 9px; height: 9px; }
#sync-dot-btn .gh-icon, .hdr-btn--wide > .gh-icon { display: none; }  /* desktop keeps its words */

@media (max-width: 680px) {
  /* Words give way to marks: banner for the guilds, initial for the maker. */
  #hdr-switcher-label, #hdr-profile-label, .hdr-btn--wide .hdr-caret { display: none; }
  .hdr-btn--wide { width: 40px; max-width: 40px; padding: 0; justify-content: center; }
  .hdr-btn--wide > .gh-icon, #sync-dot-btn .gh-icon { display: block; }
  #hdr-profile-btn::after {
    content: attr(data-initial);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
    background: rgba(201,168,76,0.16); border: 1px solid var(--brass-dim);
    font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
    color: var(--brass-light);
  }
}

/* ═══ VISUAL PASS, ROUND THREE (owner screenshots 2026-08-21) ═══ */

/* Craft chips: the label must read on the dark plaque in EVERY room —
   the Charter's grid was showing dark ink on dark wood. */
.ob-type-label { color: var(--parchment, #F0E4C6); }
.ob-type { min-height: 72px; }
.ob-type.selected .ob-type-label { color: var(--brass-light, #E8C97A); }

/* The calm strip: two zeros don't deserve two tall parchment walls. */
.home-inv-strip--calm .home-inv-stat--calm {
  padding: 14px 18px; min-height: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.home-inv-strip--calm .home-inv-sub { font-style: italic; }

@media (max-width: 680px) {
  /* Settings rows were three columns squeezed until words fell one per
     line ("One / tap / sorts / faires"). On a phone a row is a STACK:
     label, then control, then side-note, each at full width. */
  .settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .settings-row > div { max-width: none !important; width: auto !important; }
  .s-crest-controls { justify-content: flex-start; flex-wrap: wrap; }

  /* Guidance speaks in whole sentences: wrap, never clip mid-thought
     ("Autumn & Back to School is 11 days o…"). */
  .home-row-text { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* The bell's badge: a small ember on the bell's own shoulder — not a
   planet drifting toward the sync arrows. */
#hdr-notif-badge {
  top: 3px; right: 3px; width: 9px; height: 9px; min-width: 9px;
  padding: 0; border-radius: 50%; font-size: 0; line-height: 0;
  border: 1px solid rgba(20,12,6,.8);
}

/* When the road runs DOWN the page, the move buttons stack the same way —
   ▲ above ▼ on the card's right shoulder, each a full finger tall.
   (Owner 2026-08-21: "arrows should be stacked up above down.") */
.wfb-board--down .wfb-card { position: relative; }
.wfb-board--down .wfb-card-actions { justify-content: flex-start; padding-right: 60px; }
.wfb-board--down .wfb-move {
  position: absolute; right: 10px; width: 46px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; padding: 0;
}
.wfb-board--down .wfb-move[data-dir="-1"] { top: 10px; }
.wfb-board--down .wfb-move[data-dir="1"]  { top: 52px; }

/* ═══ BOARD TOOLBAR: words on the wood, round two (owner 2026-08-21:
   "the print is hard to read") — the Workflow label, the piece-count
   meta and the resting tab all sat in muted ink on dark planks. By
   firelight rules, brighter. (And "kiln_fired" now reads "kiln fired" —
   makers don't speak in underscores.) ═══ */
.wfb-label { color: #C8B48A; }
.wfb-meta  { font-size: 0.78rem; color: #B9A67B; }
.wf-tab    { color: #B9A67B; }
.wfb-dir-btn { color: #C8B48A; }

/* ═══ THE HEADER MADE CALM (owner: "the menu at top does not look
   awesome") — one family of quiet marks: the hamburger drops its heavy
   plaque and joins the bare-brass icons; the uploaded crest trades its
   hard square for a soft-cornered seal; even breathing room throughout. ═══ */
@media (max-width: 680px) {
  .nav-toggle {
    background: none; border: none; box-shadow: none;
    width: 44px; height: 44px; font-size: 1.45rem; color: var(--brass);
  }
  .guild-crest-img--hdr {
    width: 34px; height: 34px; border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35), 0 1px 3px rgba(0,0,0,0.5);
  }
  .hdr-crest { font-size: 1.5rem; }
  .hdr-brand { padding: 2px 4px; }
  #guild-header { padding-left: 54px; }
  .hdr-right { gap: 6px; }
}

/* ═══ THE BOARD'S TOOLBAR, COMPOSED (owner 2026-08-21: "the workflow /
   handbuilding / templates and item code and edit and across buttons are
   not great") — on a phone the loose row of mismatched controls becomes
   ONE quiet plaque: the road picker full-width on top, one even rank of
   buttons beneath it, the meta line resting last. One border, one height,
   one family. ═══ */
@media (max-width: 680px) {
  .wf-tab { padding: 12px 16px; font-size: 0.92rem; }

  .wfb-toolbar {
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: var(--radius-md);
    padding: 12px;
    gap: 10px;
  }
  .wfb-label {
    flex: 1 1 100%;
    flex-direction: column; align-items: stretch; gap: 6px;
    font-size: 0.85rem;
  }
  .wfb-label select.field-input {
    width: 100%; min-height: 46px;
    background: rgba(20, 12, 6, 0.65);
    background-image: none;
    color: var(--parchment, #F0E4C6);
    border: 1px solid rgba(201,168,76,0.45);
    font-size: 16px; font-family: var(--font-body);
  }
  .wfb-toolbar .wfl-btn, .wfb-toolbar .wfb-dir-btn {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    padding: 0 14px;
    flex: 1 1 auto;
  }
  .wfb-more { flex: 0 0 auto; }
  .wfb-more > summary.wfl-btn { width: 48px; flex: 0 0 48px; font-size: 1.1rem; }
  .wfb-meta { flex: 1 1 100%; order: 10; margin-top: 2px; }
  .wfb-more-menu { position: static; margin-top: 8px; }
  .wfb-more-menu .wfl-btn { width: 100%; margin-bottom: 6px; }
}

/* ═══ HIERARCHY, NOT AESTHETICS (owner review 2026-08-21): "empty lanes
   collapse, occupied lanes expand" — the work should reach the eye
   sooner. Phone-scoped; the desktop keeps its breathing room. ═══ */
@media (max-width: 680px) {

  /* 1 · A vacant lane is one honest strip — name, zero, done. The tall
     parchment rectangle holding a dash told a phone nothing four times. */
  .wfb-board--down .wfb-col--vacant .wfb-col-body { display: none; }
  .wfb-board--down .wfb-col--vacant { min-height: 0; }
  .wfb-board--down .wfb-col--vacant .wfb-col-head { padding: 10px 14px; }
  .wfb-board--down .wfb-col--vacant .wfb-col-name { opacity: 0.75; }
  .wfb-board--down .wfb-col { min-height: 0; }

  /* 2 · The road header, compressed to two lines: the picker, then one
     compact rank — meta · … · direction. Edit lives inside "…" here
     (it's the first item); the standalone button returns on desktop. */
  .wfb-toolbar > [data-wf-edit] { display: none; }
  .wfb-dir-btn { flex: 0 0 48px !important; padding: 0 !important; font-size: 1rem; }
  #wfl-tidy { flex: 1 1 100%; }

  /* 3 · The move arrows step back to edge controls — present, quiet,
     never competing with the piece's name or its red need. */
  .wfb-board--down .wfb-move {
    width: 34px; height: 26px; font-size: 0.62rem;
    border-color: rgba(201,168,76,0.28); color: rgba(201,168,76,0.75);
    background: rgba(0,0,0,0.04);
  }
  .wfb-board--down .wfb-move[data-dir="-1"] { top: 8px; }
  .wfb-board--down .wfb-move[data-dir="1"]  { top: 38px; }
  .wfb-board--down .wfb-card-actions { padding-right: 44px; }

  /* 5 · The top bar earns its width: the guild switcher is a rare act and
     leaves the phone's always-row; the bell keeps clear air so its ember
     can't be read as part of the sync glyph. */
  #hdr-guild-switcher-btn { display: none; }
  #hdr-notifications-btn { margin-right: 4px; }
}

/* Desktop hides the kebab's duplicate Edit — the standalone button owns it there. */
@media (min-width: 681px) {
  .wfb-more-edit { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   THE GUILD CARD LANGUAGE (owner ticket 2026-08-21)
   Cards represent durable things; travelers beneath them show what
   is happening. Specimen card × shop traveler × illuminated ledger —
   unmistakably Guild Hall, never a game. The photo stays the star;
   the ornament is a hinge, a ribbon, a gem — never a border feast.
   ═══════════════════════════════════════════════════════════════ */

/* ── The jewel inks: stained glass set in brass, not SaaS paint ── */
:root {
  /* Jewel tones pinned to the owner's style sheet (2026-08-22). */
  --guild-emerald:  #0F6B4F;   /* ready · healthy · connected */
  --guild-garnet:   #7C0F1A;   /* blocked · attention · careful */
  --guild-sapphire: #0D3B7E;   /* information · navigation · word */
  --guild-amethyst: #5B2A86;   /* wisdom · creativity · special */
  --guild-teal:     #0E665E;   /* active · selected · working */
  --guild-topaz:    #BB7400;   /* waiting · drying · due soon */
}

.guild-card {
  position: relative;
  border-radius: 10px;
  perspective: 1200px;
  margin-bottom: 14px;
}
.gc-faces { position: relative; transition: transform .45s cubic-bezier(.4,.1,.2,1); transform-style: preserve-3d; }
/* ═══ FRAME FAMILIES — THE LIBRARY SWEPT IN (owner 2026-08-22: "lets
   sweep the color and pizazz in"). Each card wears its DRAWN frame from
   assets/guild-card/frames/ via border-image: corners stay true at every
   size, the band stretches, the center stays parchment. Brass Corner =
   pieces & products; Wood & Brass = tools; Gilded Scroll = one-of-a-kind;
   Leather Bound = shows & campaigns; Enamel Inlay dresses the pinned. ═══ */
/* THE RAILS AND THE CORNERS (owner 2026-09-06: "should be using rails as
   side of frame and the corner brass at corners"): the frame is BUILT the
   way the physical thing would be — bronze rails along every edge
   (frame-rails.png, composed from the standardized rail masters, sliced
   so the rails stretch and never distort) and brass corner fittings laid
   over the four corners. A piece wears the PLAIN brass corners; the
   FANCY oak-leaf corners are earned when it becomes a product (owner:
   "they get fancy corners when it becomes a product"). The frame-family
   classes stay in the markup as hooks; one rail frame dresses them all. */
.guild-card {
  --gc-frame: url('../assets/standardized/frame-rails.png');
  --gc-slice: 48; --gc-bw: 13px;
}

/* The corner fittings ride the card itself, overhanging the rails like
   real hardware — fixed size, never distorted, above both faces. */
.gc-corner {
  position: absolute; width: 44px; height: 38px; z-index: 3;
  pointer-events: none; background-size: contain; background-repeat: no-repeat;
}
.gc-corner--tl { top: 0; left: 0;
  background-image: url('../assets/standardized/corners/brass-corner-upper-right-v1.webp');
  background-position: top right; transform: scaleX(-1); }
.gc-corner--tr { top: 0; right: 0;
  background-image: url('../assets/standardized/corners/brass-corner-upper-right-v1.webp');
  background-position: top right; }
.gc-corner--bl { bottom: 0; left: 0;
  background-image: url('../assets/standardized/corners/brass-corner-lower-left-v1.webp');
  background-position: bottom left; }
.gc-corner--br { bottom: 0; right: 0;
  background-image: url('../assets/standardized/corners/brass-corner-lower-right-v1.webp');
  background-position: bottom right; }
/* Become a product, earn the oak leaves. */
.gc--product .gc-corner { width: 52px; height: 46px; }
.gc--product .gc-corner--tl { transform: none; background-position: top left;
  background-image: url('../assets/standardized/corners/guild-hall-fancy-brass-corner-0002-upper-left-v1.webp'); }
.gc--product .gc-corner--tr {
  background-image: url('../assets/standardized/corners/guild-hall-fancy-brass-corner-0003-upper-right-v1.webp'); }
.gc--product .gc-corner--bl {
  background-image: url('../assets/standardized/corners/guild-hall-fancy-brass-corner-0000-bottom-left-v1.webp'); }
.gc--product .gc-corner--br {
  background-image: url('../assets/standardized/corners/guild-hall-fancy-brass-corner-0001-bottom-right-v1.webp'); }

.gc-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; overflow: hidden;
  background-color: var(--paper, #EFE3C4);
  background-image: url('../assets/tex/paper-photo.jpg');
  background-size: cover;
  background-clip: padding-box;
  /* Fallback timber shows if a frame drawing ever fails to load —
     never an invisible 13px gap. */
  border: var(--gc-bw, 20px) solid rgba(94,63,30,0.55);
  border-image: var(--gc-frame) var(--gc-slice, 36) / var(--gc-bw, 20px) stretch;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  color: var(--ink, #2B2118);
}
/* (The overlay corner fittings retired 2026-08-22 — the painted frames
   carry their own corner hardware, cut from the board itself.) */

.gc-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow-y: auto; }
.guild-card.gc-flipped .gc-faces { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .gc-faces { transition: none; transform: none !important; }
  .gc-back { position: absolute; transform: none; display: none; }
  .guild-card.gc-flipped .gc-back { display: block; z-index: 2; }
}

/* ── The media window: a carousel of real documentation ── */
.gc-media {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; height: 190px; background: rgba(30, 20, 10, 0.18);
  border-bottom: 1px solid rgba(90, 66, 34, 0.35);
}
.gc-media-shot { flex: 0 0 100%; object-fit: cover; scroll-snap-align: center; width: 100%; }
/* A supplier's mark is an EMBLEM, not a photograph: shown whole on
   parchment at a modest size, never stretched into mush (Supply
   Intelligence 2026-09-16). */
[data-gc-kind="supplier"] .gc-media-shot {
  object-fit: contain; padding: 14%; box-sizing: border-box;
  background:
    radial-gradient(80% 80% at 50% 45%, rgba(255,255,255,0.5), rgba(0,0,0,0) 70%),
    #EFE3C4 url('../assets/tex/paper-photo.jpg') center / cover;
  image-rendering: auto; }
/* An empty window is a parchment MAT waiting for its picture — not a dark
   void (owner 2026-08-22 phone look). Dashed inner line marks the slot. */
.gc-media.gc-media--empty {   /* out-specifies the later dark-backing rule */
  align-items: center; justify-content: center; flex-direction: column; gap: 8px; height: 120px;
  background-color: #E4D5B0;
  background-image: url('../assets/tex/paper-photo.jpg');
  background-size: 420px auto; background-blend-mode: multiply;
  outline: 1.5px dashed rgba(120,92,46,0.55); outline-offset: -8px;
}
.gc-media-invite { font-family: var(--font-body); font-style: italic; font-size: 0.82rem; color: #5C4A2E; }

/* ── The name plate ── */
.gc-plate { padding: 12px 14px 12px; }
.gc-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gc-name { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: #241B10; }
.gc-flip {
  background: none; border: 1px solid rgba(120, 92, 46, 0.5); border-radius: 50%;
  width: 30px; height: 30px; min-height: 30px; cursor: pointer; color: #6E552C; font-size: 0.95rem;
  flex: 0 0 30px;
}
.gc-flip:hover { background: rgba(160,126,60,0.12); }

/* Type = heraldic ribbon tab · Stage = enamel gem. Never color alone. */
.gc-marks { display: flex; align-items: center; gap: 8px; margin: 7px 0 2px; flex-wrap: wrap; }
.gc-type-ribbon {
  font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #F3E9CE; background: var(--guild-sapphire);
  padding: 3px 9px 3px 7px; border-radius: 2px 3px 3px 2px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.35);
}
.gc-stage-gem {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #4A3A20;
}
.gc-stage-gem::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  /* Faceted, gold-set jewels per the style sheet: a highlight, cut faces,
     the stone, and a brass bezel ring. */
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), rgba(255,255,255,0) 40%),
    conic-gradient(from 40deg,
      rgba(255,255,255,0.22) 0 14%, rgba(0,0,0,0.22) 14% 28%,
      rgba(255,255,255,0.12) 28% 45%, rgba(0,0,0,0.28) 45% 62%,
      rgba(255,255,255,0.18) 62% 80%, rgba(0,0,0,0.18) 80% 100%),
    var(--gem, var(--guild-teal));
  box-shadow: 0 0 0 2px #A97E2F, 0 0 0 3px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.45);
}
.gc-views { font-family: var(--font-data, monospace); font-size: 0.62rem; color: #7A6844; margin-left: auto; }

/* The needs plate: ONE line, marker set beside the words (owner 2026-08-22
   — the diamond had wrapped under the text with the old red bar doubling
   it). A quiet parchment strip, garnet-edged, like the sheet's example. */
.gc-needs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-style: italic; font-size: 0.85rem;
  color: var(--guild-garnet); margin: 2px 0 4px;
  padding: 7px 10px; border-radius: 5px;
  border: 1px solid rgba(124,15,26,0.35);
  background: rgba(124,15,26,0.05);
}
.gc-needs--waiting { border-color: rgba(187,116,0,0.4); background: rgba(187,116,0,0.06); }
/* The attention markers are the DRAWN jewels from the library (owner
   2026-08-22 sweep): garnet diamond for blocked, topaz ring for waiting.
   The glyph stays in the markup for meaning; the drawing wears its face. */
.gc-needs-mark { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px;
  vertical-align: -2px; font-size: 0; font-style: normal;
  background: url('../assets/standardized/markers/guild-hall-markers-red-diamond-marker-v1.webp') center / contain no-repeat; }
.gc-needs--decision .gc-needs-mark {
  background-image: url('../assets/standardized/markers/guild-hall-markers-orange-circle-marker-v1.webp'); }
.gc-needs--materials .gc-needs-mark {
  background-image: url('../assets/standardized/markers/guild-hall-markers-yellow-triangle-marker-v1.webp'); }
.gc-needs--waiting .gc-needs-mark {
  background-image: url('../assets/standardized/markers/guild-hall-markers-aqua-star-marker-v1.webp'); }
.gc-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  font-family: var(--font-body); font-size: 0.8rem; color: #4A3B24; }
.gc-dot { color: #A08752; }
.gc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.gc-ident { font-family: var(--font-data, monospace); font-size: 0.66rem; color: #8A7550; letter-spacing: 0.04em; }
.gc-unfold {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--guild-sapphire); text-transform: uppercase;
  padding: 6px 4px; min-height: 32px;
}

/* ── The back: reference, calm, structured ── */
.gc-back-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px 6px; border-bottom: 1px solid rgba(120,92,46,0.3); }
.gc-back-title { font-family: var(--font-display); font-weight: 700; color: #241B10; }
.gc-back-list { margin: 0; padding: 10px 14px 14px; }
.gc-back-list dt { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #7A6338; margin-top: 8px; }
.gc-back-list dd { margin: 2px 0 0; font-family: var(--font-body); font-size: 0.85rem; color: #35291A; }
.gc-back-empty { font-style: italic; color: #7A6844; }

/* ── The traveler: a stitched scroll beneath the card (owner design system
   2026-08-22). LIGHT parchment, dark ink — the maker's next step must be
   readable in one glance; the old dark texture swallowed the words
   (owner: "this is unreadable"). The dashed inset line is the stitching. ── */
.gc-traveler {
  margin: -4px 10px 0; padding: 16px 16px 12px;
  background-color: #EFE3C4;
  background-image: url('../assets/tex/paper-photo.jpg');
  background-size: 420px auto; background-blend-mode: multiply;
  border: 1px solid rgba(90,66,34,0.55); border-top: 2px dashed rgba(120,92,46,0.55);
  border-radius: 0 0 10px 10px;
  outline: 1px dashed rgba(120,92,46,0.5); outline-offset: -6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 6px 8px -6px rgba(0,0,0,0.3);
  color: #2B2118;
}
.gc-step { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  font-family: var(--font-body); font-size: 0.92rem; color: #2E2415; }
.gc-step--pick .gc-step-name { font-weight: 600; }
.gc-step-gem { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px;
  border: 1.5px solid rgba(120,92,46,0.7); background: transparent; }
/* Walked stages wear a check, not a strike (owner style sheet 2026-08-22). */
.gc-step--done { color: #4E6B4A; }
.gc-step--done .gc-step-gem { background: var(--guild-emerald); border-color: rgba(120,92,46,0.9);
  display: inline-flex; align-items: center; justify-content: center; }
.gc-step--done .gc-step-gem::before { content: '✓'; font-size: 7px; line-height: 1;
  color: #F3E9CE; font-weight: 700; }
.gc-step--done .gc-step-name { text-decoration: none; }
.gc-step--current { color: #241B10; font-weight: 700; }
.gc-step--current .gc-step-gem {
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), transparent 40%), var(--guild-teal);
  box-shadow: 0 0 0 2px rgba(160,126,60,0.6);
}
.gc-step-here { font-size: 0.7rem; font-style: italic; color: var(--guild-teal); }

/* Attention: a garnet edge, quiet until it isn't. Pin: the enamel frame
   (set above with the frame families — the drawn inlay IS the clasp now). */
.gc--attention .gc-front { border-left: 4px solid var(--guild-garnet); }

/* ── Collection shelves ── */
.gc-shelf-title { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-brass); margin: 18px 0 10px; }
.gc-collection { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) {
  .gc-collection { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
}

/* (The floating MAKE ＋ seal retired 2026-08-22 — owner: "get rid of the
   bonus button at bottom." The Studio's MAKE button is the one front door,
   and it wears the brass guild seal itself — a stamp, not a SaaS button.) */
#btn-new-product {
  background: radial-gradient(circle at 30% 25%, #E8C97A, #A97E2F 62%, #7A5A1E);
  border: 2px solid rgba(201,168,76,0.8); border-radius: 999px;
  color: #2A1B08; font-family: var(--font-heading); font-weight: 700;
  letter-spacing: 0.12em; padding: 13px 30px; min-height: 48px;
  text-shadow: 0 1px 0 rgba(255,246,210,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,246,210,0.55),
    inset 0 -3px 5px rgba(0,0,0,0.25);
}
#btn-new-product:active { transform: scale(0.97); }

/* ═══ THE POP-OUT (owner 2026-08-22): tap the art, the photo takes the
   screen — object-contain on near-black, swipe between shots, a brass ✕
   or the dark edge to come back. Above every panel. ═══ */
.gc-lightbox {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(14, 9, 4, 0.94);
  display: flex; align-items: center; justify-content: center;
  animation: overlayFadeIn 160ms ease;
}
.gc-lightbox-reel {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.gc-lightbox-shot {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; scroll-snap-align: center;
  padding: 30px 10px calc(30px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.gc-lightbox-close {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, #E8C97A, #A97E2F 65%, #7A5A1E);
  border: 1px solid rgba(201,168,76,0.7); color: #2A1B08;
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,246,210,0.5);
}
.gc-lightbox-count {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-data, monospace); font-size: 0.8rem; color: #E8C97A;
  background: rgba(20,12,6,0.75); padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(201,168,76,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .gc-lightbox { animation: none; }
}

/* ═══ THE STUDIO DECK (owner 2026-08-22): the bench shows its pieces AS
   their guild cards — full width on the phone, the accordion beneath each
   walking production. The old product-card tiles retired. ═══ */
.product-grid:has(> .gc-collection) { display: block; }
/* The Batches room deals a deck now (2.0 step 3a) — when it does, the old
   five-lane grid stands down and the deck's own grid rules the spread. */
.kiln-lanes:has(> .gc-collection), .kiln-lanes:has(> .gc-phase-note),
.kiln-lanes:has(> .gc-deck) {
  display: block; min-height: 0;
}
.ws-card-slot { min-width: 0; max-width: 100%; }
.ws-card-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 2px 18px;
}
.ws-card-strip .sample-badge { position: static; }

/* ═══ THE ITEM PANEL (owner 2026-08-22): "when you select a card it should
   not get smaller within another box… it should get bigger to fill the
   screen, then additional information that is scrollable shows up — so it's
   clear you are inside that item's info/control panel." The piece modal is
   a full-screen takeover: the card large at the top, the rest of its truth
   scrolling beneath, one back door leading left out of it. ═══ */
#modal-product { padding: 0; align-items: stretch; justify-content: center; }
#modal-product .modal-panel {
  max-width: none; max-height: none; width: min(920px, 100%);
  height: 100dvh; border-radius: 0; border-left: none; border-right: none;
  animation: none;
}
#modal-product .modal-header {
  border-radius: 0; gap: 12px; justify-content: flex-start;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
}
#modal-product .modal-back {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--brass-light);
  min-height: 40px; min-width: 64px; padding: 4px 10px 4px 6px;
  border: 1px solid var(--brass-dim); border-radius: var(--radius-sm);
}
#modal-product .modal-title { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#modal-product .modal-body {
  padding: 12px 10px calc(28px + env(safe-area-inset-bottom, 0px));
}
/* The card spans the panel; the legacy fields stack beneath it, single
   column on the phone (the desktop keeps its two columns). */
#modal-product .pe-cardtop { margin: 0 0 10px; }
@media (max-width: 680px) {
  #modal-product .pe-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GUILD CARD CORRECTION (owner 2026-08-21): KEEP THE TRADING-CARD
   CANVAS · FIT THE VIEWPORT · PROCESS IN AN ACCORDION BENEATH.
   Why it panned: the collection used `1fr` (grid min-width:auto let
   an intrinsic-width photo widen the column past the phone), the
   back face was absolute with its own scrollbar, and the traveler
   lived inside the article. All three corrected below.
   ═══════════════════════════════════════════════════════════════ */

/* The whole physical card fits its column. Always. */
.gc-collection { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .gc-collection { grid-template-columns: repeat(auto-fill, minmax(300px, 380px)); justify-content: start; }
}
.gc-unit { min-width: 0; max-width: 100%; margin-bottom: 18px; }
.guild-card { min-width: 0; max-width: 100%; margin-bottom: 0; overflow: visible; }
.gc-face { min-width: 0; }
.gc-plate, .gc-back-list, .gc-facts, .gc-marks { overflow-wrap: anywhere; }

/* Both faces share ONE footprint: stacked in the same grid cell, the
   card stands as tall as its taller side — nothing clips, nothing
   scrolls inside, no absolute positioning to overflow. */
.gc-faces { display: grid; }
.gc-face { grid-area: 1 / 1; }
.gc-back { position: static; transform: rotateY(180deg); overflow: visible; }

/* The photo window: a FIXED frame with card-like proportion; only the
   picture slides inside it. Dots follow the swipe. */
.gc-media { aspect-ratio: 5 / 4; height: auto; min-width: 0; }
.gc-media-shot { min-width: 100%; width: 100%; height: 100%; }
.gc-media--empty { aspect-ratio: auto; min-height: 110px; }
/* The dots live INSIDE the photo's bottom edge (owner mockup 2026-09-06). */
.gc-media-dots { display: flex; justify-content: center; gap: 5px;
  position: relative; z-index: 3; margin-top: -22px; padding: 0 0 12px;
  pointer-events: none; }
.gc-media-dot { width: 6px; height: 6px; border-radius: 50%;
  background: rgba(120,92,46,0.35); border: 1px solid rgba(120,92,46,0.5); }
.gc-media-dot--on { background: var(--guild-topaz); }

/* Fingers: the flip control grows to a true target. */
.gc-flip { width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; font-size: 1.05rem; }
/* ⟳ and ••• are brass plates beside the Piece ID (the sheet's example). */
.gc-foot-acts { display: flex; gap: 8px; margin-left: 10px; }
.gc-foot-acts .gc-flip, .gc-more {
  width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px;
  border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #D9B25F, #A97E2F 60%, #8A6425);
  border: 1px solid rgba(107,74,28,0.9); color: #2A1B08;
  font-size: 1.02rem; font-weight: 700;
  box-shadow: inset 0 1px 1px rgba(255,246,210,0.55), 0 2px 4px rgba(0,0,0,0.4);
}
.gc-more { font-size: 0.8rem; letter-spacing: 0.05em; }
.gc-foot-acts .gc-flip:hover, .gc-more:hover { filter: brightness(1.06); }

/* ── THE PROCESS ACCORDION — a traveler tucked beneath the card ── */
.gc-process { margin: 2px 12px 0; }
/* The PROCESS bar is teal enamel (owner style sheet 2026-08-22). */
.gc-process-head {
  width: 100%; min-height: 44px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background-color: var(--guild-teal);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.2));
  border: 1px solid rgba(160,126,60,0.55); border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #EDF5EF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.gc-process-chev { color: #EDF5EF; font-size: 0.75rem; }
.gc-process-where { margin-left: auto; color: rgba(237,245,239,0.85); font-weight: 600; letter-spacing: 0.05em; }
.gc-process .gc-traveler {
  margin: 0; border-radius: 0 0 10px 10px; border-top: 1px dashed rgba(120,92,46,0.5);
}
.gc-process:has(.gc-traveler:not([hidden])) .gc-process-head { border-radius: 0; }

/* Process actions read as part of the traveler, quiet and thumb-sized. */
.gc-road-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed rgba(120,92,46,0.45); }
.gc-road-acts button { min-height: 42px; flex: 1 1 auto;
  border: 1px solid rgba(120,92,46,0.5); border-radius: var(--radius-sm);
  background: rgba(255,250,235,0.4); color: #4A3A20;
  font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; }
.gc-road-acts .gc-sell { border-color: var(--guild-emerald); color: var(--guild-emerald); font-weight: 700; }

.gc-full { display: block; margin: 0 14px 14px; min-height: 42px; width: calc(100% - 28px);
  background: none; border: 1px solid rgba(120,92,46,0.5); border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--guild-sapphire); cursor: pointer; }

/* ═══ THE AKROMA VIBE (owner 2026-08-21): name band above the art, the
   TYPE LINE beneath it, a rules panel, an italic flavor line, and the
   collector strip at the foot — the anatomy people already know how to
   read, in the Hall's own materials. Never anyone's actual design. ═══ */
/* THE PAINTED RIBBON (owner 2026-09-06: "why are you not using the
   correct assets from my desktop folders?" — no more drawn imitations;
   assembly per docs/reference/mockup-phone-piece-card.png). The name
   rides the owner's own painted title ribbon, nine-sliced so the
   dovetail ends stay true at every width. It is TACKED ACROSS THE CARD
   like the real thing — riding the article above both faces, its ends
   draping PAST the card's edges, its lower half lying over the photo.
   Flip the card and the ribbon steps aside; the back speaks for itself. */
/* ⚓ RIBBON GEOMETRY — LOCKED (owner 2026-09-06: "once ribbon is in
   accurate in place lock it so it stays"). The ribbon is anchored to the
   CARD'S OWN LANDMARKS, the same physical size on every screen:
     spaced per the owner's board (docs/reference/mockup-phone-piece-card.png):
     · its ENDS align with the photo window's own side insets
     · its BOTTOM edge kisses the top of the photo window
     · ribbon, window, and plates all share the same side rhythm
   Do not reintroduce percentages or move these anchors — the card-style
   suite stands guard. */
.gc-name-band {
  position: absolute; top: 10px; left: 26px; right: 26px; z-index: 4;
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  border: 0 solid transparent;
  border-image: url('../assets/standardized/ribbons/guild-hall-ribbon-title-navy-v1.webp')
    0 170 fill / 0 34px stretch;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  pointer-events: none;
}
.gc-name-band .gc-name { font-size: 1.2rem; }
.guild-card.gc-flipped .gc-name-band { visibility: hidden; }
/* A PRODUCT's banner turns to the product ribbon alongside its fancy
   corners (owner 2026-09-06: "the banner should be in product color of
   ribbon with the fancy corners"). Same painted family, emerald cut —
   the finished green, made distinct by the corners and the label. */
.gc--product .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-emerald-v1.webp');
}
/* The photo's top edge (13px rail + 40px + 10px media margin = 63px)
   sits just under the band's bottom edge at 66px — the kiss. */
.gc-front { padding-top: 40px; }
.gc-name-band .gc-name { text-align: center; min-width: 0; font-size: 1.05rem;
  letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-name-band .gc-name { color: #F3E9CE; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
/* (The flip left the ribbon 2026-08-22 — it lives with ••• by the Piece ID
   now, brass squares like the sheet's example card.) */
/* The art rides in its own gold-framed window (owner style sheet). */
.gc-media { border-top: none; margin: 0 14px; width: auto; margin-top: 10px;
  border: 2px solid rgba(160,126,60,0.75); border-radius: 6px;
  background: #241A10; }
/* Two plates, per the style sheet: [ONE OF A KIND] and [◈ DRYING]. */
.gc-type-line {
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  margin: 10px 14px 0;
}
/* Two plates share the row edge to edge, side by side (owner mockup). */
.gc-type-line .gc-type-chip, .gc-type-line .gc-stage-chip {
  flex: 1 1 0; justify-content: center; min-width: 0;
}
.gc-type-chip, .gc-stage-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; min-height: 34px;
  border: 1px solid rgba(160,126,60,0.85); border-radius: 5px;
  outline: 1px solid rgba(90,66,34,0.5); outline-offset: 1px;
  background: linear-gradient(180deg, rgba(255,248,228,0.85), rgba(226,211,174,0.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.25);
  font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #33260F;
}
.gc-stage-chip .gc-stage-gem::before { width: 13px; height: 13px;
  border: 1px solid rgba(255,246,210,0.5); }
/* The six tones wear the PAINTED stones cut from the board. */
.gc-gem--opal  .gc-stage-gem::before,
.gc-gem--emerald  .gc-stage-gem::before,
.gc-gem--sapphire  .gc-stage-gem::before,
.gc-gem--citrine  .gc-stage-gem::before,
.gc-gem--amber  .gc-stage-gem::before,
.gc-gem--amethyst  .gc-stage-gem::before,
.gc-gem--ruby  .gc-stage-gem::before,
.gc-gem--aqua  .gc-stage-gem::before {
  width: 17px; height: 17px; border: none; box-shadow: none; border-radius: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.gc-gem--opal .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-opal-v1.webp'); }
.gc-gem--emerald .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-emerald-v1.webp'); }
.gc-gem--sapphire .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-sapphire-v1.webp'); }
.gc-gem--citrine .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-citrine-v1.webp'); }
.gc-gem--amber .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-amber-v1.webp'); }
.gc-gem--amethyst .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-amethyst-v1.webp'); }
.gc-gem--ruby .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-ruby-v1.webp'); }
.gc-gem--aqua .gc-stage-gem::before { background-image: url('../assets/standardized/jewels/guild-hall-status-jewel-aqua-v1.webp'); }
/* Type badges are the owner's PAINTED plates, cut from the board — the
   words are baked into the art, so the chip's own text steps aside (it
   stays in the markup for screen readers). Production, the one type the
   board didn't paint, keeps the parchment label with text. */
.gc-type-chip {
  background: url('../assets/guild-card/ribbons/label-parchment.svg') center / 100% 100% no-repeat;
  border: none; outline: none; box-shadow: none;
}
.gc-type--prototype, .gc-type--tool, .gc-type--sample, .gc-type--one_of_a_kind,
.gc-type--batch, .gc-type--show, .gc-type--campaign {
  font-size: 0; padding: 0; height: 34px; min-width: 100px; aspect-ratio: 8 / 3;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.gc-type--prototype     { background-image: url('../assets/guild-card/painted/badges/badge-prototype.png'); }
.gc-type--tool          { background-image: url('../assets/guild-card/painted/badges/badge-tool.png'); }
.gc-type--sample        { background-image: url('../assets/guild-card/painted/badges/badge-sample.png'); }
.gc-type--one_of_a_kind { background-image: url('../assets/guild-card/painted/badges/badge-one_of_a_kind.png'); }
.gc-type--batch         { background-image: url('../assets/guild-card/painted/badges/badge-batch.png'); }
.gc-type--show          { background-image: url('../assets/guild-card/painted/badges/badge-show.png'); }
.gc-type--campaign      { background-image: url('../assets/guild-card/painted/badges/badge-campaign.png'); }

/* Waiting (topaz ●) reads softer than blocked (garnet ◆). */
.gc-needs--waiting { color: #7A5500; border-left-color: var(--guild-topaz); }
.gc-needs--waiting .gc-needs-mark { color: var(--guild-topaz); }
.gc-plate { margin: 8px 10px 0; padding: 10px 12px;
  border: 1px solid rgba(120,92,46,0.4); border-radius: 3px;
  background: rgba(255,250,238,0.45); min-height: 44px; }
.gc-flavor { margin: 8px 0 0; font-family: var(--font-body); font-style: italic;
  font-size: 0.82rem; color: #5C4A2E; border-top: none; padding-top: 12px;
  background: url('../assets/guild-card/painted/dividers/divider-diamond.png') top center / 170px auto no-repeat; }
.gc-footline { display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px; font-family: var(--font-data, monospace);
  font-size: 0.62rem; color: #8A7550; }
/* The guild mark presses the wax seal from the library — the file is the
   canonical drawing (assets/guild-card/seals/seal-guild-leaf.svg). */
.gc-seal { flex: 0 0 30px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: url('../assets/guild-card/painted/seals/seal-guild-green.png') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.gc-guildmark { color: rgba(160,126,60,0.8); font-size: 0.8rem; }
.gc-seal .gc-guildmark { display: none; }   /* the leaf IS the mark here */
.gc-ident-block { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.gc-ident-cap { font-family: var(--font-heading); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8A7550; }
.gc-footline .gc-ident { font-size: 0.74rem; color: #4A3A20; }

/* The back: an aged archive page — deeper parchment, the great leaf
   WATERMARK embossed low right from the library (owner 2026-08-22 sweep). */
.gc-face.gc-back {
  background-color: #E2CFA3;
  background-image:
    url('../assets/guild-card/back/back-watermark-leaf.svg'),
    url('../assets/tex/paper-photo.jpg');
  background-position: right 10px bottom 10px, center;
  background-size: 84px 112px, cover;
  background-repeat: no-repeat, repeat;
}
.gc-back-list { outline: 1px solid rgba(120,92,46,0.4); outline-offset: -8px; }

/* Flipped to the back, the accordion steps aside — reference is reference. */
.gc-unit:has(.gc-flipped) .gc-process { display: none; }

/* Selectable stages and lifecycle steps are honest buttons. */
button.gc-step { width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; min-height: 42px; border-radius: 4px; }
button.gc-step:hover { background: rgba(120,92,46,0.08); }
.gc-step--pick .gc-step-name { text-decoration: none; }
.gc-step-sub { display: block; font-size: 0.72rem; color: #7A6844; margin-left: 20px; flex-basis: 100%; }
.gc-step--channel { display: flex; flex-wrap: wrap; }
.gc-phase-note { margin: 2px 0 8px; font-family: var(--font-body); font-style: italic;
  font-size: 0.84rem; color: #4A3928; }
.gc-process--packaging .gc-process-head { background-color: var(--guild-topaz); }
.gc-process--channel .gc-process-head { background-color: var(--guild-emerald); }
.gc-process--placed .gc-process-head { opacity: 0.85; }

/* Show preparation: goals measured against real inventory. */
.gc-goal-title { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #7A6338; margin: 10px 0 4px; }
.gc-goal-count { margin-left: auto; font-family: var(--font-data, monospace);
  font-size: 0.74rem; color: #4A3A20; }
.gc-step--done .gc-goal-count { color: var(--guild-emerald); font-weight: 700; }

/* ═══ THE SHEET WEARS THE CARD (owner 2026-08-21: "combining an item card
   with legacy menus… changing where and how the legacy info shows up") ═══ */
.pe-cardtop { margin-bottom: 18px; }
.pe-cardtop .gc-unit { max-width: none; margin: 0 0 6px; }
@media (max-width: 680px) {
  .pe-grid { grid-template-columns: 1fr !important; }
  /* The card's living accordion IS the workflow ladder now. */
  .pe-legacy-road { display: none; }
}

/* Fantasy-card depth without anyone's design: a dark outer rim, an inner
   brass hairline, a little lift. The materials stay the Hall's. */
/* ═══ THE RULE THAT ATE THE ART (found 2026-08-22, the owner's 'still
   nope'): this late rule's `border:` SHORTHAND silently reset
   border-image to none on every card, so the painted frames never
   rendered anywhere — desktop or phone. The dark-rim look it drew was
   exactly what the screenshots showed. It keeps only its drop shadow
   now; the painted frame IS the border. ═══ */
.gc-front, .gc-back {
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.gc-media { box-shadow: 0 0 0 1px rgba(90,66,34,0.7), inset 0 2px 10px rgba(0,0,0,0.45); }

/* ═══ THE CARD SHAPE (owner 2026-09-06: "i would like the cards to be
   forced into actual card shape no matter size of screen") ═══════════
   A Guild Card is a trading card: 2.5 × 3.5 — 5:7 — at every screen
   size. The width comes from the deck's column; the shape decides the
   height. Inside, the front becomes a dealt layout: name band, the art
   window growing to fill, the plate, the footline pinned to the bottom
   brass. What does not fit is cropped like a real card — the full
   record is always one ••• away — and the BACK scrolls quietly inside
   the same shape (amending the 2026-08-22 "taller side" rule: the
   owner has since ruled shape outranks content). The process still
   unfolds BENEATH the card, outside the shape, as it always did. ═══ */
.gc-faces { aspect-ratio: 5 / 7; }
.gc-face  { min-height: 0; }
.gc-front { display: flex; flex-direction: column; }
.gc-front .gc-media { flex: 1 1 0; min-height: 80px; aspect-ratio: auto; height: auto; }
.gc-front .gc-media.gc-media--empty { height: auto; }
.gc-front .gc-plate { flex: 0 1 auto; overflow: hidden; min-height: 0; }
.gc-front .gc-footline { margin-top: auto; }
.gc-back  { overflow-y: auto; }

/* ═══ THE PAINTED CREATE BUTTON (owner mockups 2026-09-06): MAKE wears
   the owner's own create button — brass plus medallion, green enamel
   bar — instead of a drawn primary. ═══ */
#btn-new-product {
  background: url('../assets/standardized/buttons/create-button-1-v1.webp') center / 100% 100% no-repeat;
  border: none; box-shadow: none; border-radius: 10px;
  min-width: 128px; min-height: 46px; padding: 8px 18px 8px 52px;
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.08em;
  color: #F3E9CE; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
#btn-new-product:hover { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)) brightness(1.08); }

/* ═══ THE CARD BACK ART (owner 2026-09-06: "card back art only goes on
   cards with no backs — many cards may have additional info on back").
   A card with recorded truths keeps its written back. A card with
   nothing recorded turns over to the guild's painted leather back,
   like any card in a deck. ═══ */
.gc-back--blank {
  background: url('../assets/guild-card/painted/back/back-leather.png') center / cover no-repeat;
  display: flex; align-items: flex-start; justify-content: flex-end;
  overflow: hidden;
}
.gc-flip--onart { margin: 8px; background: rgba(36,26,16,0.55); color: #E8C97A;
  border: 1px solid rgba(160,126,60,0.6); border-radius: 6px; }

/* ═══ THE ALLOCATION LEDGER (owner 2026-09-06): the Storeroom's finished
   decks and their Allocation window — lines that explain where finished
   stock is physically or commercially committed. ═══ */
.storeroom-finished { border-color: rgba(160,126,60,0.5); }
.storeroom-finished-deck { margin-top: 8px; }
.al-summary { font-family: var(--font-body); font-size: 0.9rem; color: var(--ink, #2B2118);
  padding: 6px 2px; }
.al-line { display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-bottom: 1px solid rgba(90,66,34,0.25); font-size: 0.82rem; }
.al-line-label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.al-line-ctx { color: var(--text-muted, #8a7a5c); font-size: 0.72rem; flex: 1; }
.al-line-qty { font-family: var(--font-data); margin-left: auto; }
.al-line--focus { outline: 2px solid rgba(160,126,60,0.6); border-radius: 4px; }
.al-line--met .al-line-qty { color: var(--guild-emerald, #0F6B4F); }

/* The thread back: pieces a customer bought, on their card (2026-09-06). */
.crm-bought-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; width: 100%; padding: 8px 10px; margin: 2px 0; text-align: left;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(160,126,60,0.3);
  border-radius: 6px; cursor: pointer; color: var(--text-secondary, #cbb27a); }
.crm-bought-row:hover { background: rgba(160,126,60,0.12); }
.crm-bought-name { font-family: var(--font-heading); font-size: 0.82rem; }
.crm-bought-meta { font-family: var(--font-data); font-size: 0.65rem; color: var(--text-muted, #8a7a5c); }

/* The sold thread lands: the specific card catches the light (2026-09-06). */
.gc--spotlight { animation: gc-spotlight 2.4s ease-out 1; }
@keyframes gc-spotlight {
  0%   { box-shadow: 0 0 0 4px rgba(231,210,162,0.95), 0 0 30px rgba(231,210,162,0.6); }
  100% { box-shadow: none; }
}

/* ═══ THE CIRCUIT BAR (owner 2026-09-06: "the desktop app should mirror
   that") — the card's whole journey as one strip: Bench → Storeroom →
   Shows & Stores → Sold. Stations are doors; the current one is lit. ═══ */
.gh-circuit { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 10px;
  background: rgba(20, 13, 7, 0.5); border: 1px solid rgba(160,126,60,0.35);
  border-radius: 8px; }
.ghc-station { display: flex; align-items: center; gap: 7px; padding: 6px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(160,126,60,0.3);
  border-radius: 6px; cursor: pointer; color: var(--text-secondary, #cbb27a);
  font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.05em; }
.ghc-station:hover { background: rgba(160,126,60,0.14); }
.ghc-station--on { background: rgba(160,126,60,0.2);
  border-color: rgba(231,210,162,0.7); color: #F3E9CE;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.ghc-icon { font-size: 0.9rem; }
.ghc-count { font-family: var(--font-data); font-size: 0.68rem;
  background: rgba(0,0,0,0.35); border-radius: 8px; padding: 1px 7px; }
.ghc-arrow { align-self: center; color: rgba(160,126,60,0.7); font-size: 0.8rem; }
@media (max-width: 480px) { .ghc-label { display: none; } }

/* The cull door is quiet — a last resort, never a temptation (2026-09-07). */
.gc-step--cull { opacity: 0.65; }
.gc-step--cull:hover { opacity: 1; }
.gc-step--cull .gc-step-name { color: #9a5c50; }

/* ═══ THE DECK PRIMITIVE (WareWisp Matrix §1, Phase 1 — 2026-09-07) ═══
   Cover above, cards beneath in a snapping reel. Edge peek shows the
   neighbors; ‹ › tap controls twin every swipe; the counter says where
   you stand. The MEDIA region owns swipe inside its own bounds
   (overscroll containment both ways); the reel owns it elsewhere.
   Phone: one card fills the view. Desktop: the SAME reel, wider, more
   slots visible — spatial expansion, never a second architecture. ═══ */
.gc-deck { margin: 0 0 18px; }
.gc-deck-cover { margin-bottom: 10px; }
.gc-deck-cover .gc-unit { max-width: 420px; margin: 0 auto; }
.gc-deck-body { position: relative; display: flex; align-items: stretch; }
.gc-deck-reel {
  flex: 1; display: flex; gap: 14px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px 6%;
}
.gc-deck-reel::-webkit-scrollbar { display: none; }
.gc-deck-slot {
  flex: 0 0 88%; max-width: 420px; min-width: 0;
  scroll-snap-align: center;
}
.gc-deck-arrow {
  flex: 0 0 30px; align-self: center; height: 64px;
  background: rgba(36,26,16,0.55); color: #E8C97A;
  border: 1px solid rgba(160,126,60,0.5); border-radius: 8px;
  font-size: 1.3rem; cursor: pointer; z-index: 2;
}
.gc-deck-arrow:hover { background: rgba(160,126,60,0.25); }
.gc-deck-counter {
  text-align: center; margin-top: 6px;
  font-family: var(--font-data); font-size: 0.68rem; color: var(--text-muted, #8a7a5c);
}
.gc-deck-empty { padding: 4px 2px; }
/* The media region's swipe never escapes into the deck's reel. */
.gc-media { overscroll-behavior-x: contain; }
/* Desktop: the same deck, spread — several cards visible, still one reel. */
@media (min-width: 1100px) {
  .gc-deck-slot { flex: 0 0 360px; }
  .gc-deck-reel { padding: 4px 10px; }
}

/* ═══ THE DECK STAGE (owner verdict 2026-09-07: "the card/deck IS the
   primary WareWisp interface — the old desktop shell should not be
   visually perceptible underneath it"). A fixed, full-viewport world
   of its own: the old layout controls NOTHING here. One card in hand,
   neighbors peeking, dots below; the tray unfolds beneath the card
   inside its slot. A guild table, not a web page. ═══ */
.dstage {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(62,42,20,0.55), rgba(0,0,0,0) 55%),
    radial-gradient(140% 110% at 50% 110%, rgba(0,0,0,0.72), rgba(0,0,0,0.25) 60%),
    #17100a url('../assets/tex/wood-photo.jpg') center / cover;
  color: #E8D9B4;
  overscroll-behavior: contain;
}
body.dstage-open { overflow: hidden; }
/* the stage owns its card size: as tall as the room allows, 5:7 true */
.dstage {
  --ds-card-h: min(calc(100dvh - 148px), calc(88vw * 7 / 5));
  --ds-card-w: calc(var(--ds-card-h) * 5 / 7);
}
.dstage-top { display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 6px; }
.dstage-chips { display: flex; gap: 8px; overflow-x: auto; flex: 1;
  scrollbar-width: none; }
.dstage-chips::-webkit-scrollbar { display: none; }
.dstage-chip { flex: 0 0 auto; padding: 5px 12px; border-radius: 14px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(160,126,60,0.4);
  color: #C9B27E; font-family: var(--font-heading); font-size: 0.62rem;
  letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; }
.dstage-chip--on { background: rgba(160,126,60,0.28); color: #F3E9CE;
  border-color: rgba(231,210,162,0.7); }
.dstage-exit { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 15px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(160,126,60,0.4);
  color: #C9B27E; cursor: pointer; }
.dstage-reel {
  flex: 1; min-height: 0;
  display: flex; align-items: flex-start; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px calc((100vw - var(--ds-card-w)) / 2) 4px;
}
.dstage-reel::-webkit-scrollbar { display: none; }
.dstage-slot {
  flex: 0 0 var(--ds-card-w); scroll-snap-align: center;
  height: 100%; overflow-y: auto; overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.dstage-slot::-webkit-scrollbar { display: none; }
.dstage-slot .gc-unit { width: var(--ds-card-w); max-width: none; }
/* neighbors rest lower and dimmer — a deck in hand, not a filmstrip */
.dstage-slot .guild-card { transition: transform .25s ease, filter .25s ease; }
.dstage-foot { display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 6px 10px max(10px, env(safe-area-inset-bottom)); }
.dstage-dots { display: flex; gap: 8px; align-items: center; }
.dstage-dot { width: 8px; height: 8px; border-radius: 4px; border: none;
  background: rgba(201,178,126,0.35); cursor: pointer; padding: 0; }
.dstage-dot--on { background: #E7D2A2; width: 20px; }
.dstage-ghost { width: 38px; height: 38px; border-radius: 19px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(160,126,60,0.35);
  color: rgba(201,178,126,0.8); font-size: 1.1rem; cursor: pointer; }
/* the tray belongs to the card: full card width, unfolding beneath it */
.dstage .gc-process { width: var(--ds-card-w); }
.dstage .gc-traveler { animation: ds-tray .22s ease-out; }
@keyframes ds-tray { from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; } }
.dstage-slot--away .guild-card { transform: scale(0.94) translateY(8px);
  filter: brightness(0.72) saturate(0.85); }
.dstage-slot--away .gc-process { opacity: 0.35; }

/* ═══ PHASE 3 ON THE STAGE (locked mobile navigation model, 2026-09-07):
   the deck's NAME is the Dock control; the Dock slides up as deck
   covers; the THREE DOORS ride the bottom — never more; threads are
   chips on the cards themselves. ═══ */
.dstage-deckname { flex: 1; text-align: left; padding: 7px 12px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(160,126,60,0.4);
  border-radius: 14px; color: #E7D2A2; font-family: var(--font-heading);
  font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dstage-caret { opacity: 0.7; }
.dstage-doors { display: flex; justify-content: space-around; align-items: center;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: rgba(10,6,3,0.72); border-top: 1px solid rgba(160,126,60,0.35);
  backdrop-filter: blur(4px); }
.dstage-door-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: #C9B27E; cursor: pointer;
  font-size: 1.05rem; padding: 4px 18px; }
.dstage-door-btn span { font-family: var(--font-heading); font-size: 0.56rem;
  letter-spacing: 0.1em; }
.dstage-door-btn--on { color: #F3E9CE; }
.dstage-door-btn--make { color: #9BD8A8; }
.dstage-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(16,10,6,0.97); border-top: 2px solid rgba(160,126,60,0.5);
  border-radius: 18px 18px 0 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  animation: ds-tray .22s ease-out; }
.dstage-dock-grab { width: 44px; height: 4px; border-radius: 2px;
  background: rgba(160,126,60,0.5); margin: 0 auto 10px; }
.dstage-dock-title { font-family: var(--font-heading); font-size: 0.6rem;
  letter-spacing: 0.14em; color: #8a7a5c; text-transform: uppercase;
  margin: 10px 2px 6px; }
.dstage-dock-row { display: flex; gap: 10px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px; }
.dstage-dock-row::-webkit-scrollbar { display: none; }
.dstage-cover { flex: 0 0 auto; min-width: 108px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: linear-gradient(160deg, rgba(62,42,20,0.85), rgba(28,17,9,0.95));
  border: 1px solid rgba(160,126,60,0.5); border-radius: 10px;
  color: #E7D2A2; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.dstage-cover--on { border-color: rgba(231,210,162,0.85); }
.dstage-cover--soon { opacity: 0.45; }
.dstage-cover-name { font-family: var(--font-heading); font-size: 0.66rem;
  letter-spacing: 0.1em; }
.dstage-cover-count { font-family: var(--font-data); font-size: 0.62rem;
  color: #8a7a5c; }
.dstage-door { width: var(--ds-card-w); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: linear-gradient(160deg, rgba(62,42,20,0.8), rgba(24,15,8,0.95));
  border: 2px solid rgba(160,126,60,0.5); border-radius: 12px;
  color: #E7D2A2; cursor: pointer; }
.dstage-door-name { font-family: var(--font-display); font-size: 1.1rem;
  letter-spacing: 0.12em; }
.dstage-door-count { font-family: var(--font-data); font-size: 0.68rem; color: #8a7a5c; }
.gc-threads { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* THREADS wear stitched leather (WareWisp UI Assets, owner
   2026-09-11) — the relationship between cards is a strap you can
   almost feel. Nine-slice keeps the stitching true at any length. */
.gc-thread { padding: 4px 12px; border-radius: 0;
  border: 9px solid transparent; border-left-width: 16px; border-right-width: 16px;
  border-image: url('../assets/library/hardware/gh_strip_leather_stitched_neutral_01.png') 55 110 fill stretch;
  background: transparent;
  color: #3A2B17; font-family: var(--font-heading); font-size: 0.62rem;
  letter-spacing: 0.06em; cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.gc-thread:hover { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) brightness(1.08); }
/* search overlay must rise above the stage */
body.dstage-open #search-overlay, body.dstage-open .search-overlay { z-index: 9500; }
/* …and so must the prompt sheet: MAKE asks its questions ON the stage
   (found 2026-09-11 — the sheet sat beneath the stage overlay). */
body.dstage-open .ghp-scrim { z-index: 9600; }

/* ═══ WAREWISP ALIGNMENT PASS (owner spec, 2026-09-10) ═══
   The newest art takes its places: jewel-tone ribbon families so the
   world never goes all brown, the carved menu illustrations as deck
   crests in the Dock, and the simplified brass/ink action icons on the
   tray's working steps. Nothing is stretched; alpha is preserved;
   carved corners stay carved (modular frame rule). */

/* the stage wears its name — WAREWISP and GREAT HALL belong together */
.dstage-wordmark { flex: 0 0 auto; font-family: var(--font-display, 'Cinzel Decorative', serif);
  font-size: 0.78rem; letter-spacing: 0.16em; color: #E7D2A2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); padding-left: 2px; }

/* ═══ THE HALL SIGN (owner reference 2026-09-11): one hanging signboard
   with TWO places for text — WAREWISP in brass letters above, GREAT
   HALL on the green painted band beneath. The sign is still the Dock
   control; the grammar did not move, only the carpentry. ═══ */
.dstage-top--hall { justify-content: center; position: relative; padding-bottom: 0; }
/* The REAL signboard (Guild-Hall-Standardized/Main-Hall, found on the
   owner's Desktop 2026-09-11): compass finial, blank wooden arch for
   WAREWISP, green banner for GREAT HALL — live text on the painted
   blanks, exactly as its README intends. */
.dstage-sign { position: relative; display: block; border: 0; padding: 0;
  cursor: pointer; background: url('../assets/standardized/main-hall/derived/hall-sign-band.webp') center / contain no-repeat;
  width: min(430px, 94vw); aspect-ratio: 1122 / 400;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55)); }
.dstage-sign-top { position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display, 'Cinzel Decorative', serif);
  font-size: clamp(0.8rem, 4vw, 1rem); letter-spacing: 0.22em; padding-left: 0.22em;
  color: #E7D2A2; text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6); }
.dstage-sign-main { position: absolute; left: 50%; top: 67%;
  transform: translateX(-50%); white-space: nowrap; border: 0; background: transparent;
  font-family: var(--font-heading); font-size: clamp(0.6rem, 3vw, 0.74rem);
  letter-spacing: 0.22em; padding-left: 0.22em; line-height: 1;
  /* a long deck name (BOB — PURPLE RANGER SPOON) stays on its banner */
  max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  color: #F3E9CE; text-shadow: 0 1px 2px rgba(0,0,0,0.65); }
.dstage-top--hall .dstage-exit { position: absolute; right: 12px;
  top: max(10px, env(safe-area-inset-top)); }

/* The candlesticks are retired: the v4 entrance hangs lanterns on chains
   instead (see § THE ENTRANCE). Their art is no longer referenced. */

/* ═══ THE PAINTED BUTTONS (owner reference 2026-09-11): the workshop's
   own button plates — green primary, navy secondary, cream tertiary,
   and the CREATE plate with its plus medallion. Nine-slice per
   VISUAL-SYSTEM: end caps protected, text lives in the quiet inset. ═══ */
.gh-btn { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer; min-height: 48px; line-height: 1.15;
  font-family: var(--font-heading); letter-spacing: 0.08em; font-size: 0.78rem;
  border: 16px solid transparent; border-left-width: 24px; border-right-width: 24px;
  padding: 0 2px; }
.gh-btn--primary { color: #F3E9CE; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-image: url('../assets/standardized/buttons/guild-hall-green-button-v1.webp') 170 220 fill stretch; }
.gh-btn--secondary { color: #E9E4D4; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-image: url('../assets/standardized/buttons/guild-hall-navy-button-v1.webp') 170 220 fill stretch; }
.gh-btn--tertiary { color: #332614; text-shadow: none;
  border-image: url('../assets/standardized/buttons/cream-button-v1.webp') 170 220 fill stretch; }

/* MAKE wears the CREATE plate — plus medallion baked into the art, the
   label living in the quiet inset to its right. */
.dstage-door-btn--make { background: url('../assets/standardized/buttons/create-button-2-v1.webp') center / contain no-repeat;
  width: 128px; height: 46px; padding: 0; position: relative;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.dstage-make-label { position: absolute; left: 56%; top: 50%;
  transform: translate(-50%, -50%); font-family: var(--font-heading);
  font-size: 0.72rem; letter-spacing: 0.18em; color: #F3E9CE;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7); }

/* The card signs its maker — a slim leather band along the foot, like
   the reference card's motto rail. */
.gc-motto { position: relative; text-align: center; font-family: var(--font-heading);
  font-size: 0.5rem; letter-spacing: 0.42em; color: #A98F5E; padding: 4px 0 5px;
  margin: 6px 14px 10px; border-radius: 3px;
  background: linear-gradient(rgba(24,14,8,0.45), rgba(24,14,8,0.45)),
    url('../assets/tex/leather-photo.jpg') center / cover;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.65), inset 0 -1px 1px rgba(255,255,255,0.06); }
/* …fastened with real hammered rivets from the hardware chest. */
.gc-motto::before, .gc-motto::after { content: ''; position: absolute; top: 50%;
  width: 11px; height: 11px; transform: translateY(-50%);
  background: url('../assets/library/hardware/gh_rivet_metal_09.png') center / contain no-repeat; }
.gc-motto::before { left: 5px; } .gc-motto::after { right: 5px; }
/* The footline sits under a brass divider with its center rivet. */
.gc-footline { position: relative; }
.gc-footline::before { content: ''; position: absolute; top: -4px; left: 10%;
  right: 10%; height: 7px; opacity: 0.85; pointer-events: none;
  background: url('../assets/library/rails/gh_divider_brass_rivet_01.png') center / contain no-repeat; }
.guild-card.gc-flipped .gc-motto { visibility: hidden; }

/* The prompt sheet takes the painted plates: confirm green, cancel
   cream, each option a crafted parchment tile (the CREATE menu look —
   the list layout stays). */
.ghp-acts .btn-primary { border: 15px solid transparent; border-left-width: 24px;
  border-right-width: 24px; background: transparent; min-height: 48px;
  border-image: url('../assets/standardized/buttons/guild-hall-green-button-v1.webp') 170 220 fill stretch;
  font-family: var(--font-heading); letter-spacing: 0.08em;
  border-radius: 0; box-shadow: none; }
/* Cream ink on every dark plate, whatever a theme says about primary
   ink (owner 2026-09-11: "black lettering on the dark green button
   isn't paying off") — the painted plates are dark; their letters are
   parchment, always. */
.ghp-acts .btn-primary, .gh-btn--primary, .gh-btn--secondary,
.dstage-sign-main, .dstage-make-label {
  color: #F3E9CE !important; -webkit-text-fill-color: #F3E9CE !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65) !important; }
.ghp-acts .wfl-btn { border: 15px solid transparent; border-left-width: 24px;
  border-right-width: 24px; background: transparent; min-height: 48px;
  border-image: url('../assets/standardized/buttons/cream-button-v1.webp') 170 220 fill stretch;
  color: #332614; font-family: var(--font-heading); letter-spacing: 0.06em;
  border-radius: 0; box-shadow: none; }
.ghp-option { border: 10px solid transparent; border-left-width: 18px;
  border-right-width: 18px; background: transparent; padding: 4px 8px;
  border-image: url('../assets/standardized/buttons/cream-button-v1.webp') 170 220 fill stretch;
  border-radius: 0; }
.ghp-option:hover { background: rgba(201,168,76,0.18); }
.ghp-option .ghp-option-label { color: #2E2110; }
.ghp-options { gap: 4px; }

/* ── SUPPLY INTAKE (owner 2026-09-11): paste anything, review, shelve ── */
.si-panel { max-width: 420px; }
.si-paste { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  font-family: var(--font-body); font-size: 0.85rem; color: #2E2110;
  background: url('../assets/tex/paper-photo.jpg') center / cover, #EFE3C4;
  border: 1px solid rgba(107,74,28,0.5); border-radius: 6px; padding: 10px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.25); margin-bottom: 8px; }
.si-file { display: block; text-align: center; font-family: var(--font-heading);
  font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-secondary, #8A7550);
  padding: 6px 0 10px; cursor: pointer; text-decoration: underline dotted; }
.si-err { color: #7C0F1A; }
.si-rows { display: flex; flex-direction: column; gap: 6px; max-height: 46dvh;
  overflow-y: auto; overscroll-behavior: contain; margin-bottom: 12px; }
.si-row { display: flex; align-items: center; gap: 10px; text-align: left;
  border: 10px solid transparent; border-left-width: 18px; border-right-width: 18px;
  border-image: url('../assets/standardized/buttons/cream-button-v1.webp') 170 220 fill stretch;
  padding: 2px 4px; }
.si-row--off { opacity: 0.45; }
.si-check { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #0F6B4F; }
.si-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.si-row-name { font-family: var(--font-heading); font-size: 0.82rem; color: #2E2110;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-row-sub { font-family: var(--font-body); font-size: 0.7rem; color: #6B5638;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-edit { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid rgba(107,74,28,0.5); background: rgba(169,126,47,0.16);
  color: #6B4A1C; cursor: pointer; font-size: 0.85rem; }

/* ── RIBBON FAMILIES (spec §19): jewel accents by card family.
   The name-band border-image slices are shared with the navy master. ── */
.gc--show .gc-name-band, .gc--lesson .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-red-v1.webp'); }
.gc--campaign .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-violet-v1.webp'); }
.gc--loot .gc-name-band, .gc--venture .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-yellow-v1.webp'); }
.gc--loot .gc-name-band .gc-name, .gc--venture .gc-name-band .gc-name { color: #241B12; }
.gc--portal .gc-name-band, .gc--portalscover .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-aqua-v1.webp'); }
.gc--journey .gc-name-band, .gc--journeystep .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-emerald-v1.webp'); }

/* ── FAMILY TONES (owner directive 2026-09-11, §17): a MAPPING, never an
   architecture. GuildCards.FAMILY_TONES decides which family wears which
   tone and stamps gc-fam--<tone> on the card; these rules know only
   tones, so the mapping can change without rewriting components. Tones
   without a ribbon yet (amber, sapphire…) keep the navy master until
   their banners join the collection. ── */
.gc-fam--garnet .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-red-v1.webp'); }
.gc-fam--violet .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-violet-v1.webp'); }
.gc-fam--gold .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-yellow-v1.webp'); }
.gc-fam--gold .gc-name-band .gc-name { color: #241B12; }
.gc-fam--aqua .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-aqua-v1.webp'); }
.gc-fam--emerald .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-emerald-v1.webp'); }
.gc-fam--navy .gc-name-band {
  border-image-source: url('../assets/standardized/ribbons/guild-hall-ribbon-title-navy-v1.webp'); }

/* ── THE DOCK'S CRESTS: the carved menu illustrations, 48px on the dark
   shelf (brass reads on dark; VISUAL-SYSTEM 48–64px for these). ── */
.dstage-cover-crest { width: 44px; height: 44px; display: block;
  background: center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.dstage-cover--venture   .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-clipboard-v1.webp'); }
.dstage-cover--storeroom .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-shelves-supplies-v1.webp'); }
.dstage-cover--services  .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-pencil-v1.webp'); }
.dstage-cover--shows     .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-shows-events-v1.webp'); }
.dstage-cover--portals   .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-store-v1.webp'); }
.dstage-cover--campaigns .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-megaphone-campains-v1.webp'); }
.dstage-cover--customers .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-contacts-v1.webp'); }
.dstage-cover--journeys  .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-compass-rose-v1.webp'); }
.dstage-cover--loot      .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-treasure-chest-v1.webp'); }
.dstage-cover--calendar  .dstage-cover-crest { background-image: url('../assets/standardized/icons/guild-hall-icons-calendar-v1.webp'); }

/* ── ACTION ICONS on tray steps (ink on parchment, 20px in a 48px
   touch row; text labels always beside them — never icon-only). ── */
.gc-act--call, .gc-act--message, .gc-act--refresh, .gc-act--settings,
.gc-act--shipping, .gc-act--check { display: inline-flex; align-items: center; gap: 7px; }
.gc-act--call::before, .gc-act--message::before, .gc-act--refresh::before,
.gc-act--settings::before, .gc-act--shipping::before, .gc-act--check::before {
  content: ''; width: 20px; height: 20px; flex: 0 0 auto;
  background: center / contain no-repeat; opacity: 0.85; }
.gc-act--call::before     { background-image: url('../assets/action-icons/ink-64/call.png'); }
.gc-act--message::before  { background-image: url('../assets/action-icons/ink-64/message.png'); }
.gc-act--refresh::before  { background-image: url('../assets/action-icons/ink-64/refresh.png'); }
.gc-act--settings::before { background-image: url('../assets/action-icons/ink-64/settings.png'); }
.gc-act--shipping::before { background-image: url('../assets/action-icons/ink-64/shipping.png'); }
.gc-act--check::before    { background-image: url('../assets/action-icons/ink-64/check.png'); }

/* tap-to-contact anchors sit in the tray like any step */
a.gc-step { text-decoration: none; color: inherit; }
a.gc-step:visited { color: inherit; }

/* journey steps read as guided, not as chores */
.gc--journeystep .gc-media { opacity: 0.92; }

/* any tray step carrying a sub-line wraps it beneath the name, the way
   the channel steps always did */
.gc-traveler .gc-step:has(.gc-step-sub) { flex-wrap: wrap; }

/* ── THE 19-FAMILY DRESSING (owner 2026-09-11: "code it in now") ──
   The colorized chest's dyed round-cut jewels mount at every name
   band's crest; the family wax seal marks the card back. Families come
   from palette.json — the color law. Rules below are generated from
   the actual minted files in assets/library/family/. */
.gc-back-head { position: relative; }
.gc-famseal { flex: 0 0 auto; width: 34px; height: 34px; margin: 0 6px;
  background: center / contain no-repeat; opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
[data-gc-fam="atlas"] .gc-famseal { background-image: url('../assets/library/family/seal-atlas.webp'); }
[data-gc-fam="batch"] .gc-famseal { background-image: url('../assets/library/family/seal-batch.webp'); }
[data-gc-fam="booking-service"] .gc-famseal { background-image: url('../assets/library/family/seal-booking-service.webp'); }
[data-gc-fam="campaign"] .gc-famseal { background-image: url('../assets/library/family/seal-campaign.webp'); }
[data-gc-fam="custom-order"] .gc-famseal { background-image: url('../assets/library/family/seal-custom-order.webp'); }
[data-gc-fam="customer"] .gc-famseal { background-image: url('../assets/library/family/seal-customer.webp'); }
[data-gc-fam="great-hall"] .gc-famseal { background-image: url('../assets/library/family/seal-great-hall.webp'); }
[data-gc-fam="journey"] .gc-famseal { background-image: url('../assets/library/family/seal-journey.webp'); }
[data-gc-fam="library"] .gc-famseal { background-image: url('../assets/library/family/seal-library.webp'); }
[data-gc-fam="loadout"] .gc-famseal { background-image: url('../assets/library/family/seal-loadout.webp'); }
[data-gc-fam="loot"] .gc-famseal { background-image: url('../assets/library/family/seal-loot.webp'); }
[data-gc-fam="piece-product"] .gc-famseal { background-image: url('../assets/library/family/seal-piece-product.webp'); }
[data-gc-fam="shipment"] .gc-famseal { background-image: url('../assets/library/family/seal-shipment.webp'); }
[data-gc-fam="show"] .gc-famseal { background-image: url('../assets/library/family/seal-show.webp'); }
[data-gc-fam="store"] .gc-famseal { background-image: url('../assets/library/family/seal-store.webp'); }
[data-gc-fam="storeroom"] .gc-famseal { background-image: url('../assets/library/family/seal-storeroom.webp'); }
[data-gc-fam="studio"] .gc-famseal { background-image: url('../assets/library/family/seal-studio.webp'); }
[data-gc-fam="venture"] .gc-famseal { background-image: url('../assets/library/family/seal-venture.webp'); }
[data-gc-fam="wisdom"] .gc-famseal { background-image: url('../assets/library/family/seal-wisdom.webp'); }

/* ── THE SEATED FAMILY JEWEL (owner 2026-09-11: "not on the top" —
   and the chest's own gem SETTINGS): each family's dyed stone sits in
   the forged round-flanged mount, low on the card at the footline. */
.gc-famcrest { flex: 0 0 26px; width: 26px; height: 26px; margin: 0 4px;
  background: center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
[data-gc-fam="atlas"] .gc-famcrest { background-image: url('../assets/library/family/crest-atlas.webp'); }
[data-gc-fam="batch"] .gc-famcrest { background-image: url('../assets/library/family/crest-batch.webp'); }
[data-gc-fam="booking-service"] .gc-famcrest { background-image: url('../assets/library/family/crest-booking-service.webp'); }
[data-gc-fam="campaign"] .gc-famcrest { background-image: url('../assets/library/family/crest-campaign.webp'); }
[data-gc-fam="custom-order"] .gc-famcrest { background-image: url('../assets/library/family/crest-custom-order.webp'); }
[data-gc-fam="customer"] .gc-famcrest { background-image: url('../assets/library/family/crest-customer.webp'); }
[data-gc-fam="great-hall"] .gc-famcrest { background-image: url('../assets/library/family/crest-great-hall.webp'); }
[data-gc-fam="journey"] .gc-famcrest { background-image: url('../assets/library/family/crest-journey.webp'); }
[data-gc-fam="library"] .gc-famcrest { background-image: url('../assets/library/family/crest-library.webp'); }
[data-gc-fam="loadout"] .gc-famcrest { background-image: url('../assets/library/family/crest-loadout.webp'); }
[data-gc-fam="loot"] .gc-famcrest { background-image: url('../assets/library/family/crest-loot.webp'); }
[data-gc-fam="piece-product"] .gc-famcrest { background-image: url('../assets/library/family/crest-piece-product.webp'); }
[data-gc-fam="shipment"] .gc-famcrest { background-image: url('../assets/library/family/crest-shipment.webp'); }
[data-gc-fam="show"] .gc-famcrest { background-image: url('../assets/library/family/crest-show.webp'); }
[data-gc-fam="store"] .gc-famcrest { background-image: url('../assets/library/family/crest-store.webp'); }
[data-gc-fam="storeroom"] .gc-famcrest { background-image: url('../assets/library/family/crest-storeroom.webp'); }
[data-gc-fam="studio"] .gc-famcrest { background-image: url('../assets/library/family/crest-studio.webp'); }
[data-gc-fam="venture"] .gc-famcrest { background-image: url('../assets/library/family/crest-venture.webp'); }
[data-gc-fam="wisdom"] .gc-famcrest { background-image: url('../assets/library/family/crest-wisdom.webp'); }

/* ── TEXTILE RIBBON FAMILIES (owner 2026-09-11: "entire families of
   textile ribbons to use") — every family's name band wears its own
   dyed cloth from the colorized chest, band strips minted from
   silhouette 04, folds kept true by the nine-slice caps. Light cloths
   (warm ivory, pale library) take dark ink. */
/* ═══ THE LONG-TAIL BANNERS (Shea approved the categories 2026-09-17;
   assets from the reorganized Guild-Hall-Standardized catalog).
   SILHOUETTE = family group · COLOR = the family's own dye · GEM = status.
   Whole transparent PNGs composited full-width — tails drape past the
   frame and over the art, never clipped to the content window, never
   nine-sliced. Text sits ONLY in each silhouette's measured safe box
   (docs/BANNER-COMPOSITION.md). ═══ */
[data-gc-fam] .gc-name-band {
  border: 0; border-image: none;
  /* the ribbon's edges TOUCH the frame's outer border (owner
     2026-09-17, and again: "these are now no longer touching the edges
     of the card frame"): the BITMAP's edge isn't the cloth's edge — the
     strip's woven ends sit 3–6% inside it, only the fold tips reach
     the bitmap edge. Each silhouette bleeds past the card by its own
     measured inset so the STRIP ends land on the frame's outer border;
     the fold tips wrap just past it, the way real cloth would. */
  top: 0;
  left: calc(var(--band-bleed, 0%) * -1);
  right: calc(var(--band-bleed, 0%) * -1);
  height: auto;
  /* ...and it STOPS at the outer border, whole (owner 2026-09-17:
     "as if we were printing the cards we wouldn't want part of the
     ribbon cut off") — the bleed is only the bitmap's own transparent
     margin, so the cloth's WIDEST points (the fold tips) land exactly
     on the border with the entire ribbon intact inside it. Nothing is
     ever clipped off the cloth. */
  aspect-ratio: var(--band-ar, 985 / 766);
  background: var(--band-img) center top / 100% auto no-repeat;
  padding: 0; display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}
/* The name FOLLOWS THE CURVE OF THE BANNER, centered along the cloth
   and on its thickness, tails excluded (owner 2026-09-17: "some of
   the banners have curve so the text should follow the curve") — an
   SVG textPath rides each silhouette's measured centerline
   (BAND_CURVES in guild.cards.js); the viewBox matches the banner
   image, so path and cloth stay locked at every card width. */
[data-gc-fam] .gc-name-band .gc-name-curve {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; overflow: visible; pointer-events: none;
}
[data-gc-fam] .gc-name-band .gc-name-curve text {
  fill: var(--band-ink, #F3E9CE);
  font-family: var(--font-display);
  dominant-baseline: central;
  paint-order: stroke;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
[data-gc-fam="batch"] .gc-name-band .gc-name-curve text,
[data-gc-fam="library"] .gc-name-band .gc-name-curve text,
[data-gc-fam="piece-product"] .gc-band--raw .gc-name-band .gc-name-curve text {
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35));
}
/* the flat name stays in the markup as the card's ledger copy — real
   heading for readers and tests — hidden from the eye when the curve
   carries the word */
[data-gc-fam] .gc-name-band .gc-name--ledger {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0;
}
/* fallback (a family without a measured curve): the old flat centering */
[data-gc-fam] .gc-name-band .gc-name:not(.gc-name--ledger) {
  position: absolute;
  left: var(--band-cx, 50%); top: var(--band-cy, 18%);
  transform: translate(-50%, -50%);
  width: var(--band-w, 72%);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.02rem;
  color: var(--band-ink, #F3E9CE);
}
/* the art rises to meet the band (owner 2026-09-17: "the image should
   be taller so that no parchment is showing between the image and
   ribbon") — its top edge tucks BEHIND the band's strip; band and
   tails overhang the photo, and no parchment shows between them */
[data-gc-fam] .gc-front { padding-top: var(--band-clear, 15%); }
[data-gc-fam] .gc-media { margin-top: 0; }

/* — silhouette metrics (measured from the PNGs' own alpha) — */
[data-gc-fam="great-hall"] .gc-name-band, [data-gc-fam="venture"] .gc-name-band,
[data-gc-fam="studio"] .gc-name-band {                        /* 01 soft drape */
  --band-ar: 985 / 766; --band-bleed: 0.3%; --band-cx: 49.5%; --band-cy: 16.9%; --band-w: 73.8%; }
[data-gc-fam="piece-product"] .gc-name-band, [data-gc-fam="batch"] .gc-name-band {
  --band-ar: 1072 / 788; --band-bleed: 0.4%; --band-cx: 52.5%; --band-cy: 17.2%; --band-w: 73.1%; }
[data-gc-fam="customer"] .gc-name-band, [data-gc-fam="booking-service"] .gc-name-band {
  --band-ar: 982 / 765; --band-bleed: 0.4%; --band-cx: 50.4%; --band-cy: 19.2%; --band-w: 73.7%; }
[data-gc-fam="store"] .gc-name-band, [data-gc-fam="storeroom"] .gc-name-band {
  --band-ar: 1059 / 649; --band-bleed: 0.4%; --band-cx: 49.8%; --band-cy: 17.7%; --band-w: 74.9%; }
[data-gc-fam="custom-order"] .gc-name-band, [data-gc-fam="shipment"] .gc-name-band {
  --band-ar: 1002 / 741; --band-bleed: 0.3%; --band-cx: 50%; --band-cy: 12.4%; --band-w: 71.7%; }
[data-gc-fam="loot"] .gc-name-band, [data-gc-fam="library"] .gc-name-band,
[data-gc-fam="atlas"] .gc-name-band {                         /* 06 flat band */
  --band-ar: 1023 / 628; --band-bleed: 0.3%; --band-cx: 50.3%; --band-cy: 15.8%; --band-w: 73.3%; }
[data-gc-fam="journey"] .gc-name-band, [data-gc-fam="loadout"] .gc-name-band,
[data-gc-fam="wisdom"] .gc-name-band {                        /* 07 scooped */
  --band-ar: 972 / 756; --band-bleed: 0.5%; --band-cx: 50%; --band-cy: 15.7%; --band-w: 73.3%; }
[data-gc-fam="show"] .gc-name-band, [data-gc-fam="campaign"] .gc-name-band {
  --band-ar: 1090 / 665; --band-bleed: 0.4%; --band-cx: 50%; --band-cy: 14.4%; --band-w: 71.5%; }
/* per-group art clearance (band-strip bottom in width units, +1%) */
[data-gc-fam="great-hall"] .gc-front, [data-gc-fam="venture"] .gc-front,
[data-gc-fam="studio"] .gc-front { --band-clear: 16%; }
[data-gc-fam="piece-product"] .gc-front, [data-gc-fam="batch"] .gc-front { --band-clear: 15.5%; }
[data-gc-fam="customer"] .gc-front, [data-gc-fam="booking-service"] .gc-front { --band-clear: 17%; }
[data-gc-fam="store"] .gc-front, [data-gc-fam="storeroom"] .gc-front { --band-clear: 15.5%; }
[data-gc-fam="custom-order"] .gc-front, [data-gc-fam="shipment"] .gc-front { --band-clear: 14%; }
[data-gc-fam="loot"] .gc-front, [data-gc-fam="library"] .gc-front,
[data-gc-fam="atlas"] .gc-front { --band-clear: 14.5%; }
[data-gc-fam="journey"] .gc-front, [data-gc-fam="loadout"] .gc-front,
[data-gc-fam="wisdom"] .gc-front { --band-clear: 15%; }
[data-gc-fam="show"] .gc-front, [data-gc-fam="campaign"] .gc-front { --band-clear: 13.5%; }

/* — each family's dye — */
[data-gc-fam="atlas"] .gc-name-band { --band-img: url('../assets/library/banners/band-atlas.webp'); }
[data-gc-fam="batch"] .gc-name-band { --band-img: url('../assets/library/banners/band-batch.webp'); }
[data-gc-fam="booking-service"] .gc-name-band { --band-img: url('../assets/library/banners/band-booking-service.webp'); }
[data-gc-fam="campaign"] .gc-name-band { --band-img: url('../assets/library/banners/band-campaign.webp'); }
[data-gc-fam="custom-order"] .gc-name-band { --band-img: url('../assets/library/banners/band-custom-order.webp'); }
[data-gc-fam="customer"] .gc-name-band { --band-img: url('../assets/library/banners/band-customer.webp'); }
[data-gc-fam="great-hall"] .gc-name-band { --band-img: url('../assets/library/banners/band-great-hall.webp'); }
[data-gc-fam="journey"] .gc-name-band { --band-img: url('../assets/library/banners/band-journey.webp'); }
[data-gc-fam="library"] .gc-name-band { --band-img: url('../assets/library/banners/band-library.webp'); }
[data-gc-fam="loadout"] .gc-name-band { --band-img: url('../assets/library/banners/band-loadout.webp'); }
[data-gc-fam="loot"] .gc-name-band { --band-img: url('../assets/library/banners/band-loot.webp'); }
[data-gc-fam="piece-product"] .gc-name-band { --band-img: url('../assets/library/banners/band-piece-product.webp'); }
[data-gc-fam="shipment"] .gc-name-band { --band-img: url('../assets/library/banners/band-shipment.webp'); }
[data-gc-fam="show"] .gc-name-band { --band-img: url('../assets/library/banners/band-show.webp'); }
[data-gc-fam="store"] .gc-name-band { --band-img: url('../assets/library/banners/band-store.webp'); }
[data-gc-fam="storeroom"] .gc-name-band { --band-img: url('../assets/library/banners/band-storeroom.webp'); }
[data-gc-fam="studio"] .gc-name-band { --band-img: url('../assets/library/banners/band-studio.webp'); }
[data-gc-fam="venture"] .gc-name-band { --band-img: url('../assets/library/banners/band-venture.webp'); }
[data-gc-fam="wisdom"] .gc-name-band { --band-img: url('../assets/library/banners/band-wisdom.webp'); }
/* dark ink on the light cloths */
[data-gc-fam="batch"] .gc-name-band, [data-gc-fam="library"] .gc-name-band {
  --band-ink: #241B12; }
[data-gc-fam="batch"] .gc-name-band .gc-name,
[data-gc-fam="library"] .gc-name-band .gc-name {
  text-shadow: 0 1px 1px rgba(255,255,255,0.35); }

/* — THE TRANSFORMATION (owner 2026-09-17: "the transformation of a
   piece to a product"): a piece still on the bench wears the UNDYED
   linen; the banner takes the family's deep-teal dye the moment the
   work becomes a Product. The cloth itself tells the lifecycle. — */
[data-gc-fam="piece-product"] .gc-band--raw .gc-name-band {
  --band-img: url('../assets/library/banners/band-raw.webp');
  --band-ink: #241B12; }
[data-gc-fam="piece-product"] .gc-band--raw .gc-name-band .gc-name {
  text-shadow: 0 1px 1px rgba(255,255,255,0.35); }

/* ═══ THE BEAUTY PASS (owner 2026-09-11: "plenty of ribbons jewels and
   textures to really make these beautiful") ═══ */

/* The Dock and the doors bar wear REAL LEATHER (the chest's repeat
   tile), dark-waxed — a case, not a panel. */
.dstage-dock { background:
  linear-gradient(rgba(16,10,6,0.88), rgba(16,10,6,0.9)),
  url('../assets/library/textures/leather-repeat.webp') repeat top left / 256px; }
.dstage-doors { background:
  linear-gradient(rgba(10,6,3,0.82), rgba(10,6,3,0.86)),
  url('../assets/library/textures/leather-repeat.webp') repeat top left / 256px; }

/* Each deck cover is a jewel case: the family's stone at its corner,
   its cloth as the bottom binding. */
.dstage-cover { position: relative; overflow: hidden; }
.dstage-cover::after { content: ''; position: absolute; top: 7px; right: 7px;
  width: 17px; height: 17px; background: center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); pointer-events: none; }
.dstage-cover::before { content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 6px; background: center / cover; opacity: 0.9;
  pointer-events: none; }
.dstage-cover--soon::after, .dstage-cover--soon::before { content: none; }
.dstage-cover--venture::after { background-image: url('../assets/library/family/gem-venture.webp'); }
.dstage-cover--venture::before { background-image: url('../assets/library/family/ribbon-venture.webp'); }
.dstage-cover--storeroom::after { background-image: url('../assets/library/family/gem-storeroom.webp'); }
.dstage-cover--storeroom::before { background-image: url('../assets/library/family/ribbon-storeroom.webp'); }
.dstage-cover--services::after { background-image: url('../assets/library/family/gem-booking-service.webp'); }
.dstage-cover--services::before { background-image: url('../assets/library/family/ribbon-booking-service.webp'); }
.dstage-cover--shows::after { background-image: url('../assets/library/family/gem-show.webp'); }
.dstage-cover--shows::before { background-image: url('../assets/library/family/ribbon-show.webp'); }
.dstage-cover--portals::after { background-image: url('../assets/library/family/gem-store.webp'); }
.dstage-cover--portals::before { background-image: url('../assets/library/family/ribbon-store.webp'); }
.dstage-cover--campaigns::after { background-image: url('../assets/library/family/gem-campaign.webp'); }
.dstage-cover--campaigns::before { background-image: url('../assets/library/family/ribbon-campaign.webp'); }
.dstage-cover--customers::after { background-image: url('../assets/library/family/gem-customer.webp'); }
.dstage-cover--customers::before { background-image: url('../assets/library/family/ribbon-customer.webp'); }
.dstage-cover--journeys::after { background-image: url('../assets/library/family/gem-journey.webp'); }
.dstage-cover--journeys::before { background-image: url('../assets/library/family/ribbon-journey.webp'); }
.dstage-cover--loot::after { background-image: url('../assets/library/family/gem-loot.webp'); }
.dstage-cover--loot::before { background-image: url('../assets/library/family/ribbon-loot.webp'); }
.dstage-cover--calendar::after { background-image: url('../assets/library/family/gem-great-hall.webp'); }
.dstage-cover--calendar::before { background-image: url('../assets/library/family/ribbon-great-hall.webp'); }

/* The card back's head is underlined by the family's cloth. */
.gc-back-head { position: relative; padding-bottom: 8px; }
.gc-back-head::after { content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 5px; background: center / cover; border-radius: 2px;
  opacity: 0.9; }
[data-gc-fam="atlas"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-atlas.webp'); }
[data-gc-fam="batch"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-batch.webp'); }
[data-gc-fam="booking-service"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-booking-service.webp'); }
[data-gc-fam="campaign"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-campaign.webp'); }
[data-gc-fam="custom-order"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-custom-order.webp'); }
[data-gc-fam="customer"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-customer.webp'); }
[data-gc-fam="great-hall"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-great-hall.webp'); }
[data-gc-fam="journey"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-journey.webp'); }
[data-gc-fam="library"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-library.webp'); }
[data-gc-fam="loadout"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-loadout.webp'); }
[data-gc-fam="loot"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-loot.webp'); }
[data-gc-fam="piece-product"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-piece-product.webp'); }
[data-gc-fam="shipment"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-shipment.webp'); }
[data-gc-fam="show"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-show.webp'); }
[data-gc-fam="store"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-store.webp'); }
[data-gc-fam="storeroom"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-storeroom.webp'); }
[data-gc-fam="studio"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-studio.webp'); }
[data-gc-fam="venture"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-venture.webp'); }
[data-gc-fam="wisdom"] .gc-back-head::after { background-image: url('../assets/library/family/ribbon-wisdom.webp'); }

/* ═══ THE GREAT HALL PAGE (owner reference boards, built 2026-09-12):
   a UI, not a card. The Main-Hall frame carries the two arch signs and
   its candle sconces; the carved DOUBLE DOORS open onto the window of
   notices; menu buttons wait beneath; the big + plate straddles the
   window's bottom edge. The locked three doors below are untouched. ═══ */
.hall-scroll { position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  padding: 4px 0 18px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; }
/* ═══ THE ENTRANCE (owner art "entrance v4 assembled", 2026-09-24) ═══
   Teal-and-gold art nouveau frame, sliding oak leaves on a concealed
   track, hanging lanterns on chains — the candlesticks are retired.
   Native canvas 1086×1448 shown through viewBox 82 0 920 1448; every
   percentage here is that geometry, not a guess. Never stretch a rail
   or an ornament on its own (the art's own rule). */
.hall-board { position: relative; width: min(450px, 100%); flex-shrink: 0;
  aspect-ratio: 920 / 1448; flex: 0 0 auto; isolation: isolate;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.hall-art { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; }
/* the leaves slide in the art's own coordinate space, behind the frame */
.hall-leaf { transition: transform 1.1s cubic-bezier(.5,.05,.3,1); }
.hall-board--open .hall-leaf--l { transform: translateX(-372px); }
.hall-board--open .hall-leaf--r { transform: translateX(372px); }
.hall-board--instant .hall-leaf { transition: none; }
/* the lantern flames breathe; the Wisp may use one as a door */
.hall-flame { transform-box: fill-box; transform-origin: bottom center;
  animation: hall-lantern-flicker 2.4s ease-in-out infinite; }
@keyframes hall-lantern-flicker {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50% { opacity: 1; transform: scale(0.96, 1.04); } }

/* the sign carries live text on the painted blanks: WAREWISP on the
   ivory field, GUILD HALL on the teal banner. Tap it to close the doors. */
.hall-sign { position: absolute; left: 0; top: 0; width: 100%; height: 34.5304%;
  background: transparent; border: 0; cursor: pointer; padding: 0; z-index: 4;
  -webkit-tap-highlight-color: transparent; }
.hall-sign-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hall-sign-top, .hall-sign-main { text-anchor: middle; }
.hall-sign-top { font-family: var(--font-display, 'Cinzel Decorative', serif);
  font-weight: 700; font-size: 76px; letter-spacing: 0.04em;
  fill: #174C48;   /* the art's own teal, read against the ivory field */
  paint-order: stroke; stroke: rgba(255, 248, 226, 0.55); stroke-width: 3px; }
/* the Wisp perched on the "i" warms the whole name */
.hall-sign-top { fill: color-mix(in srgb, #3E9A8C calc(var(--wisp-lit) * 100%), #174C48); }
/* on #hall-band-line: 34/4 measures 291 units against the band's 328 of
   arc, so the word sits inside the green field with room at both ends */
.hall-sign-main { font-family: var(--font-heading); font-weight: 700;
  font-size: 34px; letter-spacing: 4px; fill: #F2E1B7; }

/* the doorway itself opens the hall — it is the closed leaves' hit area */
.hall-doorway { position: absolute; left: 12.1739%; top: 34.53%;
  width: 75.6522%; height: 63.5%; padding: 0; border: 0; z-index: 3;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hall-board--open .hall-doorway { visibility: hidden; pointer-events: none; }

/* The notice paper sits in the frame's measured opening. */
/* The notice paper used to stop dead on the aperture (canvas x 174→912),
   so every button ended in a cut edge just short of the frame. It now runs
   x 120→962 — under the painted pilasters, whose solid ink spans 115→182
   on the left and 906→966 on the right — and the frame crops them instead.
   left = (120-82)/920, width = 842/920. (owner 2026-09-25) */
.hall-window { position: absolute; left: 4.1304%; top: 30.2486%;
  width: 91.5217%; height: 67.8177%; z-index: 1;
  overflow-y: auto; overscroll-behavior: contain;
  background: url('../assets/tex/paper-photo.jpg') center / cover, #E7D5B0;
  box-shadow: inset 0 8px 24px rgba(40,27,20,0.4),
    inset 26px 0 44px -12px rgba(255,158,44,0.22),
    inset -26px 0 44px -12px rgba(255,158,44,0.22);
  display: flex; flex-direction: column; gap: 0; padding: 14% 0 40px; }
/* gap 0: the painted top and bottom edges meet, so the notices read as one
   stacked column. The 9% inline padding keeps the WORDS clear of the
   pilasters while the button art keeps running behind them. */
.hall-notice { display: flex; align-items: center; gap: 9px; text-align: left;
  border: 9px solid transparent; border-left-width: 16px; border-right-width: 16px;
  border-image: url('../assets/standardized/buttons/cream-button-v1.webp') 170 220 fill stretch;
  background: transparent; padding: 2px 9%; cursor: pointer; flex: 0 0 auto;
  filter: sepia(0.22) saturate(1.1) brightness(1.01); }
.hall-notice-icon { flex: 0 0 54px; width: 54px; height: 54px;
  background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.hall-notice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hall-notice-title { font-family: var(--font-heading); font-size: 1rem;
  font-weight: 700; color: #241B12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-notice-sub { font-family: var(--font-body); font-size: 0.82rem;
  font-weight: 600; color: #4A3820;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-notice-go { flex: 0 0 auto; color: #8A7550; font-size: 1rem; padding-right: 2px; }
.hall-quiet { margin: auto; font-family: var(--font-body); font-style: italic;
  font-size: 0.95rem; font-weight: 600; color: #6B5638; text-align: center; padding: 0 16%; }

@media (prefers-reduced-motion: reduce) {
  .hall-leaf { transition: none; }
  .hall-flame { animation: none; }
}

/* THE BIG + — the CREATE plate straddling the window's bottom edge.
   MAKE sits centered on the plate's green field (the field runs ~38%
   → 95% of the plate, so its heart is 66%); "start something new"
   steps off the plate onto the wood below (owner 2026-09-12). The
   plate presses like a real button — down, darker, back. */
.hall-plus { position: absolute; left: 50%; top: 98%;
  transform: translate(-50%, -50%); z-index: 6;
  width: 74%; max-width: 430px; aspect-ratio: 985 / 384; height: auto;
  border: 0; cursor: pointer; padding: 0; background:
    url('../assets/standardized/buttons/create-button-1-lit.webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
  transition: transform 0.16s ease-out, filter 0.16s ease-out;
  -webkit-tap-highlight-color: transparent; }
.hall-plus:active, .hall-plus.is-pressed {
  transform: translate(-50%, calc(-50% + 4px)) scale(0.955);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)) brightness(0.84);
  transition-duration: 0.05s; }
.hall-plus-label { position: absolute; left: 58%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading); font-size: 1.3rem; line-height: 1;
  font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; color: #F3E9CE !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.hall-plus-sub { position: absolute; left: 50%; top: 107%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body); font-style: italic; font-size: 0.84rem;
  line-height: 1; font-weight: 600; white-space: nowrap;
  color: #E7D2A2; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
@media (prefers-reduced-motion: reduce) {
  .hall-plus { transition: none; }
  .hall-plus:active { transform: translate(-50%, -50%); } }

/* THE MENU — direct doors to every deck, on the painted button masters.
   Scooted down so the plate's sub-line sits centered in the gap. */
.hall-menu { width: min(560px, calc(100% - 16px)); margin-top: 62px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hall-menu-btn { position: relative; aspect-ratio: 1 / 0.9; border: 0; cursor: pointer;
  background: url('../assets/standardized/main-hall/button-parchment-lit-l.webp') center / contain no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding-bottom: 8%;
  /* candlelight is BAKED into the plates now (owner 2026-09-12: "unify
     the art"): the left column takes the left candle's glow, the right
     column the right's — same light as the frame, doors and plate. */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease-out, filter 0.16s ease-out; }
.hall-menu-btn:nth-child(even) {
  background-image: url('../assets/standardized/main-hall/button-parchment-lit-r.webp'); }
.hall-menu-btn:active { transform: translateY(2px) scale(0.98);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) brightness(0.92);
  transition-duration: 0.05s; }
.hall-menu-btn--emerald, .hall-menu-btn--emerald:nth-child(odd) {
  background-image: url('../assets/standardized/main-hall/button-emerald-lit-l.webp'); }
.hall-menu-btn--emerald:nth-child(even) {
  background-image: url('../assets/standardized/main-hall/button-emerald-lit-r.webp'); }
.hall-menu-icon { width: 54%; aspect-ratio: 1; background: center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.hall-menu-label { position: absolute; left: 2%; right: 2%; top: 74%;
  font-family: var(--font-heading); font-size: min(3.1vw, 0.88rem);
  font-weight: 700; letter-spacing: 0; color: #241B12; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-menu-btn--emerald .hall-menu-label { color: #F3E9CE !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
@media (prefers-reduced-motion: reduce) { .hall-door { transition: none; } }


.hall-sign { z-index: 5; }
/* On the hall page the big plate IS the MAKE — the bottom bar keeps
   only Great Hall and Search (owner note 1). */
.dstage--hall .dstage-door-btn--make { display: none; }

/* While the stage stands, the old room behind it goes fully dark —
   no guidance stripe, beckon, or nav peeking from under the boards
   (owner 2026-09-12: "remove the weird parchment stripe"). */
body.dstage-open #guild-content,
body.dstage-open #guild-nav,
body.dstage-open #guild-header { visibility: hidden; }
body.dstage-open #scroll-hint { display: none !important; }

/* The bottom bar's own carved brass — castle and glass minted to
   match the menu set, in place of the traveler emoji. */
.dstage-door-ico { width: 27px; height: 27px; display: block;
  background: center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)); }
.dstage-door-ico--hall { background-image: url('../assets/library/menu-icons/great-hall.webp'); }
.dstage-door-ico--search { background-image: url('../assets/library/menu-icons/search.webp'); }


/* ── STAGE PHOTOS beneath the process steps (owner 2026-09-17) ──────────────
   Each step owns a slot; the finished and packaged steps own six. The label
   is the picker. A taken thumb is a button: tap it and that stage's photo
   takes the hero position. */
.gc-shot { margin: -2px 0 8px 20px; padding: 6px 8px 8px; border-radius: 6px;
  background: rgba(120,92,46,0.07); border: 1px dashed rgba(120,92,46,0.35); }
.gc-shot--invite { border-style: solid; border-color: rgba(30,140,140,0.55);
  background: rgba(30,140,140,0.08); }
.gc-shot--viewing { box-shadow: inset 0 0 0 1px rgba(160,126,60,0.6); }
.gc-shot-line { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.gc-shot-prompt { font-family: var(--font-body); font-style: italic; font-size: 0.8rem; color: #5C4A2E; }
.gc-shot--invite .gc-shot-prompt { color: #1D5F5F; font-style: normal; font-weight: 600; }
.gc-shot-count { font-family: var(--font-data, monospace); font-size: 0.66rem; color: #7A6844; margin-left: auto; }
.gc-shot-note { font-family: var(--font-data, monospace); font-size: 0.62rem; color: #7A6844;
  text-transform: uppercase; letter-spacing: 0.08em; }
.gc-shot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-shot-angle { position: relative; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; width: 52px; height: 52px; border-radius: 6px; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(120,92,46,0.45); background: rgba(243,233,206,0.6); }
.gc-shot--turn .gc-shot-angle { width: 46px; height: 46px; }
.gc-shot-angle--want:hover { background: rgba(243,233,206,0.95); }
.gc-shot-angle--got { border-style: solid; padding: 0; overflow: visible; }
.gc-shot-thumb { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  border-radius: 6px; overflow: hidden; cursor: pointer; }
.gc-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-shot-retake { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #F3E9CE; background: #7A5A2E; cursor: pointer;
  border: 1px solid rgba(243,233,206,0.8); }
.gc-shot-word { font-family: var(--font-data, monospace); font-size: 0.5rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: #5C4A2E; white-space: nowrap; }
/* The angle glyph: a square with a mark on the side the camera faces. */
.gc-shot-glyph { position: relative; width: 16px; height: 16px; border: 1.5px solid #7A5A2E; border-radius: 2px; }
.gc-shot-glyph::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #1D5F5F; }
.gc-angle--front .gc-shot-glyph::after { left: 50%; bottom: -3px; transform: translateX(-50%); }
.gc-angle--back  .gc-shot-glyph::after { left: 50%; top: -3px; transform: translateX(-50%); }
.gc-angle--left  .gc-shot-glyph::after { top: 50%; left: -3px; transform: translateY(-50%); }
.gc-angle--right .gc-shot-glyph::after { top: 50%; right: -3px; transform: translateY(-50%); }
.gc-angle--top   .gc-shot-glyph::after { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.gc-angle--bottom .gc-shot-glyph::after { left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: transparent; border: 1.5px solid #1D5F5F; }
.gc-shot--inherited .gc-shot-angle--got { opacity: 0.8; }
@media (max-width: 680px) {
  .gc-shot { margin-left: 12px; }
  .gc-shot-angle, .gc-shot--turn .gc-shot-angle { width: 48px; height: 48px; }
}

/* ═══ THE WISP (owner spec, 2026-09-21) — see docs/WISP.md ═══
   The Wisp lives in the "I" of WAREWISP. The jewel above the letter is
   its window; the letter's stem is cut as a keyhole — its door. Both are
   drawn here from four custom properties the Wisp's brain sets on <html>:
     --wisp-jewel (0‥1) light behind the jewel   --wisp-look (-1‥1) where that light sits
     --wisp-door  (0‥1) keyhole glow             --wisp-lit  (0‥1) the name lit by the Wisp
   The Wisp itself is drawn on one canvas (#wisp-layer) that never takes
   a pointer; only #wisp-hit (the size of a fingertip, following the orb
   while it is pettable) does. */
:root { --wisp-jewel: 0.22; --wisp-look: 0; --wisp-door: 0; --wisp-lit: 0; }

/* the real glyph keeps its place in the word, invisibly — the keyhole
   letter is drawn over it */
tspan.wisp-i { fill: transparent; }
.wisp-i { position: relative; color: transparent !important; text-shadow: none !important; }

.wisp-home-deco { position: absolute; width: 0; height: 0; pointer-events: none;
  transform-origin: 0 0; z-index: 2; color: #E7D2A2; }
.wisp-home-deco--inline { left: 50%; bottom: 0.2em; --wisp-cap: 0.56em; }
.hdr-wordmark .wisp-home-deco { color: var(--brass-light, #D9C07A); }
/* on the v4 sign the letter is teal ink on an ivory field, so the
   keyhole "I" borrows that colour instead of the old brass */
.hall-sign .wisp-home-deco { color: #174C48; }
.hall-sign .wisp-keyhole { filter: drop-shadow(0 1px 1px rgba(255, 250, 235, 0.6)); }

/* the keyhole letter: serifs, a stem, and a door cut through it */
.wisp-keyhole, .wisp-keyhole-slot { position: absolute; bottom: 0;
  left: calc(var(--wisp-cap) * -0.25); width: calc(var(--wisp-cap) * 0.5); height: var(--wisp-cap);
  -webkit-mask: var(--wisp-mask) center / 100% 100% no-repeat; mask: var(--wisp-mask) center / 100% 100% no-repeat; }
.wisp-keyhole { background: currentColor;
  --wisp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M3 0H17V2.7H3Z M2.4 37.3H17.6V40H2.4Z'/%3E%3Cpath fill-rule='evenodd' d='M6.2 2.5H13.8L14.4 37.5H5.6Z M8.9 16A2.7 2.7 0 1 1 11.1 16L12.1 32H7.9Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.75)); }
.wisp-keyhole-slot {
  --wisp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M8.9 16A2.7 2.7 0 1 1 11.1 16L12.1 32H7.9Z'/%3E%3C/svg%3E");
  background: radial-gradient(ellipse at 50% 42%, #FFF8DE 0%, #FFD27A 38%, #C07A22 75%);
  opacity: calc(0.1 + var(--wisp-door) * 0.9); }
.wisp-door-glow { position: absolute; left: calc(var(--wisp-cap) * -0.6); bottom: calc(var(--wisp-cap) * 0.05);
  width: calc(var(--wisp-cap) * 1.2); height: calc(var(--wisp-cap) * 0.9); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.9), rgba(255, 170, 70, 0.25) 60%, transparent);
  opacity: calc(var(--wisp-door) * 0.85); mix-blend-mode: screen; }

/* the jewel: the Wisp's window, a milky opal with a light behind it */
.wisp-jewel { position: absolute; left: calc(var(--wisp-cap) * -0.33);
  bottom: calc(var(--wisp-cap) * 1.01); width: calc(var(--wisp-cap) * 0.66); height: calc(var(--wisp-cap) * 0.66);
  background: url('../assets/standardized/jewels/guild-hall-status-jewel-opal-v1.webp') center / contain no-repeat; }
.wisp-jewel::before { content: ''; position: absolute; inset: -110%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 224, 160, 0.85), rgba(255, 190, 100, 0.28) 55%, transparent);
  opacity: calc(0.2 + var(--wisp-jewel) * 0.8); transform: scale(calc(0.7 + var(--wisp-jewel) * 0.45)); }
.wisp-jewel-light { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; border-radius: 50%;
  background: radial-gradient(circle at calc(50% + var(--wisp-look) * 30%) 45%, #FFFFFF 0%, #FFE9B8 30%, rgba(255, 200, 110, 0) 70%);
  mix-blend-mode: screen; opacity: calc(var(--wisp-jewel) * 1.05); }
/* resting: a muted glow that breathes, very slowly — and a few faint motes */
.wisp-home--idle .wisp-jewel::before { animation: wisp-breathe 5.6s ease-in-out infinite; }
.wisp-home--asleep .wisp-jewel::before { animation: wisp-breathe 9s ease-in-out infinite; opacity: 0.16; }
.wisp-home--asleep .wisp-jewel-light { opacity: 0.08; }
@keyframes wisp-breathe { 0%, 100% { filter: brightness(0.85); } 46% { filter: brightness(1.18); } }
.wisp-motes { position: absolute; left: 0; bottom: calc(var(--wisp-cap) * 1.34); }
.wisp-motes i { position: absolute; width: 2px; height: 2px; border-radius: 50%; opacity: 0;
  background: #FFE7B0; box-shadow: 0 0 3px 1px rgba(255, 214, 140, 0.7); }
.wisp-home--idle .wisp-motes i { animation: wisp-mote 7s ease-out infinite; }
.wisp-motes i:nth-child(1) { left: calc(var(--wisp-cap) * -0.4); animation-delay: -1.2s !important; }
.wisp-motes i:nth-child(2) { left: calc(var(--wisp-cap) * 0.3); animation-delay: -3.9s !important; animation-duration: 8.4s !important; }
.wisp-motes i:nth-child(3) { left: calc(var(--wisp-cap) * -0.1); animation-delay: -6.1s !important; animation-duration: 9.7s !important; }
@keyframes wisp-mote {
  0%, 62% { opacity: 0; transform: translate(0, 0); }
  70% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(calc(var(--wisp-cap) * 0.25), calc(var(--wisp-cap) * -0.9)); } }

/* the name, lit by the Wisp perched on its "i" */
/* the v4 sign lights its own teal (see § THE ENTRANCE) — nothing to add here */
.dstage-wordmark { color: color-mix(in srgb, #FFF6DC calc(var(--wisp-lit) * 100%), #E7D2A2); }

/* the Wisp's canvas and its fingertip */
#wisp-layer { position: fixed; left: 0; top: 0; z-index: 9400; pointer-events: none; contain: strict; }
#wisp-hit { position: fixed; left: 0; top: 0; z-index: 9401; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; opacity: 1; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; will-change: transform; }
#wisp-hit:focus-visible { outline: 2px solid rgba(255, 224, 160, 0.7); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wisp-home--idle .wisp-jewel::before, .wisp-home--asleep .wisp-jewel::before { animation: none; }
  .wisp-motes { display: none; }
}

/* DEV BENCH (localhost only — js/wisp/wisp.dev.js) */
#wisp-dev { position: fixed; left: 8px; bottom: 90px; z-index: 9402; font: 12px/1.2 system-ui, sans-serif; }
#wisp-dev button.is-on { background: #6B4A12; color: #FFE7B0; }
#wisp-dev button { font: inherit; border: 1px solid rgba(231, 210, 162, 0.5); background: rgba(28, 16, 8, 0.86);
  color: #F3E9CE; border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.wisp-dev-tab { width: 30px; height: 30px; }
.wisp-dev-body { display: flex; flex-wrap: wrap; gap: 4px; max-width: 240px; margin-top: 6px;
  padding: 6px; border-radius: 8px; background: rgba(28, 16, 8, 0.7); }
.wisp-dev-body[hidden] { display: none; }
.wisp-dev-state { width: 100%; color: #FFD27A; font-weight: 600; letter-spacing: 0.04em; padding: 2px 2px 4px; }

/* A card's jewel or a lantern flame, lit while the Wisp comes through it
   (owner 2026-09-22: the Wisp may use the little lights as doors). */
.wisp-door-lit { filter: brightness(1.7) drop-shadow(0 0 6px rgba(255, 214, 140, 0.85)); }
@media (prefers-reduced-motion: no-preference) { .wisp-door-lit { transition: filter 180ms ease-out; } }