/*
 * surface_rail.css — <surface-rail> custom element styling.
 *
 * Phase 4 of the surface-architecture migration. Consolidates the rail
 * rules that previously lived split across `styles.css` (.rail, .rail-*,
 * .rail-attention-*, .rail-glyph-*, .rail-hover-*, .project-picker*,
 * .nav-row, .batch, .eyebrow) and `canvas.css` (.cv-rail-wrap,
 * .cv-rail-toggle, .cv-rail-dots, .cv-rail-dot*).
 *
 * Spec: surface_architecture.md §4.4 + §5 (CSS ownership) + §7 Phase 4
 *
 * BEM-style selectors: surface-rail__<part>--<modifier>.
 * Mode driven by [data-mode="normal" | "thin" | "hidden"] on the host.
 */

/* ============================================================
   HOST — mode-driven layout
   ============================================================ */
surface-rail {
  display: flex;
  flex-direction: column;
  background: var(--canvas, #FBF7F1);
  overflow: hidden;
  min-height: 0;
  height: 100%;
  padding: 0 6px;
  /* width is owned by the surface's grid (`<surface-shell>` per Phase 6);
     rail just fills the column. The shell's data-rail attribute drives
     the column width. */
}

/* Wave 19A2-FIX P3 — `.shell-rail-wrap` rule moved to surface_shell.css
   per spec §5.4 (scaffold owns its CSS; component does not). The
   shell-rail-wrap class is a scaffold-level layout concern (a wrapping
   <aside slot="rail"> on Concepts that lets the surface-rail's inner
   scroll container bound correctly). It does NOT belong here in the
   surface-rail component's own CSS. */

/* Defense-in-depth on the inner scroll: explicit min-height:0 so flex
   children below don't push past the available column height. */
.surface-rail__scroll {
  min-height: 0;
}

/* The two phase-tab panes inside the scroll body. They sit beside each
   other (one visible, one hidden via JS) — set min-height: 0 so neither
   forces the scroll container taller than its parent. */
.surface-rail__pane {
  min-height: 0;
}

surface-rail[data-mode="hidden"] {
  display: none;
}

surface-rail[data-mode="thin"] {
  align-items: stretch;
  padding: 0;
  padding-top: 44px; /* leave room for toggle button */
  background: var(--surface, #FFFFFF);
  border-right: 1px solid var(--ink-ghost, #ECE3D8);
  position: relative;
}

/* On Canvas the rail sits inside <surface-shell class="surface-shell--canvas">
   as the [slot="rail"] child. Surface tint + right border match the
   historic .cv-shell > surface-rail rule (Phase 6 migration — the
   selector changed from .cv-shell to surface-shell.surface-shell--canvas
   when the wrapper became a Custom Element). */
.surface-shell--canvas > surface-rail[slot="rail"] {
  background: var(--surface, #FFFFFF);
  border-right: 1px solid var(--ink-ghost, #ECE3D8);
  position: relative;
  min-height: 0;
}

/* ============================================================
   MODE TOGGLE PILL (Canvas)
   ============================================================ */
.surface-rail__toggle {
  display: none;
  position: absolute;
  top: 14px; right: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ink-ghost, #ECE3D8);
  background: var(--surface, #FFFFFF);
  color: var(--ink-muted, #7A7269);
  font-size: 13px;
  font-family: var(--mono, monospace);
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  z-index: 6;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.surface-rail__toggle:hover {
  background: var(--accent-tint, #F5E5DA);
  color: var(--accent-deep, #A85E3B);
  border-color: var(--accent-deep, #A85E3B);
}
/* Wave 18D Fix A + B — the toggle is now visible whenever the rail is
   inside a <surface-shell>. Pre-Wave-18D it was Canvas-only; Concepts +
   Editor now also support the `‹` collapse affordance so a single
   muscle-memory works across surfaces. The toggle itself sits absolutely
   positioned on the right edge of the rail; it stays out of the way of
   the normal-mode batch list and overlaps the thin-mode dots column. */
surface-shell > [slot="rail"] > surface-rail > .surface-rail__toggle,
surface-shell > [slot="rail"] surface-rail > .surface-rail__toggle,
.surface-shell--canvas > surface-rail[slot="rail"] > .surface-rail__toggle {
  display: block;
}

/* ============================================================
   PROJECT PICKER
   ============================================================ */
.surface-rail__project {
  position: relative;
  padding: 8px 6px;
  flex-shrink: 0;
}
.surface-rail__project-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--surface, #FFFFFF);
  border: none;
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.06));
  font-family: var(--body, sans-serif);
  text-align: left;
  transition: box-shadow 0.18s ease;
  min-height: 44px;
}
.surface-rail__project-trigger:hover,
.surface-rail__project-trigger.on {
  box-shadow: var(--shadow-lift, 0 4px 12px rgba(0,0,0,0.1));
}
.surface-rail__project-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.surface-rail__project-icon--fallback {
  background: var(--accent, #C97A4F);
  color: #FFF8F1;
  font-family: var(--display, sans-serif);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-accent, 0 1px 3px rgba(168,94,59,0.25));
}
.surface-rail__project-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #2A241F);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surface-rail__project-chevron {
  font-size: 10px;
  color: var(--ink-muted, #7A7269);
  transition: transform 0.18s ease;
}
.surface-rail__project-chevron.open { transform: rotate(180deg); }

.surface-rail__project-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 6px; right: 6px;
  background: var(--surface, #FFFFFF);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-lift, 0 4px 12px rgba(0,0,0,0.1));
  padding: 6px;
  z-index: 20;
  display: flex; flex-direction: column;
  gap: 2px;
}
.surface-rail__project-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-family: var(--body, sans-serif);
  text-align: left;
  transition: background 0.12s ease;
}
.surface-rail__project-item:hover { background: var(--canvas-deep, #F2EAE0); }
.surface-rail__project-item.on { background: var(--accent-tint, #F5E5DA); }
.surface-rail__project-item.on .surface-rail__project-name {
  color: var(--accent-deep, #A85E3B);
}
.surface-rail__project-item .surface-rail__project-icon { width: 24px; height: 24px; border-radius: 6px; }
.surface-rail__project-item .surface-rail__project-name { font-size: 13.5px; font-weight: 500; }
.surface-rail__project-check {
  color: var(--accent-deep, #A85E3B);
  font-size: 12px; font-weight: 600;
}
.surface-rail__project-loading {
  padding: 12px;
  font-size: 11px;
  text-align: center;
}

/* ============================================================
   SCROLL CONTAINER
   ============================================================ */
.surface-rail__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-ghost, #ECE3D8) transparent;
}
.surface-rail__scroll::-webkit-scrollbar { width: 6px; }
.surface-rail__scroll::-webkit-scrollbar-thumb {
  background: var(--ink-ghost, #ECE3D8);
  border-radius: 3px;
}

/* ============================================================
   TABS (Ideas / Brainstorms) + NAV ROW base
   ============================================================ */
.surface-rail__tabs { margin-top: 2px; }

.surface-rail__nav-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin: 1px 4px;
  font-size: 13px;
  color: var(--ink-soft, #4A413B);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
  font-weight: 500;
}
.surface-rail__nav-row:hover {
  background: var(--canvas-deep, #F2EAE0);
  color: var(--ink, #2A241F);
}
.surface-rail__nav-row.on {
  background: var(--surface, #FFFFFF);
  color: var(--ink, #2A241F);
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.06));
  font-weight: 500;
}
.surface-rail__nav-row.on .surface-rail__glyph {
  color: var(--accent, #C97A4F);
}
.surface-rail__nav-row--entry {
  padding: 6px 12px 6px 26px;
  font-size: 13px;
}
.surface-rail__nav-row--entry .surface-rail__glyph {
  width: 12px; height: 12px; font-size: 8px;
}
.surface-rail__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px;
  color: var(--ink-faint, #B5AEA6);
  font-family: var(--mono, monospace);
}

/* Hover-revealed quick-access buttons inside a rail row (open editor / canvas
   without leaving the current concept). */
.surface-rail__hover-actions {
  display: flex; gap: 4px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.surface-rail__nav-row:hover .surface-rail__hover-actions {
  opacity: 1;
  transform: translateX(0);
}
.surface-rail__hover-btn {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #7A7269);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--ink-ghost, #ECE3D8);
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.surface-rail__hover-btn:hover {
  background: var(--accent-tint, #F5E5DA);
  color: var(--accent-deep, #A85E3B);
  border-color: var(--accent-soft, #E5C9B7);
}

/* ============================================================
   ATTENTION BOX (Running + Ready to review)
   ============================================================ */
.surface-rail__attention {
  margin: 10px 4px 8px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--ink-ghost, #ECE3D8);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.06));
}
.surface-rail__attention-sub { padding: 6px 0 8px; }
.surface-rail__attention-sub + .surface-rail__attention-sub {
  border-top: 1px solid var(--ink-ghost, #ECE3D8);
}
.surface-rail__attention-sub--ready {
  background: linear-gradient(180deg, rgba(76, 145, 80, 0.07) 0%, transparent 100%);
}
.surface-rail__attention-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 6px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-deep, #A85E3B);
}
.surface-rail__attention-sub--ready .surface-rail__attention-head { color: #3F7A43; }
.surface-rail__attention-label { letter-spacing: 0.12em; }
.surface-rail__attention-count {
  margin-left: auto;
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  background: var(--accent, #C97A4F);
  color: #FFF8F1;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0;
}
.surface-rail__attention-sub--ready .surface-rail__attention-count {
  background: #3F7A43;
}
.surface-rail__attention-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #C97A4F);
  box-shadow: 0 0 0 0 rgba(201, 122, 79, 0.5);
  animation: surface-rail-pulse 1.8s ease-out infinite;
}
@keyframes surface-rail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 122, 79, 0.5);  transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(201, 122, 79, 0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(201, 122, 79, 0);    transform: scale(1); }
}
.surface-rail__attention-check {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E3EFD4;
  color: #3F7A43;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}
.surface-rail__attention-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--ink, #2A241F);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s;
}
.surface-rail__attention-row:hover { background: var(--canvas, #FBF7F1); }
.surface-rail__attention-row.is-current { background: var(--canvas-deep, #F2EAE0); }
.surface-rail__attention-name {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.surface-rail__attention-status {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  color: var(--accent-deep, #A85E3B);
  background: var(--accent-tint, #F5E5DA);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0;
  max-width: 110px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.surface-rail__attention-glyph {
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.surface-rail__attention-glyph--creating {
  width: 11px; height: 11px;
  background: var(--accent, #C97A4F);
  border-radius: 2px;
  animation: surface-rail-glyph-flash 1.4s ease-in-out infinite;
}
@keyframes surface-rail-glyph-flash {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.surface-rail__attention-glyph--iterating {
  width: 12px; height: 12px;
  border: 1.5px solid var(--accent, #C97A4F);
  border-right-color: transparent;
  border-radius: 50%;
  background: transparent;
  animation: surface-rail-glyph-spin 1.4s linear infinite;
}
@keyframes surface-rail-glyph-spin {
  to { transform: rotate(360deg); }
}
.surface-rail__attention-glyph--working {
  width: 10px; height: 10px;
  background: var(--accent, #C97A4F);
  border-radius: 50%;
  animation: surface-rail-glyph-pulse 1.8s ease-in-out infinite;
}
@keyframes surface-rail-glyph-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.surface-rail__attention-glyph--ready {
  width: 9px; height: 9px;
  background: #3F7A43;
  border-radius: 50%;
}

/* ============================================================
   EYEBROW + SEARCH ROW + NEW BUTTON
   ============================================================ */
.surface-rail__eyebrow {
  font-family: var(--body, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint, #B5AEA6);
  padding: 16px 14px 6px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.surface-rail__count {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
}

.surface-rail__search-row {
  display: flex; align-items: center;
  gap: 6px;
  margin: 0 10px 4px;
}
.surface-rail__search {
  flex: 1;
  font-family: var(--body, sans-serif);
  background: var(--surface, #FFFFFF);
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 5px 8px;
  font-size: 12px;
  color: var(--ink, #2A241F);
  box-shadow: var(--shadow-press, inset 0 1px 2px rgba(0,0,0,0.04));
  outline: none;
  transition: box-shadow 0.18s ease;
}
.surface-rail__search:focus {
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,0.06)), 0 0 0 2px var(--accent-soft, #E5C9B7);
}
.surface-rail__new-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--ink-ghost, #ECE3D8);
  background: var(--surface, #FFFFFF);
  color: var(--ink-muted, #7A7269);
  border-radius: var(--radius-sm, 6px);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.surface-rail__new-btn:hover {
  background: var(--accent-tint, #F5E5DA);
  color: var(--accent-deep, #A85E3B);
  border-color: var(--accent-deep, #A85E3B);
}

/* ============================================================
   BATCHES (folder groups)
   ============================================================ */
.surface-rail__batch { margin-top: 2px; }
.surface-rail__batch-head {
  display: flex; align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  font-family: var(--body, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted, #7A7269);
  border-radius: var(--radius-sm, 6px);
  margin: 0 4px;
  letter-spacing: 0;
}
.surface-rail__batch-head:hover { background: var(--canvas-deep, #F2EAE0); }
.surface-rail__batch-head.on-summary {
  background: var(--accent-tint, #F5E5DA);
}
.surface-rail__batch-head.on-summary .surface-rail__batch-label {
  color: var(--accent-deep, #A85E3B);
}
.surface-rail__batch-label {
  flex: 1;
  cursor: pointer;
  padding: 2px 0;
  color: var(--ink-muted, #7A7269);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surface-rail__batch-head:hover .surface-rail__batch-label {
  color: var(--ink, #2A241F);
}
.surface-rail__batch-head .surface-rail__count {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  color: var(--ink-faint, #B5AEA6);
  flex-shrink: 0;
}
.surface-rail__batch-toggle {
  width: 20px; height: 20px;
  border: none;
  background: transparent;
  color: var(--ink-faint, #B5AEA6);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.surface-rail__batch-toggle:hover {
  background: var(--surface, #FFFFFF);
  color: var(--ink, #2A241F);
  box-shadow: var(--shadow-press, inset 0 1px 2px rgba(0,0,0,0.04));
}

/* ============================================================
   THIN MODE (Canvas collapsed rail) — status dots
   ============================================================ */
.surface-rail__dots {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}
.surface-rail__dots::-webkit-scrollbar { width: 4px; }
.surface-rail__dots::-webkit-scrollbar-thumb {
  background: var(--ink-ghost, #ECE3D8);
  border-radius: 2px;
}

surface-rail[data-mode="thin"] .surface-rail__dots { display: flex; }

.surface-rail__dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink-faint, #B5AEA6);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  border: 2px solid transparent;
}
.surface-rail__dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(201, 122, 79, 0.18);
}
.surface-rail__dot.is-current {
  border-color: var(--accent-deep, #A85E3B);
  box-shadow: 0 0 0 2px rgba(168, 94, 59, 0.22);
}
.surface-rail__dot--good { background: var(--good, #5C7A4A); }
.surface-rail__dot--live {
  background: #d68a2f;
  animation: surface-rail-dot-pulse 1.4s ease-in-out infinite;
}
.surface-rail__dot--err  { background: var(--err, #9B4B3F); }
.surface-rail__dot--idle { background: var(--ink-faint, #B5AEA6); }
@keyframes surface-rail-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 138, 47, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(214, 138, 47, 0); }
}

/* ============================================================
   MINI HELPERS (used inside the rail only)
   ============================================================ */
surface-rail .mono { font-family: var(--mono, monospace); }
surface-rail .faint { color: var(--ink-faint, #B5AEA6); }
surface-rail .ghost { color: var(--ink-faint, #B5AEA6); }