/* ==========================================================================
   Focor Planner — clickable prototype
   Design system + shell + the living time horizon
   No build step. No network dependency. Opens from the filesystem.
   ========================================================================== */

:root{
  /* palette (from the generation brief) */
  --room-ground:#ECE8E0;
  --raised:#FAF8F6;
  --recessed:#F1ECE4;
  --lifted:#FFFFFF;
  --ink:#2B2722;
  --muted:#6E665B;
  --faint:#A29A8D;
  --teal:#2B7A6F;
  --teal-hi:#33917F;
  --teal-soft:#DFECE8;
  --bronze:#9A6F45;
  --bronze-soft:#F1E5D7;
  --danger-muted:#B76642;

  --hair:rgba(71,62,52,.16);
  --hair-2:rgba(71,62,52,.22);
  --shadow:0 14px 36px rgba(71,62,52,.09);
  --shadow-strong:0 24px 60px -20px rgba(71,62,52,.22), 0 8px 22px -14px rgba(71,62,52,.14);

  --teal-tint:rgba(43,122,111,.09);
  --teal-line:rgba(43,122,111,.32);
  --teal-glow:rgba(43,122,111,.16);
  --bronze-tint:rgba(154,111,69,.10);
  --bronze-line:rgba(154,111,69,.38);
  --on-teal:#FAF8F6;

  --busy:rgba(71,62,52,.075);
  --busy-line:rgba(71,62,52,.11);

  --room-glow:rgba(255,250,240,.85);
  --hi:rgba(255,255,255,.7);
  --l-red:#ec6a5e; --l-yellow:#f4bf4f; --l-green:#61c554; --l-inset:rgba(43,39,34,.12);

  --font-display: Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --font-mono: 'SF Mono','JetBrains Mono',ui-monospace,'Menlo','Consolas',monospace;
  --font-mark: 'Inter',system-ui,sans-serif;

  --r-card:13px;
  --r-soft:12px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background: radial-gradient(52% 60% at 80% 12%, var(--room-glow) 0%, transparent 58%), var(--room-ground);
  min-height:100dvh; display:grid; place-items:center; padding:20px 24px;
}
button{ font-family:inherit; }
::selection{ background:var(--teal-tint); }

.aperture-glow{ position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(30% 40% at 82% 10%, var(--room-glow) 0%, transparent 60%);
  animation:breathe 15s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* ---------- application window ---------- */
.window{
  position:relative; z-index:1; width:min(1360px,100%); height:min(890px,calc(100dvh - 40px));
  background:var(--raised); border:1px solid var(--hair-2); border-radius:14px;
  box-shadow:0 44px 96px -36px rgba(71,62,52,.34), 0 14px 34px -20px rgba(71,62,52,.16);
  overflow:hidden; display:flex; flex-direction:column;
  animation:rise .9s cubic-bezier(.16,.84,.34,1) both;
}
/* warm, diffuse elevation — no hard/black edge on any side */
.window{ box-shadow:0 26px 64px -34px rgba(120,104,82,.20), 0 5px 18px -14px rgba(120,104,82,.10); }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) scale(.994) } to{ opacity:1; transform:none } }

/* title bar */
.titlebar{ position:relative; height:46px; flex:0 0 46px; display:flex; align-items:center; gap:8px;
  padding:0 18px; border-bottom:1px solid var(--hair); background:var(--raised); z-index:5; }
.lights{ display:flex; gap:8px; }
.light{ width:12px; height:12px; border-radius:50%; border:0; padding:0; box-shadow:0 0 0 .5px var(--l-inset) inset; }
.light.red{ background:var(--l-red);} .light.yellow{ background:var(--l-yellow);} .light.green{ background:var(--l-green);}
.doc{ position:absolute; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:9px; }
.doc .mark{ width:15px; height:15px; opacity:.92; color:var(--ink); }
.doc .word{ font-family:var(--font-mark); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink); font-weight:600; padding-left:.1em; }
.status-r{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.status-r .rdot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal-glow); transition:background .3s; }
.status-r.is-work .rdot{ background:var(--bronze); }

/* lower = rail + workspace */
.lower{ flex:1; display:flex; min-height:0; }

.rail{ flex:0 0 64px; border-right:1px solid var(--hair); padding:18px 11px; display:flex; flex-direction:column; align-items:stretch; gap:2px; background:var(--raised); z-index:4; }
.rail .brand{ display:flex; justify-content:center; padding:4px 0 16px; color:var(--ink); }
.rail .brand svg{ width:20px; height:20px; opacity:.92; }
.rail-div{ height:1px; background:var(--hair); border:0; margin:11px 8px; }
.rail-item{ display:flex; align-items:center; justify-content:center; padding:9px 0; border-radius:12px;
  color:var(--muted); background:transparent; border:1px solid transparent; cursor:pointer; width:100%;
  transition:background .18s,color .18s; }
.rail-item svg{ width:18px; height:18px; stroke-width:1.5; opacity:.82; }
.rail-item:hover{ background:var(--teal-tint); color:var(--ink); }
.rail-item:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.rail-item.active{ background:var(--teal-tint); color:var(--teal); border-color:var(--teal-line);
  box-shadow:inset 0 1px 0 var(--hi), 0 0 18px -8px var(--teal-glow); }
.rail-item.active svg{ opacity:1; }
.rail .foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--hair); display:flex; justify-content:center; }
.avatar-btn{ border:0; background:transparent; padding:0; cursor:pointer; border-radius:50%; }
.avatar-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }

/* avatar chips (initials — honest offline placeholder) */
.av{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(150deg,#efe9e0,#e2d9cc); color:var(--ink); border:1px solid var(--hair-2);
  font-weight:600; font-size:11px; letter-spacing:.02em; flex:0 0 auto; overflow:hidden; }
.av.k{ background:linear-gradient(150deg,#e7ece9,#d7e4de); }
.av.e{ background:linear-gradient(150deg,#efe6da,#e6d6c2); }
.av.j{ background:linear-gradient(150deg,#e9e5df,#dcd4c7); }
.av-30{ width:30px; height:30px; font-size:12px; }
/* real photo profile pictures sit over the initials (which show if the image is missing) */
.av{ position:relative; }
.av .av-ini{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; }
.av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; z-index:1; }
/* real integration/product logos */
.brandlogo{ display:inline-flex; align-items:center; justify-content:center; }
.brandlogo svg{ display:block; }
/* real Focor aperture mark, recolored per context via currentColor */
.focor-mark{ display:inline-block; background:currentColor;
  -webkit-mask:url("assets/focor-aperture.svg") center/contain no-repeat;
  mask:url("assets/focor-aperture.svg") center/contain no-repeat; }

/* ---------- workspace ---------- */
.workspace{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
.main{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding:24px 44px 6px; overflow:hidden; }

.head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex:0 0 auto; }
.h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,2.7vw,42px); letter-spacing:-.015em; line-height:1.02; margin:0; color:var(--ink); }
.sub{ margin:9px 0 0; color:var(--muted); font-size:15px; font-weight:300; line-height:1.5; }
.head-tools{ display:inline-flex; align-items:center; gap:12px; padding-top:6px; }

/* pill toolbar buttons (top-right of stage) */
.toolpill{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--hair-2); background:var(--raised); color:var(--muted); cursor:pointer;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  box-shadow:inset 0 1px 0 var(--hi); transition:border-color .2s,color .2s,transform .2s; }
.toolpill:hover{ border-color:var(--teal-line); color:var(--ink); transform:translateY(-1px); }
.toolpill:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.toolpill svg{ width:15px; height:15px; opacity:.85; }

/* the stage where each screen renders */
.stage{ position:relative; flex:1 1 auto; min-height:0; margin-top:14px; display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; padding-bottom:6px; }
/* never clip content — scroll the stage as a safety net on short windows / tall screens */
.stage::-webkit-scrollbar{ width:8px; height:8px; }
.stage::-webkit-scrollbar-thumb{ background:var(--hair-2); border-radius:8px; }
.stage::-webkit-scrollbar-track{ background:transparent; }
.stage{ scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent; }
.screen{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; animation:screen-in .5s cubic-bezier(.16,.84,.34,1) both; }
@keyframes screen-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- footer command bar ---------- */
.footer{ flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:8px 22px 16px 30px; }
.usercmd{ font-family:var(--font-sans); font-size:13px; color:var(--muted); font-style:italic; }
.cmd-field{ flex:1; display:flex; align-items:center; gap:12px; padding:9px 9px 9px 16px; border:1px solid var(--hair-2); border-radius:999px; background:var(--recessed); box-shadow:inset 0 1px 0 var(--hi); }
.cmd-field .kbd{ font-family:var(--font-mono); font-size:11px; color:var(--faint); border:1px solid var(--hair-2); border-radius:6px; padding:2px 6px; }
.cmd-field input{ flex:1; background:transparent; border:0; outline:none; color:var(--ink); font-family:var(--font-sans); font-size:14px; min-width:0; }
.cmd-field input::placeholder{ color:var(--muted); }
.send{ width:38px; height:38px; border-radius:999px; border:0; background:var(--teal); color:var(--on-teal); display:grid; place-items:center; cursor:pointer; transition:background .2s; flex:0 0 auto; }
.send:hover{ background:var(--teal-hi); } .send svg{ width:17px; height:17px; }

.navmodes{ display:flex; align-items:center; gap:12px; }
.navbtn{ width:44px; height:44px; border-radius:12px; border:1px solid var(--hair-2);
  background:var(--recessed); color:var(--muted); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 18px -12px rgba(71,62,52,.3), inset 0 1px 0 var(--hi);
  transition:transform .22s cubic-bezier(.16,.84,.34,1), border-color .22s, color .22s; }
.navbtn:hover{ transform:scale(1.03); border-color:var(--teal-line); color:var(--ink); }
.navbtn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.navbtn svg{ width:19px; height:19px; stroke-width:1.5; }
.navbtn.active{ color:var(--teal); background:var(--teal-tint); border-color:var(--teal-line);
  box-shadow:inset 0 1px 0 var(--hi), 0 0 22px -8px var(--teal-glow); }

/* command-bar toast (unknown command / feedback) */
.cmd-toast{ position:absolute; left:30px; bottom:70px; z-index:20; max-width:520px;
  padding:11px 16px; border-radius:12px; background:var(--ink); color:var(--raised);
  font-size:13px; line-height:1.45; box-shadow:var(--shadow-strong);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .25s,transform .25s; }
.cmd-toast.show{ opacity:1; transform:none; }

/* ==========================================================================
   Shared building blocks
   ========================================================================== */
.kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.kicker.bronze{ color:var(--bronze); }
.kicker.muted{ color:var(--faint); }
.mono{ font-family:var(--font-mono); }
.serif{ font-family:var(--font-display); font-weight:400; letter-spacing:-.01em; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px;
  border:1px solid var(--hair-2); background:var(--raised); color:var(--ink); cursor:pointer;
  font-size:14px; font-weight:500; box-shadow:inset 0 1px 0 var(--hi);
  transition:transform .18s,border-color .18s,background .18s,color .18s; }
.btn svg{ width:17px; height:17px; opacity:.85; }
.btn:hover{ transform:translateY(-1px); border-color:var(--teal-line); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.btn.primary{ background:var(--teal); color:var(--on-teal); border-color:transparent;
  box-shadow:0 12px 26px -14px rgba(43,122,111,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.primary svg{ opacity:1; }
.btn.primary:hover{ background:var(--teal-hi); }
.btn.lock svg{ color:currentColor; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn:disabled:hover{ border-color:var(--hair-2); }
.btn-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.linkbtn{ background:none; border:0; padding:0; cursor:pointer; color:var(--teal); font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:7px; }
.linkbtn:hover{ color:var(--teal-hi); text-decoration:underline; text-underline-offset:3px; }
.linkbtn svg{ width:15px; height:15px; }
.linkbtn.ink{ color:var(--muted); }
.linkbtn.ink:hover{ color:var(--ink); }

/* generic cards */
.card{ background:var(--raised); border:1px solid var(--hair-2); border-radius:var(--r-card); box-shadow:var(--shadow); }
.card.hi{ background:linear-gradient(158deg,var(--lifted),var(--raised)); }

/* plan / purpose anchor */
.anchor{ background:linear-gradient(158deg,var(--lifted),var(--raised)); border:1px solid var(--hair-2);
  border-radius:var(--r-card); box-shadow:var(--shadow); padding:20px 22px; }
.anchor .kicker{ margin-bottom:10px; display:block; }
.anchor h2{ font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.1; letter-spacing:-.01em; margin:0; color:var(--ink); }
.anchor .reason{ margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.anchor .facts{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:13px; }
.anchor .fact{ display:inline-flex; align-items:center; gap:7px; }
.anchor .fact svg{ width:15px; height:15px; opacity:.75; }
.anchor .people{ margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* compact anchor pill */
.anchor-pill{ display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:999px;
  background:var(--raised); border:1px solid var(--hair-2); box-shadow:var(--shadow); align-self:flex-start; }
.anchor-pill .ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--teal); background:var(--teal-tint); flex:0 0 auto; }
.anchor-pill .ic svg{ width:15px; height:15px; }
.anchor-pill .t{ font-size:14px; color:var(--ink); font-weight:500; }
.anchor-pill .m{ color:var(--muted); font-size:13px; }
.anchor-pill.bordered{ background:transparent; border:1px solid var(--teal-line); box-shadow:none; }

/* people chips */
.pchip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--raised); border:1px solid var(--hair-2); font-size:13px; color:var(--ink); }
.pchip .av{ width:24px; height:24px; font-size:10px; }
.pnames{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }

/* teal reassurance strip */
.assure{ display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:11px; background:var(--teal-tint); color:var(--teal); font-size:13.5px; font-weight:500; }
.assure svg{ width:17px; height:17px; }
.assure .sep{ color:var(--teal-line); }
.note-line{ display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.note-line svg{ width:15px; height:15px; opacity:.7; }

/* status legend dots */
.legend{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.legend .li{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.legend .sw{ width:15px; height:15px; border-radius:4px; display:inline-grid; place-items:center; }
.legend .sw svg{ width:14px; height:14px; }

/* checklist ("what focor will do") */
.willdo{ display:flex; flex-direction:column; gap:14px; }
.willdo .wi{ display:flex; align-items:flex-start; gap:12px; }
.willdo .wi .wc{ width:22px; height:22px; border-radius:50%; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; flex:0 0 auto; }
.willdo .wi .wc svg{ width:14px; height:14px; }
.willdo .wi .wt{ font-size:14.5px; color:var(--ink); font-weight:500; }
.willdo .wi .ws{ font-size:13px; color:var(--muted); margin-top:2px; line-height:1.45; }

/* two-column review split */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:34px; align-items:start; flex:1 1 auto; min-height:0; }
.split.narrow-left{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr); }
.review-actions{ margin-top:20px; }

/* centered composition */
.center-col{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; }

/* ==========================================================================
   Blank planner (P0-01)
   ========================================================================== */
.blank{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; }
.blank .arc{ position:absolute; top:34px; left:50%; transform:translateX(-50%); width:640px; height:640px; border-radius:50%;
  border:1px solid var(--hair); opacity:.4; pointer-events:none; -webkit-mask-image:linear-gradient(#000,transparent 62%); mask-image:linear-gradient(#000,transparent 62%); }
.blank .invite{ margin-top:36px; display:flex; flex-direction:column; align-items:center; gap:10px; z-index:1; }
.blank .invite h2{ font-family:var(--font-display); font-weight:400; font-size:42px; letter-spacing:-.02em; margin:6px 0 0; color:var(--ink); }
.blank .invite p{ margin:0; color:var(--muted); font-size:15px; }

/* dormant horizon (blank) */
.dormant{ width:100%; max-width:1120px; margin:30px auto 0; position:relative; z-index:1; }
.dormant .marks{ display:flex; justify-content:space-between; padding:0 4px 6px; color:var(--faint); }
.dormant .marks svg{ width:16px; height:16px; opacity:.6; }
.dormant .line{ position:relative; height:16px; }
.dormant .rail-h{ position:absolute; top:50%; left:0; right:0; height:8px; transform:translateY(-50%); border-radius:999px; background:var(--recessed); border:1px solid var(--hair); }
.dormant .blk{ position:absolute; top:50%; transform:translateY(-50%); height:9px; border-radius:999px; background:var(--busy); }
.dormant .ticks{ display:flex; justify-content:space-between; padding:8px 2px 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--faint); }

.intents{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; max-width:920px; margin:30px auto 0; z-index:1; }
.intent{ background:linear-gradient(158deg,var(--lifted),var(--raised)); border:1px solid var(--hair-2); border-radius:var(--r-card);
  padding:24px 20px; text-align:center; cursor:pointer; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .2s cubic-bezier(.16,.84,.34,1),border-color .2s,box-shadow .2s; }
.intent:hover{ transform:translateY(-4px); border-color:var(--teal-line); box-shadow:var(--shadow-strong); }
.intent:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.intent .ico{ color:var(--teal); }
.intent .ico svg{ width:26px; height:26px; stroke-width:1.5; }
.intent .lbl{ font-family:var(--font-display); font-size:18px; line-height:1.2; color:var(--ink); }
.intent .arr{ color:var(--teal); font-size:16px; }

/* ==========================================================================
   Context resolution (P0-02) — progressive, informative loading
   ========================================================================== */
.resolve{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:40px; align-items:center; flex:1 1 auto; }
.resolve-mid{ text-align:center; max-width:420px; margin:0 auto; }
.resolve-mid h2{ font-family:var(--font-display); font-weight:400; font-size:28px; margin:0; }
.resolve-mid .lede{ margin:8px 0 20px; color:var(--muted); font-size:14px; }
.checklist{ display:flex; flex-direction:column; gap:9px; text-align:left; }
.check-row{ display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:11px; background:var(--raised); border:1px solid var(--hair); }
.check-row .ci{ width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; }
.check-row .ci .done{ width:20px; height:20px; color:var(--on-teal); background:var(--teal); border-radius:50%; display:grid; place-items:center; }
.check-row .ci .done svg{ width:12px; height:12px; }
.check-row .ci .spin{ width:16px; height:16px; border-radius:50%; border:2px solid var(--teal-line); border-top-color:var(--teal); animation:spin .8s linear infinite; }
.check-row.pending{ opacity:.55; }
.check-row .lab{ font-size:13.5px; color:var(--ink); }
.check-row .lab b{ font-weight:400; color:var(--muted); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.resolve-arrow{ color:var(--faint); display:flex; align-items:center; justify-content:center; }
.resolve-note{ margin-top:16px; color:var(--faint); font-size:12.5px; }

/* faint resolving lanes (loading horizon) */
.ghost-lanes{ display:flex; flex-direction:column; gap:12px; }
.ghost-times{ display:flex; justify-content:space-between; padding-left:120px; color:var(--faint); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; }
.ghost-row{ display:flex; align-items:center; gap:14px; }
.ghost-row .who{ width:106px; flex:0 0 106px; }
.ghost-row .who .nm{ font-size:13.5px; color:var(--ink); }
.ghost-row .who .lc{ font-family:var(--font-mono); font-size:10px; color:var(--faint); letter-spacing:.04em; }
.ghost-track{ position:relative; flex:1; height:34px; border-radius:9px; background:var(--recessed); border:1px solid var(--hair); overflow:hidden; }
.ghost-band{ position:absolute; top:6px; bottom:6px; border-radius:6px; background:var(--busy); }
.ghost-band.tentative{ background:repeating-linear-gradient(45deg,var(--busy),var(--busy) 4px,transparent 4px,transparent 8px); }
.ghost-band.appear{ animation:ghost-in .5s ease both; }
@keyframes ghost-in{ from{ opacity:0; } to{ opacity:1; } }
.ghost-row.unknown .ghost-track{ background:repeating-linear-gradient(90deg,var(--recessed),var(--recessed) 12px,rgba(0,0,0,0) 12px,rgba(0,0,0,0) 20px); }

/* ==========================================================================
   The temporal horizon (P0-03 / P0-04 / W-02)
   ========================================================================== */
.horizon-caption{ text-align:center; margin:0 0 4px; }
.horizon-caption .l1{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.horizon-caption .l2{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

.horizon{ display:flex; gap:0; flex:0 0 auto; }
.horizon .labels{ flex:0 0 128px; width:128px; }
.horizon .labels .lh{ height:var(--hd-h,44px); }
.horizon .labels .lrow{ height:var(--row-h,66px); display:flex; align-items:center; gap:11px; padding-right:12px; }
.horizon .labels .lrow .nm{ font-size:14px; color:var(--ink); font-weight:500; line-height:1.15; }
.horizon .labels .lrow .lc{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; }
.horizon .canvas{ position:relative; flex:1 1 auto; min-width:0; }
.day-heads{ display:flex; height:var(--hd-h,44px); }
.day-head{ flex:1 1 0; text-align:center; }
.day-head .dn{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.day-head .ticks{ display:flex; justify-content:space-between; padding:8px 6px 0; font-family:var(--font-mono); font-size:9.5px; color:var(--faint); letter-spacing:.04em; }
.canvas-rows{ position:relative; }
.crow{ position:relative; height:var(--row-h,66px); display:flex; align-items:center; }
.crow .track{ position:relative; height:38px; width:100%; border-radius:10px; background:var(--recessed); border:1px solid var(--hair); overflow:hidden; }
/* day divider lines drawn on the canvas */
.day-divider{ position:absolute; top:var(--hd-h,44px); bottom:0; width:1px; background:var(--hair); pointer-events:none; }

.band{ position:absolute; top:7px; bottom:7px; border-radius:6px; display:flex; align-items:center; padding:0 10px; }
.band.busy{ background:var(--busy); border:1px solid var(--busy-line); }
.band.busy .bt{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.band.protected{ background:var(--teal-tint); border:1px solid var(--teal-line); }
.band.protected .bt{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:6px; }
.band.protected .bt svg{ width:11px; height:11px; }
.band.appear{ animation:ghost-in .45s ease both; }

/* clearings overlay */
.clearings{ position:absolute; left:0; right:0; top:var(--hd-h,44px); bottom:0; pointer-events:none; }
.clearing{ position:absolute; top:6px; bottom:6px; border-radius:11px; border:1.5px solid var(--teal-line); background:transparent;
  pointer-events:auto; cursor:pointer; transition:background .22s,border-color .22s,box-shadow .22s;
  animation:clearing-in .5s cubic-bezier(.16,.84,.34,1) both; }
@keyframes clearing-in{ from{ opacity:0; transform:scaleY(.8); } to{ opacity:1; transform:none; } }
.clearing:hover{ background:var(--teal-tint); }
.clearing:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--teal-line); }
.clearing.selected{ background:var(--teal-tint); border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), 0 14px 30px -16px var(--teal-glow); }
.clearing .cnum{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:var(--raised); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; }
.clearing.selected .cnum{ background:var(--teal); color:var(--on-teal); }
.clearing.gap{ border-color:var(--teal-line); }
.clearing.gap.alt{ border-color:var(--bronze-line); }
.clearing.gap.alt .cnum{ background:var(--bronze); }
.clearing.nonselect{ border-style:dashed; border-color:var(--hair-2); cursor:not-allowed; }
.clearing.nonselect:hover{ background:transparent; }
.clearing .mark-ic{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.clearing .mark-ic svg{ width:16px; height:16px; }
.clearing.picked .mark-ic{ color:var(--teal); }
.clearing.gap.alt .mark-ic{ color:var(--bronze); }

/* proposal popover anchored under selected clearing */
.clearings .pop-layer{ position:absolute; left:0; right:0; top:100%; height:0; }
.proposal-pop{ position:absolute; width:236px; background:var(--lifted); border:1px solid var(--hair-2); border-radius:var(--r-card);
  box-shadow:var(--shadow-strong); padding:16px 16px 15px; text-align:center; z-index:8;
  animation:pop-in .28s cubic-bezier(.16,.84,.34,1) both; }
@keyframes pop-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.proposal-pop .bf{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.proposal-pop h4{ font-family:var(--font-display); font-weight:400; font-size:20px; margin:7px 0 12px; }
.proposal-pop .reasons{ display:flex; flex-direction:column; gap:9px; text-align:left; margin-bottom:14px; }
.proposal-pop .rr{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); }
.proposal-pop .rr svg{ width:14px; height:14px; color:var(--teal); flex:0 0 auto; }
.proposal-pop .btn{ width:100%; justify-content:center; padding:10px 14px; font-size:13px; }
.proposal-pop .btn+.btn{ margin-top:8px; }
.proposal-pop .change{ margin-top:12px; }

/* small alternative marker labels */
.alt-tag{ position:absolute; top:calc(100% + 12px); transform:translateX(-50%); width:150px; text-align:left;
  background:var(--raised); border:1px solid var(--hair-2); border-radius:11px; padding:10px 12px; box-shadow:var(--shadow);
  display:flex; align-items:flex-start; gap:9px; cursor:pointer; transition:border-color .2s,transform .2s; }
.alt-tag:hover{ border-color:var(--teal-line); transform:translate(-50%,-2px); }
.alt-tag .an{ width:20px; height:20px; border-radius:50%; background:var(--recessed); color:var(--muted); display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; font-weight:600; flex:0 0 auto; }
.alt-tag .atime{ font-family:var(--font-mono); font-size:11px; color:var(--ink); }
.alt-tag .anote{ font-size:11px; color:var(--muted); margin-top:2px; line-height:1.35; }

/* calendar-source legend below meeting horizon */
.cal-legend{ display:flex; align-items:center; gap:26px; margin-top:12px; padding-left:128px; flex-wrap:wrap; }
.cal-legend .cbox{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); cursor:pointer; }
.cal-legend .cbox .bx{ width:16px; height:16px; border-radius:4px; border:1.5px solid var(--hair-2); display:grid; place-items:center; }
.cal-legend .cbox.on .bx{ background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.cal-legend .cbox .bx svg{ width:12px; height:12px; opacity:0; }
.cal-legend .cbox.on .bx svg{ opacity:1; }
.cal-legend .badges{ display:inline-flex; gap:7px; margin-left:auto; }
.cal-legend .badge{ width:22px; height:22px; border-radius:6px; border:1px solid var(--hair-2); display:grid; place-items:center; font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--muted); background:var(--raised); }

/* ==========================================================================
   Objective screens
   ========================================================================== */
.ring{ position:relative; width:78px; height:78px; flex:0 0 auto; }
.ring svg{ width:78px; height:78px; transform:rotate(-90deg); }
.ring .rtrack{ fill:none; stroke:var(--hair); stroke-width:5; }
.ring .rfill{ fill:none; stroke:var(--bronze); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.16,.84,.34,1); }
.ring .rlabel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .rlabel .pct{ font-family:var(--font-display); font-size:19px; color:var(--ink); }
.ring .rlabel .pl{ font-family:var(--font-mono); font-size:7px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:1px; }

.obj-anchor{ display:flex; align-items:center; gap:20px; }
.obj-anchor .oa-main{ flex:1 1 auto; }
.obj-anchor h2{ font-family:var(--font-display); font-weight:400; font-size:28px; margin:0; letter-spacing:-.01em; }
.obj-meta{ margin-top:9px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; flex-wrap:wrap; }
.obj-meta .dot{ width:8px; height:8px; border-radius:50%; background:var(--bronze); }
.obj-anchor .oa-note{ margin:11px 0 0; color:var(--muted); font-size:14.5px; }

.milestones{ display:flex; flex-direction:column; gap:11px; }
.mrow{ display:flex; align-items:center; gap:15px; padding:15px 18px; border-radius:12px; background:var(--raised); border:1px solid var(--hair); cursor:pointer; transition:border-color .18s,transform .18s; }
.mrow:hover{ border-color:var(--teal-line); transform:translateX(2px); }
.mrow .mic{ width:34px; height:34px; border-radius:50%; background:var(--recessed); color:var(--muted); display:grid; place-items:center; flex:0 0 auto; }
.mrow .mic svg{ width:17px; height:17px; }
.mrow .mt{ flex:1; font-size:15px; color:var(--ink); }
.mrow .chev{ color:var(--faint); }

.evidence{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px; background:var(--teal-tint); border:1px solid var(--teal-line); cursor:pointer; }
.evidence .eic{ width:34px; height:34px; border-radius:50%; background:var(--raised); color:var(--teal); display:grid; place-items:center; flex:0 0 auto; }
.evidence .eic svg{ width:17px; height:17px; }
.evidence .et{ color:var(--teal); font-size:14.5px; font-weight:500; }
.evidence .es{ color:var(--muted); font-size:13px; margin-top:2px; }
.evidence .prov{ margin-left:auto; color:var(--teal); }

/* linked two-session plan (O-03) */
.plan-strip{ position:relative; flex:0 0 auto; margin-top:8px; }
.plan-timeline{ display:flex; height:30px; }
.plan-timeline .pt-day{ flex:1 1 0; text-align:center; border-left:1px solid var(--hair); }
.plan-timeline .pt-day:first-child{ border-left:0; }
.plan-timeline .pt-day .pd{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.plan-timeline .pt-day.active .pd{ color:var(--teal); font-weight:600; }
.session-cards{ display:flex; align-items:center; gap:0; margin-top:22px; }
.session{ flex:1 1 0; max-width:340px; background:linear-gradient(158deg,#f4f7f5,var(--raised)); border:1.5px solid var(--teal-line); border-radius:var(--r-card); padding:20px 22px; box-shadow:var(--shadow); }
.session .sh{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--teal); }
.session .sh .sc{ width:20px; height:20px; border-radius:50%; background:var(--teal); color:var(--on-teal); display:grid; place-items:center; }
.session .sh .sc svg{ width:12px; height:12px; }
.session .stag{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:12px 0 4px; }
.session h4{ font-family:var(--font-display); font-weight:400; font-size:20px; margin:0; }
.session .sreason{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.4; }
.linknode{ flex:0 0 auto; width:64px; display:flex; align-items:center; justify-content:center; position:relative; }
.linknode::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--teal-line); }
.linknode .ln{ width:28px; height:28px; border-radius:50%; background:var(--teal); color:var(--on-teal); display:grid; place-items:center; z-index:1; box-shadow:0 0 0 4px var(--raised); }
.linknode .ln svg{ width:14px; height:14px; }
.conditional{ flex:0 0 auto; width:150px; margin-left:14px; border:1.5px dashed var(--hair-2); border-radius:var(--r-card); padding:18px; text-align:left; background:transparent; }
.conditional .cdate{ font-family:var(--font-mono); font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.conditional .cdate .ci{ width:18px; height:18px; border-radius:50%; border:1.5px dashed var(--hair-2); }
.conditional .cdur{ font-size:13px; color:var(--ink); margin-top:8px; }
.conditional .conly{ font-size:12px; color:var(--faint); margin-top:3px; }
.condline{ flex:0 0 auto; width:26px; height:2px; background:repeating-linear-gradient(90deg,var(--hair-2),var(--hair-2) 3px,transparent 3px,transparent 6px); align-self:center; }

/* progress check (O-07) */
.checkin h3{ font-family:var(--font-display); font-weight:400; font-size:24px; margin:0 0 4px; line-height:1.2; }
.checkin .when{ display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-family:var(--font-mono); font-size:12px; margin:10px 0 4px; }
.checkin .when svg{ width:15px; height:15px; }
.checkin .whatq{ color:var(--muted); font-size:14px; margin-bottom:12px; }
.answers{ display:flex; flex-direction:column; gap:0; border:1px solid var(--hair); border-radius:12px; overflow:hidden; }
.answer{ display:flex; align-items:center; gap:14px; padding:15px 18px; background:var(--raised); border:0; border-bottom:1px solid var(--hair); cursor:pointer; text-align:left; width:100%; transition:background .16s; }
.answer:last-child{ border-bottom:0; }
.answer:hover{ background:var(--recessed); }
.answer .aic{ width:22px; height:22px; color:var(--muted); flex:0 0 auto; display:grid; place-items:center; }
.answer .aic svg{ width:19px; height:19px; }
.answer .al{ flex:1; font-size:14.5px; color:var(--ink); }
.answer .radio{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--hair-2); flex:0 0 auto; }
.answer.sel{ background:var(--teal-tint); }
.answer.sel .radio{ border-color:var(--teal); box-shadow:inset 0 0 0 4px var(--teal); }
.answer.sel .aic{ color:var(--teal); }
.next-block .nb-time{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:15px; color:var(--ink); }
.next-block .nb-time svg{ width:16px; height:16px; color:var(--teal); }
.next-block .nb-body{ margin-top:16px; color:var(--muted); font-size:14px; line-height:1.5; border-top:1px solid var(--hair); padding-top:16px; }

/* ==========================================================================
   Incoming request screens
   ========================================================================== */
.email-card h2{ font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.28; margin:0; letter-spacing:-.005em; }
.email-sender{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.email-sender .av{ width:40px; height:40px; font-size:14px; }
.email-sender .sn{ font-size:15px; color:var(--ink); font-weight:500; }
.email-sender .sr{ font-size:13px; color:var(--muted); }
.email-recv{ margin-top:14px; color:var(--faint); font-size:12.5px; font-family:var(--font-mono); letter-spacing:.02em; }
.req-details{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.req-details .rd{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13.5px; }
.req-details .rd svg{ width:16px; height:16px; opacity:.7; flex:0 0 auto; }
.req-intro{ font-family:var(--font-display); font-weight:400; font-size:24px; line-height:1.34; color:var(--ink); margin:0 0 24px; }
.offer-chips{ display:flex; gap:16px; margin-bottom:26px; }
.offer-chip{ flex:1; max-width:150px; background:var(--raised); border:1px solid var(--hair-2); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow); }
.offer-chip .oi{ width:32px; height:32px; border-radius:8px; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; margin-bottom:14px; }
.offer-chip .oi svg{ width:17px; height:17px; }
.offer-chip .od{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.offer-chip .otime{ font-family:var(--font-display); font-size:26px; color:var(--ink); margin-top:2px; }

/* checked offered times (R-02) */
.checked-rows{ display:flex; flex-direction:column; gap:14px; flex:0 0 auto; }
.checked-row{ display:grid; grid-template-columns:96px 130px 168px minmax(0,1fr) auto; align-items:center; gap:24px; padding:20px 24px; border-radius:var(--r-card); background:var(--raised); border:1px solid var(--hair-2); box-shadow:var(--shadow); }
.checked-row.reco{ border-color:var(--teal-line); }
.checked-row .cdate{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--teal); font-weight:600; line-height:1.5; text-transform:uppercase; }
.checked-row.dim .cdate{ color:var(--muted); }
.checked-row .ctime{ font-family:var(--font-display); font-size:24px; color:var(--ink); }
.checked-row .ctime small{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--faint); letter-spacing:.08em; margin-top:2px; }
.checked-row .cstatus{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.checked-row .cstatus .si{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1.5px solid currentColor; }
.checked-row .cstatus .si svg{ width:15px; height:15px; }
.cstatus.available{ color:var(--teal); }
.cstatus.possible{ color:var(--bronze); }
.cstatus.unavailable{ color:var(--faint); }
.checked-row .creason{ font-size:14px; color:var(--muted); line-height:1.45; }
.reco-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid var(--teal-line); color:var(--teal); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.reco-pill svg{ width:14px; height:14px; }
.reco-strip{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; border-radius:var(--r-card); background:var(--teal-tint); margin-top:6px; }
.reco-strip .rl{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-size:15px; }
.reco-strip .rl svg{ width:19px; height:19px; color:var(--teal); }

/* reply preview */
.msg-card{ background:var(--raised); border:1px solid var(--hair-2); border-radius:var(--r-card); padding:22px 24px; box-shadow:var(--shadow); }
.msg-card .ql{ color:var(--teal); font-family:var(--font-display); font-size:34px; line-height:0; height:18px; display:block; }
.msg-body{ font-family:var(--font-display); font-size:19px; line-height:1.55; color:var(--ink); margin:6px 0 0; white-space:pre-wrap; outline:none; border-radius:8px; padding:4px; }
.msg-body[contenteditable="true"]{ background:var(--recessed); box-shadow:0 0 0 2px var(--teal-line); }
.happen{ display:flex; flex-direction:column; gap:14px; }
.happen .hi{ display:flex; align-items:center; gap:13px; }
.happen .hi .hc{ width:32px; height:32px; border-radius:8px; background:var(--recessed); display:grid; place-items:center; flex:0 0 auto; color:var(--teal); }
.happen .hi .hc svg{ width:17px; height:17px; }
.happen .hi .ht{ font-size:14.5px; color:var(--ink); }

/* ==========================================================================
   Shallow-work batch screens
   ========================================================================== */
.batch-card h2{ font-family:var(--font-display); font-weight:400; font-size:30px; margin:0; letter-spacing:-.01em; }
.batch-meta{ margin-top:8px; color:var(--muted); font-size:14px; }
.batch-items{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:22px; }
.bitem{ display:flex; align-items:center; gap:12px; }
.bitem .bic{ width:32px; height:32px; border-radius:8px; background:var(--recessed); display:grid; place-items:center; flex:0 0 auto; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--muted); overflow:hidden; }
.bitem .bic svg{ width:17px; height:17px; }
.bitem .bmain{ flex:1; min-width:0; }
.bitem .bt{ font-size:14px; color:var(--ink); }
.bitem .bsrc{ font-size:12px; color:var(--faint); }
.bitem .burg{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.bitem .burg .u{ width:7px; height:7px; border-radius:50%; }
.burg .u.high{ background:var(--danger-muted); } .burg .u.medium{ background:var(--bronze); } .burg .u.low{ background:var(--teal); }
.batch-more{ color:var(--muted); font-size:13px; margin-top:16px; }
.batch-fit{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; color:var(--muted); font-size:13.5px; }
.batch-fit svg{ width:16px; height:16px; color:var(--teal); }

.info-rows{ display:flex; flex-direction:column; gap:0; }
.info-row{ display:flex; align-items:flex-start; gap:15px; padding:20px 0; border-bottom:1px solid var(--hair); }
.info-row:last-child{ border-bottom:0; }
.info-row .ii{ width:38px; height:38px; border-radius:50%; background:var(--recessed); color:var(--muted); display:grid; place-items:center; flex:0 0 auto; }
.info-row .ii svg{ width:19px; height:19px; }
.info-row.teal .ii{ background:var(--teal-tint); color:var(--teal); }
.info-row .it{ font-size:15px; color:var(--ink); font-weight:500; }
.info-row .is{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45; }

/* gap comparison (W-02) */
.gap-list{ display:flex; flex-direction:column; gap:14px; }
.gap-card{ display:flex; align-items:flex-start; gap:15px; padding:18px 20px; border-radius:var(--r-card); background:var(--raised); border:1px solid var(--hair-2); box-shadow:var(--shadow); cursor:pointer; transition:border-color .18s,transform .18s; }
.gap-card:hover{ border-color:var(--teal-line); transform:translateY(-1px); }
.gap-card.reco{ border-color:var(--teal-line); background:linear-gradient(158deg,#f2f6f4,var(--raised)); }
.gap-card .gn{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; font-weight:600; flex:0 0 auto; background:var(--recessed); color:var(--muted); }
.gap-card.reco .gn{ background:var(--teal); color:var(--on-teal); }
.gap-card.rank2 .gn{ background:var(--ink); color:var(--raised); }
.gap-card.rank3 .gn{ background:var(--bronze); color:var(--on-teal); }
.gap-card .gmain{ flex:1; min-width:0; }
.gap-card .gtop{ display:flex; align-items:center; gap:12px; }
.gap-card .gday{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.gap-card .gtime{ font-family:var(--font-mono); font-size:15px; color:var(--ink); font-weight:500; }
.gap-card.reco .gtime, .gap-card.reco .gday{ color:var(--teal); }
.gap-card .grtag{ margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.gap-card .greason{ display:flex; align-items:center; gap:9px; margin-top:9px; color:var(--muted); font-size:13px; }
.gap-card .greason svg{ width:15px; height:15px; opacity:.7; flex:0 0 auto; }

/* ==========================================================================
   Reverse planning
   ========================================================================== */
.selector-card{ max-width:900px; margin:0 auto; width:100%; background:var(--raised); border:1px solid var(--hair-2); border-radius:16px; box-shadow:var(--shadow); padding:34px 40px 30px; }
.selector-card h2{ font-family:var(--font-display); font-weight:400; font-size:28px; margin:0 0 20px; }
.search-field{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:12px; background:var(--recessed); border:1px solid var(--hair-2); margin-bottom:22px; }
.search-field svg{ width:18px; height:18px; color:var(--faint); }
.search-field input{ flex:1; border:0; background:transparent; outline:none; font-size:15px; color:var(--ink); font-family:var(--font-sans); }
.purpose-group{ margin-bottom:18px; }
.purpose-group .pg-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:6px; }
.purpose-item{ display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:10px; cursor:pointer; transition:background .15s; border:1px solid transparent; }
.purpose-item:hover, .purpose-item.hl{ background:var(--teal-tint); border-color:var(--teal-line); }
.purpose-item .pi-ic{ width:26px; height:26px; border-radius:50%; background:var(--recessed); color:var(--muted); display:grid; place-items:center; flex:0 0 auto; }
.purpose-item .pi-ic svg{ width:15px; height:15px; }
.purpose-item .pi-ic .av{ width:26px; height:26px; font-size:10px; }
.purpose-item .pi-name{ font-size:15px; color:var(--ink); }
.purpose-item .pi-meta{ color:var(--faint); font-size:13px; }
.purpose-item .pi-count{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.purpose-item .pi-count svg{ width:14px; height:14px; color:var(--faint); }
.selector-foot{ text-align:center; color:var(--muted); font-size:13px; margin:20px 0 22px; display:flex; align-items:center; justify-content:center; gap:9px; }
.selector-foot svg{ width:15px; height:15px; opacity:.7; }

/* view-plans dropdown */
.vp-menu{ position:absolute; top:52px; right:0; width:250px; background:var(--lifted); border:1px solid var(--hair-2); border-radius:14px; box-shadow:var(--shadow-strong); padding:8px; z-index:30; }
.vp-menu .vp-item{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--ink); }
.vp-menu .vp-item:hover{ background:var(--teal-tint); }
.vp-menu .vp-item svg{ width:17px; height:17px; color:var(--muted); }

/* purpose header bar */
.purpose-bar{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--r-card); background:linear-gradient(158deg,var(--lifted),var(--raised)); border:1px solid var(--hair-2); box-shadow:var(--shadow); flex:0 0 auto; }
.purpose-bar .pb-ic{ width:46px; height:46px; border-radius:50%; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; flex:0 0 auto; }
.purpose-bar .pb-ic svg{ width:22px; height:22px; }
.purpose-bar .pb-main{ flex:1; min-width:0; }
.purpose-bar .pb-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.purpose-bar .pb-title .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.purpose-bar .pb-title h2{ font-family:var(--font-display); font-weight:400; font-size:24px; margin:0; }
.purpose-bar .pb-meta{ margin-top:6px; color:var(--muted); font-size:13.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.purpose-bar .pb-meta .bad{ color:var(--bronze); }
.purpose-bar .pb-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }

/* purpose timeline (V-02) */
.ptl-axis{ display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px; color:var(--faint); font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.ptl-axis .ax{ display:inline-flex; align-items:center; gap:8px; }
.ptl-axis .ax svg{ width:34px; height:8px; }
.ptimeline{ display:flex; align-items:stretch; gap:0; flex:0 0 auto; }
.pnode{ flex:1 1 0; min-width:0; border-radius:var(--r-card); border:1.5px solid var(--hair-2); background:var(--raised); padding:16px 16px 18px; cursor:pointer; position:relative;
  transition:border-color .18s,transform .18s,box-shadow .18s; animation:node-in .5s cubic-bezier(.16,.84,.34,1) both; }
@keyframes node-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.pnode+.pnode{ margin-left:16px; }
.pnode:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pnode .pn-head{ display:flex; align-items:center; gap:9px; }
.pnode .pn-dot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
.pnode .pn-dot svg{ width:14px; height:14px; }
.pnode .pn-date{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pnode .pn-state{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-top:2px; }
.pnode h4{ font-family:var(--font-display); font-weight:400; font-size:17px; margin:14px 0 0; line-height:1.2; }
.pnode .pn-sub{ font-size:12.5px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:7px; }
.pnode .pn-sub svg{ width:13px; height:13px; opacity:.7; }
.pnode .pn-outcome{ margin-top:12px; padding-top:10px; border-top:1px solid var(--hair); }
.pnode .pn-outcome .ol{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.pnode .pn-outcome .ov{ font-size:13px; color:var(--ink); margin-top:2px; }
/* node states */
.pnode.completed{ border-color:var(--hair-2); } .pnode.completed .pn-dot{ background:var(--teal); color:var(--on-teal); } .pnode.completed .pn-state{ color:var(--teal); }
.pnode.scheduled{ border-color:var(--teal-line); } .pnode.scheduled .pn-dot{ background:var(--teal-tint); color:var(--teal); } .pnode.scheduled .pn-state{ color:var(--teal); }
.pnode.displaced{ border-color:var(--bronze-line); background:var(--bronze-tint); } .pnode.displaced .pn-dot{ background:var(--bronze); color:var(--on-teal); } .pnode.displaced .pn-state{ color:var(--bronze); }
.pnode.conditional{ border-color:var(--hair-2); } .pnode.conditional .pn-dot{ background:var(--recessed); color:var(--muted); border:1.5px dashed var(--hair-2);} .pnode.conditional .pn-state{ color:var(--muted); }
.pnode.proposed{ border-style:dashed; border-color:var(--hair-2); background:transparent; } .pnode.proposed .pn-dot{ background:transparent; color:var(--faint); border:1.5px dashed var(--hair-2);} .pnode.proposed .pn-state{ color:var(--faint); }
.pnode.held{ border-color:var(--hair-2); } .pnode.held .pn-dot{ background:var(--recessed); color:var(--muted);} .pnode.held .pn-state{ color:var(--muted); }
.pnode.sel{ box-shadow:0 0 0 2px var(--teal), var(--shadow); border-color:var(--teal); }
.pnode.dim{ opacity:.45; }

/* summary strip under timeline */
.summary-strip{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; border-radius:var(--r-card); background:var(--raised); border:1px solid var(--hair); margin-top:8px; }
.summary-strip .ss-l{ display:flex; align-items:center; gap:16px; }
.summary-strip .ss-ic{ width:44px; height:44px; border-radius:50%; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; flex:0 0 auto; }
.summary-strip .ss-ic svg{ width:22px; height:22px; }
.summary-strip .ss-head{ font-size:15px; color:var(--ink); font-weight:500; }
.summary-strip .ss-sub{ font-size:13px; color:var(--muted); margin-top:2px; }

/* decision follow-through map (V-04) */
.followmap{ display:flex; align-items:stretch; gap:0; }
.fnode{ flex:1 1 0; min-width:0; border-radius:var(--r-card); border:1.5px solid var(--hair-2); background:var(--raised); padding:16px; position:relative; cursor:pointer;
  transition:border-color .18s,transform .18s,box-shadow .18s; animation:node-in .5s cubic-bezier(.16,.84,.34,1) both; }
.fnode+.fnode{ margin-left:34px; }
.fnode+.fnode::before{ content:""; position:absolute; left:-34px; top:44px; width:34px; height:2px; background:var(--hair-2); }
.fnode+.fnode::after{ content:""; position:absolute; left:-19px; top:39px; width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 4px var(--raised); }
.fnode:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.fnode .fn-top{ display:flex; align-items:center; gap:11px; }
.fnode .fn-num{ width:34px; height:34px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font-family:var(--font-mono); font-size:14px; font-weight:600; flex:0 0 auto; }
.fnode .fn-state{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.fnode .fn-date{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:1px; }
.fnode .fn-ic{ width:36px; height:36px; border-radius:50%; background:var(--recessed); display:grid; place-items:center; margin:16px 0 12px; color:var(--muted); }
.fnode .fn-ic svg{ width:18px; height:18px; }
.fnode .fn-kind{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.fnode .fn-body{ font-size:13px; color:var(--ink); margin-top:8px; padding-top:10px; border-top:1px solid var(--hair); line-height:1.4; }
.fnode.completed{ color:var(--teal); } .fnode.completed .fn-num{ background:var(--teal); color:var(--on-teal); border-color:var(--teal); } .fnode.completed .fn-ic{ background:var(--teal-tint); color:var(--teal); }
.fnode.scheduled{ color:var(--teal); } .fnode.scheduled .fn-ic{ background:var(--teal-tint); color:var(--teal); }
.fnode.proposed{ color:var(--bronze); border-style:dashed; border-color:var(--bronze-line); background:var(--bronze-tint); } .fnode.proposed .fn-ic{ background:var(--raised); color:var(--bronze); }
.fnode.held{ color:var(--muted); }
.fnode .fn-kind, .fnode .fn-body{ color:var(--ink); }
.fnode .fn-state{ color:currentColor; }
.fnode.sel{ box-shadow:0 0 0 2px currentColor, var(--shadow); }

/* right rail summary panel (V-04) */
.side-panel{ display:flex; flex-direction:column; gap:20px; }
.side-panel .sp-block .sp-h{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:12px; }
.sp-list{ display:flex; flex-direction:column; gap:11px; }
.sp-li{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink); }
.sp-li .spi{ width:20px; height:20px; flex:0 0 auto; color:var(--teal); }
.sp-li .spi svg{ width:20px; height:20px; }
.sp-li.dash .spi{ color:var(--bronze); }
.gap-insight{ padding:16px; border-radius:12px; background:var(--bronze-tint); border:1px solid var(--bronze-line); display:flex; gap:12px; }
.gap-insight svg{ width:18px; height:18px; color:var(--bronze); flex:0 0 auto; margin-top:1px; }
.gap-insight .gt{ font-size:13.5px; color:var(--ink); line-height:1.45; }

/* inspect one commitment (V-03) */
.commit-detail{ background:linear-gradient(158deg,var(--lifted),var(--raised)); border:1px solid var(--hair-2); border-radius:var(--r-card); box-shadow:var(--shadow); padding:26px 30px; }
.commit-detail h3{ font-family:var(--font-display); font-weight:400; font-size:26px; margin:0 0 20px; }
.commit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; }
.commit-field{ display:flex; gap:13px; }
.commit-field .cf-ic{ width:22px; height:22px; color:var(--muted); flex:0 0 auto; margin-top:1px; }
.commit-field .cf-ic svg{ width:20px; height:20px; }
.commit-field .cf-l{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.commit-field .cf-v{ font-size:14px; color:var(--ink); margin-top:4px; line-height:1.45; }
.commit-field .cf-v a, .commit-field .cf-v .lk{ color:var(--teal); cursor:pointer; }
.mini-timeline{ display:flex; gap:0; margin-bottom:20px; }
.mini-day{ flex:1 1 0; border-left:1px solid var(--hair); padding:0 8px; position:relative; }
.mini-day:first-child{ border-left:0; }
.mini-day .md-h{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:center; }
.mini-day.active .md-h{ color:var(--teal); font-weight:600; }
.mini-day .md-slot{ height:52px; margin-top:12px; border-radius:9px; border:1.5px dashed var(--hair-2); }
.mini-day.active .md-slot{ border:1.5px solid var(--teal); background:var(--teal-tint); border-style:solid; padding:8px 10px; }
.mini-day .md-slot .mt{ font-family:var(--font-mono); font-size:9.5px; color:var(--teal); }
.mini-day .md-slot .ml{ font-size:11px; color:var(--ink); margin-top:3px; line-height:1.2; }

/* ==========================================================================
   Drawers, scrim, popovers, receipts, tester
   ========================================================================== */
.scrim{ position:absolute; inset:0; background:rgba(43,39,34,.28); backdrop-filter:blur(1.5px); z-index:40; opacity:0; pointer-events:none; transition:opacity .28s; }
.scrim.show{ opacity:1; pointer-events:auto; }

.drawer{ position:absolute; top:0; right:0; bottom:0; width:400px; max-width:86%; background:var(--raised); border-left:1px solid var(--hair-2);
  box-shadow:-18px 0 48px -40px rgba(120,104,82,.24); z-index:41; transform:translateX(100%); transition:transform .32s cubic-bezier(.16,.84,.34,1);
  display:flex; flex-direction:column; }
.drawer.show{ transform:none; }
.drawer .dh{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--hair); }
.drawer .dh .dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.drawer .dclose{ width:32px; height:32px; border-radius:8px; border:1px solid var(--hair-2); background:var(--raised); color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.drawer .dclose:hover{ color:var(--ink); border-color:var(--teal-line); }
.drawer .dclose svg{ width:15px; height:15px; }
.drawer .dbody{ padding:22px 24px; overflow-y:auto; flex:1; }
.drawer h3{ font-family:var(--font-display); font-weight:400; font-size:23px; margin:0 0 6px; }
.drawer .dsub{ color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.5; }
.dfield{ padding:14px 0; border-bottom:1px solid var(--hair); }
.dfield:last-of-type{ border-bottom:0; }
.dfield .dfl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.dfield .dfv{ font-size:14.5px; color:var(--ink); margin-top:5px; }
.dfield .dfv.muted{ color:var(--muted); font-size:13.5px; }

/* segmented / toggle controls in constraint drawer */
.seg{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.seg button{ padding:8px 14px; border-radius:999px; border:1px solid var(--hair-2); background:var(--raised); color:var(--muted); font-size:13px; cursor:pointer; }
.seg button.on{ background:var(--teal-tint); border-color:var(--teal-line); color:var(--teal); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--hair); }
.toggle-row:last-child{ border-bottom:0; }
.toggle-row .tl{ font-size:14px; color:var(--ink); }
.toggle-row .tls{ font-size:12px; color:var(--faint); margin-top:2px; }
.switch{ width:42px; height:24px; border-radius:999px; background:var(--hair-2); border:0; position:relative; cursor:pointer; transition:background .2s; flex:0 0 auto; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--raised); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; }
.switch.on{ background:var(--teal); } .switch.on::after{ left:20px; }
.cal-source{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--hair); }
.cal-source .cs-main{ flex:1; }
.cal-source .cs-n{ font-size:14px; color:var(--ink); }
.cal-source .cs-m{ font-size:12px; color:var(--muted); }
.cal-source .cs-state{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.cal-source .cs-state.ok{ color:var(--teal); } .cal-source .cs-state.off{ color:var(--faint); }

.drawer .dfoot{ padding:18px 24px; border-top:1px solid var(--hair); display:flex; gap:12px; }
.drawer .dfoot .btn{ flex:1; justify-content:center; }

/* receipt (activity) drawer rows */
.receipt-eff{ display:flex; flex-direction:column; gap:12px; margin:8px 0 0; }
.receipt-eff .re{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink); }
.receipt-eff .re .rec-n{ width:22px; height:22px; border-radius:50%; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; flex:0 0 auto; }

/* profile menu */
.profile-menu{ position:absolute; left:64px; bottom:16px; width:230px; background:var(--lifted); border:1px solid var(--hair-2); border-radius:14px; box-shadow:var(--shadow-strong); padding:8px; z-index:44; display:none; }
.profile-menu.show{ display:block; animation:pop-in .2s ease both; }
.profile-menu .pm-head{ padding:12px 12px 10px; border-bottom:1px solid var(--hair); margin-bottom:6px; }
.profile-menu .pm-name{ font-size:14px; color:var(--ink); font-weight:500; }
.profile-menu .pm-mail{ font-size:12px; color:var(--muted); }
.profile-menu .pm-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--ink); border:0; background:transparent; width:100%; text-align:left; }
.profile-menu .pm-item:hover{ background:var(--teal-tint); }
.profile-menu .pm-item svg{ width:16px; height:16px; color:var(--muted); }
.profile-menu .pm-item .kbd{ margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--faint); border:1px solid var(--hair-2); border-radius:5px; padding:1px 6px; }

/* ---------- tester panel (prototype-only, deliberately quiet) ---------- */
.tester{ position:absolute; top:0; right:0; bottom:0; width:340px; background:#26221d; color:#e8e2d8; border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-18px 0 48px -40px rgba(38,34,29,.34); z-index:45; transform:translateX(100%); transition:transform .3s cubic-bezier(.16,.84,.34,1);
  display:flex; flex-direction:column; font-size:13px; }
.tester.show{ transform:none; }
.tester .th{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.tester .th .tlabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#c9a86a; font-weight:600; }
.tester .tclose{ width:28px; height:28px; border-radius:7px; border:1px solid rgba(255,255,255,.12); background:transparent; color:#b8b0a2; cursor:pointer; display:grid; place-items:center; }
.tester .tclose svg{ width:14px; height:14px; }
.tester .tbody{ padding:16px 18px; overflow-y:auto; flex:1; }
.tester .tsec{ margin-bottom:22px; }
.tester .tsec-h{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a8073; margin-bottom:10px; }
.tester .tgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tbtn{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#e8e2d8; cursor:pointer; font-size:12.5px; text-align:left; transition:background .15s,border-color .15s; }
.tbtn:hover{ background:rgba(255,255,255,.08); border-color:rgba(201,168,106,.5); }
.tbtn.wide{ grid-column:1/-1; }
.tbtn.danger{ color:#e8a488; }
.tbtn.danger:hover{ border-color:rgba(183,102,66,.6); }
.tbtn svg{ width:15px; height:15px; opacity:.8; flex:0 0 auto; }
.tselect{ width:100%; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#e8e2d8; font-size:12.5px; font-family:var(--font-sans); }
.tselect option{ background:#26221d; }
.tstate{ padding:12px 14px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.tstate .row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.tstate .row .k{ color:#8a8073; font-family:var(--font-mono); font-size:11px; }
.tstate .row .v{ color:#e8e2d8; font-family:var(--font-mono); font-size:11px; text-align:right; }
.tnote{ font-size:11px; color:#8a8073; line-height:1.5; margin-top:6px; }
.tester .tfoot{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:10.5px; color:#8a8073; font-family:var(--font-mono); letter-spacing:.04em; }

.tester-fab{ position:absolute; bottom:78px; right:18px; z-index:20; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  background:#26221d; color:#e8e2d8; border:1px solid rgba(255,255,255,.1); cursor:pointer; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:var(--shadow); opacity:.72; transition:opacity .2s,transform .2s; }
.tester-fab:hover{ opacity:1; transform:translateY(-2px); }
.tester-fab .kb{ border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:1px 5px; }

/* failure banner */
.fail-banner{ display:flex; align-items:flex-start; gap:13px; padding:16px 20px; border-radius:var(--r-card); background:var(--bronze-tint); border:1px solid var(--bronze-line); margin-bottom:18px; }
.fail-banner svg{ width:19px; height:19px; color:var(--bronze); flex:0 0 auto; margin-top:1px; }
.fail-banner .fb-t{ font-size:14.5px; color:var(--ink); font-weight:500; }
.fail-banner .fb-s{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45; }
.fail-banner .fb-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.fail-banner .fb-actions .linkbtn{ color:var(--bronze); }

/* misc utility */
.grow{ flex:1 1 auto; }
.mt-auto{ margin-top:auto; }
.stack{ display:flex; flex-direction:column; }
.gap-6{ gap:6px; } .gap-10{ gap:10px; } .gap-14{ gap:14px; } .gap-18{ gap:18px; } .gap-22{ gap:22px; }
.pad-card{ padding:24px 26px; }
.center-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.faint{ color:var(--faint); } .muted{ color:var(--muted); }
.hidden{ display:none !important; }

/* ==========================================================================
   Motion + responsive
   ========================================================================== */
body.reduced-motion *{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
}

@media (max-width:1120px){
  body{ padding:0; }
  .window{ height:100dvh; border-radius:0; border:0; }
  .main{ padding:20px 24px 6px; overflow-y:auto; }
  .split, .resolve, .commit-grid, .batch-items, .req-details{ grid-template-columns:1fr; }
  .ptimeline, .followmap, .session-cards{ flex-direction:column; }
  .pnode+.pnode, .fnode+.fnode{ margin-left:0; margin-top:16px; }
  .fnode+.fnode::before, .fnode+.fnode::after{ display:none; }
  .conditional, .linknode{ width:auto; }
  .intents{ grid-template-columns:1fr 1fr; }
  .checked-row{ grid-template-columns:1fr; gap:12px; }
  .drawer, .tester{ width:100%; }
}