@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  /* Base palette */
  --obsidian: #090a0f;
  --mist:     #1e242c;
  --ink:      #f4f0ea;

  /* Interaction accents */
  --honey:    #e8b004;   /* Selection / focus / hover — dark mode */
  --lapis:    #1F52C8;   /* Selection / focus / hover — execute mode */
  --btn-save-text: var(--obsidian); /* dark text on honey gold */

  /* Urgency */
  --amber:    #d4830a;
  --canyon:   #c15c3d;

  /* Domain representative accent colours (start of mat-* gradients) */

  /* Domain material gradients */

  /* Domain text — dark mode (luminous) */

  /* Domain text — execute mode (dark on washi) */

  /* Glass surfaces */
  --glass:       rgba(255, 255, 255, 0.05);
  --glass-inner: rgba(255, 255, 255, 0.09);
  --glass-brd:   rgba(255, 255, 255, 0.12);
  --glass-shd:   0 12px 48px rgba(0, 0, 0, 0.65);

  /* Etched pill surface (action cluster, header cluster, status tile) */
  --pill-bg:  rgba(0, 0, 0, 0.15);
  --pill-brd: rgba(255, 255, 255, 0.03);
  --pill-shd: inset 1px 1px 3px rgba(0, 0, 0, 0.5);

  /* Faded label */
  --faded: rgba(244, 240, 234, 0.45);

  /* RGB components for rgba() usage — avoids hardcoded values */
  --honey-rgb:   232, 176, 4;
  --lapis-rgb:   31, 82, 200;
  --canyon-rgb:  193, 92, 61;
  --amber-rgb:   212, 131, 10;
  --obsidian-rgb: 9, 10, 15;
  --ink-rgb:     244, 240, 234;
  --marble-rgb:  215, 225, 235;

  /* Washi (execute mode) background palette */
  --washi-base:          #e8e2d9;
  --washi-grad-a:        #ede6da;
  --washi-grad-b:        #e2dace;
  --washi-grad-c:        #ddd5c8;
  --washi-fog-warm-rgb:  180, 165, 140;
  --washi-fog-rust-rgb:  160, 100, 80;
  --washi-fog-cool-rgb:  150, 160, 170;

  /* Obsidian (plan mode) background palette */
  --obsidian-surface:    #0f1217;
  --obsidian-deep:       #050608;
  --obsidian-mist-rgb:   30, 36, 44;
  --obsidian-rust-rgb:   169, 104, 104;

  /* Agent / persona colours */
  --clr-strategist:  #93c5fd;   /* = clr-cobalt */
  --clr-risk:        #ff8888;   /* = clr-canyon text */
  --clr-psyche:      #e9d5ff;   /* = clr-purple */
  --clr-oracle:      #fcd34d;   /* warm amber — plan oracle */
  --clr-expert:      #99f6e4;   /* = clr-teal */

  /* Marble cool tint for indicators */
  --marble-cool-rgb: 100, 120, 150;

  /* Stable light — for text always on dark surfaces (domain gradients) */
  --ink-static: #f4f0ea;

  /* Shadows */
  --shd-tooltip:  0 4px 20px rgba(0,0,0,0.6);
  --shd-modal:    0 40px 100px rgba(0,0,0,0.8);
  --overlay-bg:   rgba(0,0,0,0.85);

  --r-md: 8px;
  --r-sm: 4px;
  --card-w: 480px;
}

/* ═══════════════════════════════════════════════════
   EXECUTE MODE — token redefinitions only
   All CSS using var(--glass*), var(--faded), var(--ink),
   var(--honey), var(--clr-*) automatically inverts.
   ═══════════════════════════════════════════════════ */
body.mode-execute {
  --glass:       rgba(0, 0, 0, 0.04);
  --glass-inner: rgba(0, 0, 0, 0.08);
  --glass-brd:   rgba(0, 0, 0, 0.12);
  --glass-shd:   0 4px 20px rgba(0, 0, 0, 0.05);
  --pill-bg:     rgba(0, 0, 0, 0.06);
  --pill-brd:    rgba(0, 0, 0, 0.08);
  --pill-shd:    inset 1px 1px 3px rgba(0, 0, 0, 0.12);
  --ink:         var(--obsidian);
  --faded:       rgba(9, 10, 15, 0.50);
  --honey:       var(--lapis);
  --honey-rgb:   31, 82, 200;
  --btn-save-text: var(--ink-static); /* light text on lapis */
  --ink-rgb:     9, 10, 15;
  background-color: var(--washi-base);
  color: var(--obsidian);
  background-image:
    /* Gold-amber bloom — top-left, warm and visible */
    radial-gradient(ellipse at 8% 0%,  rgba(200,155,60,0.30) 0, transparent 48%),
    /* Rust-terracotta — top-right */
    radial-gradient(ellipse at 98% 6%, rgba(var(--washi-fog-rust-rgb),0.40) 0, transparent 42%),
    /* Amber glow — bottom centre */
    radial-gradient(ellipse at 55% 105%,rgba(var(--amber-rgb),0.22) 0, transparent 50%),
    /* Cool blue-slate shadow — bottom-left */
    radial-gradient(ellipse at -5% 92%,rgba(var(--washi-fog-cool-rgb),0.35) 0, transparent 45%),
    /* Warm honey dust — mid-right */
    radial-gradient(ellipse at 100% 55%,rgba(180,140,80,0.18) 0, transparent 38%),
    /* Paper base — visible tonal gradient */
    linear-gradient(145deg, #f0e6d0 0%, #e4d9c0 30%, #d8ccb0 60%, #ccc09e 100%);
}

/* Execute-only overrides that tokens cannot handle */

/* Modal overlay lighter in execute mode — washi modal on washi bg */
body.mode-execute .modal-bg {
  background: rgba(var(--obsidian-rgb), 0.35);
  backdrop-filter: blur(20px);
}
/* Modal itself needs a solid washi surface, not near-transparent glass */
body.mode-execute .modal {
  background: var(--washi-grad-a);
  border-color: rgba(var(--obsidian-rgb), 0.12);
  box-shadow: 0 20px 60px rgba(var(--obsidian-rgb), 0.25);
}

/* Tile text: domain gradient tiles keep white; generic tiles invert */
body.mode-execute .tile-domain { color: rgba(var(--obsidian-rgb),0.6) !important; }

/* Donut glows invisible on light — solid ring instead */
body.mode-execute .card-hue-indicator.dot-canyon { filter: none; box-shadow: 0 0 0 1px rgba(var(--canyon-rgb),0.5); }
body.mode-execute .card-hue-indicator.dot-amber  { filter: none; box-shadow: 0 0 0 1px rgba(var(--amber-rgb),0.5); }
body.mode-execute .card-hue-indicator.dot-marble { filter: none; border-color: rgba(var(--marble-cool-rgb),0.4); }
body.mode-execute .dot-canyon { box-shadow: none; }
body.mode-execute .dot-amber  { box-shadow: none; }

/* Card hover uses lapis instead of honey */
body.mode-execute .card:hover {
  border-color: rgba(var(--honey-rgb),0.3);
  box-shadow: 0 0 24px rgba(var(--honey-rgb),0.12), var(--glass-shd);
}



/* Hardcoded honey rgba → lapis equivalents in execute mode */
body.mode-execute .card:hover {
  border-color: rgba(var(--honey-rgb),0.3);
  box-shadow: 0 0 30px rgba(var(--honey-rgb),0.18), var(--glass-shd);
}
body.mode-execute .card.selected {
  box-shadow: inset 0 0 0 1px var(--lapis), 0 0 80px rgba(var(--honey-rgb),0.3), var(--glass-shd);
  border-color: rgba(var(--honey-rgb),0.6) !important;
}


/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Lexend Deca", sans-serif;
  background-color: var(--obsidian);
  color: var(--ink);
  height: 100vh; width: 100vw; overflow: hidden; -webkit-font-smoothing: antialiased;
  background-image:
    /* Cold deep-navy haze — top-left atmosphere */
    radial-gradient(ellipse at -5% -10%, rgba(18,35,70,0.95) 0, transparent 55%),
    /* Warm ember — top-right, subtle */
    radial-gradient(ellipse at 105% 0%, rgba(var(--obsidian-rust-rgb),0.25) 0, transparent 45%),
    /* Honey amber warmth — bottom centre */
    radial-gradient(ellipse at 50% 105%, rgba(var(--honey-rgb),0.12) 0, transparent 52%),
    /* Blue-slate depth — mid-left */
    radial-gradient(ellipse at 0% 55%, rgba(25,45,80,0.45) 0, transparent 42%),
    linear-gradient(170deg, #0c1220 0%, var(--obsidian-deep) 60%, #030405 100%);
}

.app { display: grid; grid-template-columns: 2fr 1fr; height: 100vh; width: 100vw; }
@media (max-width: 1440px) and (min-width: 1025px) {
  .app { grid-template-columns: 3fr 2fr; }
}

/* ── Panels ── */
.panel-tree {
  display: flex; flex-direction: column; height: 100vh;
  border-right: 1px solid var(--glass-brd); background: var(--glass);
  overflow: hidden; position: relative;
}
.panel-list { display: flex; flex-direction: column; height: 100vh; background: var(--glass); overflow: hidden; }

/* ── Identity ── */
.user-identity { position: absolute; bottom: 40px; left: 40px; z-index: 100; pointer-events: none; }
.identity-tile { background: var(--glass-inner); border: 1px solid var(--glass-brd); padding: 12px 24px; font-size: 14px; font-weight: 900; letter-spacing: 4px; pointer-events: auto; }
.error-notification { color: var(--clr-canyon); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.error-notification.show { opacity: 1; }

/* ── Header ── */
.hdr { padding: 16px 20px 12px; flex-shrink: 0; }
.hdr-row1 { display: flex; align-items: center; gap: 12px; }
.hdr-row2-icons { display: contents; }

.hdr-date-etched {
  flex: 1; padding: 6px 6px 6px 14px; display: flex; align-items: center; gap: 8px;
  background: var(--pill-bg); border: 1px solid var(--pill-brd);
  box-shadow: var(--pill-shd); border-radius: var(--r-sm);
}
.hdr-date-text {
  flex: 1; font-size: 10px; opacity: 0.4; font-weight: 800;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 1.5px;
}
.hdr-logout-btn {
  background: transparent; border: none;
  color: rgba(var(--ink-rgb),0.25); font-size: 14px; line-height: 1;
  padding: 0 8px 0 4px; border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
  display: flex; align-items: center; flex-shrink: 0; min-height: 36px;
}
.hdr-logout-btn:hover { color: var(--canyon); }
.hdr-icon-cluster {
  display: flex; align-items: center; gap: 4px;
  background: var(--pill-bg); border: 1px solid var(--pill-brd);
  box-shadow: var(--pill-shd); border-radius: var(--r-sm); padding: 4px 6px;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -ms-overflow-style: none; width: 100%;
}
.hdr-icon-cluster::-webkit-scrollbar { display: none; }
/* Each control = a subtile, exactly matching card .tile style */
.hdr-icon {
  background: var(--glass-inner); border: none; cursor: pointer;
  color: rgba(var(--ink-rgb),0.5); font-size: 9px; font-weight: 800; line-height: 1;
  padding: 8px 12px; min-height: 36px; transition: all 0.2s; font-family: inherit;
  letter-spacing: 0.8px; display: flex; align-items: center; gap: 4px;
  justify-content: center; border-radius: var(--r-sm); text-transform: uppercase;
  white-space: nowrap;
}
.hdr-icon:hover { color: var(--ink); background: var(--glass-brd); }
.hdr-icon:active { transform: scale(0.95); }
/* Accent state: mode + council use honey tint like a selected tile */
.hdr-icon--plan    { background: rgba(var(--honey-rgb),0.15); color: var(--honey); }
.hdr-icon--execute { background: rgba(var(--honey-rgb),0.15); color: var(--honey); }
.hdr-icon--active  { color: rgba(var(--ink-rgb),0.55); }
.hdr-icon--archived{ color: rgba(var(--ink-rgb),0.35); }
.hdr-icon--council { background: rgba(var(--honey-rgb),0.12); color: var(--honey); }
.hdr-icon--add     { color: rgba(var(--ink-rgb),0.45); }

.search {
  width: 100%; padding: 10px 15px; background: var(--glass);
  border: 1px solid var(--glass-brd); color: var(--ink);
  outline: none; font-size: 12px; font-weight: 600; border-radius: var(--r-md);
  opacity: 0.5; transition: opacity 0.3s;
}
.search:focus { opacity: 1; border-color: var(--honey); }

/* ── Card ── */
.card {
  background: var(--glass); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-brd); padding: 15px; cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: var(--glass-shd), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  position: relative; height: 220px; border-radius: var(--r-md);
  width: 100%; max-width: var(--card-w); overflow: hidden;
  isolation: isolate;
}
.card.hue-canyon { background: linear-gradient(135deg, rgba(var(--canyon-rgb),0.14) 0%, rgba(var(--canyon-rgb),0.04) 60%, var(--glass) 100%); }
.card.hue-amber  { background: linear-gradient(135deg, rgba(var(--amber-rgb),0.10) 0%, rgba(var(--amber-rgb),0.03) 60%, var(--glass) 100%); }
.card.hue-marble { background: linear-gradient(135deg, rgba(var(--marble-rgb),0.06) 0%, rgba(var(--marble-rgb),0.02) 50%, var(--glass) 100%); }

.card:hover {
  transform: translateY(-5px); background: var(--glass-inner);
  border-color: rgba(var(--honey-rgb),0.3);
  box-shadow: 0 0 30px rgba(var(--honey-rgb),0.2), var(--glass-shd);
}
.card:hover .tile-actions { background: var(--pill-bg); border-color: var(--glass-brd); }
.card:hover .cbtn { opacity: 1; }

.card.selected { box-shadow: inset 0 0 0 1px var(--honey), 0 0 80px rgba(var(--honey-rgb),0.35), var(--glass-shd); border: 1px solid rgba(var(--honey-rgb),0.6) !important; }
.card.selected::after { background: var(--honey); padding: 2px; }
.card.archived { opacity: 0.5; filter: saturate(0.4); }
.card.archived .tile-name { opacity: 0.5; }
.card.archived::after { opacity: 0.4; }

.card::after {
  content: ""; position: absolute; inset: -1px; padding: 4px; background: var(--ink);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1; border-radius: var(--r-md);
}
.card.mat-teal::after   { background: var(--mat-teal); }

/* ── Status Tile ── */
.status-tile {
  background: var(--pill-bg); border: 1px solid var(--pill-brd); box-shadow: var(--pill-shd);
  padding: 10px 16px; border-radius: var(--r-sm); display: flex; align-items: center;
  justify-content: space-between; width: 100%; box-sizing: border-box;
  position: relative; cursor: default;
}
.status-tile-tooltip {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(var(--obsidian-rgb),0.95); border: 1px solid var(--glass-brd);
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; white-space: nowrap; z-index: 1000; color: var(--ink);
  box-shadow: var(--shd-tooltip);
}
.status-tile:hover .status-tile-tooltip { display: block; }
.status-dot { height: 12px; width: 4px; border-radius: 1px; transition: all 0.3s; }
.dot-canyon { background: var(--canyon); box-shadow: 0 0 8px rgba(var(--canyon-rgb),0.6); }
.dot-amber  { background: var(--amber);  box-shadow: 0 0 8px rgba(var(--amber-rgb),0.55); }
.dot-marble { background: rgba(var(--marble-rgb),0.3); }
.dot-dim    { background: var(--glass-brd); }
body.mode-execute .dot-canyon { box-shadow: none; }
body.mode-execute .dot-amber  { box-shadow: none; }

/* ── Donut ── */
.card-hue-indicator {
  height: 14px; width: 14px; border-radius: 50%;
  border: 3px solid transparent; background: var(--pill-bg);
  flex-shrink: 0; box-sizing: border-box; box-shadow: var(--pill-shd); position: relative;
}
.card-hue-indicator-tooltip {
  display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(var(--obsidian-rgb),0.95); border: 1px solid var(--glass-brd);
  padding: 5px 10px; border-radius: var(--r-sm); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; white-space: nowrap; z-index: 1000; color: var(--ink);
}
.card-hue-indicator:hover .card-hue-indicator-tooltip { display: block; }
.card-hue-indicator.dot-canyon { border-color: var(--canyon); filter: drop-shadow(0 0 5px var(--canyon)); }
.card-hue-indicator.dot-amber  { border-color: var(--amber);  filter: drop-shadow(0 0 5px rgba(var(--amber-rgb),0.8)); }
.card-hue-indicator.dot-marble { border-color: rgba(var(--marble-rgb),0.5); }
body.mode-execute .card-hue-indicator.dot-canyon { filter: none; box-shadow: 0 0 0 1px rgba(var(--canyon-rgb),0.5); }
body.mode-execute .card-hue-indicator.dot-amber  { filter: none; box-shadow: 0 0 0 1px rgba(var(--amber-rgb),0.5); }
body.mode-execute .card-hue-indicator.dot-marble { filter: none; border-color: rgba(var(--marble-cool-rgb),0.4); }

/* ── Card internals ── */
.card-footer {
  position: absolute; bottom: 20px; left: 20px; width: calc(100% - 100px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  z-index: 2; pointer-events: none;
}
.card-footer * { pointer-events: auto; }
.tile-name { font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -0.5px; color: var(--ink); transition: all 0.3s; }
.card.mat-teal   .tile-name { color: var(--clr-teal); }
.card.mat-cobalt .tile-name { color: var(--clr-cobalt); }
.card.mat-indigo .tile-name { color: var(--clr-indigo); }
.card.mat-wood   .tile-name { color: var(--clr-wood); }
.card.mat-purple .tile-name { color: var(--clr-purple); }

.tile-actions {
  position: absolute; top: 12px !important; left: 12px !important;
  display: flex; gap: 8px; z-index: 100 !important; align-items: center; height: 28px;
  padding: 0 8px; border-radius: 100px;
  background: var(--pill-bg); border: 1px solid var(--pill-brd); box-shadow: var(--pill-shd);
  transition: background 0.2s, border-color 0.2s;
}
.cbtn {
  height: 28px; width: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: none !important; color: var(--ink);
  opacity: 0.4; font-size: 14px; cursor: pointer; transition: all 0.3s;
  box-shadow: none !important; line-height: 1;
}
.cbtn:hover { opacity: 1; color: var(--honey); filter: drop-shadow(0 0 10px var(--honey)) !important; }
.cbtn.act-archive { color: rgba(var(--bamboo-rgb), 0.5); position: relative; }
.cbtn.act-archive:hover { color: var(--bamboo) !important; filter: drop-shadow(0 0 10px var(--bamboo)) !important; }
/* Geometric tick: two straight lines via ::before */
.cbtn.act-archive::before {
  content: '';
  display: block;
  width: 7px; height: 4px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}

.card-grid { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; position: relative; z-index: 2; width: 100%; }
.tile {
  background: var(--glass-inner); padding: 4px 10px; display: flex; align-items: center;
  justify-content: center; color: var(--ink) !important; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px; width: fit-content;
  border-radius: var(--r-sm); transition: all 0.2s; border: none !important;
}
.tile:hover { filter: drop-shadow(0 0 8px var(--honey)); }
.card.mat-teal   .tile { background: var(--mat-teal); }
.card.mat-cobalt .tile { background: var(--mat-cobalt); }
.card.mat-indigo .tile { background: var(--mat-indigo); }
.card.mat-wood   .tile { background: var(--mat-wood); }
.card.mat-purple .tile { background: var(--mat-purple); }

.tile-domain {
  position: absolute; bottom: 20px; right: 20px;
  padding: 4px 12px; font-size: 11px; font-weight: 900; letter-spacing: 2px;
  color: var(--ink) !important; z-index: 2; transition: all 0.3s; border: none !important;
}
.tile-domain:hover { filter: drop-shadow(0 0 10px var(--honey)) !important; }
.tile-blocked { 
  font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 4px 12px; border-radius: var(--r-sm);
  background: rgba(var(--obsidian-rgb), 0.4) !important;
  border: 1px solid var(--canyon) !important;
  color: var(--canyon) !important;
  margin-bottom: 8px;
}
.sortable-ghost { opacity: 0.2; filter: grayscale(1); border: 2px dashed var(--honey); }

/* ── Layout ── */
.tree-container { flex: 1; overflow: auto; padding: 60px 40px 140px; display: flex; flex-direction: column; align-items: center; gap: 100px; }
.tree-section { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.tree-label { font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--faded); letter-spacing: 5px; margin-bottom: 25px; text-align: center; }
.cards { flex: 1; overflow-y: auto; padding: 20px 40px 240px; }
.cards-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }

/* ── Modal ── */
.modal-bg {
  position: fixed; inset: 0; background: var(--overlay-bg);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
  border: 1px solid var(--glass-brd); padding: 40px; width: 100%; max-width: 500px;
  box-shadow: var(--shd-modal); border-radius: 24px; display: flex; flex-direction: column; gap: 20px;
}
.modal h2 { font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: -1px; color: var(--honey); margin-bottom: 10px; text-align: center; }

.field-tile {
  background: var(--glass); border: 1px solid var(--glass-brd); padding: 15px; border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start !important; width: 100% !important;
}
.field-tile label { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--faded); letter-spacing: 2px; }
.field-tile input, .field-tile select { width: 100%; background: transparent; border: none; color: var(--ink); font-size: 16px; font-family: inherit; font-weight: 500; outline: none; }
.field-tile:focus-within { border-color: var(--honey); box-shadow: 0 0 15px rgba(var(--honey-rgb),0.2); }
.field-tile.plan-nudge { border-color: rgba(var(--amber-rgb),0.45); background: rgba(var(--amber-rgb),0.04); }
.field-tile.plan-nudge label::after { content: " — when will you start?"; color: var(--amber); }

.field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field label { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--faded); letter-spacing: 2px; }
.field textarea {
  width: 100%; background: var(--pill-bg); border: 1px solid var(--glass-brd);
  color: var(--ink); padding: 15px; border-radius: var(--r-md);
  font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; resize: none;
}
.field textarea:focus { border-color: var(--honey); }

.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; }
.ai-chip { background: var(--glass); border: 1px solid var(--glass-brd); padding: 6px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; color: var(--faded); }
.ai-chip:hover { border-color: var(--honey); color: var(--honey); background: var(--glass-inner); }
.ai-response { margin-top: 20px; padding: 20px; background: var(--glass); border-radius: var(--r-md); border-left: 3px solid var(--honey); font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }

.modal-actions { display: flex; gap: 12px; margin-top: 10px; }
.modal-actions button { flex: 1; padding: 14px; border-radius: var(--r-md); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.btn-cancel { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-brd); }
.btn-save   { background: var(--honey); color: var(--btn-save-text, var(--obsidian)); border: none; }
.btn-save:hover { filter: brightness(1.1); box-shadow: 0 0 20px var(--honey); }
.btn-danger { background: transparent; color: var(--canyon); border: 1px solid rgba(var(--canyon-rgb),0.35); font-weight: 800; }
.btn-danger:hover { border-color: rgba(var(--canyon-rgb),0.7); background: rgba(var(--canyon-rgb),0.06); }

.u-pill { color: var(--ink); font-size: 10px; margin: 0 6px; font-weight: 900; }
.u-dots { opacity: 0.4; letter-spacing: 4px; }
.inline-edit { background: transparent; border: none; color: var(--honey); font-family: inherit; font-size: inherit; font-weight: 900; width: 100%; text-align: left; outline: none; }
.mobile-back-btn { display: none; }

/* ── Oracle Panel ── */
.oracle-panel {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 220px;
  background: rgba(var(--ink-rgb),0.98); border-top: 1px solid rgba(0,0,0,0.1);
  backdrop-filter: blur(20px); z-index: 500; flex-direction: column;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.07);
}
.oracle-panel.oracle-open { display: flex; }
.oracle-label { padding: 10px 24px 4px; font-size: 9px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(var(--obsidian-rgb),0.3); }
.oracle-feed { flex: 1; overflow-y: auto; padding: 8px 24px 4px; font-size: 12.5px; line-height: 1.75; color: var(--obsidian); }
.oracle-feed .oracle-msg { margin-bottom: 8px; }
.oracle-feed .oracle-msg.from-oracle { color: rgba(var(--obsidian-rgb),0.75); }
.oracle-feed .oracle-msg.from-user { color: var(--lapis); font-weight: 700; }
.oracle-input-row { display: flex; gap: 10px; padding: 8px 24px 12px; border-top: 1px solid rgba(0,0,0,0.07); }
.oracle-input { flex: 1; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1); border-radius: var(--r-sm); padding: 8px 14px; font-family: inherit; font-size: 12px; outline: none; color: var(--obsidian); }
.oracle-input:focus { border-color: var(--lapis); }
.oracle-send { background: var(--lapis); border: none; color: var(--ink); padding: 8px 18px; border-radius: var(--r-sm); font-family: inherit; font-weight: 800; font-size: 10px; letter-spacing: 1px; cursor: pointer; }

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .panel-tree { display: none; }
  .cards { padding-left: 16px; padding-right: 16px; }
  .card { max-width: 100%; }

  .app.mobile-tree-active .panel-tree { display: flex; }
  .app.mobile-tree-active .panel-list { display: none; }
  .app.mobile-tree-active .tree-container { padding: 16px; gap: 24px; align-items: stretch; }
  .app.mobile-tree-active .tree-section { align-items: stretch; width: 100%; }
  .app.mobile-tree-active .tree-section .card { width: 100%; max-width: 100%; }

  .mobile-back-btn {
    display: none; align-items: center; gap: 8px; padding: 16px 20px 8px; flex-shrink: 0;
    background: transparent; border: none; color: var(--faded);
    font-family: inherit; font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: color 0.2s;
  }
  .mobile-back-btn:hover { color: var(--ink); }
  .app.mobile-tree-active .mobile-back-btn { display: flex; }

  .hdr { padding: 12px 14px 10px; }
  .hdr-row1 { flex-wrap: wrap; gap: 8px; }
  .hdr-date-etched { flex: 1 1 100%; }
  .hdr-row2-icons { display: flex; width: 100%; }
}

/* ═══════════════════════════════════════════════════
   COUNCIL CHAMBER
   Always renders on obsidian overlay — hardcoded dark
   values intentionally (independent of mode tokens).
   ═══════════════════════════════════════════════════ */
@keyframes chamberIn { from{opacity:0;transform:scale(0.98)} to{opacity:1;transform:scale(1)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes typingDot { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }

.council-overlay {
  /* Always dark overlay — pin dark tokens regardless of body mode */
  --ink:       #f4f0ea;
  --faded:     rgba(244, 240, 234, 0.25);
  --honey:     #e8b004;
  --honey-rgb: 232, 176, 4;
  --obsidian-rgb: 9, 10, 15;
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(var(--obsidian-rgb),0.92); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  display: none; flex-direction: column; animation: chamberIn 0.5s cubic-bezier(0.23,1,0.32,1);
}
.council-overlay.open { display: flex; }

.council-header {
  flex-shrink: 0; padding: 28px 40px 20px; display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.council-title { font-size: 11px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: var(--honey); }
.council-context { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0.35; text-transform: uppercase; }
.council-close {
  background: transparent; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.4);
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px; cursor: pointer; border-radius: var(--r-sm); font-family: inherit; transition: all 0.2s;
}
.council-close:hover { border-color: rgba(255,255,255,0.2); color: var(--ink); }
.council-extract {
  background: rgba(var(--honey-rgb),0.1); border: 1px solid rgba(var(--honey-rgb),0.3); color: var(--honey);
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 20px; cursor: pointer; border-radius: var(--r-sm); font-family: inherit; transition: all 0.2s;
}
.council-extract:hover { background: rgba(var(--honey-rgb),0.2); box-shadow: 0 0 16px rgba(var(--honey-rgb),0.2); }
.council-extract:disabled { opacity: 0.4; cursor: default; }

.council-agent-row {
  flex-shrink: 0; display: flex; align-items: center; padding: 10px 20px; gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.15);
}
.council-agent-tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  cursor: pointer; background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.03);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); border-radius: var(--r-sm);
  transition: all 0.2s; opacity: 0.35;
}
.council-agent-tile:hover { opacity: 0.7; background: rgba(255,255,255,0.03); }
.council-agent-tile.active { opacity: 1; border-color: currentColor; background: rgba(0,0,0,0.25); }
.council-agent-tile .cat-icon { font-size: 16px; line-height: 1; }
.council-agent-tile .cat-label { font-size: 6px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; line-height: 1.2; }
.council-agent-tile .cat-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity 0.3s; }
.council-agent-tile.briefed .cat-dot { opacity: 0.8; }
.council-agent-tile[data-agent="moderator"]    { color: var(--honey); }
.council-agent-tile[data-agent="strategist"]   { color: var(--clr-strategist); }
.council-agent-tile[data-agent="risk_scout"]   { color: var(--clr-risk); }
.council-agent-tile[data-agent="psychologist"] { color: var(--clr-psyche); }
.council-agent-tile[data-agent="plan_oracle"]  { color: var(--clr-oracle); }
.council-agent-tile[data-agent="domain_expert"]{ color: var(--clr-expert); }

.council-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.council-active-label { padding: 6px 28px; font-size: 9px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; opacity: 0.4; flex-shrink: 0; }
.council-feed { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.agent-msg { font-size: 13px; line-height: 1.8; }
.agent-msg.from-agent { color: rgba(var(--ink-rgb),0.85); }
.agent-msg.from-user { color: var(--honey); font-weight: 700; font-size: 11.5px; opacity: 0.8; padding-left: 12px; border-left: 2px solid rgba(var(--honey-rgb),0.3); }
.agent-msg-typing { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.agent-msg-typing span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.3); animation: typingDot 1.2s ease-in-out infinite; }
.agent-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.agent-msg-typing span:nth-child(3) { animation-delay: 0.4s; }

.council-input-row { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 24px 18px; border-top: 1px solid rgba(255,255,255,0.05); }
.council-input { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-sm); padding: 10px 16px; color: var(--ink); font-family: inherit; font-size: 12.5px; outline: none; transition: border-color 0.2s; }
.council-input:focus { border-color: rgba(var(--honey-rgb),0.4); }
.council-send { background: rgba(var(--honey-rgb),0.1); border: 1px solid rgba(var(--honey-rgb),0.25); color: var(--honey); padding: 10px 18px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; font-weight: 800; font-size: 10px; letter-spacing: 1px; transition: all 0.2s; flex-shrink: 0; }
.council-send:hover { background: rgba(var(--honey-rgb),0.2); }
.council-send:disabled { opacity: 0.3; cursor: default; }

.extract-result { position: absolute; inset: 0; background: rgba(var(--obsidian-rgb),0.97); display: flex; flex-direction: column; z-index: 10; overflow-y: auto; padding: 40px; animation: chamberIn 0.3s ease; }
.extract-section { margin-bottom: 28px; }
.extract-label { font-size: 9px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: var(--honey); margin-bottom: 12px; }
.extract-item { font-size: 12.5px; line-height: 1.7; color: rgba(var(--ink-rgb),0.8); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.extract-item:last-child { border-bottom: none; }
.extract-risk-high { color: var(--clr-risk); }
.extract-risk-medium { color: var(--amber); }

/* Status dots visibility in execute mode */
body.mode-execute .status-tile { background: rgba(var(--obsidian-rgb),0.06); border-color: rgba(var(--obsidian-rgb),0.12); }
body.mode-execute .dot-dim { background: rgba(var(--obsidian-rgb),0.15); }
body.mode-execute .dot-marble { background: rgba(var(--obsidian-rgb),0.12); }

/* ── Bamboo ripple — positive completion feedback ── */
@keyframes bambooRipple {
  0%   { opacity: 0; transform: scale(0.85); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
.bamboo-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(
    ellipse at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(var(--bamboo-rgb), 0.18) 0%,
    rgba(var(--bamboo-rgb), 0.07) 35%,
    transparent 65%
  );
  animation: bambooRipple 900ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ── Oracle chat interface ── */
.oracle-chat-feed {
  min-height: 160px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-brd);
}
.oracle-chat-msg { font-size: 13px; line-height: 1.7; max-width: 92%; }
.oracle-chat-msg--user {
  align-self: flex-end; color: var(--honey); font-weight: 700;
  background: rgba(var(--honey-rgb),0.08); padding: 8px 12px;
  border-radius: var(--r-sm); text-align: right;
}
.oracle-chat-msg--oracle {
  align-self: flex-start; color: var(--ink); opacity: 0.85;
}
.oracle-chat-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
}
.oracle-chat-input {
  flex: 1; background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; outline: none; transition: border-color 0.2s;
}
.oracle-chat-input:focus { border-color: var(--honey); }
.oracle-chat-send {
  background: var(--honey); border: none; color: var(--btn-save-text);
  padding: 10px 14px; border-radius: var(--r-sm); font-family: inherit;
  font-size: 14px; font-weight: 900; cursor: pointer; transition: all 0.2s;
  flex-shrink: 0;
}
.oracle-chat-send:hover { filter: brightness(1.1); }
.oracle-chat-send:disabled { opacity: 0.4; cursor: default; }

/* ── Domain light sources (off-canvas, data-driven) ── */
#bgLights {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 0; /* behind .app panels which are z-index:auto */
  mix-blend-mode: screen; /* additive on dark — luminous domain glows */
  transition: background-image 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
body.mode-execute #bgLights {
  mix-blend-mode: overlay; /* on washi — tints without washing out */
  opacity: 0.6;            /* boost visibility on light bg */
}
/* Ensure .app sits above the light layer */
.app { position: relative; z-index: 1; }

/* Domains management button */
.hdr-icon--domains { color: rgba(var(--ink-rgb),0.35); }

/* ── Compact card mode (RHS only) — 2-row layout ── */
.card.compact {
  height: auto !important; min-height: 0 !important; flex-direction: row !important;
  align-items: center; padding: 8px 12px 8px 10px; gap: 8px;
  overflow: visible !important;
}
/* Suppress any absolute children we don't use in compact */
.card.compact .card-grid,
.card.compact .card-footer,
.card.compact .tile-actions { display: none !important; }

/* Action button column */
.compact-action {
  flex-shrink: 0; display: flex; align-items: center; self-align: stretch;
}

/* Two-row content column */
.compact-content {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.compact-name {
  font-size: 13px; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.2px; line-height: 1.3;
}
.compact-tiles {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
}
.compact-tile {
  font-size: 8px !important; padding: 2px 6px !important;
  white-space: nowrap; flex-shrink: 0;
}

/* Compact indicator toggle */
.hdr-icon--compact { color: rgba(var(--ink-rgb),0.35); }
.hdr-icon--compact.active-compact { color: var(--honey); background: rgba(var(--honey-rgb),0.12); }

/* Compact cards-inner: tighter gap */
.cards.compact-view .cards-inner { gap: 5px; }
.cards.compact-view { padding-bottom: 60px; }

/* ── Status marks etched into date tile — no box, no bounding surface ── */
.status-dots-etched {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
/* The .status-tile wrapper loses all its box styling in this context */
.status-dots-etched .status-tile {
  background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  width: auto !important; border-radius: 0 !important;
  display: flex; gap: 4px; align-items: center; position: relative;
}
/* Marks: wider, short — like a chisel cut */
.status-dots-etched .status-dot {
  width: 15px;
  height: 3px;
  border-radius: 1px;
  flex-shrink: 0;
  box-shadow: none !important;   /* no glow — etching is flat */
  opacity: 0.7;
}
/* Dim marks blend into glass */
.status-dots-etched .dot-dim    { background: rgba(var(--ink-rgb),0.18); opacity: 0.5; }
.status-dots-etched .dot-marble { background: rgba(var(--ink-rgb),0.28); opacity: 0.55; }
/* Tooltip: no border, no box — just text floating above */
.status-dots-etched .status-tile-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.status-dots-etched .status-tile:hover .status-tile-tooltip { opacity: 1; }

/* ── Deck Review Overlay ── */
.deck-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--obsidian);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.deck-overlay.open { opacity: 1; pointer-events: all; }
body.mode-execute .deck-overlay { background: var(--washi-base); }

/* Header */
.deck-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--glass-brd);
  flex-shrink: 0;
}
.deck-title { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--honey); }
.deck-progress { flex:1; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--faded); text-align: center; }
.deck-close { background: none; border: 1px solid var(--glass-brd); color: var(--faded); padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: 1px; font-family: inherit; transition: all 0.2s; }
.deck-close:hover { color: var(--canyon); border-color: var(--canyon); }

/* Body: two-panel on desktop, stacked on mobile */
.deck-body {
  flex: 1; display: flex; overflow: hidden;
  flex-direction: row;
}

/* Left panel: task stack */
.deck-stack-panel {
  width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--glass-brd);
  overflow-y: auto; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.deck-stack-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: background 0.15s;
  border: 1px solid transparent;
}
.deck-stack-row:hover { background: var(--glass); }
.deck-stack-row--active { background: rgba(var(--honey-rgb),0.1); border-color: var(--honey); }
.deck-stack-row--done { opacity: 0.4; }
.deck-stack-num { font-size: 9px; font-weight: 900; color: var(--faded); width: 16px; flex-shrink: 0; }
.deck-stack-row--active .deck-stack-num { color: var(--honey); }
.deck-stack-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-stack-t { font-size: 9px; font-weight: 800; color: var(--faded); flex-shrink: 0; }

/* Right panel: agent */
.deck-agent-panel {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 20px; gap: 12px;
}
.deck-task-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--honey);
  text-transform: uppercase; flex-shrink: 0;
}
.deck-feed {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding-right: 4px;
}
.deck-msg { font-size: 13px; line-height: 1.7; max-width: 94%; }
.deck-msg--agent { align-self: flex-start; color: var(--ink); }
.deck-msg--user { align-self: flex-end; color: var(--honey); font-weight: 700; background: rgba(var(--honey-rgb),0.08); padding: 8px 12px; border-radius: var(--r-sm); }

/* Proposal cards */
.deck-proposals { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.deck-proposal {
  background: rgba(var(--lapis-rgb),0.08); border: 1px solid rgba(var(--lapis-rgb),0.25);
  border-radius: var(--r-sm); padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
}
body.mode-execute .deck-proposal { background: rgba(var(--lapis-rgb),0.06); }
.deck-proposal-desc { flex: 1; font-size: 12px; color: var(--ink); }
.deck-proposal-actions { display: flex; gap: 6px; flex-shrink: 0; }
.deck-proposal-confirm { background: var(--bamboo); border: none; color: #fff; padding: 5px 10px; border-radius: var(--r-sm); font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; }
.deck-proposal-reject  { background: none; border: 1px solid var(--glass-brd); color: var(--faded); padding: 5px 10px; border-radius: var(--r-sm); font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* Input row */
.deck-input-row { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.deck-input {
  flex: 1; background: var(--glass); border: 1px solid var(--glass-brd); color: var(--ink);
  padding: 10px 14px; border-radius: var(--r-sm); font-family: inherit; font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.deck-input:focus { border-color: var(--honey); }
.deck-send {
  background: var(--honey); border: none; color: var(--btn-save-text);
  padding: 10px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 900;
  cursor: pointer; font-family: inherit; transition: all 0.2s; flex-shrink: 0;
}
.deck-send:disabled { opacity: 0.4; cursor: default; }

/* Navigation */
.deck-nav { display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }
.deck-nav-btn {
  background: none; border: 1px solid var(--glass-brd); color: var(--faded);
  padding: 7px 14px; border-radius: var(--r-sm); font-size: 10px; font-weight: 800;
  letter-spacing: 0.5px; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.deck-nav-btn:hover { border-color: var(--honey); color: var(--honey); }
.deck-nav-btn--done { border-color: var(--bamboo); color: var(--bamboo); }

/* Mobile: stack across top, agent below */
@media (max-width: 768px) {
  .deck-body { flex-direction: column; }
  .deck-stack-panel {
    width: auto; border-right: none; border-bottom: 1px solid var(--glass-brd);
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    max-height: 70px; padding: 8px; scrollbar-width: none;
  }
  .deck-stack-panel::-webkit-scrollbar { display: none; }
  .deck-stack-row { flex-shrink: 0; min-width: 140px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .deck-stack-name { font-size: 10px; white-space: nowrap; }
  .deck-agent-panel { padding: 12px; }
}

/* ── Effort + Impact tiles ── */
.tile-effort {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  color: rgba(var(--ink-rgb),0.5); text-transform: uppercase;
}
.tile-stakes-0 { color: rgba(var(--ink-rgb),0.4); }
.tile-stakes-1 { color: var(--amber); }
.tile-stakes-2 { color: var(--canyon); font-weight: 900; }
body.mode-execute .tile-stakes-1 { color: var(--amber); }
body.mode-execute .tile-stakes-2 { color: var(--canyon); }

/* ── Effort + Impact meta tile (below urgency in card-grid) ── */
.tile-meta {
  display: flex; align-items: center; gap: 5px;
  justify-content: flex-end;
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  background: none; border: none; box-shadow: none; padding: 2px 0;
}
.tile-meta .tile-effort { color: rgba(var(--ink-rgb),0.45); text-transform: uppercase; }
.tile-meta .tile-stakes-0 { color: rgba(var(--ink-rgb),0.35); text-transform: uppercase; }
.tile-meta .tile-stakes-1 { color: var(--amber); text-transform: uppercase; }
.tile-meta .tile-stakes-2 { color: var(--canyon); text-transform: uppercase; font-weight: 900; }
.tile-meta .u-dots { color: rgba(var(--ink-rgb),0.2); }

/* ── Compact drag handle ── */
.compact-drag {
  cursor: grab; flex-shrink: 0; font-size: 12px;
  color: rgba(var(--ink-rgb),0.18); padding: 0 2px;
  transition: color 0.15s; align-self: stretch;
  display: flex; align-items: center; user-select: none;
}
.compact-drag:hover { color: rgba(var(--ink-rgb),0.5); }
.compact-drag:active { cursor: grabbing; }

/* ── Compact row 2 labels — no box, plain coloured text ── */
.compact-label {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}