@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Karla', sans-serif;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

main a {
  color: #369;
  text-decoration: underline;
}

/* Modern Onboarding Styles */
.modern-button {
  @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
}

.modern-button:hover {
  @apply from-indigo-700 to-purple-700;
}

.modern-button:active {
  @apply transform translate-y-0;
}

.cta-button {
  background: white !important;
  color: #4f46e5 !important;
  border: 2px solid white !important;
  font-weight: 600 !important;
  padding: 16px 32px !important;
  font-size: 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  background: #f8fafc !important;
}

.cta-button:active {
  transform: translateY(0) !important;
}

/* Enhanced Form Styling */
.form-section {
  @apply bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-xl p-6 shadow-sm;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  @apply ring-2 ring-indigo-500 border-indigo-500 shadow-sm;
}

.form-group label {
  @apply text-gray-700 font-semibold flex items-center;
}

/* Step Progress Enhancement */
.step-circle {
  @apply transition-all duration-300 ease-in-out;
}

.step-circle.active {
  @apply bg-indigo-600 text-white shadow-lg ring-4 ring-indigo-100;
}

.step-circle.completed {
  @apply bg-green-600 text-white shadow-lg;
}

.step-connector {
  @apply transition-all duration-500 ease-in-out;
}

.step-connector.completed {
  @apply bg-gradient-to-r from-green-500 to-indigo-500;
}

/* Benefit Cards */
.benefit-card {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.benefit-card:hover {
  @apply bg-gradient-to-br from-white to-gray-50;
}

/* Info Box Enhancement */
.info-box {
  @apply bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 shadow-sm;
}

/* Progress Bar Enhancement */
sl-progress-bar {
  --indicator-color: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  --track-color: #e5e7eb;
  --height: 8px;
}

/* Alert Styling */
.alert {
  @apply flex items-center space-x-3 p-4 rounded-lg border shadow-sm;
}

.alert.success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert.error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.alert.info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

.form-card {
  @apply xl:w-2/3 mx-auto p-4;

  ::placeholder {
    @apply text-gray-400 font-normal;
  }

  sl-card {
    @apply w-full;

    .header {
    }

    label:not(.radio-option label, .checkbox-option label) {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
    }

  }
}

.dt-button {
  @apply px-4 py-2 rounded-md text-sm font-medium;
}

@media (max-width: 1024px) {
  .sidebar-hidden {
    display: none;
  }
  #sidebarToggle {
    display: block;
  }
}

.flash {
  @apply p-4 mb-4 rounded-lg border;
  sl-input::part(base) {
    border-color: #dc2626;
  }
}

@keyframes flash-ani {
  0% {
    background-color: #fef2f2;
    border-color: #fecaca;
  }
  50% {
    background-color: #fee2e2;
    border-color: #fca5a5;
  }
  100% {
    background-color: #fef2f2;
    border-color: #fecaca;
  }
}

.dock-form {
  [multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
    @apply border-none outline-none shadow-none;
  }

  [multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
    @apply border-none outline-none shadow-none;
  }
}

.form {
  @apply space-y-6;

  .field-group {
    input:not([type="checkbox"]), textarea, select {
      @apply w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors;
    }

    input:not([type="checkbox"]):focus, textarea:focus, select:focus {
      @apply ring-2 ring-indigo-500 border-indigo-500 shadow-sm;
    }

    input:disabled, textarea:disabled, select:disabled {
      @apply bg-gray-100 text-gray-500 cursor-not-allowed;
    }

    label {
      @apply block text-sm font-semibold text-gray-700 mb-2;
    }

    .field_with_errors {
      input {
        @apply border-red-500 focus:border-red-500 focus:ring-red-500;
      }

      sl-input::part(base) {
        border-color: #dc2626;
      }

      label {
        @apply text-red-700;
      }

      label {
        @apply text-red-700;
      }
    }
  }

  textarea {
    @apply min-h-[120px] resize-y;
  }

  .field-group {
    @apply space-y-2;
  }

  sl-button[type="submit"] {
    input {
      @apply w-full;
    }
  }
}
/* Calendar Rolling Week View Styles */

.calendar-container {
  width: 100%;
}

.calendar-grid {
  position: relative;
}

.week-row {
  position: relative;
}

.week-label {
  min-width: 100px;
}

.day-cell {
  min-height: 80px;
}

/* Events layer positioning */
.events-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Event Bar Styles */
.event-bar {
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  display: block;
  transition: all 0.15s ease;
  max-height: 24px;
  line-height: 1.2;
}

.event-bar:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  z-index: 100;
}

/* Remove underlines from all links in calendar */
.calendar-container a,
.calendar-container a:hover,
.calendar-container a:visited {
  text-decoration: none !important;
}

/* Toolbar Buttons - ensure no underlines */
.calendar-toolbar sl-button::part(base) {
  text-decoration: none;
}

/* Color Legend */
.calendar-toolbar .w-3 {
  flex-shrink: 0;
}

/* Month boundary indicator */
.month-boundary {
  position: relative;
}

.month-boundary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #3b82f6, #60a5fa);
}

/* Current week highlight */
.current-week {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent);
}

/* Today cell extra highlight */
.day-cell.today {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Print Styles */
@media print {
  .calendar-toolbar {
    display: none;
  }
  
  .calendar-grid {
    max-height: none !important;
    overflow: visible !important;
  }
  
  .event-bar {
    break-inside: avoid;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .calendar-grid {
    overflow-x: auto;
  }
  
  .grid.grid-cols-8 {
    min-width: 700px;
  }
  
  .week-label {
    min-width: 70px;
  }
}

/* Smooth scrolling */
.calendar-grid {
  scroll-behavior: smooth;
}

/* Empty state */
.empty-state sl-icon {
  opacity: 0.5;
}

/* Status color classes */
.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #22c55e; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.text-white { color: white; }

/* Diagonal stripe pattern for active classes */
.bg-blue-striped {
  background: repeating-linear-gradient(
    -45deg,
    #3b82f6,
    #3b82f6 4px,
    #60a5fa 4px,
    #60a5fa 8px
  );
}

/* Ensure grid columns are equal width */
.grid-cols-8 {
  grid-template-columns: minmax(80px, 1fr) repeat(7, minmax(80px, 1fr));
}

/* Better event stacking */
.events-layer .event-bar {
  white-space: nowrap;
}
/*
 * The Fieldbook design tokens + shell for the /next unified interface
 * (ADR-003 Amendment 1; workmangeneral: certlynk/docs/experience-map §6).
 *
 * Everything under /next styles itself exclusively through these tokens.
 * Client (Storefront) theming overrides --nx-primary/--nx-accent per scope;
 * the dark "evening forest" set ships later as its own validated block under
 * [data-theme="dark"] — never an auto inversion.
 */

.nx {
  /* Color — sun-warmed paper, floating panels */
  --nx-ground: #efece1;
  --nx-panel: #fffdf8;
  --nx-line: #e3ddcc;
  --nx-ink: #26332c;
  --nx-ink-2: #5c685f;
  --nx-ink-3: #8b948b;
  --nx-primary: #1e5843;        /* spruce: actions, active states */
  --nx-primary-soft: #e4ede6;
  --nx-primary-contrast: #f2efe2;
  --nx-credential: #c98a1b;     /* saffron: credential moments ONLY */
  --nx-credential-wash: #f7eed8;
  --nx-money-out: #b25b3a;      /* clay: refunds, losses */
  --nx-money-out-wash: #f6e6dd;
  /* A neutral wash that is neither the panel nor the ground, so a receded
     surface still reads as a surface on both. Sits between them on purpose. */
  --nx-quiet-wash: #f5f2e9;
  /* One hue, light to dark: a day's load is a magnitude, so it gets a
     sequential ramp rather than four unrelated colours. Steps 1-3 carry dark
     ink, step 4 carries the light contrast; all four clear 4.5:1. */
  --nx-heat-1: #dbe7de;
  --nx-heat-2: #b4cebd;
  --nx-heat-3: #7fae91;
  --nx-heat-4: #1e5843;

  /* Type */
  --nx-font-ui: "Seravek", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;
  --nx-font-title: "Iowan Old Style", "Palatino", Georgia, serif;
  --nx-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape + depth */
  --nx-radius: 9px;
  --nx-radius-panel: 14px;
  --nx-shadow-panel: 0 2px 8px rgba(84, 70, 35, 0.07);
  --nx-shadow-pop: 0 10px 30px rgba(60, 50, 20, 0.18);

  /* Spacing scale */
  --nx-s1: 4px;
  --nx-s2: 8px;
  --nx-s3: 12px;
  --nx-s4: 16px;
  --nx-s5: 24px;
  --nx-s6: 40px;
}

/* ---------- Base ---------- */

body.nx {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 320px at 78% -80px, rgba(233, 196, 106, 0.16), transparent 60%),
    var(--nx-ground);
  color: var(--nx-ink);
  font: 15px/1.55 var(--nx-font-ui);
}

.nx h1, .nx h2 { font-weight: 600; letter-spacing: -0.005em; }
.nx .nx-title { font-family: var(--nx-font-title); }
.nx a { color: var(--nx-primary); }

/* ---------- App bar (logged-in chrome; ADR-003 Amendment 1 §5) ---------- */

/* Three balanced zones: brand · place · account. The pill centers between
 * the wordmark and utilities and owns the middle of the bar. */
.nx-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--nx-s4);
  padding: var(--nx-s4) var(--nx-s5) 0;
}

/* Explicit placement: a page without a space pill must not let the
 * utilities auto-flow into the center column. */
.nx-bar > .nx-wordmark { grid-column: 1; justify-self: start; }
.nx-bar > details.nx-switch, .nx-bar > .nx-space-pill { grid-column: 2; }
.nx-bar > .nx-utilities { grid-column: 3; justify-self: end; }

/* The wordmark speaks in the brand serif (same voice as page titles and
 * the receipt header), scaled to balance the 40px control row, left edge
 * locked to the content grid the rail establishes below. No box, ever:
 * hovering the Home link gives the letters themselves depth — a warm
 * shadow beneath and a hair of lift. */
.nx-wordmark {
  display: inline-block;
  font-family: var(--nx-font-title);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--nx-primary);
  text-decoration: none;
  transition: text-shadow 0.15s ease, transform 0.15s ease;
}

.nx-wordmark:hover,
.nx-wordmark:focus-visible {
  text-shadow: 0 2px 0 rgba(84, 70, 35, 0.12), 0 5px 10px rgba(84, 70, 35, 0.22);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) { .nx-wordmark { transition: none; } .nx-wordmark:hover { transform: none; } }

.nx-wordmark span { color: var(--nx-ink); }

/* Wide single-line pill: glyph · name … type/role · caret */
.nx-space-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 360px;
  max-width: 460px;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 6px 12px 6px 7px;
  box-shadow: 0 1px 2px rgba(84, 70, 35, 0.06);
  color: inherit;
  text-decoration: none;
}

.nx-pill-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-pill-meta { margin-left: auto; font-size: 11.5px; color: var(--nx-ink-3); white-space: nowrap; }

.nx-space-glyph {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--nx-primary);
  color: var(--nx-primary-contrast);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}


/* Space switcher: JS-free details/summary dropdown */
details.nx-switch { position: relative; }
details.nx-switch summary { cursor: pointer; list-style: none; }
details.nx-switch summary::-webkit-details-marker { display: none; }
.nx-switch-caret { color: var(--nx-ink-3); font-size: 10px; margin-left: 2px; }

.nx-switch-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 290px;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-panel);
  box-shadow: var(--nx-shadow-pop);
  padding: 8px;
  z-index: 40;
}

.nx-switch-zone { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; padding: 8px 10px 4px; }

.nx-switch-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--nx-radius); font-size: 13px; color: var(--nx-ink); text-decoration: none; }
a.nx-switch-row:hover, .nx-switch-row.nx-on { background: var(--nx-primary-soft); }
.nx-switch-row b { display: block; font-size: 13px; line-height: 1.15; }
.nx-switch-row small { display: block; font-size: 10.5px; color: var(--nx-ink-3); }
.nx-switch-row.nx-soon { opacity: 0.6; cursor: default; }

.nx-glyph-home { background: #4a5c50; }
.nx-glyph-personal { background: var(--nx-credential); color: #3d2c05; }
.nx-glyph-network { background: #2e6e8e; }

.nx-space-card.nx-soon { opacity: 0.65; }
a.nx-space-card:hover { border-color: #cfd6cf; }

/* Row 2: tier-1 navigation, left-anchored to the content margin so its
 * position is identical in every space (never chained after the pill). */
.nx-sections { display: flex; gap: 2px; padding: 6px var(--nx-s5) 0; overflow-x: auto; }

.nx-sections a {
  padding: 8px 13px;
  font-size: 13.5px;
  color: var(--nx-ink-2);
  text-decoration: none;
  border-radius: var(--nx-radius);
  white-space: nowrap;
}

/* Selected = solid spruce, cream text — the same definitive "you are here"
 * the rail uses, instead of a wash that competed with the ground. */
.nx-sections a.nx-on {
  background: var(--nx-primary);
  color: var(--nx-primary-contrast);
  font-weight: 650;
}

/* Utilities match the space pill's 40px height — warm and clear over compact. */
.nx-utilities { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nx-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--nx-line);
  background: var(--nx-panel);
  display: grid;
  place-items: center;
  color: var(--nx-ink-2);
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(84, 70, 35, 0.06);
  cursor: pointer;
}

.nx-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nx-credential);
  color: #3d2c05;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Utility popovers (help, account, search) — right-aligned dropdowns on the
 * same JS-free details pattern as the switcher. */
details.nx-pop-host { position: relative; }
details.nx-pop-host summary { list-style: none; }
details.nx-pop-host summary::-webkit-details-marker { display: none; }

.nx-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 252px;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-panel);
  box-shadow: var(--nx-shadow-pop);
  padding: 8px;
  z-index: 40;
}

.nx-pop-head { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; padding: 8px 10px 4px; }

.nx-pop-id { padding: 8px 10px 10px; border-bottom: 1px solid var(--nx-line); margin-bottom: 6px; }
.nx-pop-id b { display: block; font-size: 13.5px; }
.nx-pop-id small { display: block; font-size: 11.5px; color: var(--nx-ink-3); }

.nx-pop-row { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 10px; border-radius: var(--nx-radius); font-size: 13.5px; color: var(--nx-ink); text-decoration: none; }
a.nx-pop-row:hover { background: var(--nx-primary-soft); }
.nx-pop-row.nx-soon { color: var(--nx-ink-3); font-size: 12px; cursor: default; }

.nx-pop-form { margin: 0; }
.nx-pop-btn { background: none; border: 0; font: inherit; cursor: pointer; }
.nx-pop-btn:hover { background: var(--nx-primary-soft); }

/* Morphing chrome search: one 40px container that IS the icon button when
 * collapsed and becomes the field when open — glyph anchored left inside,
 * inset submit fading in on the right. Only the container's width animates,
 * so collapsed spacing is identical to the other 40px utilities. */
.nx-search {
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  box-sizing: border-box;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(84, 70, 35, 0.06);
  overflow: hidden;
  transition: width 0.18s ease, border-color 0.14s ease;
}

.nx-search.nx-open { width: 300px; }
.nx-search:focus-within { border-color: var(--nx-primary); }

.nx-search-glyph {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  background: none;
  color: var(--nx-ink-2);
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.nx-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: 13.5px/1.4 var(--nx-font-ui);
  color: var(--nx-ink);
}

.nx-search-input:focus { outline: none; }
.nx-search-input::placeholder { color: var(--nx-ink-3); }

.nx-search-go {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 5px;
  border: 0;
  border-radius: 8px;
  background: var(--nx-primary);
  color: var(--nx-primary-contrast);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.nx-search.nx-open .nx-search-go { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { .nx-search, .nx-search-go { transition: none; } }

/* ---------- Registers ---------- */

/* Focused: calm centered column (personal, checkout, /home) */
.nx-focused { max-width: 700px; margin: 0 auto; padding: var(--nx-s5) var(--nx-s5) var(--nx-s6); width: 100%; box-sizing: border-box; }

/* Workspace: full-width deck with the floating rail */
.nx-deck {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 18px;
  padding: 18px var(--nx-s5) 30px;
  align-items: start;
}

.nx-rail {
  position: sticky;
  top: var(--nx-s3);
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-panel);
  padding: 10px;
  box-shadow: var(--nx-shadow-panel);
}

.nx-rail-cap {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-ink-3);
  font-weight: 650;
  padding: 6px 10px 4px;
}

.nx-rail a {
  display: flex;
  align-items: center;
  gap: var(--nx-s2);
  padding: 8px 10px;
  border-radius: var(--nx-radius);
  color: var(--nx-ink-2);
  text-decoration: none;
  font-size: 13.5px;
}

.nx-rail a.nx-on { background: var(--nx-primary); color: var(--nx-primary-contrast); font-weight: 650; }

/* Unified rail grammar: top-level lines, the open section as a group,
 * its pages nested beneath. Soon-lines are visibly not-yet, never dead. */
.nx-rail span.nx-rail-line { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--nx-radius); font-size: 13.5px; }
.nx-rail-line.nx-soon { color: var(--nx-ink-3); opacity: 0.6; cursor: default; }
.nx-rail a.nx-rail-line.nx-grp { color: var(--nx-ink); font-weight: 650; margin-top: 2px; }
/* A section with no pages beneath it is the page, so it takes the same solid
   treatment as an active sub-page. A section that does have pages is marked
   without competing with the one that is actually open: colour alone read as
   almost nothing next to a filled pill. */
.nx-rail a.nx-rail-line.nx-grp.nx-here {
  color: var(--nx-primary);
  background: var(--nx-primary-soft);
  box-shadow: inset 3px 0 0 var(--nx-primary);
}
/* Must out-specify .nx-rail a.nx-rail-line.nx-grp above, which sets the group
   ink. Without this the active section renders dark ink on the dark spruce
   pill and the label all but disappears. */
.nx-rail a.nx-rail-line.nx-grp.nx-on { background: var(--nx-primary); color: var(--nx-primary-contrast); }
.nx-rail .nx-rail-line.nx-sub { margin-left: 14px; padding: 7px 10px; font-size: 13px; }
a.nx-rail-line:not(.nx-on):hover { background: var(--nx-primary-soft); }

/* Tier-3 tabs */
.nx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--nx-line); margin-bottom: var(--nx-s4); }

.nx-tabs a {
  padding: 8px 13px;
  font-size: 13px;
  color: var(--nx-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

/* Saffron never navigates: selection is spruce at every tier — solid fill
 * marks the place you are in (rail, sections), underline marks the view you
 * are looking at (tabs). Saffron is reserved for credentials and for
 * attention/pending states, which is why it cannot also mean "selected". */
.nx-tabs a.nx-on { color: var(--nx-primary); border-bottom-color: var(--nx-primary); font-weight: 650; }

/* ---------- Shared surfaces ---------- */

.nx-panel-card {
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-panel);
  box-shadow: var(--nx-shadow-panel);
}

.nx-cap {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-ink-3);
  font-weight: 650;
  margin: var(--nx-s4) 0 var(--nx-s2);
}

.nx-btn {
  display: inline-block;
  background: var(--nx-primary);
  color: var(--nx-primary-contrast);
  font-size: 13.5px;
  font-weight: 600;
  border: 0;
  border-radius: var(--nx-radius);
  padding: 9px 16px;
  text-decoration: none;
  cursor: pointer;
}

.nx-btn-secondary {
  background: var(--nx-panel);
  color: var(--nx-primary);
  border: 1px solid #cfd6cf;
}

/* Anchor buttons: outrank the `.nx a` link color (higher specificity) so
 * primary/danger button text never renders tone-on-tone. */
.nx a.nx-btn { color: var(--nx-primary-contrast); }
.nx a.nx-btn-secondary { color: var(--nx-primary); }
.nx a.nx-btn-danger { color: #fff; }

.nx-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  /* A pill with no modifier is a real state (Draft, Expected, Unverified),
     not an unstyled fallback, so the base carries its own neutral ground. */
  background: var(--nx-ground);
  color: var(--nx-ink-2);
}

.nx-pill-good { background: var(--nx-primary-soft); color: var(--nx-primary); }
.nx-pill-credential { background: var(--nx-credential-wash); color: #8a6413; }
.nx-pill-money-out { background: var(--nx-money-out-wash); color: var(--nx-money-out); }

.nx-flash { padding: var(--nx-s3) var(--nx-s5) 0; font-size: 13.5px; color: var(--nx-ink-2); }

/* ---------- /home overview ---------- */

.nx-greet { font-size: 25px; font-weight: 500; margin: var(--nx-s1) 0 2px; }
.nx-date { font-size: 12.5px; color: var(--nx-ink-3); margin-bottom: var(--nx-s4); }

.nx-todo .nx-todo-item {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: var(--nx-s3) var(--nx-s4);
  border-bottom: 1px solid #f0ede1;
  font-size: 13.5px;
}

.nx-todo .nx-todo-item:last-child { border-bottom: 0; }

.nx-spaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

.nx-space-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--nx-ink-2);
  text-decoration: none;
}

.nx-space-card b { display: block; color: var(--nx-ink); font-size: 13px; }

.nx-space-card .nx-space-glyph { width: 30px; height: 30px; border-radius: 8px; flex: none; }

.nx-footnote { font-size: 12px; color: var(--nx-ink-3); margin-top: var(--nx-s4); }

/* ---------- Workspace: page furniture ---------- */

.nx-work { min-width: 0; }

.nx-page-head { display: flex; align-items: baseline; gap: var(--nx-s4); margin: 2px 0 var(--nx-s3); }
.nx-page-head h1 { font-size: 24px; margin: 0; }

/* Breadcrumb eyebrow: the tier path rendered above a detail page's title.
 * This IS the back navigation — buttons are reserved for actions. */
.nx-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--nx-ink-3); margin-bottom: 2px; }
.nx-crumbs a { color: var(--nx-ink-2); text-decoration: none; }
.nx-crumbs a:hover { color: var(--nx-primary); }
.nx-crumbs .nx-crumb-sep { color: var(--nx-ink-3); opacity: 0.7; }

.nx-section-soon {
  padding: 8px 13px;
  font-size: 13.5px;
  color: var(--nx-ink-3);
  opacity: 0.65;
  cursor: default;
}

.nx-tab-n { font-size: 11px; color: var(--nx-ink-3); margin-left: 5px; font-variant-numeric: tabular-nums; }

.nx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--nx-s3); margin-bottom: var(--nx-s4); }

.nx-tile {
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 13px 15px;
}

.nx-tile h5 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-ink-3);
  font-weight: 650;
}

.nx-tile .nx-v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nx-tile small { display: block; font-size: 11.5px; color: var(--nx-ink-3); margin-top: 3px; }

.nx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nx-table-fixed { table-layout: fixed; }
.nx-table-fixed td { overflow: hidden; text-overflow: ellipsis; }

.nx-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-line);
  background: #faf8f0;
  font-weight: 650;
}

.nx-table td { padding: 9px 14px; border-bottom: 1px solid #f0ede1; font-variant-numeric: tabular-nums; }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table td a { text-decoration: none; font-weight: 650; }
.nx-table .nx-amt, .nx-table th.nx-amt { text-align: right; }
.nx-table td.nx-amt { font-weight: 650; }

/* Data table: sortable headers + the filter toolbar (state in the URL) */
.nx-th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.nx-th-sort.nx-on { color: var(--nx-primary); }
.nx-sort-arrow { font-size: 8px; line-height: 1; }

.nx-dt-toolbar { display: flex; align-items: center; gap: var(--nx-s2); margin-bottom: var(--nx-s3); flex-wrap: wrap; }
.nx-dt-toolbar .nx-input { width: auto; margin-top: 0; }
.nx-dt-search { min-width: 230px; }
.nx-select { appearance: auto; padding-right: 8px; }
.nx-dt-toolbar .nx-btn { padding: 8px 14px; }
.nx-dt-clear { font-size: 12.5px; color: var(--nx-ink-3); }

.nx-strip {
  margin-top: var(--nx-s3);
  font-size: 12.5px;
  color: var(--nx-ink-2);
  background: var(--nx-credential-wash);
  border: 1px solid #ecd9a8;
  border-radius: 10px;
  padding: 9px 14px;
}

.nx-onboard {
  display: flex;
  align-items: center;
  gap: var(--nx-s3);
  padding: var(--nx-s3) var(--nx-s4);
  font-size: 13px;
  color: var(--nx-ink-2);
  margin-bottom: var(--nx-s4);
}

.nx-onboard b { color: var(--nx-ink); }
.nx-onboard .nx-pill { margin-left: auto; flex: none; }

/* ---------- Order detail ---------- */

.nx-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-s3); margin-bottom: var(--nx-s4); }
@media (max-width: 720px) { .nx-detail-grid { grid-template-columns: 1fr; } }

.nx-kv-card { padding: 14px 16px; }

.nx-kv-cap {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-ink-3);
  font-weight: 650;
}

.nx-kv { display: flex; justify-content: space-between; gap: var(--nx-s3); padding: 4px 0; font-size: 13px; color: var(--nx-ink-2); }
.nx-kv b { color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-kv-out b { color: var(--nx-money-out); }

.nx-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 8px 12px;
  font: 13.5px/1.4 var(--nx-font-ui);
  color: var(--nx-ink);
  background: #fefdfb;
  margin-top: 4px;
}

.nx-btn-danger { background: var(--nx-money-out); color: #fff; }

.nx-refund { padding: 14px 16px; }
.nx-refund-row { display: flex; gap: var(--nx-s3); align-items: flex-end; }
.nx-refund-row label { flex: 1; font-size: 12px; color: var(--nx-ink-3); font-weight: 650; }
.nx-refund-fine { font-size: 11.5px; color: var(--nx-ink-3); margin-top: var(--nx-s2); }

.nx-notes { padding: 14px 16px; }
.nx-note-form { display: flex; gap: var(--nx-s3); align-items: flex-start; margin-bottom: var(--nx-s3); }
.nx-note-form textarea { flex: 1; resize: vertical; }
.nx-note { padding: var(--nx-s3) 0; border-top: 1px solid #f0ede1; font-size: 13.5px; color: var(--nx-ink-2); }
.nx-note-meta { display: flex; gap: var(--nx-s3); font-size: 12px; margin-bottom: 2px; }
.nx-note-meta b { color: var(--nx-ink); }
.nx-note-meta span { color: var(--nx-ink-3); }
.nx-note-empty { font-size: 12.5px; color: var(--nx-ink-3); }

.nx-tl-event {
  display: flex;
  align-items: baseline;
  gap: var(--nx-s2);
  padding: 8px 0;
  border-top: 1px solid #f0ede1;
  font-size: 12.5px;
  color: var(--nx-ink-2);
}

.nx-tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-ink-3); flex: none; align-self: center; }
.nx-tl-when { margin-left: auto; color: var(--nx-ink-3); font-size: 11.5px; white-space: nowrap; }

/* Detail pages: facts left, narrative right. The timeline is a first-class
 * column, not a footer. */
.nx-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.nx-show-aside { position: sticky; top: var(--nx-s3); min-width: 0; }
@media (max-width: 980px) { .nx-show-grid { grid-template-columns: 1fr; } .nx-show-aside { position: static; } }

.nx-timeline { padding: 14px 16px; }
.nx-tl-head { display: flex; align-items: baseline; margin-bottom: var(--nx-s2); }
.nx-tl-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; }
.nx-tl-counts { margin-left: auto; font-size: 11.5px; color: var(--nx-ink-3); font-variant-numeric: tabular-nums; }
.nx-timeline .nx-note-form { flex-direction: column; align-items: stretch; }
.nx-timeline .nx-note-form .nx-btn { align-self: flex-end; }

/* ---------- Receipt ---------- */

.nx-receipt-doc { padding: 26px 30px; }
.nx-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--nx-s4); }
.nx-receipt-org { font-family: var(--nx-font-title); font-size: 21px; font-weight: 600; }
.nx-receipt-sub { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; margin-top: 2px; }
.nx-receipt-meta { text-align: right; font-size: 12.5px; color: var(--nx-ink-2); }
.nx-receipt-items { margin: var(--nx-s3) 0; }
.nx-receipt-totals { max-width: 260px; margin-left: auto; }
.nx-receipt-total { border-top: 1px solid var(--nx-line); margin-top: 4px; padding-top: 8px; font-size: 15px; }
.nx-receipt-foot { margin-top: var(--nx-s5); padding-top: var(--nx-s3); border-top: 1px solid #f0ede1; font-size: 12px; color: var(--nx-ink-3); }

@media print {
  .nx-bar, .nx-footer, .nx-crumbs, .nx-page-head, .nx-flash { display: none !important; }
  body.nx { background: #fff; }
  .nx-receipt-doc { border: 0; box-shadow: none; }
}

/* ---------- App footer ---------- */

.nx-main { flex: 1; }

.nx-footer {
  display: flex;
  align-items: center;
  gap: var(--nx-s4);
  padding: var(--nx-s4) var(--nx-s5);
  font-size: 11.5px;
  color: var(--nx-ink-3);
  border-top: 1px solid var(--nx-line);
}

.nx-footer-wm { font-weight: 700; color: var(--nx-primary); }
.nx-footer-links { margin-left: auto; display: flex; gap: 14px; }

/* ---------- Small screens: chip-row tier 1 ---------- */

@media (max-width: 720px) {
  .nx-bar { flex-wrap: wrap; }
  .nx-deck { grid-template-columns: 1fr; }
  .nx-rail { position: static; }
}

/* Pagination: honest counts, and never a page control when there is one page */
.nx-pager { display: flex; align-items: center; gap: var(--nx-s4); padding: 10px 14px; border-top: 1px solid var(--nx-line); font-size: 12.5px; color: var(--nx-ink-3); }
.nx-pager-count { font-variant-numeric: tabular-nums; }
.nx-pager-steps { margin-left: auto; display: flex; align-items: center; gap: var(--nx-s3); }
.nx-pager-step { color: var(--nx-primary); font-weight: 650; text-decoration: none; }
.nx-pager-off { color: var(--nx-ink-3); opacity: 0.5; }
.nx-pager-at { color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }

/* Class place: meta line under the title, and tabs not yet rebuilt */
.nx-class-meta { display: flex; flex-wrap: wrap; gap: var(--nx-s4); font-size: 13px; color: var(--nx-ink-2); margin-bottom: var(--nx-s4); }
.nx-tab-soon { padding: 8px 13px; font-size: 13px; color: var(--nx-ink-3); opacity: 0.55; cursor: default; }

/* Class stage strip — where a class stands in the delivery loop. Spruce
   marks progress; the strip is a status readout, never a control, so nothing
   in it is clickable and saffron stays out of it entirely. */
.nx-stages {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0; margin: 0 0 var(--nx-s5); padding: 0; list-style: none;
}
.nx-stages li { display: flex; align-items: center; gap: var(--nx-s2); font-size: 12.5px; }
/* The connector is drawn on the item rather than between items so a wrapped
   row never opens with a dangling rule. */
.nx-stages li + li::before {
  content: ""; width: 26px; height: 1px; background: var(--nx-line); margin: 0 var(--nx-s2);
}
.nx-stage-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--nx-line); background: var(--nx-panel); }
.nx-stage-done .nx-stage-dot { background: var(--nx-primary); border-color: var(--nx-primary); }
.nx-stage-done .nx-stage-label { color: var(--nx-ink-2); }
.nx-stage-here .nx-stage-dot { background: var(--nx-primary); border-color: var(--nx-primary); box-shadow: 0 0 0 3px var(--nx-primary-soft); }
.nx-stage-here .nx-stage-label { color: var(--nx-ink); font-weight: 650; }
.nx-stage-ahead .nx-stage-label { color: var(--nx-ink-3); }
/* In flight: finalized, mail scheduled, nothing submitted yet. Saffron because
   this is a credential moment that wants attention, and the step is a readout,
   never a control. */
.nx-stage-waiting .nx-stage-dot { background: var(--nx-credential-wash); border-color: var(--nx-credential); }
.nx-stage-waiting .nx-stage-label { color: #8a6413; font-weight: 650; }
.nx-stage-note { font-size: 10.5px; color: #8a6413; background: var(--nx-credential-wash); padding: 1px 6px; border-radius: 999px; margin-left: var(--nx-s1); }

/* Facts list — one record's attributes, label left, value right. */
/* The panel card carries no padding of its own so tables can sit edge to
   edge; anything that is not a table brings its own.

*/
.nx-facts { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--nx-s3) var(--nx-s5); margin: 0; padding: var(--nx-s5) var(--nx-s6); }
.nx-facts dt { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; }
.nx-facts dd { margin: 0; font-size: 14px; color: var(--nx-ink); display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-facts-aside { color: var(--nx-ink-3); font-size: 12.5px; }
.nx-note { font-size: 12.5px; color: var(--nx-ink-3); margin-top: var(--nx-s4); }

@media (max-width: 600px) {
  .nx-facts { grid-template-columns: 1fr; gap: var(--nx-s1) 0; }
  .nx-facts dd { margin-bottom: var(--nx-s3); }
}

/* Check-in — the class code is the primary affordance on this page, so it is
   set large and monospaced for reading across a room. */
/* Code and instructions read as one unit — this screen gets projected,
   and space-between pushed them to opposite edges with dead space between. */
.nx-overview { display: flex; flex-direction: column; gap: var(--nx-s5); }
.nx-checkin-head { display: flex; flex-wrap: wrap; gap: var(--nx-s6); align-items: center; }
.nx-checkin-code { display: flex; flex-direction: column; gap: var(--nx-s2); }
.nx-checkin-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; }
.nx-code {
  font-family: var(--nx-font-mono); font-size: 42px; font-weight: 700; line-height: 1;
  color: var(--nx-ink); background: var(--nx-primary-soft);
  padding: var(--nx-s3) var(--nx-s5); border-radius: var(--nx-radius); letter-spacing: 0.06em;
}
.nx-checkin-where { font-size: 13px; color: var(--nx-ink-2); margin: var(--nx-s3) 0 0; }
/* The QR sits on paper white so scanners see maximum contrast, whatever the
   panel tint is. */
.nx-qr-frame { background: #fff; padding: var(--nx-s3); border-radius: var(--nx-radius); border: 1px solid var(--nx-line); line-height: 0; }
.nx-qr { display: block; }
.nx-subtitle { font-family: var(--nx-font-title); font-size: 19px; margin: 0; }
.nx-count { font-size: 13px; color: var(--nx-ink-2); }

/* ---------- Peek drawer ----------
   A lens on a record, never a place: the page keeps its URL and the panel
   rides along in ?peek, so both are addressable and the back button behaves.
   Everything inside targets _top on purpose, so following a link leaves the
   drawer rather than nesting a second one behind it.

   Wide, because this is a focused page rather than a sidebar: a record's own
   tables were laid out for a full width and wrap badly when squeezed. */
.nx-peek-scrim {
  position: fixed; inset: 0; background: rgba(38, 51, 44, 0.32);
  z-index: 40; animation: nx-fade 120ms ease-out;
  /* A link so dismissal works without JavaScript and needs no handler; it
     carries no link affordances because it is a surface, not a control. */
  display: block; text-decoration: none; cursor: default;
}
.nx-peek {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* A focused page rather than a sidebar. The floor keeps it usable on a
     phone, where 75vw would be narrower than the content needs. */
  width: max(75vw, min(560px, 94vw));
  /* Ground, not panel: the drawer is a page, and its cards want the same
     contrast against warm paper that they get everywhere else. A near-white
     sheet reads as a foreign surface pasted over the interface. */
  background: var(--nx-ground);
  border-left: 1px solid var(--nx-line);
  box-shadow: var(--nx-shadow-pop); z-index: 41;
  display: flex; flex-direction: column;
  animation: nx-slide-in 160ms ease-out;
}
.nx-peek-head {
  display: flex; align-items: center; gap: var(--nx-s4);
  padding: var(--nx-s3) var(--nx-s5) var(--nx-s3) var(--nx-s6);
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-panel);
}
.nx-peek-eyebrow {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nx-ink-3); font-weight: 650;
}
.nx-peek-acts { margin-left: auto; display: flex; align-items: center; gap: var(--nx-s2); }
.nx-peek-full {
  font-size: 12.5px; font-weight: 650; color: var(--nx-primary); text-decoration: none;
  padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-radius);
  display: inline-flex; align-items: center; gap: 5px;
}
.nx-peek-full:hover { background: var(--nx-primary-soft); }
.nx-peek-arrow { font-size: 11px; }
.nx-peek-close {
  font-size: 15px; color: var(--nx-ink-3); text-decoration: none; line-height: 1;
  padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-radius);
}
.nx-peek-close:hover { background: var(--nx-ground); color: var(--nx-ink); }
.nx-peek-loading { padding: var(--nx-s6); color: var(--nx-ink-3); font-size: 13px; }

/* The record page supplies its own content; the drawer supplies the room. */
.nx-peek turbo-frame#nx-peek-body { display: block; flex: 1; overflow-y: auto; padding: var(--nx-s6); }
/* The drawer is wide so a record's own tables are not squeezed, but a card
   stretched to the full width strands short values in open space. Content
   reads as a document with a measure, not as a panel pulled to the edges. */
.nx-peek turbo-frame#nx-peek-body > * { max-width: 860px; }
.nx-peek turbo-frame .nx-crumbs { display: none; }
.nx-peek turbo-frame .nx-page-head { padding: 0; }
.nx-peek turbo-frame .nx-note:last-child { margin-bottom: 0; }

@keyframes nx-slide-in { from { transform: translateX(16px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nx-peek, .nx-peek-scrim { animation: none; }
}
.nx-peek-loading { padding: var(--nx-s6); color: var(--nx-ink-3); font-size: 13px; }
.nx-peek turbo-frame { display: block; flex: 1; overflow-y: auto; }
.nx-peek turbo-frame .nx-page-head { padding: 0 var(--nx-s6); }
.nx-peek turbo-frame .nx-panel-card { margin: 0 var(--nx-s6) var(--nx-s5); }
.nx-peek turbo-frame .nx-note { padding: 0 var(--nx-s6) var(--nx-s6); }

/* Overview notes and links */
.nx-overview-links { display: flex; gap: var(--nx-s4); flex-wrap: wrap; }
.nx-overview-notes { padding: var(--nx-s5) var(--nx-s6); }
.nx-note-list { list-style: none; margin: var(--nx-s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-s4); }
.nx-note-list li { border-left: 2px solid var(--nx-line); padding-left: var(--nx-s4); }
.nx-note-body { margin: 0; font-size: 13.5px; color: var(--nx-ink); white-space: pre-wrap; }
.nx-note-meta { font-size: 11.5px; color: var(--nx-ink-3); }
.nx-row-action { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--nx-money-out); cursor: pointer; }
.nx-row-action:hover { text-decoration: underline; }

/* ---------- Hint: the disclosure ladder's third rung ----------
   The dotted underline is the affordance: without something signalling that
   more exists, a tooltip is a secret. Opens on hover and on focus, because
   touch has no hover and a keyboard never produces one. */
.nx-hint { position: relative; display: inline-block; cursor: help; outline-offset: 3px; }
.nx-hint-label {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--nx-ground); color: var(--nx-ink-2);
  border-bottom: 1px dotted var(--nx-ink-3);
}
.nx-hint-credential .nx-hint-label { background: var(--nx-credential-wash); color: #8a6413; border-bottom-color: #8a6413; }
.nx-hint-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px; z-index: 30;
  background: var(--nx-ink); color: var(--nx-panel);
  font-size: 12px; font-weight: 400; line-height: 1.45;
  padding: 8px 11px; border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-pop);
  opacity: 0; visibility: hidden; transition: opacity 90ms ease-out;
}
.nx-hint:hover .nx-hint-bubble,
.nx-hint:focus .nx-hint-bubble,
.nx-hint:focus-within .nx-hint-bubble { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .nx-hint-bubble { transition: none; } }

/* ---------- Fieldbook reference page ---------- */
/* Not inside the deck, so this page brings the padding the deck would have
   given it. Without this the content sits flush against the viewport edge. */
.nx-ref { max-width: 980px; margin: 0 auto; padding: var(--nx-s6) var(--nx-s6) 64px; box-sizing: border-box; width: 100%; }
.nx-ref-lede { font-size: 16px; color: var(--nx-ink-2); max-width: 66ch; margin: 0 0 var(--nx-s6); }
.nx-ref-sec { margin-bottom: var(--nx-s7, 40px); }
.nx-ref-sec .nx-subtitle { margin-bottom: var(--nx-s2); }
.nx-ref-specimen { display: flex; flex-wrap: wrap; gap: var(--nx-s3); align-items: center; padding: var(--nx-s5); border: 1px dashed var(--nx-line); border-radius: var(--nx-radius); background: var(--nx-panel); margin: var(--nx-s3) 0; }
.nx-ref-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--nx-s3); margin: var(--nx-s3) 0; }
.nx-ref-sw { border: 1px solid var(--nx-line); border-radius: var(--nx-radius); overflow: hidden; background: var(--nx-panel); }
.nx-ref-chip { height: 46px; }
.nx-ref-swmeta { padding: var(--nx-s2) var(--nx-s3); font-size: 11.5px; }
.nx-ref-swmeta b { display: block; }
.nx-ref-swmeta code { font-family: var(--nx-font-mono); font-size: 10.5px; color: var(--nx-ink-3); }
.nx-ref-rules { margin: var(--nx-s3) 0 0; padding-left: var(--nx-s5); font-size: 13.5px; color: var(--nx-ink-2); }
.nx-ref-rules li { margin-bottom: var(--nx-s2); max-width: 68ch; }
.nx-ref-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--nx-s4); }
.nx-ref-three .nx-panel-card { padding: var(--nx-s4) var(--nx-s5); }
.nx-ref-no { color: var(--nx-ink-3); text-decoration: line-through; }
.nx-ref-foot { margin-top: var(--nx-s7, 40px); padding-top: var(--nx-s5); border-top: 1px solid var(--nx-line); }
.nx-expected { padding: var(--nx-s4) var(--nx-s5); margin-bottom: var(--nx-s4); }
.nx-expected-list { list-style: none; margin: var(--nx-s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s5); }
.nx-expected-list li { display: flex; align-items: center; gap: var(--nx-s3); font-size: 13.5px; }
.nx-row-action-go { color: var(--nx-primary); font-weight: 650; }

/* ---------- Field group ----------
   One definition rendered in two contexts: standing alone in settings, and
   inside a guided frame during setup. */
.nx-fieldgroup { padding: var(--nx-s5) var(--nx-s6); display: flex; flex-direction: column; gap: var(--nx-s5); max-width: 560px; }
.nx-field { display: flex; flex-direction: column; gap: var(--nx-s2); }
.nx-field-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; }
.nx-field-hint { margin: 0; font-size: 12.5px; color: var(--nx-ink-3); }
.nx-field-error { margin: 0; font-size: 12.5px; color: var(--nx-money-out); font-weight: 650; }
.nx-field-bad .nx-input { border-color: var(--nx-money-out); }
.nx-form-errors { background: var(--nx-money-out-wash); border-left: 3px solid var(--nx-money-out); border-radius: 0 var(--nx-radius) var(--nx-radius) 0; padding: var(--nx-s3) var(--nx-s4); }
.nx-form-errors p { margin: 0; font-size: 13px; color: var(--nx-money-out); }
.nx-textarea { font-family: inherit; line-height: 1.5; }
.nx-field-actions { display: flex; align-items: center; gap: var(--nx-s4); }
.nx-btn-quiet { font-size: 13px; color: var(--nx-ink-3); text-decoration: none; }
.nx-btn-quiet:hover { color: var(--nx-ink); }
.nx-setup-list { display: flex; flex-direction: column; gap: var(--nx-s3); }
.nx-setup-row { display: flex; align-items: center; gap: var(--nx-s5); padding: var(--nx-s4) var(--nx-s6); }
.nx-setup-main { flex: 1; }
.nx-setup-label { font-size: 14.5px; font-weight: 650; }
.nx-setup-label a { text-decoration: none; }
.nx-setup-summary { margin: 2px 0 0; font-size: 12.5px; color: var(--nx-ink-3); }
.nx-fieldgroup-note { padding: 0 var(--nx-s6) var(--nx-s5); }
/* Blocked: what is missing, and the one control that fixes it. */
.nx-blocked { padding: var(--nx-s5) var(--nx-s6); display: flex; flex-direction: column; gap: var(--nx-s3); align-items: flex-start; }
.nx-blocked .nx-subtitle { margin: 0; }
.nx-blocked .nx-note { margin: 0; max-width: 62ch; }
.nx-code-small { font-size: 20px; padding: var(--nx-s2) var(--nx-s4); }

/* ---------- Needs you ----------
   Attention arrives with the work rather than on a page somebody has to
   remember to visit (personas.md §6: no Overview section). */
.nx-needs { margin-bottom: var(--nx-s6); }
.nx-actions { display: flex; flex-direction: column; gap: var(--nx-s3); margin-top: var(--nx-s2); }
.nx-action {
  display: flex; align-items: center; gap: var(--nx-s4); text-decoration: none;
  background: var(--nx-panel); border: 1px solid var(--nx-line); border-left-width: 3px;
  border-radius: var(--nx-radius); padding: var(--nx-s3) var(--nx-s5); color: var(--nx-ink);
}
.nx-action:hover { box-shadow: var(--nx-shadow-panel); }
.nx-action-credential { border-left-color: var(--nx-credential); }
.nx-action-primary { border-left-color: var(--nx-primary); }
.nx-action-plain { border-left-color: var(--nx-line); }
.nx-action-count {
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 44px; text-align: center; color: var(--nx-ink-2);
  white-space: nowrap;
}
.nx-action-credential .nx-action-count { color: #8a6413; }
.nx-action-primary .nx-action-count { color: var(--nx-primary); }
.nx-action-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.nx-action-title { font-size: 14px; }
.nx-action-detail { font-size: 12.5px; color: var(--nx-ink-3); }
.nx-action-badge { font-size: 11px; color: var(--nx-ink-3); font-weight: 400; }
.nx-action-go { color: var(--nx-ink-3); font-size: 15px; }
.nx-action:hover .nx-action-go { color: var(--nx-primary); }

/* ---------- Dashboard ---------- */
.nx-dash-sec { margin-bottom: var(--nx-s6); }
.nx-dash-sec .nx-cap { margin-bottom: var(--nx-s2); }
.nx-dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--nx-s5); }

/* ---------- Schedule ----------
   A month at a glance. A class that runs Monday to Friday draws as one bar
   across five columns rather than five separate marks, so the length of a
   class is visible rather than inferred. Day cells span every row of their
   week and the bars sit over them in lanes. */
.nx-cal-nav { display: flex; gap: var(--nx-s3); margin-bottom: var(--nx-s4); }
.nx-cal-step { font-size: 13px; text-decoration: none; color: var(--nx-ink-2); padding: var(--nx-s2) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-radius); background: var(--nx-panel); }
.nx-cal-step:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
.nx-cal-today { font-weight: 650; }
/* Sized for the longest month name so the row does not reflow under the
   cursor as you page through months. */
.nx-cal-step-month { min-width: 9.5em; text-align: center; }

.nx-cal { border: 1px solid var(--nx-line); border-radius: var(--nx-radius-panel); overflow: hidden; background: var(--nx-line); display: flex; flex-direction: column; gap: 1px; }
.nx-cal-heads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.nx-cal-head { background: var(--nx-panel); padding: var(--nx-s2) var(--nx-s3); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-ink-3); font-weight: 650; }

.nx-cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Rows are set per week in the markup: the date line, one row per lane the
     week actually uses, then filler. min-height keeps a quiet week from
     collapsing into a strip while a busy one grows to hold every class. */
  gap: 1px;
  min-height: 104px;
  background: var(--nx-line);
}
.nx-cal-day { background: var(--nx-panel); padding: 5px 6px; min-width: 0; }
.nx-cal-out { background: var(--nx-ground); }
.nx-cal-out .nx-cal-date { color: var(--nx-ink-3); }
.nx-cal-now { box-shadow: inset 0 0 0 2px var(--nx-primary); }
/* The number needs air beneath it, or the first bar crowds the date. */
.nx-cal-date { display: block; padding-bottom: 3px; font-size: 11.5px; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.nx-cal-now .nx-cal-date { color: var(--nx-primary); font-weight: 700; }

.nx-cal-bar {
  position: relative; z-index: 1; align-self: center;
  /* A row: the instructor mark stands against both lines, the text stacks
     beside it. The lane is taller than the bar so consecutive classes are not
     wall to wall. */
  display: flex; align-items: center; gap: 6px;
  /* A spanning grid item contributes its min-content width to every track it
     covers, so a long class title widened its five days and squeezed the rest
     of the week. Zero minimum lets the title ellipsis instead. */
  min-width: 0;
  margin: 0 3px; padding: 3px 7px;
  font-size: 11px; line-height: 1.25; text-decoration: none;
  /* Every bar carries its own border and a stage-coloured left edge, so it
     reads as a bar on a panel day, an out-of-month day, and the today ring
     alike. Fill alone could not do that: a finished class tinted with the
     page ground vanished completely on the days that share it. */
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-ink-3);
  border-radius: 4px;
  background: var(--nx-panel); color: var(--nx-ink);
  overflow: hidden;
}
.nx-cal-bar-who { flex: none; font-size: 11px; line-height: 1; opacity: 0.7; }
.nx-cal-bar-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1; }
.nx-cal-bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nx-cal-bar-meta {
  display: flex; gap: 7px; min-width: 0;
  overflow: hidden; white-space: nowrap;
  font-size: 10px; color: var(--nx-ink-3);
}
.nx-cal-bar-fact { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nx-cal-glyph { font-size: 9px; opacity: 0.8; }

/* Stage lives in the left edge and the wash, never in the label, because the
   bar is a link and spruce is this interface's colour for "clickable". The
   edge marks state the way the dashboard's attention bands do. */
.nx-cal-bar-ahead { background: var(--nx-primary-soft); border-color: #cfdcd3; border-left-color: var(--nx-primary); }
.nx-cal-bar-open { background: var(--nx-credential-wash); border-color: #e9d9b3; border-left-color: var(--nx-credential); }
.nx-cal-bar-done { background: var(--nx-quiet-wash); border-color: var(--nx-line); border-left-color: var(--nx-ink-3); color: var(--nx-ink-2); }
.nx-cal-bar-draft { background: var(--nx-quiet-wash); border-style: dashed; border-left-style: solid; border-left-color: var(--nx-ink-3); color: var(--nx-ink-3); }
.nx-cal-bar-canceled { background: var(--nx-money-out-wash); border-color: #ecd5c9; border-left-color: var(--nx-money-out); color: var(--nx-ink-2); }
.nx-cal-bar-canceled .nx-cal-bar-title { text-decoration: line-through; }

.nx-cal-bar:hover { border-color: var(--nx-primary); box-shadow: var(--nx-shadow-panel); }
.nx-cal-bar:hover .nx-cal-bar-title { color: var(--nx-primary); }
/* Squared off where a class continues past the edge of the row, so a bar that
   is cut by the week does not look like one that ends there. */
/* Keeps its stage stripe: the second half of a class that crosses Saturday
   is still that class, and dropping the edge left it the only bar on the
   grid with no state at all. Squared corners carry the continuation. */
.nx-cal-bar-from { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.nx-cal-bar-into { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

.nx-cal-key { display: flex; flex-wrap: wrap; gap: var(--nx-s4); list-style: none; margin: var(--nx-s3) 0 0; padding: 0; font-size: 11.5px; color: var(--nx-ink-2); }
.nx-cal-key-item { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-cal-key-chip { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-ink-3); }

@media (max-width: 700px) {
  .nx-cal-bar { font-size: 10px; padding: 2px 4px; }
  .nx-cal-bar-meta { display: none; }
}

/* ---------- Schedule views ----------
   One set of classes, four densities. The segmented control and the period
   arrows sit on one row, so switching view and moving through time read as
   the two controls they are rather than one bank of buttons. */
.nx-cal-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); margin-bottom: var(--nx-s4); }
.nx-cal-bar-row .nx-cal-nav { margin-bottom: 0; }

.nx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--nx-ground); border: 1px solid var(--nx-line); border-radius: var(--nx-radius); }
.nx-seg-item { padding: 5px 12px; font-size: 13px; text-decoration: none; color: var(--nx-ink-2); border-radius: 6px; }
.nx-seg-item:hover { background: var(--nx-primary-soft); color: var(--nx-primary); }
.nx-seg-item.nx-on { background: var(--nx-primary); color: var(--nx-primary-contrast); font-weight: 650; }

/* Week: the same grid as the month, given room to say the hours too. */
.nx-cal-roomy .nx-cal-week { min-height: 190px; }
.nx-cal-roomy .nx-cal-bar { align-items: flex-start; }
.nx-cal-roomy .nx-cal-bar-who { padding-top: 2px; }
.nx-cal-bar-hours { font-size: 10px; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Agenda: read one class at a time, so it carries the most per class. */
.nx-agenda { display: flex; flex-direction: column; gap: var(--nx-s3); }
.nx-agenda-day { display: grid; grid-template-columns: 62px 1fr; gap: var(--nx-s4); align-items: start; }
.nx-agenda-date { display: flex; flex-direction: column; align-items: center; padding: var(--nx-s2) 0; color: var(--nx-ink-2); }
.nx-agenda-dow { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-ink-3); }
.nx-agenda-num { font-family: var(--nx-font-title); font-size: 24px; line-height: 1.1; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-agenda-mon { font-size: 11px; color: var(--nx-ink-3); }
.nx-agenda-date.nx-on .nx-agenda-num { color: var(--nx-primary); }
.nx-agenda-today { margin-top: 3px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-primary); font-weight: 650; }
.nx-agenda-items { display: flex; flex-direction: column; gap: var(--nx-s2); min-width: 0; }
.nx-agenda-item {
  display: grid; grid-template-columns: 132px 1fr auto; gap: var(--nx-s4); align-items: center;
  padding: var(--nx-s3) var(--nx-s4); text-decoration: none;
  background: var(--nx-panel); border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-ink-3); border-radius: var(--nx-radius);
}
.nx-agenda-item:hover { border-color: var(--nx-primary); box-shadow: var(--nx-shadow-panel); }
.nx-agenda-when { font-size: 12px; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-agenda-body { min-width: 0; }
.nx-agenda-title { font-size: 14px; font-weight: 650; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-agenda-facts { display: flex; flex-wrap: wrap; gap: var(--nx-s3); margin-top: 2px; font-size: 11.5px; color: var(--nx-ink-3); }
.nx-agenda-fact { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
/* Same edge vocabulary as the grid, so a class reads the same in both. */
.nx-agenda-ahead { border-left-color: var(--nx-primary); }
.nx-agenda-open { border-left-color: var(--nx-credential); }
.nx-agenda-done { border-left-color: var(--nx-ink-3); background: var(--nx-quiet-wash); }
.nx-agenda-draft { border-left-color: var(--nx-ink-3); border-style: dashed; border-left-style: solid; }
.nx-agenda-canceled { border-left-color: var(--nx-money-out); background: var(--nx-money-out-wash); }
.nx-agenda-canceled .nx-agenda-title { text-decoration: line-through; }

/* Year: read as a shape, shaded by load. Two nested targets share the card -
   a cover link for the month behind, week rows above it - so neither is an
   anchor inside an anchor and both are reachable by keyboard. */
.nx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nx-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: var(--nx-s4); }
.nx-year-month { position: relative; background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: var(--nx-radius); padding: var(--nx-s3); }
/* The month you are standing in. Ground rather than a border, because the
   border is already spoken for by hover and would make the current month look
   permanently under the cursor. */
.nx-year-month.nx-year-here { background: var(--nx-quiet-wash); border-color: #d8d2be; }
.nx-year-here .nx-year-name { color: var(--nx-primary); }
.nx-year-cover { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.nx-year-month:hover { border-color: var(--nx-primary); }
.nx-year-month:focus-within { border-color: var(--nx-primary); }
/* A week under the cursor takes the card's highlight, so only one target is
   ever offered at a time. */
.nx-year-month:has(.nx-year-week:hover) { border-color: var(--nx-line); }
.nx-year-month:has(.nx-year-week:focus-visible) { border-color: var(--nx-line); }

.nx-year-head { position: relative; z-index: 1; pointer-events: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-s2); margin-bottom: var(--nx-s2); }
.nx-year-name { font-size: 13px; font-weight: 650; color: var(--nx-ink); }
.nx-year-month:hover .nx-year-name { color: var(--nx-primary); }
.nx-year-count { font-size: 10.5px; color: var(--nx-ink-3); }
/* An empty month is the finding, so it is said in words rather than left as
   an absence of marks the eye has to notice. */
.nx-year-empty { color: var(--nx-credential); font-weight: 650; }

.nx-year-grid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.nx-year-dows, .nx-year-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.nx-year-dows { pointer-events: none; padding: 0 2px; }
.nx-year-dow { font-size: 9px; color: var(--nx-ink-3); text-align: center; }
.nx-year-week { padding: 2px; border-radius: 5px; text-decoration: none; box-shadow: inset 0 0 0 1.5px transparent; }
.nx-year-week:hover, .nx-year-week:focus-visible { box-shadow: inset 0 0 0 1.5px var(--nx-primary); outline: none; }
.nx-year-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: var(--nx-ink-3); border-radius: 3px; font-variant-numeric: tabular-nums; }
.nx-year-off { visibility: hidden; }
/* Today has to read on every step of the ramp, including the darkest, where a
   spruce ring is the same colour as the fill it sits on. A pale halo inside a
   dark ring gives one edge that survives a light background and one that
   survives a dark one, so the mark never depends on the shade beneath it. */
.nx-year-now { box-shadow: inset 0 0 0 1.5px var(--nx-panel), inset 0 0 0 3px var(--nx-ink); font-weight: 700; }

.nx-heat-1 { background: var(--nx-heat-1); color: var(--nx-ink); }
.nx-heat-2 { background: var(--nx-heat-2); color: var(--nx-ink); }
.nx-heat-3 { background: var(--nx-heat-3); color: var(--nx-ink); }
.nx-heat-4 { background: var(--nx-heat-4); color: var(--nx-primary-contrast); }

/* Shading means nothing without its scale. */
.nx-year-key { display: flex; align-items: center; gap: var(--nx-s2); margin-top: var(--nx-s4); font-size: 11px; color: var(--nx-ink-3); }
.nx-year-key-label { margin-right: var(--nx-s2); }
.nx-year-key-end { font-size: 10.5px; }
.nx-year-key-chip { width: 12px; height: 12px; border-radius: 3px; background: var(--nx-panel); border: 1px solid var(--nx-line); }

@media (max-width: 700px) {
  .nx-agenda-item { grid-template-columns: 1fr; gap: var(--nx-s2); }
  .nx-agenda-day { grid-template-columns: 48px 1fr; }
}

/* Leaving for the classic interface is marked, never hidden. */
.nx-external-mark { font-size: 10px; color: var(--nx-ink-3); margin-left: 4px; }
body {
  font-family: 'Karla', sans-serif;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 2em
}

main a {
  color: #369;
  text-decoration: underline;
}
/* line 1, app/assets/stylesheets/table.scss */
.table {
  border: 1px solid #000;
  margin: 10px 0;
}

/* line 5, app/assets/stylesheets/table.scss */
.table th {
  background: #f0f0f0;
  border-bottom: 1px solid #000;
  padding: 5px;
  text-align: left;
}

/* line 12, app/assets/stylesheets/table.scss */
.table td {
  border-bottom: 1px solid #000;
  padding: 5px;
}
/* Loaded only in the test environment: transitions and animations make
 * Capybara race moving click targets. Behavior stays identical; motion
 * is removed so element geometry is settled the instant classes change. */
*, *::before, *::after {
  transition: none !important;
  animation: none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* Template Preview Table Styles */
/* line 18, app/assets/stylesheets/application.scss */
.template-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  border: 1px solid #d1d5db;
}

/* line 25, app/assets/stylesheets/application.scss */
.template-preview table th,
.template-preview table td {
  border: 1px solid #d1d5db;
  padding: 0.75rem;
  text-align: left;
}

/* line 32, app/assets/stylesheets/application.scss */
.template-preview table th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* line 37, app/assets/stylesheets/application.scss */
.template-preview table tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Ensure prose tables are styled properly */
/* line 42, app/assets/stylesheets/application.scss */
.prose table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1rem 0 !important;
  border: 1px solid #d1d5db !important;
}

/* line 49, app/assets/stylesheets/application.scss */
.prose table th,
.prose table td {
  border: 1px solid #d1d5db !important;
  padding: 0.75rem !important;
  text-align: left !important;
}

/* line 56, app/assets/stylesheets/application.scss */
.prose table th {
  background-color: #f9fafb !important;
  font-weight: 600 !important;
}

/* line 61, app/assets/stylesheets/application.scss */
.prose table tr:nth-child(even) {
  background-color: #f9fafb !important;
}