body{background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-serif}
.surface{background:#1e293b}.elevated{background:#334155}.border-c{border-color:#475569}
.drag-handle{opacity:0.4;transition:opacity 0.2s}.drag-handle:hover{opacity:1}
[draggable]{cursor:grab}[draggable]:active{cursor:grabbing}
.drag-over{border:2px dashed #3b82f6!important;background:rgba(59,130,246,0.1)!important}
.item-card:hover{background:#334155}.badge{padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600}
.tab-active{border-bottom:2px solid #3b82f6;color:#3b82f6}
.subtab-active{background:#3b82f6;color:white}
.kpi-card{min-width:140px}.modal-bg{background:rgba(0,0,0,0.6)}
.streak-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin:1px}
.overdue-border{border-left:3px solid #ef4444}
input,select,textarea{background:#334155;border:1px solid #475569;color:#e2e8f0;border-radius:6px;padding:4px 8px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3b82f6}
.hamburger{display:none}@media(max-width:768px){.hamburger{display:block}.desk-nav{display:none}.desk-nav.show{display:flex}}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
.tooltip{position:relative}.tooltip:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#1e293b;color:#e2e8f0;padding:4px 8px;border-radius:4px;font-size:0.7rem;white-space:nowrap;z-index:99}
.expand-arrow{transition:transform 0.15s ease}.item-card:hover .expand-arrow{color:#94a3b8}
/* 4-tier modes: Simple & Guided hide advanced/builder-only controls. */
body.mode-simple .builder-only,body.mode-guided .builder-only{display:none!important}

/* ============================================================
   ROOTS WARM LIGHT THEME (Q-021)
   Matches the client-theme used across coaching sub-pages.
   Override layer only — no JS/logic changes. Remaps NEUTRAL
   dark classes (slate / white) to warm light; colored accents
   (blue/red/green/amber badges & buttons) are left intact
   because they already read fine on cream.
   ============================================================ */
body.roots-light{
  --roots-bg:#f7f6f2; --roots-card:#fffcf8; --roots-elevated:#fbf6ee;
  --roots-text:#1a2744; --roots-muted:#5a6577; --roots-border:#e6e2d8;
  --roots-hover:#f4eee2; --roots-blue:#3b7ea6; --roots-red:#c0564e;
  --roots-accent:#f7c157; --roots-shadow:0 2px 8px rgba(180,160,130,0.10);
  /* Q-021b: subtle top→bottom warm gradient for dimension (barely noticeable). */
  background:linear-gradient(180deg,#f7f6f2 0%,#f5efe6 100%)!important;
  background-attachment:fixed!important;
  color:var(--roots-text)!important;
}

/* Structural chrome */
body.roots-light .surface{background:var(--roots-card);box-shadow:var(--roots-shadow)}
body.roots-light .elevated{background:var(--roots-elevated)}
body.roots-light .border-c{border-color:var(--roots-border)}
/* Q-021b: a whisper of Harvest Gold under the top nav ties Roots to the brand. */
body.roots-light #mainTabNav{border-top:2px solid var(--roots-accent,#f7c157)}
body.roots-light .item-card:hover{background:var(--roots-hover)}
body.roots-light .item-card:hover .expand-arrow{color:var(--roots-muted)}
body.roots-light .tab-active{border-bottom-color:var(--roots-blue);color:var(--roots-blue)}
body.roots-light .subtab-active{background:var(--roots-blue);color:#fff!important}

/* Inputs */
body.roots-light input,body.roots-light select,body.roots-light textarea{
  background:#fff;border:1px solid var(--roots-border);color:var(--roots-text);
}
body.roots-light input:focus,body.roots-light select:focus,body.roots-light textarea:focus{border-color:var(--roots-blue)}
body.roots-light input::placeholder,body.roots-light textarea::placeholder{color:#9aa3b0}

/* Scrollbar */
body.roots-light ::-webkit-scrollbar-track{background:#efe9dc}
body.roots-light ::-webkit-scrollbar-thumb{background:#cfc7b6}

/* Neutral text remaps */
body.roots-light .text-white,
body.roots-light .text-slate-200,
body.roots-light .text-slate-300{color:var(--roots-text)!important}
body.roots-light .text-slate-400,
body.roots-light .text-slate-500,
body.roots-light .text-slate-600{color:var(--roots-muted)!important}
body.roots-light .hover\:text-white:hover,
body.roots-light .hover\:text-slate-300:hover{color:var(--roots-text)!important}

/* Neutral (slate) backgrounds — buttons, hovers, progress track, gray badges */
body.roots-light .bg-slate-500,
body.roots-light .bg-slate-600,
body.roots-light .bg-slate-700{background:var(--roots-hover)!important}
body.roots-light .hover\:bg-slate-500:hover,
body.roots-light .hover\:bg-slate-600:hover,
body.roots-light .hover\:bg-slate-700:hover{background:#e6e0d1!important}
body.roots-light .border-slate-500{border-color:var(--roots-border)!important}

/* Neutral accent text (links / danger) darkened for contrast on cream */
body.roots-light .text-blue-400,
body.roots-light .text-blue-300{color:var(--roots-blue)!important}
body.roots-light .hover\:text-blue-400:hover,
body.roots-light .hover\:text-blue-300:hover{color:#2c6383!important}
body.roots-light .text-red-400,
body.roots-light .text-red-300{color:var(--roots-red)!important}
body.roots-light .hover\:text-red-300:hover{color:#a8443c!important}

/* Protect white text on COLORED buttons (primary/danger/etc.) from the
   text-white remap above — keep it white on their colored fills. */
body.roots-light [class*="bg-blue-"].text-white,
body.roots-light [class*="bg-red-"].text-white,
body.roots-light [class*="bg-amber-"].text-white,
body.roots-light [class*="bg-green-"].text-white,
body.roots-light [class*="bg-emerald-"].text-white,
body.roots-light [class*="bg-indigo-"].text-white,
body.roots-light [class*="bg-purple-"].text-white{color:#fff!important}

/* CP-016 #14 + P-020 (c): the grip ⠿ is THE drag affordance — it pops on
   row hover (full opacity + blue), grab cursor, bigger hit area. Drags
   still arm ONLY from the grip (3s window), never from the row body. */
.item-handle{cursor:grab;padding:6px 8px;margin:-2px 0;border-radius:6px}
.item-handle:hover{background:rgba(148,163,184,.25);color:#93c5fd}
.item-handle:active{cursor:grabbing}
.item-card:hover .item-handle{opacity:1;color:#60a5fa}

/* P-020 polish: soft feel — zoom pages ease in, search results fade in. */
@keyframes rootsFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.zoom-stage{animation:rootsFadeIn .22s ease}

/* P-020b (2): Roots-native modern checkbox (no h-components import).
   Real input (keyboard + focus ring), brand-blue check, soft transition. */
.r-check{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;vertical-align:middle}
.r-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.r-check .r-box{width:18px;height:18px;border-radius:5px;border:1.5px solid #64748b;background:transparent;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,border-color .12s ease;pointer-events:none}
.r-check .r-box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .12s ease;margin-top:-2px}
.r-check input:checked+.r-box{background:#3b82f6;border-color:#3b82f6}
.r-check input:checked+.r-box::after{transform:rotate(45deg) scale(1)}
.r-check input:focus-visible+.r-box{outline:2px solid #93c5fd;outline-offset:2px}
body.roots-light .r-check .r-box{border-color:#b9b3a4;background:#fff}
body.roots-light .r-check input:checked+.r-box{background:var(--roots-blue);border-color:var(--roots-blue)}

/* P-020d: names are editable where they stand — the hover whisper. */
.r-title{cursor:text}
.r-title:hover{text-decoration:underline dotted;text-underline-offset:3px}

/* P-020e: nesting cue — the header you're about to drop INTO. */
.drag-over-nest{outline:2px solid #3b82f6;outline-offset:2px;border-radius:8px;background:rgba(59,130,246,.15)}

/* ============================================================
   P-029 DECK VIEW — a calm, reflective "portrait deck" display
   mode. Self-contained + on-brand (cream #faf7f0 / navy #102036 /
   blue #3682ae / coral #eda0a0), so the cards read as premium in
   BOTH the dark default and the warm light theme. Soft shadows,
   rounded corners, smooth spring-like transitions between cards.
   ============================================================ */
.roots-deck{--dk-cream:#faf7f0;--dk-navy:#102036;--dk-blue:#3682ae;--dk-coral:#eda0a0;
  padding:10px 0 2px;user-select:none;-webkit-user-select:none}
.deck-stage{position:relative;height:322px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.deck-card{position:absolute;left:50%;top:50%;width:200px;height:280px;margin-left:-100px;margin-top:-140px;
  background:linear-gradient(158deg,#fffefb 0%,var(--dk-cream) 100%);
  border-radius:20px;border:1px solid rgba(16,32,54,.06);
  box-shadow:0 16px 38px -12px rgba(16,32,54,.48),0 2px 6px rgba(16,32,54,.14);
  padding:17px 17px 15px;box-sizing:border-box;cursor:pointer;color:var(--dk-navy);
  display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;will-change:transform,opacity;
  transition:transform .46s cubic-bezier(.22,.61,.36,1),opacity .4s ease,box-shadow .3s ease}
.deck-card:hover{box-shadow:0 22px 48px -12px rgba(16,32,54,.55),0 3px 9px rgba(16,32,54,.2)}
.deck-card-top{display:flex;align-items:center;gap:6px;margin-bottom:11px}
.deck-type{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:3px 11px;border-radius:9999px}
.deck-title{font-size:1.06rem;line-height:1.26;font-weight:800;color:var(--dk-navy);margin-bottom:13px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.deck-fields{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:7px}
.deck-field{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;line-height:1.2}
.deck-fk{color:#7c8598;text-transform:capitalize;white-space:nowrap}
.deck-fv{color:var(--dk-navy);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-empty-fields{color:#aab1bd;font-size:.74rem;font-style:italic}
.deck-card-bottom{margin-top:11px}
.deck-status{display:inline-block;font-size:.64rem;font-weight:700;color:#fff;padding:3px 12px;border-radius:9999px}
.deck-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:8px}
.deck-arrow{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--dk-navy);color:var(--dk-cream);
  font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 7px 18px -5px rgba(16,32,54,.5);transition:transform .18s ease,background .2s ease}
.deck-arrow:hover:not(:disabled){background:var(--dk-blue);transform:translateY(-1px)}
.deck-arrow:active:not(:disabled){transform:translateY(0) scale(.93)}
.deck-arrow:disabled{opacity:.32;cursor:default;background:#8a94a6;box-shadow:none}
.deck-counter{font-size:.8rem;color:#8a94a6;min-width:58px;text-align:center;letter-spacing:.03em}
.deck-counter b{color:var(--dk-blue);font-weight:800}
.roots-deck-empty .deck-empty-msg{text-align:center;padding:48px 12px;color:#8a94a6}
.deck-empty-ico{font-size:2.6rem;margin-bottom:10px;opacity:.55}
/* coral accent underlines the active card's top edge for a warm focal cue */
.deck-card[style*="scale(1)"]{border-top:3px solid var(--dk-coral)}
@media(max-width:768px){.deck-stage{height:300px}.deck-card{width:186px;height:264px;margin-left:-93px;margin-top:-132px}.deck-arrow{width:40px;height:40px}}