/* VRU Canvas — Design System
 * Extracted from kevytjuridiikka/css/shell.css (proven 1,100-line source).
 * One CSS file. One theme. One accent color. The builder's source of truth.
 *
 * ══════════════════════════════════════════════════════════════════════════
 * MAPPING TABLE: Canvas Spec Element → CSS Class → Visual Treatment
 * ══════════════════════════════════════════════════════════════════════════
 *
 * RULE 1 — DEPTH IS SIZE
 * ┌─────────────────────┬──────────────────────┬─────────────────────────────────────┐
 * │ Tree Level          │ CSS Class            │ Visual Treatment                    │
 * ├─────────────────────┼──────────────────────┼─────────────────────────────────────┤
 * │ Level 0 (root)      │ .doc-header-name     │ 28px, weight 300, ls -0.02em       │
 * │ Level 0 type label  │ .doc-header-type     │ 10px, spaced caps, 0.25 opacity    │
 * │ Level 1 (sections)  │ .doc-section-title   │ 14px, weight 600, 0.85 opacity     │
 * │ Level 1 dot         │ .doc-section-dot     │ 26px circle, 1px border, numbered  │
 * │ Level 2 (fields)    │ .dp-value            │ 13px, weight 400, 0.85 opacity     │
 * │ Level 2 labels      │ .dp-label            │ 10px, weight 600, uppercase, 0.55  │
 * │ Level 3+ (metadata) │ .text-meta           │ 11px, weight 400, 0.45 opacity     │
 * └─────────────────────┴──────────────────────┴─────────────────────────────────────┘
 *
 * RULE 2 — SPACING IS GROUPING
 * ┌─────────────────────┬──────────────────────┬─────────────────────────────────────┐
 * │ Relationship        │ CSS Class            │ Gap                                 │
 * ├─────────────────────┼──────────────────────┼─────────────────────────────────────┤
 * │ Between sections    │ .doc-section-body    │ padding-bottom: 24px                │
 * │ Within section      │ .field-row           │ margin-bottom: 10px                 │
 * │ Field grid          │ .data-panel-grid     │ gap: 14px 24px                      │
 * │ Leaf padding        │ .canvas-leaf         │ padding: 24px                       │
 * └─────────────────────┴──────────────────────┴─────────────────────────────────────┘
 *
 * RULE 3 — STATE IS VISIBLE
 * ┌─────────────────────┬──────────────────────┬─────────────────────────────────────┐
 * │ State               │ CSS Class            │ Visual Treatment                    │
 * ├─────────────────────┼──────────────────────┼─────────────────────────────────────┤
 * │ Filled value        │ .dp-value            │ 13px, 0.85 opacity                  │
 * │ Empty required      │ .dp-value.empty      │ underline, placeholder 0.28 opacity │
 * │ Locked (no access)  │ .dp-value.locked     │ "[salattu]" text, 0.28 opacity      │
 * │ Editable focus      │ .field-value:focus   │ accent border, brighter bg          │
 * │ Just changed        │ .dp-value.changed    │ accent color, fades to normal       │
 * │ Sealed VRU          │ .doc-section-dot.done│ accent border + bg, accent text     │
 * │ Partial section     │ .doc-section-dot.partial │ warning border + bg             │
 * └─────────────────────┴──────────────────────┴─────────────────────────────────────┘
 *
 * PAGE STRUCTURE (i3 tile model — per CANVAS-SPEC.md)
 * ┌─────────────────────┬──────────────────────┬─────────────────────────────────────┐
 * │ Element             │ CSS ID / Class       │ Visual Treatment                    │
 * ├─────────────────────┼──────────────────────┼─────────────────────────────────────┤
 * │ Frame               │ #canvas              │ flex column, 100vh, position:rel    │
 * │ Tile mount          │ #canvas-root         │ flex:1, padding clears frame chrome │
 * │ Portal brand        │ .frame-portal        │ top-left, 13px 0.35 uppercase 0.15em│
 * │ Avatar + status dot │ .frame-avatar        │ top-right, 28px circle + 4px dot    │
 * │ Crypto strip        │ #canvas-strip        │ 32px absolute bottom, mono whisper  │
 * │ Split (h/v)         │ .canvas-split-h/v    │ flex row/column, gap 4px            │
 * │ Tabbed              │ .canvas-tabbed       │ .canvas-tabs + active .canvas-pane  │
 * │ Grid                │ .canvas-grid         │ CSS grid, gap 4px                   │
 * │ Pane                │ .canvas-pane         │ flex wrapper holding one child      │
 * │ Leaf                │ .canvas-leaf         │ 1px border, 4px radius, padding 24  │
 * │ Resize handle       │ .canvas-resize       │ 4px draggable border between panes  │
 * └─────────────────────┴──────────────────────┴─────────────────────────────────────┘
 *
 * COMPONENTS
 * ┌─────────────────────┬──────────────────────┬─────────────────────────────────────┐
 * │ Spec Element        │ CSS Class            │ Visual Treatment                    │
 * ├─────────────────────┼──────────────────────┼─────────────────────────────────────┤
 * │ Doc header          │ .doc-header-*        │ type label + name + progress + rule │
 * │ Timeline sections   │ .doc-section*        │ dot + line + body + collapsible     │
 * │ Data panel          │ .data-panel          │ card bg, border, rounded, padded    │
 * │ Field grid          │ .data-panel-grid     │ flex-wrap, 3-col responsive         │
 * │ Collection cards    │ .doc-card            │ card bg, border, chevron, hover     │
 * │ Workspace cards     │ .ws-card             │ wider card, label + sub + stats     │
 * │ Ghost/new card      │ .doc-card.ghost      │ dashed border, accent hover         │
 * │ Inspector           │ .inspector           │ inline panel, blur bg, rounded      │
 * │ Inspector row       │ .inspector-row       │ label + value pair                  │
 * │ Actions             │ .action              │ → prefix, accent arrow, 0.55 text   │
 * │ Actions (hover)     │ .action:hover        │ text brightens to 0.85              │
 * │ Breadcrumb          │ .breadcrumb          │ 12px, 0.38 opacity, segments        │
 * │ Completeness number │ .completeness-number │ 28px, weight 300, accent color      │
 * │ Completeness bar    │ .completeness-bar    │ segments: filled=accent, empty=#2A  │
 * │ Status dot          │ .vru-dot             │ 6px, accent bg, accent glow         │
 * │ Status dot saving   │ .vru-dot.saving      │ warning bg, warning glow            │
 * │ Split view          │ .split-view          │ flex row, border-left on secondary  │
 * │ Select options      │ .select-options       │ text list below field               │
 * │ Tables              │ .table-section       │ bordered, rounded, row layout       │
 * │ Sub-section label   │ .doc-sub-label       │ 11px, bold, uppercase, 0.70 opacity │
 * └─────────────────────┴──────────────────────┴─────────────────────────────────────┘
 *
 * DESIGN TOKENS
 *   Surface:      linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%)
 *   Text primary: rgba(255,255,255,0.88)
 *   Text body:    rgba(255,255,255,0.85)
 *   Text muted:   rgba(255,255,255,0.45)
 *   Text faint:   rgba(255,255,255,0.28)
 *   Text label:   rgba(255,255,255,0.55)
 *   Accent:       #4ade80
 *   Accent glow:  0 0 5px #4ade80
 *   Warning:      #fbbf24
 *   Border:       rgba(255,255,255,0.08)
 *   Border hover: rgba(255,255,255,0.18)
 *   Card bg:      rgba(255,255,255,0.03)
 *   Panel bg:     rgba(30,30,30,0.98) + backdrop-filter: blur(12px)
 *   Font stack:   -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif
 *   Font mono:    'SF Mono', 'Fira Code', monospace
 */


/* ── RESET & BODY ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════
 * SECTION: TILES — i3 layout primitives (per CANVAS-SPEC.md)
 *
 *   The canvas surface is a tile tree. Four node types, exhaustive:
 *     leaf | split-h | split-v | tabbed | grid
 *   The tree mounts into #canvas-root. Each .canvas-leaf hosts one
 *   VRU's renderer; the content vocabulary below (.doc-header-*,
 *   .data-panel*, .ws-card, etc.) draws inside leaves.
 *
 *   Day 1 leaves render .leaf-placeholder (vru_id + label). Day 2
 *   swaps placeholders for per-VRU renderers that read MEMORY through
 *   canvas-core. The tiling engine never inspects leaf content.
 * ─────────────────────────────────────────────────────────────────── */

#canvas {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#canvas-root {
  flex: 1;
  display: flex;
  padding: 52px 16px 36px 16px;       /* clears .frame-portal + #canvas-strip */
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.canvas-root {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.canvas-split-h {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.canvas-split-v {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.canvas-grid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.canvas-tabbed {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.canvas-tabs {
  display: flex;
  gap: 1px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.canvas-tab {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.04);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  user-select: none;
}
.canvas-tab:hover { color: rgba(255,255,255,0.55); }
.canvas-tab[aria-selected="true"] {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
}

.canvas-pane {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

/* Resize handle — drag border between siblings in a split. */
.canvas-resize {
  flex: 0 0 4px;
  background: transparent;
  transition: background 0.15s;
  z-index: 1;
}
.canvas-split-h > .canvas-resize { cursor: col-resize; }
.canvas-split-v > .canvas-resize { cursor: row-resize; }
.canvas-resize:hover,
.canvas-resize.dragging { background: rgba(74,222,128,0.12); }

.canvas-leaf {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: auto;
  padding: 24px;
  transition: border-color 0.15s, background 0.15s;
}
.canvas-leaf[data-focused] { border-color: rgba(74,222,128,0.12); }
.canvas-leaf[data-editable] {
  outline: 1px dashed rgba(74,222,128,0.30);
  outline-offset: -2px;
}

/* Day-1 placeholder inside leaves until per-VRU render dispatch
 * lands in Day 2. Real renderers never use this class. */
.leaf-placeholder {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
}
.leaf-placeholder .id    { color: rgba(255,255,255,0.55); }
.leaf-placeholder .label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  margin-top: 8px;
  font-weight: 300;
}


/* ═══════════════════════════════════════════════════════════════════
 * SECTION: FRAME — chrome that floats over the tile root
 *
 *   .frame-portal   top-left brand identifier (JOINED whisper)
 *   .frame-avatar   top-right circle + status dot (signed-in marker
 *                   and account menu trigger)
 *   #canvas-strip   bottom crypto whisper (vz_hash · cnsa 2.0 · ✓)
 *                   — already defined below in the crypto-strip block
 *                   carried from source.
 *
 *   Frame elements live absolutely positioned over #canvas-root so
 *   they don't take tile space; #canvas-root's padding clears them.
 * ─────────────────────────────────────────────────────────────────── */

.frame-portal {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 90;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.frame-avatar {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 90;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  user-select: none;
}
.frame-avatar.current {
  background: rgba(74,222,128,0.08);
  color: #4ade80;
}
.frame-avatar::after {
  /* 4px status dot at bottom-right. Accent at 0.15 = connected.
   * .saving swaps to warning; .offline hides. */
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4ade80;
  opacity: 0.5;
}
.frame-avatar.offline::after { display: none; }
.frame-avatar.saving::after { background: #fbbf24; }


/* ── STATUS DOT (generic, carried from source) ──────────────────── */

.vru-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px #4ade80;
  flex-shrink: 0;
  transition: all 0.4s;
}
.vru-dot.saving { background: #fbbf24; box-shadow: 0 0 5px #fbbf24; }


/* ── CRYPTO STRIP (32px, monospace, bottom) ───────────────────── */

#canvas-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  gap: 8px;
  z-index: 90;
  pointer-events: none;
}
#canvas-strip > * { pointer-events: auto; }

.strip-id {
  cursor: pointer;
  transition: color 0.15s;
}
.strip-id:hover { color: rgba(255,255,255,0.55); }
.strip-sep { opacity: 0.5; }
.strip-tick { color: #4ade80; }


/* ═══════════════════════════════════════════════════════════════════
 * SECTION: PAGE SHELL — non-tiled page chrome (components.html + admin)
 *
 *   The i3 tile model uses #canvas-root + tile primitives above. This
 *   block is the *other* page shape every static reference and admin
 *   page uses: a fixed top bar, a scrollable content area, and a
 *   centered content wrapper. Components.html, the live component
 *   library, and any single-page admin view compose using these IDs.
 *
 *   Coexists with the tile model. The runtime canvas mounts into
 *   #canvas-root and never renders #canvas-top / #canvas-area /
 *   .canvas-view. The static pages mount into #canvas-area and never
 *   render #canvas-root. Both shells share the same canvas.css.
 * ─────────────────────────────────────────────────────────────────── */

#canvas-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px;
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  pointer-events: none;
}
#canvas-top > * { pointer-events: auto; }

#canvas-back { min-width: 80px; }

.back-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.38);
  padding: 5px 2px;
  transition: color 0.2s;
}
.back-link:hover { color: rgba(255,255,255,0.75); }

#canvas-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.logo-name {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.logo-sep {
  color: rgba(255,255,255,0.15);
  font-size: 12px;
}

#canvas-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.user-email {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.vru-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 5px;
}

#canvas-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 52px;
  padding-bottom: 72px;
}
#canvas-area::-webkit-scrollbar { width: 5px; }
#canvas-area::-webkit-scrollbar-track { background: transparent; }
#canvas-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
#canvas-area::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

.canvas-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 120px;
}


/* ═══════════════════════════════════════════════════════════════════
 * SECTION: CONTENT — design vocabulary that draws inside leaves
 *
 *   These classes are the visual truth of every per-VRU renderer:
 *   document headers, timeline sections, data panels, field grids,
 *   workspace + doc cards, inspector, action rows, breadcrumbs,
 *   tables, splits, completeness bars, login surfaces. Untouched
 *   from canvas-vru/canvas.css (the source extracted from the proven
 *   kevytjuridiikka shell). Day 2 renderers compose these classes.
 * ─────────────────────────────────────────────────────────────────── */


/* ── BREADCRUMB NAVIGATION ────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 20px;
}
.breadcrumb-segment {
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
}
.breadcrumb-segment:hover { color: rgba(255,255,255,0.75); }
.breadcrumb-sep { color: rgba(255,255,255,0.2); }


/* ── DOCUMENT HEADER (Level 0 — Tree Root) ────────────────────── */

.doc-header-type {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 8px;
}
.doc-header-name {
  font-size: 28px;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.02em;
  margin-bottom: 5px;
  line-height: 1.2;
}
.doc-header-legal {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  font-weight: 300;
}
.doc-header-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.doc-header-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-top: 20px;
}


/* ── COMPLETENESS ─────────────────────────────────────────────── */

.completeness {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.completeness-number {
  font-size: 28px;
  font-weight: 300;
  color: rgba(74,222,128,0.85);
  letter-spacing: -0.04em;
}
.completeness-label {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-right: auto;
}
.completeness-bar {
  display: flex;
  gap: 3px;
}
.completeness-seg {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #2A2A2E;
}
.completeness-seg.filled { background: #4ade80; }


/* ── TIMELINE SECTIONS (Level 1 — Section Groups) ────────────── */

.doc-section {
  display: flex;
  gap: 0;
}
.doc-section-left {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 9px;
}
.doc-section-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.3);
}
.doc-section-dot.partial {
  border-color: #fbbf24;
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.doc-section-dot.complete {
  border-color: #4ade80;
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.doc-section-line {
  width: 2px;
  flex: 1;
  background: rgba(255,255,255,0.1);
  margin-top: 6px;
  min-height: 24px;
  transition: background 0.35s ease;
}
.doc-section-line.lit { background: rgba(74,222,128,0.18); }

.doc-section-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 24px;
}
.doc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s;
  user-select: none;
  margin-bottom: 2px;
}
.doc-section-header:hover { background: rgba(255,255,255,0.04); }

.doc-section-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.doc-section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-section-count {
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.05);
  padding: 2px 7px;
  border-radius: 8px;
}
.doc-section-chevron {
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.22);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.doc-section.open .doc-section-chevron { transform: rotate(180deg); }

.doc-section-content {
  display: none;
  padding: 4px 14px 12px;
}
.doc-section.open .doc-section-content { display: block; }


/* ── SUB-SECTION LABELS ───────────────────────────────────────── */

.doc-sub-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.70);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 28px 0 12px;
}
.doc-sub-label:first-child { margin-top: 8px; }
.doc-sub-label:not(:first-child) {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 20px;
}


/* ── DATA PANEL (Level 2 — Field Grid) ────────────────────────── */

.data-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}
.data-panel-name {
  font-size: 20px;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.data-panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.data-panel-field { flex: 1 1 calc(33.3% - 16px); min-width: 120px; }

.dp-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
  cursor: default;
}
.dp-label.inspectable { cursor: pointer; }
.dp-label.inspectable:hover { color: rgba(255,255,255,0.75); }

.dp-value {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.dp-value.empty {
  color: rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  min-height: 1.4em;
}
.dp-value.empty[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.28);
  pointer-events: none;
}
.dp-value.locked {
  color: rgba(255,255,255,0.28);
  font-style: italic;
}
.dp-value.changed {
  color: #4ade80;
  transition: color 1.5s ease;
}

.text-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}


/* ── EDITABLE FIELDS ──────────────────────────────────────────── */

.field-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

.field-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  min-width: 0;
}
.field-wrap.full  { flex: 1 1 100%; }
.field-wrap.half  { flex: 1 1 calc(50% - 5px); min-width: 160px; }
.field-wrap.third { flex: 1 1 calc(33% - 7px); min-width: 130px; }

.field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
  display: block;
  line-height: 1.3;
}

.field-value {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.field-value:focus {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(74,222,128,0.5);
  border-radius: 8px;
  padding: 9px 12px;
}
.field-value::placeholder { color: rgba(255,255,255,0.25); }
textarea.field-value { resize: vertical; min-height: 70px; font-family: inherit; }


/* ── SELECT OPTIONS (text list, not dropdown) ─────────────────── */

.select-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.select-option {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  transition: color 0.15s;
}
.select-option:hover { color: rgba(255,255,255,0.85); }
.select-option.active { color: #4ade80; }


/* ── CARDS (Collections, Lists) ───────────────────────────────── */

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 40px 0;
  max-width: 700px;
  margin: 0 auto;
}

.ws-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 200px;
  flex: 1 1 200px;
  max-width: 300px;
}
.ws-card:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.ws-card-label {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin-bottom: 4px;
}
.ws-card-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.ws-card-stats {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.doc-list { display: flex; flex-direction: column; gap: 8px; }

.doc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.doc-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }

.doc-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.doc-card-icon.done {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.doc-card-icon.gap {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
  border: 1px dashed rgba(255,255,255,0.15);
}
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.doc-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.doc-card-date {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
}
.doc-card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.doc-card-badge.done {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.doc-card-badge.gap {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.doc-card-chevron {
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
  font-size: 14px;
}

/* Inline editing variant of the ghost card. When the user clicks
 * "+ new" the same card becomes an input — no modal, no popup.
 * Enter submits, Esc cancels. Same DOM position; no layout shift. */
.doc-card.ghost-card-input {
  border-color: rgba(74,222,128,0.30);
  border-style: solid;
  background: rgba(255,255,255,0.02);
}
.ghost-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  padding: 0;
}
.ghost-input::placeholder { color: rgba(255,255,255,0.28); }
.ghost-cancel {
  font-size: 10px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(255,255,255,0.35);
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  cursor: pointer;
}
.ghost-cancel:hover { color: rgba(255,255,255,0.85); }


.doc-card.ghost {
  border-style: dashed;
  border-color: rgba(255,255,255,0.1);
}
.doc-card.ghost:hover { border-color: rgba(74,222,128,0.25); }


/* ── INSPECTOR (inline metadata panel) ────────────────────────── */

.inspector {
  background: rgba(30,30,30,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 8px;
  margin-bottom: 12px;
}
.inspector-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 12px;
}
.inspector-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}
.inspector-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.inspector-value {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.inspector-value.mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
}
.inspector-trigger {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  padding: 4px 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
}


/* ── ACTIONS (→ text links, not buttons) ──────────────────────── */

.actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
  transition: color 0.15s;
  text-align: left;
}
.action:hover { color: rgba(255,255,255,0.85); }
.action-arrow { color: #4ade80; }


/* ── TABLES ───────────────────────────────────────────────────── */

.table-section {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.table-section-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.52);
  padding: 8px 14px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.table-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 8px 8px 8px 14px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.table-row:last-of-type { border-bottom: none; }

.table-cell { display: flex; flex-direction: column; }
.table-cell.main { flex: 0 0 155px; }
.table-cell.desc { flex: 1; min-width: 0; }
.table-cell.num  { flex: 0 0 110px; text-align: right; }

.table-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 9px 8px 9px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
}
.table-total-amount {
  font-size: 14px;
  font-weight: 700;
  color: rgba(74,222,128,0.85);
  min-width: 100px;
  text-align: right;
}


/* ── SPLIT VIEW ───────────────────────────────────────────────── */

.split-view {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.split-primary {
  flex: 2;
  overflow-y: auto;
}
.split-secondary {
  flex: 1;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.06);
}


/* ── PROGRESS ─────────────────────────────────────────────────── */

.doc-progress-track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #2A2A2E;
  overflow: hidden;
}
.doc-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: #4ade80;
  transition: width 0.5s ease;
}
.doc-progress-label {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  min-width: 32px;
}


/* ── TRANSITIONS ──────────────────────────────────────────────── */

.level-enter { animation: levelIn 0.25s ease-out; }
@keyframes levelIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fadeAccent {
  from { color: #4ade80; }
  to   { color: rgba(255,255,255,0.85); }
}
.dp-value.changed { animation: fadeAccent 1.5s ease forwards; }


/* ── LOADING / ERROR ──────────────────────────────────────────── */

.canvas-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
}
.canvas-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #4ade80;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.canvas-error {
  font-size: 13px;
  color: rgba(180,100,100,0.8);
  padding: 40px 24px;
  text-align: center;
}


/* ── SCROLLBAR ────────────────────────────────────────────────── */

.canvas-leaf::-webkit-scrollbar { width: 5px; }
.canvas-leaf::-webkit-scrollbar-track { background: transparent; }
.canvas-leaf::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
.canvas-leaf::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

.split-primary::-webkit-scrollbar,
.split-secondary::-webkit-scrollbar { width: 5px; }
.split-primary::-webkit-scrollbar-track,
.split-secondary::-webkit-scrollbar-track { background: transparent; }
.split-primary::-webkit-scrollbar-thumb,
.split-secondary::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }


/* ── LOGIN ────────────────────────────────────────────────────── */

#login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
}
.login-box {
  text-align: center;
  max-width: 320px;
  width: 100%;
}
.login-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 32px;
}
.login-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  text-align: left;
}
.login-field {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: rgba(255,255,255,0.88);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.login-field:focus { border-color: rgba(74,222,128,0.5); }
.login-field::placeholder { color: rgba(255,255,255,0.2); }
.login-btn {
  width: 100%;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 8px;
  padding: 10px;
  color: #4ade80;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.login-btn:hover {
  background: rgba(74,222,128,0.25);
  border-color: rgba(74,222,128,0.5);
}
.login-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.login-step {
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  margin-top: 16px;
  line-height: 1.4;
}
.login-email-display {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.login-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-top: 12px;
}
.login-link:hover { color: rgba(255,255,255,0.55); }
.login-error {
  font-size: 12px;
  color: #f87171;
  margin-top: 12px;
}
.login-progress {
  text-align: left;
  line-height: 2;
}
.login-progress-item {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.login-progress-item.done {
  color: #4ade80;
}
.login-progress-item.active {
  color: rgba(255,255,255,0.65);
}
.login-progress-item::before {
  content: '○ ';
}
.login-progress-item.done::before {
  content: '● ';
  color: #4ade80;
}
.login-progress-item.active::before {
  content: '● ';
  color: rgba(255,255,255,0.65);
}
/* 6-digit code input */
.code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.code-digit {
  width: 38px;
  height: 46px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.88);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
  caret-color: #4ade80;
}
.code-digit:focus {
  border-color: rgba(74,222,128,0.5);
  background: rgba(255,255,255,0.06);
}


/* ── COMMAND INPUT ────────────────────────────────────────────── */

#command {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: transparent;
  z-index: 90;
}
.command-prompt {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: #4ade80;
  margin-right: 8px;
  flex-shrink: 0;
}
#command-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  caret-color: #4ade80;
}
#command-input::placeholder {
  color: rgba(255,255,255,0.15);
}
#command-input:focus {
  color: rgba(255,255,255,0.85);
}

.command-result {
  margin-top: 24px;
}

.editable {
  cursor: text;
  transition: color 1.5s ease;
}
.editable:hover {
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}


/* ── RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width: 600px) {
  #canvas-root { padding: 40px 8px 28px 8px; }
  .field-wrap.third { flex: 1 1 calc(50% - 5px); }
  .card-grid { padding: 20px 0; }
  .ws-card { max-width: 100%; }
  .data-panel-field { flex: 1 1 calc(50% - 12px); }
}