/* ============================================================
   JUWEL OS · app surfaces
   Home (brain) · Workspace (self-building) · Hive (agents) ·
   Ledger (falsifiable receipts - the hero) · Lens · Settings
   ============================================================ */

.app{padding:0;color:var(--ink-1);}
.app-pad{padding:22px 24px;}
.app-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--line-2);}
.app-hd .ttl{font-family:var(--ff-display);font-size:24px;font-weight:700;letter-spacing:-.025em;}
.app-hd .ttl em{font-family:var(--ff-display);font-style:normal;font-weight:700;color:var(--ink-1);letter-spacing:0;}
.app-hd .sub{font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.5;max-width:52ch;}
.app-hd .hd-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.sect-h{display:flex;align-items:center;gap:10px;margin:26px 0 13px;}
.sect-h:first-child{margin-top:6px;}
.sect-h .sh-t{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
.sect-h .sh-line{flex:1;height:1px;background:var(--line-2);}
.sect-h .sh-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);}

/* in-window button - ink = you act; amber = JUWEL acts.
   LUXLIQ molten wax (§8.1, §10.2 "primary button: ink slab or nectar lava
   primary for ask her; press = gel compress, not bounce") - the amber
   variant runs a hot-nectar gradient with a wet top-light instead of a
   flat fill; the ink variant stays a plain slab (she is not acting there). */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff);font-size:13px;font-weight:600;letter-spacing:-.01em;
  border-radius:var(--r-md);padding:9px 15px;cursor:pointer;border:1px solid transparent;background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s var(--ease-viscous,var(--ease-out)), transform var(--dur-1) var(--ease-out);}
.pbtn svg{width:15px;height:15px;}
.pbtn:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .pbtn:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper));} }
/* Amber fill reserved for explicit she-acts / approve (meadow recolors most .pbtn.amber to ink). */
.pbtn.amber{background:var(--topaz);color:#201200;border-color:transparent;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--edge) 55%,transparent);}
@media (hover:hover) and (pointer:fine){ .pbtn.amber:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--edge) 55%,transparent);} }
.pbtn.ghost{background:transparent;border-color:var(--line);color:var(--ink-1);}
@media (hover:hover) and (pointer:fine){ .pbtn.ghost:hover{background:var(--surface-2);border-color:var(--line);} }
.pbtn.quiet{background:transparent;color:var(--ink-2);}
@media (hover:hover) and (pointer:fine){ .pbtn.quiet:hover{color:var(--ink-1);background:var(--surface-2);} }
.pbtn.sm{font-size:12px;padding:6px 11px;}
.pbtn:disabled,.pbtn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;}

/* Focus = you act → ink ring only (Humanist Meadow / founder 2026-07-15).
   Single soft ring — no stacked nectar meniscus + outer amber glow (AI-slop). */
.si-row input:focus,.cmd-top input:focus,.vsc-ta:focus,
.acct-f input:focus,.onb-field input:focus{outline:none;
  border-color:color-mix(in srgb,var(--ink-1) 42%,var(--line));
  box-shadow:inset 0 1px 0 var(--edge),
    0 0 0 3px color-mix(in srgb,var(--ink-1) 12%,transparent);}

/* ════════ HOME / BRAIN ════════ */
/* .brain-toggle is a segmented pill identical to .seg - both are consolidated
   onto the shared rule below (see "SETTINGS · segmented"); only the status-dot
   extras are brain-specific and stay here. */
.brain-toggle button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.brain-toggle button.on .bd{background:var(--paper)!important;}
.brain-toggle button .bd{width:7px;height:7px;border-radius:50%;background:var(--ink-3);}

.spaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:13px;}
.space{position:relative;border:1px solid var(--line);border-radius:var(--r-md);padding:17px 17px 15px;background:var(--surface);cursor:pointer;overflow:hidden;
  transition:border-color .18s, transform .18s, box-shadow .2s;}
@media (hover:hover) and (pointer:fine){ .space:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--ink-1) 22%,var(--line));} }
.space .sp-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.space .sp-ic svg{width:19px;height:19px;}
.space .sp-n{font-family:var(--ff-display);font-size:16px;font-weight:600;letter-spacing:-.01em;}
.space .sp-m{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.45;}
.space .sp-f{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.space .sp-f .vt{color:var(--jade);display:inline-flex;align-items:center;gap:5px;}
.space .sp-f .vt svg{width:11px;height:11px;}

.recents{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
.recent{display:flex;align-items:center;gap:13px;padding:13px 15px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .14s;}
.recent:first-child{border-top:0;}
.recent:hover{background:var(--surface-2);}
.recent .rc-ic{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);}
.recent .rc-ic svg{width:16px;height:16px;}
.recent .rc-m{flex:1;min-width:0;}
.recent .rc-t{font-size:14px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recent .rc-s{font-size:12px;color:var(--ink-2);margin-top:2px;}
.recent .rc-time{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;}
.recent .rc-v{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--jade-deep);
  background:var(--jade-soft);border:1px solid transparent;border-radius:var(--r-full);padding:3px 8px;flex-shrink:0;}
.recent .rc-v svg{width:11px;height:11px;}

.activity{display:flex;flex-direction:column;}
.act{display:flex;gap:13px;padding:11px 0;position:relative;}
.act::before{content:'';position:absolute;left:7px;top:24px;bottom:-11px;width:1px;background:var(--line);}
.act:last-child::before{display:none;}
.act .ad{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:2px;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);z-index:1;}
.act .am{flex:1;}
.act .at{font-size:13.5px;color:var(--ink-1);line-height:1.5;}
.act .at b{font-weight:600;}
.act .at .ag{color:var(--ink-3);font-family:var(--mono);font-size:12px;}
.act .atime{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px;}

/* proactive suggestion card */
/* ── plan-first card (JUWEL proposes before acting) ── */
.plan-ov{position:fixed;inset:0;z-index:360;display:flex;align-items:center;justify-content:center;padding:24px;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  opacity:0;transition:opacity .18s var(--ease-out);}
.plan-ov.on{opacity:1;}
/* LUXLIQ bloom (§9.5) - JUWEL proposing a plan is a "she acts" moment; the
   card carries a faint nectar inner glow and settles in by soft diffusion,
   never a dry pop. */
.plan-box{width:min(440px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);
  padding:22px 22px 18px;transform:translateY(8px) scale(.98);filter:blur(4px);
  transition:transform var(--visc-settle,.42s) var(--ease-viscous,var(--ease-out)),filter var(--visc-settle,.42s) var(--ease-viscous,var(--ease-out));}
.plan-ov.on .plan-box{transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){
  .plan-box{transition:opacity .15s ease;transform:none;filter:none;}
}
.plan-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.plan-gem{width:34px;height:34px;flex-shrink:0;line-height:0;filter:none;}
.plan-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--topaz-ink);}
.plan-t{font-family:var(--ff-display);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink-1);margin-top:2px;}
.plan-intro{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:13px;}
.plan-steps{list-style:none;margin:0 0 14px;padding:0;counter-reset:ps;display:flex;flex-direction:column;gap:9px;}
.plan-steps li{counter-increment:ps;display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.45;color:var(--ink-1);}
.plan-steps .ps-n{flex-shrink:0;width:21px;height:21px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-1);font-family:var(--mono);font-size:11px;font-weight:600;display:grid;place-items:center;box-shadow:inset 0 1px 0 var(--edge);}
.plan-steps .ps-n::before{content:counter(ps);}
.plan-note{font-size:12px;line-height:1.5;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 12px;margin-bottom:16px;}
.plan-foot{display:flex;justify-content:flex-end;gap:9px;}

/* ── personalize: reset to original ── */
.pz-reset-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 18px;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);}
.pz-reset-t{font-size:13.5px;font-weight:600;color:var(--ink-1);}
.pz-reset-s{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45;max-width:42ch;}

/* ── pinned (shaped) dock app ──
   No notification-style badge. Pinned is only worth distinguishing in the
   EXPANDED dock (to tell pinned from unpinned); when collapsed, every shown
   app is pinned, so any marker is just noise. Keep it a quiet inset hairline. */
body[data-dockcollapsed="0"] .dock-app.pinned{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent),var(--shadow-1);}

/* ── Spaces switcher (Mission-Control style) ── */
.spaces-ov{position:fixed;inset:0;z-index:340;display:flex;align-items:flex-start;justify-content:center;padding:64px 24px 24px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  opacity:0;transition:opacity .18s var(--ease-out);overflow:auto;}
.spaces-ov.on{opacity:1;}
.spaces-box{width:min(880px,96vw);transform:translateY(-8px);transition:transform .22s var(--ease-out);}
.spaces-ov.on .spaces-box{transform:none;}
.spaces-h{text-align:center;margin-bottom:22px;}
.spaces-t{font-family:var(--ff-display);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink-1);}
.spaces-s{font-size:13.5px;color:var(--ink-2);margin-top:5px;max-width:52ch;margin-inline:auto;line-height:1.5;}
.spaces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
.sp-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow-1);transition:transform .16s var(--ease), box-shadow .18s, border-color .16s;}
@media (hover:hover) and (pointer:fine){ .sp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--ink-1) 22%,var(--line));} }
.sp-card.on{border-color:color-mix(in srgb,var(--ink-1) 45%,var(--line));box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);}
.sp-prev{height:104px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px;
  background:var(--surface-2);border-bottom:1px solid var(--line-2);}
.sp-chip{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.sp-chip svg{width:18px;height:18px;}
.sp-empty{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;}
.sp-meta{display:flex;align-items:center;gap:9px;padding:11px 13px;}
.sp-ic{width:22px;height:22px;border-radius:var(--r-xs);display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);flex-shrink:0;}
.sp-ic svg{width:13px;height:13px;}
.sp-name{flex:1;font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-1);outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-name[contenteditable="true"]{background:var(--surface-2);border-radius:5px;padding:1px 5px;}
.sp-x{width:22px;height:22px;border:0;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .14s,background .14s,color .14s;}
.sp-card:hover .sp-x{opacity:1;}
.sp-x:hover{background:var(--garnet-soft);color:var(--garnet);}
.sp-x svg{width:12px;height:12px;}
.sp-tag{display:block;margin:0 13px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.sp-mem{display:flex;align-items:center;gap:6px;margin:0 13px 10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
.sp-mem svg{width:12px;height:12px;vertical-align:-2px;margin-right:2px;opacity:.75;}
.sp-memdot{opacity:.5;}
.sp-model{display:inline-flex;align-items:center;gap:6px;margin:0 13px 11px;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-full);
  font-family:var(--ff);font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface-2);width:fit-content;}
.sp-model .sp-mdot{width:7px;height:7px;border-radius:50%;}
.sp-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:170px;border:1px dashed var(--line);
  border-radius:var(--r-lg);background:transparent;color:var(--ink-3);cursor:pointer;font-family:var(--ff);font-size:13px;font-weight:500;
  transition:border-color .16s,color .16s,background .16s;}
.sp-new:hover{border-color:var(--ink-3);color:var(--ink-1);background:var(--surface-2);}
.sp-new svg{width:22px;height:22px;}
.spaces-foot{display:flex;justify-content:center;margin-top:20px;}

/* ── Role picker (ROLE-VARIANTS-01) - reuses .spaces-ov/.spaces-box chrome ── */
.role-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
.role-card{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;
  box-shadow:var(--shadow-1);transition:transform .16s var(--ease),box-shadow .18s,border-color .16s;font-family:var(--ff);}
@media (hover:hover) and (pointer:fine){ .role-card:not(.off):hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--ink-1) 22%,var(--line));} }
/* Selected role = ink instrument, not amber carnival (meadow / amber rule) */
.role-card.on{border-color:color-mix(in srgb,var(--ink-1) 18%,var(--line));box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);}
.role-card.off{cursor:default;opacity:.5;}
.role-name{font-family:var(--ff-display);font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-1);}
.role-sub{font-size:11.5px;color:var(--ink-3);line-height:1.4;}
.role-tag{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-full);border:1px solid var(--line);color:var(--ink-3);background:var(--surface-2);}
.role-tag.on{color:var(--ink-2);border-color:var(--line);background:var(--surface-2);}
.role-tag.soon{opacity:.8;}

/* proactive suggestion card */
.fsort-ov{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:22px;
  background:color-mix(in srgb,var(--bg) 74%,transparent);opacity:0;transition:opacity .18s var(--ease-out);}
.fsort-ov.on{opacity:1;}
.fsort-card{width:min(440px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);transform:translateY(8px) scale(.98);transition:transform .22s var(--ease-out);}
.fsort-ov.on .fsort-card{transform:none;}
.fsort-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.fsort-h b{font-family:var(--ff-display);font-size:17px;font-weight:700;letter-spacing:-.02em;display:block;}
.fsort-h span{font-size:13px;color:var(--ink-2);line-height:1.45;display:block;margin-top:3px;}
.fsort-diff{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin-bottom:14px;}
.fsort-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);}
.fsort-n{flex:1;min-width:0;font-size:13px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fsort-arrow{color:var(--ink-3);flex-shrink:0;}.fsort-arrow svg{width:15px;height:15px;}
.fsort-to{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ink-1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:3px 11px;}
.fsort-foot{display:flex;justify-content:flex-end;gap:9px;}
.brief{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1);}
.brief-h{display:flex;align-items:center;justify-content:space-between;padding:12px 15px 9px;border-bottom:1px solid var(--line-2);}
.brief-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.brief-k svg{width:13px;height:13px;}
.brief-n{font-family:var(--mono);font-size:11px;color:var(--jade-deep);font-weight:600;}
.brief-body{padding:13px 15px;font-family:var(--ff);font-style:normal;font-size:15px;line-height:1.5;color:var(--ink-1);}
.nudge{display:flex;align-items:center;gap:15px;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r-lg);
  padding:15px 17px;background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);}
.nudge .ng-gem{line-height:0;flex-shrink:0;}
.nudge .ng-m{flex:1;}
.nudge .ng-t{font-family:var(--ff);font-style:normal;font-size:15px;font-weight:600;color:var(--ink-1);line-height:1.4;}
.nudge .ng-s{font-size:12.5px;color:var(--ink-2);margin-top:3px;}
.nudge .ng-a{display:flex;gap:8px;flex-shrink:0;}

/* ════════ WORKSPACE - self-building pipeline ════════ */
.flow{display:flex;flex-direction:column;gap:13px;}
.tile{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);
  animation:tilein .28s var(--ease-out) both;}
@keyframes tilein{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.tile-h{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-2);}
.tile-h .tn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);width:20px;}
.tile-h .ti{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tile-h .ti svg{width:15px;height:15px;}
.tile-h .tt{font-family:var(--ff-display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.tile-h .tstat{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;}
.tile-h .tstat.done{color:var(--jade);}
.tile-h .tspin{width:14px;height:14px;color:var(--topaz-ink);}
@media (prefers-reduced-motion:no-preference){.tile-h .tspin{animation:spin 1.05s linear infinite;transform-box:fill-box;transform-origin:center;}}
@keyframes spin{to{transform:rotate(360deg);}}
.tile-b{padding:15px 16px;}

.src-file{display:flex;align-items:center;gap:13px;}
.src-file .sf-ic{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.src-file .sf-ic svg{width:20px;height:20px;}
.src-file .sf-m{flex:1;min-width:0;}
.src-file .sf-n{font-family:var(--mono);font-size:13px;color:var(--ink-1);}
.src-file .sf-s{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px;}

.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.cw{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  transition:opacity .3s var(--ease-out), border-color .3s ease;}
.cw.pending{opacity:.4;}
.cw.done{border-color:color-mix(in srgb,var(--jade) 40%,var(--line));}
.cw .cw-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;font-size:12px;color:var(--jade-deep);
  background:var(--surface-2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.cw .cw-m{flex:1;min-width:0;}
.cw .cw-n{font-family:var(--ff-display);font-size:13px;font-weight:600;line-height:1.2;}
.cw .cw-r{font-size:11.5px;color:var(--ink-2);}
.cw .cw-sp{flex-shrink:0;color:var(--ink-3);}
.cw .cw-sp svg{width:15px;height:15px;}
.cw.busy .cw-sp svg{color:var(--topaz-ink);}
@media (prefers-reduced-motion:no-preference){.cw.busy .cw-sp svg{animation:spin 1.05s linear infinite;transform-box:fill-box;transform-origin:center;}}
.cw.done .cw-sp{color:var(--jade);}

.result-box{font-size:14px;line-height:1.6;color:var(--ink-2);}
.result-box .rtag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 9px;margin-bottom:11px;}
.result-box b{color:var(--ink-1);font-weight:600;}
.result-box .rfinding{display:flex;align-items:baseline;gap:11px;padding:9px 0;border-top:1px solid var(--line-2);}
.result-box .rfinding:first-of-type{border-top:0;}
.result-box .rfinding .rf-amt{font-family:var(--mono);font-size:14px;color:var(--jade);font-weight:500;white-space:nowrap;}
.result-box .rfinding .rf-t{flex:1;}

/* receipt mini (in workspace) */
.rcpt-mini{border:1px solid var(--ink-1);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
html[data-theme="dark"] .rcpt-mini{border-color:var(--line);}
.rcpt-mini .rm-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);}
.rcpt-mini .rm-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.rcpt-mini .rm-b{padding:5px 14px 12px;}
.rcpt-mini .rm-row{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);align-items:baseline;}
.rcpt-mini .rm-row:last-child{border-bottom:0;}
.rcpt-mini .rm-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.rcpt-mini .rm-v{font-family:var(--mono);font-size:12px;color:var(--ink-1);word-break:break-all;}

/* ════════ HIVE ════════ */
.hive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.hive-lane{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding:12px 15px;border-radius:var(--r-md);
  border:1px solid var(--line);border-left:2px solid var(--jade);background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);
  opacity:0;transition:opacity .3s var(--ease-out);}
.hive-lane.on{opacity:1;}
.hive-lane .hl-dot{width:9px;height:9px;border-radius:50%;background:var(--jade-deep);box-shadow:0 0 0 4px var(--jade-soft);flex-shrink:0;}
@media (prefers-reduced-motion:no-preference){.hive-lane.on .hl-dot{animation:hl-pulse 1.1s var(--ease-in-out) infinite;}}
@keyframes hl-pulse{0%,100%{box-shadow:0 0 0 3px var(--jade-soft);}50%{box-shadow:0 0 0 7px transparent;}}
.hive-lane .hl-txt{flex:1;font-size:13.5px;font-weight:500;color:var(--ink-1);}
.hive-lane .hl-prog{width:90px;height:5px;border-radius:var(--r-full);background:var(--line);overflow:hidden;flex-shrink:0;}
.hive-lane .hl-prog i{display:block;height:100%;width:40%;border-radius:var(--r-full);background:var(--jade-deep);}
@media (prefers-reduced-motion:no-preference){.hive-lane.on .hl-prog i{animation:hl-prog 1.6s linear infinite;}}
@keyframes hl-prog{0%{transform:translateX(-110%);}100%{transform:translateX(280%);}}
.agent.working{border-color:color-mix(in srgb,var(--jade) 50%,var(--line));box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb,var(--jade) 26%,transparent),var(--shadow-1);}
.agent.working .ag-av{box-shadow:inset 0 1px 0 var(--edge),0 0 0 3px var(--jade-soft);}
.agent{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);
  transition:transform .18s var(--ease-out), box-shadow .2s ease, border-color .18s ease;}
@media (hover:hover) and (pointer:fine){ .agent:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);} }
.agent .ag-av{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--jade-deep);position:relative;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.agent .ag-m{flex:1;min-width:0;}
.agent .ag-n{font-family:var(--ff-display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.agent .ag-r{font-size:12.5px;color:var(--ink-2);margin-top:1px;}
.agent .ag-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:7px;}
.agent .ag-st .sd{width:6px;height:6px;border-radius:50%;background:var(--ink-3);}
.agent.live .ag-st{color:var(--jade);}.agent.live .ag-st .sd{background:var(--jade);}
.agent.idle .ag-st{color:var(--ink-3);}

.hive-note{display:flex;gap:13px;align-items:flex-start;border:1px dashed var(--line);border-radius:var(--r-md);padding:15px 17px;background:var(--surface-2);}
.hive-note .hn-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-top:2px;}
.hive-note .hn-v{font-size:13.5px;line-height:1.6;color:var(--ink-2);}
.hive-note .hn-v b{color:var(--ink-1);font-weight:600;}
.hive-note .hn-v em{font-family:var(--ff);font-style:normal;color:var(--ink-1);font-weight:600;}
.bubble em{font-family:var(--ff);font-style:normal;font-weight:600;color:var(--ink-1);}

/* FACETS-UX-01 - per-card "about" affordance + transparency panel */
.agent{position:relative;}
.ag-info{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);opacity:0;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s,opacity .14s;z-index:2;}
.ag-info svg{width:13px;height:13px;}
.agent:hover .ag-info,.ag-info:focus-visible{opacity:1;}
.ag-info:hover{background:var(--surface);color:var(--ink-1);border-color:var(--line-2);}
.facet-info-ov{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;
  background:color-mix(in srgb, var(--ink-1) 38%, transparent);opacity:0;transition:opacity .18s var(--ease-out);}
.facet-info-ov.on{opacity:1;}
.facet-info-card{width:min(420px,96%);max-height:88%;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);transform:translateY(6px);
  transition:transform .18s var(--ease-out);}
.facet-info-ov.on .facet-info-card{transform:none;}
.fi-hd{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line);}
.fi-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--ff-display);
  font-weight:700;font-size:14px;color:var(--jade-deep);background:var(--surface-2);border:1px solid var(--line);}
.fi-m{flex:1;min-width:0;}
.fi-n{font-family:var(--ff-display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.fi-h{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:1px;}
.fi-x{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);background:transparent;
  border:1px solid transparent;cursor:pointer;flex-shrink:0;}
.fi-x:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink-1);}
.fi-x svg{width:14px;height:14px;}
.fi-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;}
.fi-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;}
.fi-v{font-size:13.5px;line-height:1.55;color:var(--ink-2);}
.fi-receipts{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.fi-rrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:8px 10px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);cursor:pointer;
  transition:background .14s,border-color .14s;}
.fi-rrow:hover{background:var(--surface);border-color:var(--line-2);}
.fi-rt{font-size:12.5px;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.fi-rid{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);flex-shrink:0;}
@media (prefers-reduced-motion:reduce){.facet-info-ov,.facet-info-card{transition:none;}}

/* ════════ LEDGER - the hero, falsifiable receipts ════════ */
.ledger{display:grid;grid-template-columns:300px 1fr;height:100%;min-height:0;overflow:hidden;}
.ledger-list{border-right:1px solid var(--line);overflow:auto;min-height:0;display:flex;flex-direction:column;}
.ledger-list .ll-top{padding:15px 16px 12px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--surface);z-index:2;}
.ledger-list .ll-stat{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--ink-2);}
.ledger-list .ll-stat svg{width:14px;height:14px;flex-shrink:0;color:var(--jade);}
.ledger-list .ll-stat b{color:var(--jade);font-weight:500;}
.ledger-list .ll-search{margin-top:11px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 12px;}
.ledger-list .ll-search svg{width:14px;height:14px;color:var(--ink-3);}
.ledger-list .ll-search input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ff);font-size:13px;color:var(--ink-1);}
.lrow{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .13s;}
.lrow:hover{background:var(--surface-2);}
.lrow.sel{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent);}
.lrow .lr-d{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--jade);}
.lrow.tampered .lr-d{background:var(--garnet);}
.lrow .lr-m{flex:1;min-width:0;}
.lrow .lr-t{font-size:13.5px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lrow .lr-id{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;}
.lrow .lr-time{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap;}

.ledger-detail{position:relative;overflow:auto;min-height:0;padding:0;display:flex;flex-direction:column;} /* position:relative - LuxLiq seal edge (.lx-seal-edge) anchors to this */
/* luxliq.css's .lx-seal recolors as a dark vitrified slab - right for a
   standalone receipt card, wrong here where every child (.lf-v, .ld-block,
   the invalid/valid states above) already assumes this pane's own adaptive
   surface. Keep the seal RITUAL (glint, mint edge, brightness pulse via
   .lx-sealing/.lx-seal-edge) but neutralize the slab recolor. */
.ledger-detail.lx-seal{background:var(--surface);color:inherit;border-color:inherit;box-shadow:none;}
.ld-hd{padding:20px 24px 16px;border-bottom:1px solid var(--line-2);}
.ld-hd .ld-top{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.ld-hd .ld-act{font-family:var(--ff-display);font-size:19px;font-weight:700;letter-spacing:-.02em;}
.ld-hd .ld-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px;letter-spacing:.04em;}

/* the big verifier badge */
.vbig{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--jade);color:var(--jade);background:var(--jade-soft);
  transition:color .3s, border-color .3s, background .3s;white-space:nowrap;}
.vbig svg{width:15px;height:15px;}
.vbig .x{display:none;}
.vbig .lab-bad{display:none;}
.ld-detail.invalid .vbig{color:var(--garnet);border-color:var(--garnet);background:var(--garnet-soft);}
.ld-detail.invalid .vbig .ok{display:none;}
.ld-detail.invalid .vbig .x{display:block;}
.ld-detail.invalid .vbig .lab-ok{display:none;}
.ld-detail.invalid .vbig .lab-bad{display:inline;}

.ld-body{padding:18px 24px 24px;display:flex;flex-direction:column;gap:18px;}
.ld-block{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
.ld-detail.invalid .ld-block.sig-block{border-color:var(--garnet);}
.ld-block .lb-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:11px 15px 9px;border-bottom:1px solid var(--line-2);}
.lfield{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;padding:11px 15px;border-bottom:1px solid var(--line-2);}
.lfield:last-child{border-bottom:0;}
.lfield .lf-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.lfield .lf-v{font-family:var(--mono);font-size:13px;color:var(--ink-1);word-break:break-all;line-height:1.55;}
.lfield .lf-v .ag{color:var(--topaz-ink);}
.lfield .lf-v .ok{color:var(--jade);}

/* signature - the tamper target */
.sig-wrap{padding:14px 15px;}
.sig-wrap .sw-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.sig-wrap .sw-k .hint{color:var(--ink-3);font-size:10px;letter-spacing:.02em;text-transform:none;}
.sigchars{font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--ink-1);word-break:break-all;user-select:none;cursor:text;}
.sigchars .hx{padding:1px .5px;border-radius:2px;transition:color .15s, background .15s;}
.sigchars .hx:hover{background:var(--amber-glow);}
.sigchars .hx.tampered{color:var(--garnet);background:var(--garnet-soft);font-weight:700;}

/* merkle proof viz */
.merkle{display:flex;flex-direction:column;gap:8px;padding:14px 15px;}
.mk-row{display:flex;align-items:center;gap:10px;}
.mk-node{flex:1;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;transition:border-color .3s, color .3s, background .3s;}
.mk-node .mk-h{color:var(--ink-1);}
.mk-node.root{background:var(--jade-soft);border-color:color-mix(in srgb,var(--jade) 40%,transparent);color:var(--jade);}
.mk-node.root .mk-h{color:var(--jade);}
.ld-detail.invalid .mk-node.broken{background:var(--garnet-soft);border-color:var(--garnet);color:var(--garnet);}
.ld-detail.invalid .mk-node.broken .mk-h{color:var(--garnet);}
.mk-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:54px;flex-shrink:0;}

/* CLI verifier block */
.cli{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-family:var(--mono);font-size:12.5px;}
.cli .cli-h{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}
.cli .cli-h .cd{display:flex;gap:5px;}
.cli .cli-h .cd i{width:8px;height:8px;border-radius:50%;background:var(--line);}
.cli .cli-b{padding:13px;line-height:1.7;color:var(--ink-1);white-space:pre-wrap;}
.cli .cli-b .pr{color:var(--topaz-ink);}
.cli .cli-b .cm{color:var(--ink-3);}
.cli .cli-b .ok{color:var(--jade);}
.cli .cli-b .bad{color:var(--garnet);}
.cli .cli-b .dim{color:var(--ink-2);}

.tamper-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tamper-bar .tb-note{font-size:13px;color:var(--ink-2);line-height:1.5;flex:1;min-width:200px;}
.tamper-bar .tb-note .em{color:var(--ink-1);font-weight:500;}
.ld-detail.invalid .tamper-bar .tb-note .em{color:var(--garnet);}

/* ════════ LENS ════════ */
.lens-drop{border:1px dashed var(--line);border-radius:var(--r-md);padding:34px 24px;text-align:center;background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;gap:13px;}
.lens-drop .lg{line-height:0;}
.lens-drop .lt{font-family:var(--ff-display);font-size:17px;font-weight:600;letter-spacing:-.01em;}
.lens-drop .ls{font-size:13px;color:var(--ink-2);max-width:40ch;line-height:1.5;}

/* ════════ SETTINGS ════════ */
.set-grid{display:grid;grid-template-columns:180px 1fr;gap:0;height:100%;min-height:0;overflow:hidden;}
.set-nav{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px;}
.set-nav button{display:flex;align-items:center;gap:11px;font-family:var(--ff);font-size:13.5px;font-weight:500;color:var(--ink-2);
  border:0;background:transparent;border-radius:8px;padding:9px 12px;cursor:pointer;text-align:left;transition:background .13s, color .13s;}
.set-nav button svg{width:16px;height:16px;}
.set-nav button.on{background:var(--surface-2);color:var(--ink-1);font-weight:600;}
.set-nav button:hover{color:var(--ink-1);}
.set-body{overflow:auto;min-height:0;padding:22px 26px;}
.set-pane{display:none;flex-direction:column;gap:8px;}
.set-pane.on{display:flex;}
/* ── model pane ── */
.model-list{display:flex;flex-direction:column;gap:10px;}
.model-card{display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1);transition:border-color .14s,box-shadow .14s,transform .14s;}
@media (hover:hover) and (pointer:fine){ .model-card:hover{border-color:var(--ink-3);} }
.model-card.on{border-color:var(--accent);background:var(--surface);
  /* selected model = a REST state, not an active JUWEL-acts moment, so the
     ring reads as an ink/neutral hairline (Amber Rule §ui-calm-pass-2026-07-14)
     instead of the amber inner-glow this used to carry at idle. */
  box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb,var(--ink-1) 22%,transparent),var(--shadow-1);}
.mc-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;}
.mc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.mc-name{font-family:var(--ff);font-size:15px;font-weight:600;color:var(--ink-1);display:flex;align-items:center;gap:9px;}
.mc-active{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--topaz-ink);background:var(--topaz-soft);border-radius:var(--r-full);padding:2px 8px;}
.mc-desc{font-size:12.5px;color:var(--ink-2);line-height:1.45;}
.mc-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);flex-shrink:0;white-space:nowrap;}
.byo-box{margin-top:14px;padding:15px 16px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2);display:flex;flex-direction:column;gap:9px;}
.byo-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-1);}
.byo-h svg{width:15px;height:15px;stroke:var(--topaz-ink);fill:none;stroke-width:2;}
.byo-s{font-size:12px;color:var(--ink-2);margin:-2px 0 4px;}
.byo-in{font-family:var(--mono);font-size:12.5px;color:var(--ink-1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;outline:none;}
.byo-in:focus{border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.model-note{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--ink-3);}
.model-note svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.d-amber{background:var(--topaz);} .d-moss{background:var(--jade);} .d-sky{background:var(--sapphire);} .d-violet{background:var(--topaz-2);} .d-terra{background:var(--topaz-deep);} .d-plum{background:var(--garnet-deep);} .d-grape{background:var(--sapphire-deep);}
.set-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2);}
.set-row:last-child{border-bottom:0;}
.set-row .sr-m{flex:1;}
.set-row .sr-t{font-size:14.5px;font-weight:500;color:var(--ink-1);}
.set-row .sr-s{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;max-width:50ch;}
/* LUXLIQ chamber-fill (§9.2/§10.2 "liquid toggle: molten color pours into
   an empty chamber") - settings switches are ordinary user acts, so the
   fluid is INK, not nectar (the nectar budget stays with JUWEL acting;
   same call as the .lx-toggle primitive but re-coloured). The owner's gripe
   was FLOW: on now POURS a rising ink chamber-fill from the bottom, off
   DRAINS it back down, over the viscous pour beat.
   MOBILE ::before CONFLICT - the phone hit-area (juwel-os-mobile.css:266)
   claims .toggle::before, and .toggle's knob owns ::after, so neither pseudo
   is free for a rising-fluid layer. Rather than relocate the hit-area, the
   fill is painted on the element's OWN background as a hard-stop gradient
   whose level (--toggle-lv) animates via @property - this needs no pseudo at
   all, so ::before survives untouched for the mobile hit-area and the fluid
   fill survives too. */
@property --toggle-lv{syntax:'<percentage>';inherits:false;initial-value:0%;}
.toggle{--toggle-lv:0%;width:42px;height:24px;border-radius:var(--r-full);position:relative;cursor:pointer;flex-shrink:0;border:0;
  background:linear-gradient(to top,
    var(--ink) calc(var(--toggle-lv) - 2px),
    color-mix(in srgb,var(--ink) 55%,#fff) var(--toggle-lv),
    var(--line) var(--toggle-lv));
  transition:--toggle-lv var(--visc-pour,.42s) var(--ease-flow,var(--ease-out)), box-shadow var(--visc-pour,.42s) var(--ease-flow,var(--ease-out));}
.toggle::after{content:'';width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left var(--visc-pour,.42s) var(--ease-buoyant,var(--ease-out));}
.toggle.on{--toggle-lv:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 32%,transparent),0 0 10px -2px color-mix(in srgb,var(--ink) 40%,transparent);}
.toggle.on::after{left:21px;}
@media (prefers-reduced-motion:reduce){ .toggle{transition-duration:.15s;} }
/* Segmented control (.seg) + brain switch (.brain-toggle) - one rule. Each
   button is a LuxLiq .lx-tab (class added in markup): the active segment
   still fills ink, and a nectar meniscus pours in beneath it on activate. */
.seg,.brain-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:3px;gap:2px;flex-shrink:0;}
.seg button,.brain-toggle button{font-family:var(--ff);font-size:12.5px;font-weight:600;color:var(--ink-2);border:0;background:transparent;border-radius:var(--r-full);padding:6px 14px;cursor:pointer;transition:color .15s ease, background .15s ease;}
.seg button.on,.brain-toggle button.on{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-1);}
/* .brain-toggle has no live markup to carry .lx-tab, so route it (only) into
   the shared meniscus here; .seg buttons get it via the class in markup. */
.brain-toggle button{position:relative;}
/* the underline persists at rest once a segment is .on (private/shared brain
   is an ordinary view switch, not JUWEL acting), so it stays ink here - same
   call as .seg button.on just above, which already fills ink not amber. */
.brain-toggle button::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ink-2),transparent);
  transform:scaleX(0);transform-origin:center;opacity:0;transition:transform var(--visc-pour,.42s) var(--ease-viscous,var(--ease-out)),opacity var(--visc-pour,.42s) var(--ease-viscous,var(--ease-out));}
.brain-toggle button.on::after{transform:scaleX(1);opacity:1;}
@media (prefers-reduced-motion:reduce){ .brain-toggle button::after{transform:none!important;transition:opacity .2s ease;} }

.plan-card{border:1px solid var(--ink-1);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
html[data-theme="dark"] .plan-card{border-color:var(--line);}
.plan-card .pc-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line-2);}
.plan-card .pc-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.plan-card .pc-price{font-family:var(--ff-display);font-size:38px;font-weight:700;letter-spacing:-.03em;margin-top:8px;}
.plan-card .pc-price span{font-family:var(--ff);font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;}
.plan-card ul{list-style:none;margin:0;padding:18px 22px;display:flex;flex-direction:column;gap:11px;}
.plan-card li{font-size:13.5px;color:var(--ink-2);display:flex;gap:10px;align-items:baseline;}
.plan-card li svg{width:15px;height:15px;color:var(--jade);flex-shrink:0;transform:translateY(2px);}
.plan-card li b{color:var(--ink-1);font-weight:600;}

.memory-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
.mem{display:flex;align-items:center;gap:13px;padding:13px 15px;border-top:1px solid var(--line-2);}
.mem:first-child{border-top:0;}
.mem .mem-i{width:30px;height:30px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex-shrink:0;}
.mem .mem-i svg{width:15px;height:15px;}
.mem .mem-m{flex:1;min-width:0;}
.mem .mem-t{font-size:13.5px;color:var(--ink-1);}
.mem .mem-s{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px;}
.mem .mem-x{color:var(--ink-3);cursor:pointer;display:inline-flex;padding:4px;border-radius:6px;transition:background .13s, color .13s;}
.mem .mem-x:hover{background:var(--garnet-soft);color:var(--garnet);}
.mem .mem-x svg{width:15px;height:15px;}

/* generic key-value spec list */
.kv{display:flex;flex-direction:column;}
.kv-row{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--line-2);align-items:baseline;}
.kv-row:first-child{border-top:0;}
.kv-row .kk{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.kv-row .kvv{font-size:13.5px;color:var(--ink-1);}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:48px 24px;height:100%;}
.empty .eg{line-height:0;opacity:.9;}
.empty .et{font-family:var(--ff);font-style:normal;font-size:18px;color:var(--ink-2);}
.empty .es{font-size:13px;color:var(--ink-3);max-width:36ch;line-height:1.5;}

@media (max-width:640px){
  .ledger{grid-template-columns:1fr;}
  .ledger-list{border-right:0;border-bottom:1px solid var(--line);max-height:34%;}
  .set-grid{grid-template-columns:1fr;}
  .set-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);}
}

/* ════════ CHAT (primary) ════════ */
.chatapp{display:flex;flex-direction:row;height:100%;}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative;}
.chat-history{width:212px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line-2);background:var(--surface-2);}
.ch-h{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px 16px;}
.ch-h-t{font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:-.01em;}
.ch-new{width:28px;height:28px;border-radius:var(--r-sm);border:0;cursor:pointer;display:grid;place-items:center;color:var(--paper);
  background:var(--ink);box-shadow:var(--shadow-1);transition:transform var(--dur-1) var(--ease-out),background-color .15s ease;}
.ch-new:active{transform:scale(.96);} .ch-new svg{width:15px;height:15px;}
@media (hover:hover) and (pointer:fine){ .ch-new:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper));} }
.ch-list{flex:1;overflow:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px;}
/* LUXLIQ (§9.2 "new chat tab: liquid builds tab like wax filling a mold;
   close: body drains downward") - every row settles in on render. Close
   drains via the shared window.LuxLiq.drain() helper (adds .lx-drain-out,
   defined in luxliq.css) wired in juwel-os-chat.js's delete handler. */
@media (prefers-reduced-motion:no-preference){
  .ch-sess{animation:ch-sess-pour var(--visc-pour,.4s) var(--ease-flow,var(--ease-out)) both;}
}
@keyframes ch-sess-pour{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(4px);}60%{clip-path:inset(0 0 0 0);}to{opacity:1;clip-path:inset(0 0 0 0);transform:none;}}
.ch-sess{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  border-radius:10px;padding:9px 9px 9px 11px;color:var(--ink-2);transition:background .13s,color .13s;}
.ch-sess:hover{background:var(--surface);color:var(--ink-1);}
.ch-sess.on{background:var(--surface);color:var(--ink-1);box-shadow:var(--shadow-1);font-weight:600;}
.ch-sess-t{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer;}
.ch-sess-x{flex-shrink:0;width:24px;height:24px;border:0;padding:0;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);background:transparent;cursor:pointer;opacity:.55;transition:opacity .12s,background .12s,color .12s;}
.ch-sess:hover .ch-sess-x,.ch-sess.on .ch-sess-x{opacity:1;}
.ch-sess-x:hover,.ch-sess-x:focus-visible{background:var(--garnet-soft);color:var(--garnet);outline:none;}
.ch-sess-x svg{width:12px;height:12px;pointer-events:none;}
/* touch / coarse pointers: always show delete (hover-only was unusable) */
@media (hover:none),(pointer:coarse){ .ch-sess-x{opacity:1;} }
.ch-empty-list{font-size:12px;color:var(--ink-3);padding:14px;text-align:center;}
.chat-hist-toggle{display:none;position:absolute;top:10px;left:10px;z-index:5;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;align-items:center;justify-content:center;}
.chat-hist-toggle svg{width:16px;height:16px;}
@media(max-width:720px){
  .chat-history{position:absolute;inset:0 auto 0 0;z-index:8;transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:var(--shadow-3);}
  .chat-history.open{transform:none;}
  .chat-hist-toggle{display:flex;}
  .chat-scroll{padding-top:52px;}
}
.chat-scroll{flex:1;min-height:0;overflow:auto;padding:20px 22px 8px;display:flex;flex-direction:column;gap:16px;}
.chat-scroll::-webkit-scrollbar{width:9px;}
.chat-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--surface);}
.msg{display:flex;gap:11px;max-width:100%;}
.msg.user{justify-content:flex-end;}
/* user bubble = surface-2 well - ink is yours; amber belongs to JUWEL */
.msg.user .bubble{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-1);border-radius:var(--r-lg);border-bottom-right-radius:var(--r-sm);max-width:80%;padding:11px 15px;}
.msg.juwel{justify-content:flex-start;}
.msg-av{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;line-height:0;
  background:var(--surface-2);border:1px solid var(--line);margin-top:2px;}
.msg-main{min-width:0;max-width:82%;display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
/* JUWEL's message - plain on paper; 2px ink hairline (meadow calm).
   Amber wash on every bubble was high-vis AI slop — ban it. Her send
   control and receipts keep the amber budget. */
.bubble{background:var(--surface-2);border:0;border-left:2px solid var(--line);border-radius:0;
  padding:2px 0 2px 14px;font-size:14.5px;line-height:1.6;color:var(--ink-1);}
.bubble p{margin:0 0 7px;}.bubble p:last-child{margin:0;}
.bubble ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.bubble li{font-size:14px;}
.bubble b{font-weight:600;}
.bubble code{font-family:var(--mono);font-size:12.5px;background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
.bubble.typing{display:inline-flex;flex-wrap:wrap;row-gap:4px;gap:5px;align-items:center;}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.5;}
@media (prefers-reduced-motion:no-preference){.bubble.typing i{animation:typed 1.1s var(--ease-in-out) infinite;}.bubble.typing i:nth-child(2){animation-delay:.18s;}.bubble.typing i:nth-child(3){animation-delay:.36s;}}
@keyframes typed{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
/* AGENT-RUN-UI-01 pattern 1 - the working ticker mounted inside the typing bubble.
   Text swap once per second (no animation); narration is the real ctx.say() line. */
.run-tick{margin-left:6px;color:var(--ink-3);font-size:11px;}
.run-narr{margin-left:2px;font-family:var(--ff);font-size:13px;color:var(--ink-2);}
.msg-receipt{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--jade);background:var(--jade-soft);border:1px solid color-mix(in srgb,var(--jade) 32%,transparent);border-radius:var(--r-full);
  padding:4px 10px;cursor:pointer;transition:transform .14s,border-color .14s;}
@media (hover:hover) and (pointer:fine){ .msg-receipt:hover{border-color:var(--jade);} }
.msg-receipt svg{width:12px;height:12px;}
.msg-receipt b{color:var(--topaz-ink);font-weight:600;text-transform:uppercase;letter-spacing:.1em;}
/* living-surface reopen chip - a surface JUWEL built, re-openable after reboot */
.msg-surface-reopen{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);
  padding:5px 11px;cursor:pointer;transition:transform .14s,border-color .14s;}
.msg-surface-reopen:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){ .msg-surface-reopen:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));} }
.msg-surface-reopen svg{width:12px;height:12px;color:var(--accent);}
.msg-surface-reopen b{color:var(--accent-ink,#8A5200);font-weight:600;text-transform:uppercase;letter-spacing:.1em;}
/* Created-artifact destination - a real deep link into the app that owns the
   result. This is a quiet working card; amber is only the tiny JUWEL-act edge. */
.msg-artifacts{display:flex;flex-direction:column;gap:7px;width:min(100%,420px);margin-top:2px;}
.msg-artifact-link{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;
  padding:9px 10px;border:1px solid var(--line);border-left:2px solid var(--topaz);border-radius:var(--r-md);background:var(--surface);
  color:var(--ink-1);cursor:pointer;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);transition:transform .12s var(--ease-out),border-color .15s ease;}
.msg-artifact-link:active{transform:scale(.99);}
@media (hover:hover) and (pointer:fine){.msg-artifact-link:hover{border-color:color-mix(in srgb,var(--topaz) 36%,var(--line));}}
.msg-artifact-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.mal-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--sapphire-soft);color:var(--sapphire-deep);border:1px solid var(--line);}
.mal-ic svg{width:16px;height:16px;}
.mal-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}.mal-copy b{font:600 13px/1.25 var(--ff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.mal-copy small{font:500 10.5px/1.2 var(--mono);letter-spacing:.03em;color:var(--ink-3);}
.mal-go{font:600 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--topaz-ink);}
/* in-app panel JUWEL adds to an existing screen - additive, dismissable.
   amber hairline = JUWEL acted here / it's on the record (the amber rule). */
.juwel-inapp-panel{margin:10px 12px 4px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:var(--r-lg,12px);background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);overflow:hidden;}
.juwel-inapp-panel .jip-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));}
.juwel-inapp-panel .jip-title{flex:1;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink,#8A5200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.juwel-inapp-panel .jip-x{flex:0 0 auto;width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer;border-radius:6px;}
.juwel-inapp-panel .jip-x:hover{background:color-mix(in srgb,var(--ink-1) 8%,transparent);color:var(--ink-1);}

/* GUEST-DATA-01 / GUEST-LOSS-01 — one shared, quiet "stays on this device" idiom
   for guest-mode surfaces (Chat, Files) that mirrors the existing per-app pattern
   already shipped in Mail (.mail-railnote, juwel-os-gsuite.css) and Calendar
   (.cal-guest-banner, juwel-os-calendar.js): small icon + ink-toned text, a
   free-sign-in offer, never amber (informational, not "JUWEL acted"). */
.guest-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--ink-3);padding:8px 16px;}
.guest-note[hidden]{display:none!important;}
.guest-note svg{width:14px;height:14px;color:var(--ok);flex-shrink:0;}
.guest-note .pbtn{margin-left:auto;flex-shrink:0;}

.chat-compose{flex-shrink:0;display:flex;align-items:flex-end;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line-2);background:var(--surface);
  /* never inherit nectar multi-glow on the full row (was AI-slop amber box) */
  box-shadow:none!important;outline:none;}
.chat-compose.lx-meniscus:focus-within,
.chat-compose:focus-within{box-shadow:none!important;outline:none;}
.chat-mode[hidden]{display:none!important;}
/* AGENT-RUN-UI-01 patterns 3+4 - worker chips + persistent goal bar, both bound
   to the real JuwelJobs registry (juwel-os-jobs.js), never simulated. */
.run-strip{display:flex;flex-direction:column;gap:6px;padding:8px 16px 0;flex-shrink:0;}
.run-chips{display:flex;flex-wrap:wrap;gap:6px;}
.run-chips:empty{display:none;}
/* >2 concurrent working jobs - the AMBER RULE budget moves to one row indicator
   instead of amber-ing every chip (see amberBudget() in juwel-agent-run-ui.js) */
.run-chips.row-amber{position:relative;padding-left:10px;}
.run-chips.row-amber::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:var(--topaz);}
.run-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-size:12px;font-weight:500;
  color:var(--ink-1);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:4px 10px;
  transition:border-color .18s var(--ease-out),background-color .18s var(--ease-out);}
.run-chip-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.run-chip-state{color:var(--ink-3);font-size:10.5px;}
.run-chip.amber{border-color:color-mix(in srgb,var(--topaz) 45%,var(--line));background:var(--topaz-soft);}
.run-chip.amber .run-chip-state{color:var(--topaz-ink);}
/* goal bar - ink is you, the amber left-edge hairline says "JUWEL is acting on your behalf" */
.run-goalbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-left:2px solid var(--topaz);
  border-radius:var(--r-md);background:var(--surface-2);}
.run-goalbar-text{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.run-goalbar-extra{color:var(--ink-3);font-size:11px;}
.run-goalbar-elapsed{color:var(--ink-2);font-size:11.5px;}
.run-goalbar-stop{flex-shrink:0;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:border-color .14s ease,color .14s ease;}
.run-goalbar-stop svg{width:13px;height:13px;}
.run-goalbar-stop:hover{border-color:var(--garnet);color:var(--garnet);}
.run-goalbar-stop:focus-visible,.run-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
/* interactive quick-reply chips (adaptive space builder interview) */
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 8px 8px 46px;animation:cqIn .22s var(--ease-out) both;}
@keyframes cqIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.cq-chip{font-family:var(--ff);font-size:13px;font-weight:600;color:var(--ink-1);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:7px 14px;cursor:pointer;transition:transform var(--dur-1) var(--ease-out),background-color .16s ease,border-color .16s ease;
  box-shadow:inset 0 1px 0 var(--edge);}
@media (hover:hover) and (pointer:fine){ .cq-chip:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 24%,var(--line));} }
.cq-chip:active{transform:scale(.96);}
/* LUXLIQ meniscus (§9.2/§10.2 "input/composer: meniscus focus") - the
   composer well is the calm chat surface's one wet-focus moment. */
.chat-input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);resize:none;outline:0;
  font-family:var(--ff);font-size:14.5px;line-height:1.5;color:var(--ink-1);padding:10px 13px;max-height:140px;
  transition:border-color var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out)),box-shadow var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out));}
/* Lawful focus: single soft ink ring only (user acts). No amber multi-glow. */
.chat-input:focus{border-color:color-mix(in srgb,var(--ink-1) 42%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-1) 12%,transparent);}
.chat-input::placeholder{color:var(--ink-3);}
/* Send = she acts — flat topaz only (no wet nectar gradient halo). */
.chat-send{width:42px;height:42px;flex-shrink:0;border:0;border-radius:var(--r-md);
  background:var(--topaz);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--edge) 55%,transparent);
  color:#201200;cursor:pointer;
  display:grid;place-items:center;transition:transform var(--dur-1) var(--ease-out),filter .15s var(--ease-out);}
.chat-send:active{transform:scale(.94);}.chat-send svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){ .chat-send:hover{filter:brightness(1.04);} }
.chat-attach{width:40px;height:40px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s,transform .15s;}
@media (hover:hover) and (pointer:fine){ .chat-attach:hover{border-color:var(--ink-2);color:var(--ink-1);} }
.chat-attach svg{width:18px;height:18px;}
/* model chip in composer */
.chat-model{flex-shrink:0;height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink-1);
  font-family:var(--ff);font-size:13px;font-weight:600;transition:border-color .15s,transform .15s,background .15s;}
@media (hover:hover) and (pointer:fine){ .chat-model:hover{border-color:color-mix(in srgb,var(--ink) 24%,var(--line));} }
.chat-model .cm-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.chat-model .cm-name{white-space:nowrap;}
@media (max-width:520px){ .chat-model .cm-name{display:none;} .chat-model{padding:0 11px;} }
/* AGENT-RUN-UI-01 patterns 5-6 - composer info chips (access + environment).
   Both are FIXED, non-interactive readouts of real state (see the inventory
   comment atop juwel-agent-run-ui.js) - ink, never amber, never a fake
   selectable tier. tabindex=0 + role="note" keeps them keyboard-reachable
   without pretending they are an actionable disabled control. */
.chat-infochips{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
.chat-infochip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px;cursor:default;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink-2);
  font-family:var(--ff);font-size:12px;font-weight:500;}
.chat-infochip-ic{display:inline-flex;flex-shrink:0;}
.chat-infochip-ic svg{width:15px;height:15px;}
.chat-infochip-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.chat-infochip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
/* ── cohesion row: facet chip + gear + command popover (parity with CLI/extension) ── */
.chat-compose{position:relative;container-type:inline-size;}
.chat-queue-note{position:absolute;right:16px;top:-28px;z-index:2;max-width:calc(100% - 32px);
  padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);
  box-shadow:var(--shadow-1);font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-2);}
.chat-queue-note[hidden]{display:none;}
/* floating 580px chat window: compact the row so the input keeps room.
   Lowest-priority chips yield first: info chips (pure readouts, always
   reachable via hover/focus title anyway), then the MODEL chip (still
   reachable via /model + Settings) - never two bare identity dots side by
   side, and never an overflowing composer row. */
@container (max-width: 700px){
  .chat-infochips{display:none;}
}
@container (max-width: 560px){
  .chat-model{display:none;}
  .chat-mode{padding:0 10px;}
  .chat-mode .cmode-name{max-width:86px;}
}
@container (max-width: 400px){
  .chat-gear{display:none;}
  .chat-mode .cmode-name{max-width:64px;}
}
/* active facet chip - identity tint (§2b), never amber (amber = action only) */
.chat-mode{flex-shrink:0;height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink-1);
  font-family:var(--ff);font-size:13px;font-weight:600;transition:border-color .15s,transform .15s,background .15s;box-shadow:inset 0 1px 0 var(--edge);}
@media (hover:hover) and (pointer:fine){ .chat-mode:hover{border-color:color-mix(in srgb,var(--ink) 24%,var(--line));} }
.chat-mode:active{transform:scale(.97);}
.chat-mode .cmode-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.chat-mode .cmode-name{white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.03em;}
@media (max-width:640px){ .chat-mode .cmode-name{display:none;} .chat-mode{padding:0 11px;} }
/* quiet gear → Settings */
.chat-gear{width:40px;height:40px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s,transform .15s;}
@media (hover:hover) and (pointer:fine){ .chat-gear:hover{border-color:var(--ink-2);color:var(--ink-1);} }
.chat-gear:active{transform:scale(.96);}
.chat-gear svg{width:17px;height:17px;}
/* "/" command popover - pane material, origin-aware, instant filter */
.cc-cmd-pop{position:absolute;left:16px;bottom:calc(100% + 6px);z-index:40;min-width:288px;max-width:min(440px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;max-height:min(320px,54vh);
  box-shadow:inset 0 1px 0 var(--edge),0 14px 38px -20px rgba(20,18,12,.5);
  animation:ccPop .16s var(--ease-out) both;transform-origin:bottom left;}
@keyframes ccPop{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.cc-row{width:100%;display:flex;align-items:baseline;gap:10px;padding:9px 13px;border:0;background:transparent;cursor:pointer;text-align:left;
  border-bottom:1px solid var(--line-2);transition:background .12s ease;}
.cc-row:last-child{border-bottom:0;}
.cc-row.on,.cc-row:hover{background:var(--surface-2);}
.cc-row .cc-cmd{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-1);white-space:nowrap;}
.cc-row .cc-args{color:var(--ink-3);font-weight:500;}
.cc-row .cc-desc{flex:1;font-family:var(--ff);font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-row .cc-tag{flex-shrink:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-full);padding:2px 6px;}
/* facet picker popover - anchored above the chip */
.cc-facet-pop{position:absolute;left:16px;bottom:calc(100% + 6px);z-index:41;min-width:248px;max-width:min(320px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;max-height:min(340px,54vh);padding:5px;
  box-shadow:inset 0 1px 0 var(--edge),0 14px 38px -20px rgba(20,18,12,.5);animation:ccPop .16s var(--ease-out) both;transform-origin:bottom left;}
.cc-fp-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:6px 9px 4px;}
.cc-fp-row{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:0;background:transparent;cursor:pointer;text-align:left;border-radius:var(--r-md);transition:background .12s ease;}
.cc-fp-row:hover,.cc-fp-row.on{background:var(--surface-2);}
.cc-fp-row .cmode-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.cc-fp-m{display:flex;flex-direction:column;min-width:0;flex:1;}
.cc-fp-n{font-family:var(--ff);font-size:13px;font-weight:600;color:var(--ink-1);}
.cc-fp-r{font-family:var(--ff);font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-fp-on{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--jade-deep);flex-shrink:0;}
.cc-fp-manage{width:100%;text-align:left;padding:8px 9px;margin-top:3px;border:0;border-top:1px solid var(--line-2);background:transparent;cursor:pointer;
  font-family:var(--ff);font-size:12px;font-weight:600;color:var(--ink-2);border-radius:0 0 var(--r-md) var(--r-md);transition:color .12s ease;}
.cc-fp-manage:hover{color:var(--ink-1);}
/* "@" mention popover header */
.cc-at-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:8px 13px 5px;border-bottom:1px solid var(--line-2);}
.cc-cmd-pop .cc-row .cmode-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;align-self:center;}
/* FACETS-UX-01 - mention-menu secondary "purpose" line (honest routing info) */
.cc-row-at{align-items:flex-start;}
.cc-row-at .cc-am{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cc-row-at .cc-line1{display:flex;align-items:baseline;gap:10px;min-width:0;}
.cc-row-at .cc-desc{white-space:normal;}
.cc-row-at .cc-purpose{font-family:var(--ff);font-size:11px;line-height:1.4;color:var(--ink-3);white-space:normal;}
/* mention chip on a routed user message - identity tint (§2b), never amber */
.mn-chip{align-self:flex-end;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;font-weight:500;
  color:var(--ink-1);background:color-mix(in srgb,var(--mnt,var(--topaz)) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--mnt,var(--topaz)) 24%,var(--line));
  border-radius:var(--r-full);padding:2px 9px;margin-bottom:4px;}
/* reply attribution - record voice: "@legal · JUWEL" */
.msg-attr{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);margin:0 0 4px 2px;}
.msg-attr .ma-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* skill chips under a reply - record voice, not decoration */
.msg-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding-left:2px;}
.sk-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:3px 9px;cursor:pointer;transition:border-color .14s ease,color .14s ease;}
@media (hover:hover) and (pointer:fine){ .sk-chip:hover{border-color:var(--jade);color:var(--jade-deep);} }
/* AGENT-RUN-UI-01 pattern 2 - collapsible tool-step rows under a reply.
   Ink only (a step row is a record of what ran, not JUWEL acting right now). */
.run-steps{display:flex;flex-direction:column;gap:4px;margin-top:6px;width:100%;}
.run-step{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden;}
.run-step-summary{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:var(--ff);font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:transparent;border:0;padding:7px 10px;cursor:pointer;}
.run-step-summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;}
.run-step-ic{flex-shrink:0;width:15px;height:15px;color:var(--ink-3);display:grid;place-items:center;}
.run-step-ic svg{width:14px;height:14px;}
.run-step-ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.run-step-detail{border-top:1px solid var(--line-2);}
.run-step-detail-inner{padding:8px 10px 9px 33px;display:flex;flex-direction:column;gap:3px;}
.run-step-kv{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2);display:flex;gap:6px;}
.run-step-k{color:var(--ink-3);flex-shrink:0;}
.run-step-v{word-break:break-all;}
/* attachment tray (pending) */
.chat-tray{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 0;}
.att-chip{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 8px 6px 6px;max-width:230px;}
.att-chip img{width:30px;height:30px;border-radius:7px;object-fit:cover;flex-shrink:0;}
.att-chip .ac-ic{width:30px;height:30px;border-radius:7px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex-shrink:0;}
.att-chip .ac-ic svg{width:15px;height:15px;}
.att-chip .ac-m{display:flex;flex-direction:column;min-width:0;}
.att-chip .ac-n{font-size:12.5px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.att-chip .ac-s{font-family:var(--mono);font-size:10px;color:var(--ink-3);}
.att-chip .ac-x{flex-shrink:0;width:22px;height:22px;border:0;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;display:grid;place-items:center;}
.att-chip .ac-x:hover{background:var(--garnet-soft);color:var(--garnet);}.att-chip .ac-x svg{width:13px;height:13px;}
/* drop overlay */
.chat-drop{position:absolute;inset:8px;z-index:6;border:1px dashed color-mix(in srgb,var(--amber) 60%,var(--line));border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--amber-glow) 55%,var(--surface));
  display:none;align-items:center;justify-content:center;pointer-events:none;}
.chat-drop.on{display:flex;animation:bootfade .15s var(--ease) both;}
.chat-drop .cd-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--topaz-ink);font-family:var(--ff);font-size:15px;font-weight:600;text-align:center;padding:0 24px;}
.chat-drop .cd-inner svg{width:30px;height:30px;}
/* message attachments */
.msg-atts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.msg-atts .ma-thumb{max-width:160px;max-height:160px;border-radius:var(--r-md);border:1px solid var(--line);object-fit:cover;}
.msg-atts .ma-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;font-size:13px;color:var(--ink-1);}
.msg-atts .ma-chip svg{width:15px;height:15px;color:var(--ink-2);}

.chat-empty{position:relative;overflow:hidden;margin:auto;text-align:center;max-width:42ch;display:flex;flex-direction:column;align-items:center;gap:13px;padding:24px 0;}
/* LUXLIQ local atmosphere (luxliq-lamp.js populates .lx-lamp--local with
   2-3 capped, blurred blobs) - sits behind the copy, never above it. */
.chat-empty .lx-lamp--local{z-index:0;}
.chat-empty>*:not(.lx-lamp--local){position:relative;z-index:1;}
.chat-empty .ce-gem{line-height:0;}
.chat-empty .ce-h{font-family:var(--ff-display);font-size:26px;font-weight:700;letter-spacing:-.025em;}
.chat-empty .ce-s{font-size:14px;color:var(--ink-2);line-height:1.55;}
.chat-empty .ce-s b{color:var(--ink-1);font-weight:600;}
.ce-starters{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;}
.ce-chip{display:flex;align-items:center;gap:11px;text-align:left;font-family:var(--ff);font-size:13.5px;color:var(--ink-1);
  background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  border-radius:var(--r-md);padding:11px 14px;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;}
@media (hover:hover) and (pointer:fine){ .ce-chip:hover{border-color:color-mix(in srgb,var(--ink) 24%,var(--line));background:var(--surface-2);} }
.ce-chip svg{width:17px;height:17px;color:var(--ink-2);flex-shrink:0;}
.ce-key{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px;}
.ce-key svg{width:13px;height:13px;}.ce-key code{color:var(--ink-2);}
/* Text JUWEL public SMS channel */
.ce-sms{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin-top:10px;padding:12px 14px;
  border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--topaz) 28%,var(--line));
  background:var(--topaz-soft,var(--surface-2));text-decoration:none;color:inherit;text-align:left;
  transition:transform .12s,border-color .12s;}
.ce-sms:hover{border-color:color-mix(in srgb,var(--topaz) 55%,var(--line));}
.ce-sms:active{transform:scale(.99);}
.ce-sms b{font-size:14px;font-weight:650;color:var(--ink-1);}
.ce-sms span{font-size:12.5px;color:var(--ink-3);line-height:1.4;}

/* ════════ identity / home extras ════════ */
.idcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface);}
.idcard .idc-ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);}
.idcard .idc-ic svg{width:19px;height:19px;}
.idcard .idc-m{flex:1;min-width:0;}
.idcard .idc-t{font-size:14px;font-weight:600;color:var(--ink-1);}
.idcard .idc-k{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:3px;word-break:break-all;}
.idcard .idc-k code{color:var(--topaz-ink);}
.idcard .idc-s{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--jade);flex-shrink:0;}
.idcard .idc-s svg{width:13px;height:13px;}
.home-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 24px;color:var(--ink-3);font-size:13.5px;line-height:1.5;}
.home-empty>div{max-width:34ch;}

/* ════════ workspace / lens inputs ════════ */
.ws-task{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.ws-input,.lens-text,.mem-add{width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);resize:none;outline:0;
  font-family:var(--ff);font-size:14px;line-height:1.55;color:var(--ink-1);padding:12px 14px;transition:border-color .18s,box-shadow .2s;}
.ws-input:focus,.lens-text:focus,.mem-add:focus{border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.ws-input::placeholder,.lens-text::placeholder,.mem-add::placeholder{color:var(--ink-3);}
.ws-task .pbtn{align-self:flex-start;}
.lens-text{min-height:130px;}
.ws-working{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);}
.mem-add{flex:1;padding:9px 12px;font-size:13.5px;}

/* ════════ ONBOARDING ════════ */
#onb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;opacity:1;
  background:color-mix(in srgb,var(--bg) 84%,transparent);}
#onb.out{opacity:0;transition:opacity .35s var(--ease);}
body.onb-open #chatbar,body.onb-open #companion,body.onb-open #dock{opacity:0;pointer-events:none;}
.onb-stage{display:flex;gap:30px;align-items:center;max-width:880px;width:100%;}
.onb-side{width:230px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
@media (max-width:760px){ .onb-stage{flex-direction:column;gap:18px;} .onb-side{width:100%;align-items:center;text-align:center;} }
.onb-gem{line-height:0;filter:none;}
@media (prefers-reduced-motion:no-preference){.onb-gem{animation:fd-hover 6s var(--ease-in-out) infinite;}}
.onb-say{font-family:var(--ff);font-style:normal;font-size:20px;line-height:1.45;color:var(--ink-1);}
.onb-say b{font-style:normal;font-weight:600;font-family:var(--ff);}
.onb-say.in{animation:onb-rise var(--visc-settle,.32s) var(--ease-viscous,var(--ease-out));}
.onb-card{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);padding:30px 32px;}
.onb-card.in{animation:onb-rise var(--visc-settle,.3s) var(--ease-viscous,var(--ease-out));}
@keyframes onb-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .onb-say.in,.onb-card.in{animation:none;opacity:1;transform:none;} }
.onb-dots{display:flex;gap:7px;margin-bottom:18px;}
.onb-dots span{width:22px;height:4px;border-radius:3px;background:var(--line);transition:background .3s;}
.onb-dots span.on{background:var(--amber);}.onb-dots span.done{background:color-mix(in srgb,var(--amber) 45%,var(--line));}
.onb-h{font-family:var(--ff-display);font-size:27px;font-weight:700;letter-spacing:-.03em;}
.onb-opt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-full);padding:3px 9px;vertical-align:middle;margin-left:6px;}
.onb-p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-top:9px;}
.onb-feat{display:flex;flex-direction:column;gap:7px;margin-top:20px;}
.onb-fr{display:flex;align-items:flex-start;gap:13px;font-size:14px;line-height:1.55;color:var(--ink-1);padding:6px 0;}
.onb-fr svg{width:20px;height:20px;color:var(--ink-2);flex-shrink:0;margin-top:1px;}
.onb-fields{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.onb-field{display:flex;flex-direction:column;gap:6px;}
.onb-field>span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:8px;align-items:center;}
.onb-field>span i, .onb-field>span .req{font-style:normal;color:var(--topaz-ink);font-size:10px;}
.onb-field input{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);outline:0;
  font-family:var(--ff);font-size:15px;color:var(--ink-1);padding:12px 14px;transition:border-color .18s,box-shadow .2s;}
.onb-field input:focus{border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.onb-field-row{display:flex;gap:12px;}.onb-field-row .onb-field{flex:1;}
.onb-note{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-2);margin-top:14px;line-height:1.5;}
.onb-note svg{width:15px;height:15px;color:var(--ink-3);flex-shrink:0;margin-top:1px;}
.onb-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}
.pbtn.lg{font-size:14.5px;padding:12px 22px;}
.onb-perm{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;background:var(--surface-2);margin-top:18px;}
.onb-perm svg{width:26px;height:26px;color:var(--ink-2);flex-shrink:0;}
.onb-perm .op-t{font-size:14.5px;font-weight:600;}.onb-perm .op-s{font-size:12.5px;color:var(--ink-2);margin-top:2px;}
.onb-set{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-2);}
.onb-set:last-of-type{border-bottom:0;}.onb-set .os-l{flex:1;}
.onb-set .os-t{font-size:14.5px;font-weight:500;}.onb-set .os-s{font-size:12.5px;color:var(--ink-2);margin-top:2px;}
.onb-int{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.int{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s,transform .15s;}
@media (hover:hover) and (pointer:fine){ .int:hover{border-color:var(--ink-2);} }
.int.on{border-color:color-mix(in srgb,var(--jade) 50%,var(--line));background:var(--jade-soft);}
.int-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-1);flex-shrink:0;}
.int-ic svg{width:16px;height:16px;}
.int-n{flex:1;font-size:13.5px;font-weight:500;}
.int-add{color:var(--ink-3);display:inline-flex;}.int-add svg{width:16px;height:16px;}.int.on .int-add{color:var(--jade);}
/* stripe-style card visual */
.onb-card-visual{margin-top:18px;border-radius:16px;padding:18px;color:#fff;
  background:linear-gradient(135deg,#2A2622,#15110E 70%);box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.08);}
.cv-top{display:flex;align-items:center;justify-content:space-between;}
.cv-brand{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:7px;}
.cv-brand svg{width:13px;height:13px;}
.cv-chip{width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#F4D58A,#C99A3A);}
.cv-num{font-family:var(--mono);font-size:19px;letter-spacing:.12em;margin:22px 0 14px;color:#FFE9C2;}
.cv-row{display:flex;gap:24px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.75);}
/* tour spotlight */
body.onb-tour::before{content:'';position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--bg) 62%,transparent);
  pointer-events:none;animation:onb-fade .3s var(--ease-out) both;}
/* Spotlight: single hairline ring only — no multi-halo amber slop on idle chrome. */
.dock-app.onb-spot{z-index:120;box-shadow:0 0 0 2px var(--amber);}
@media (prefers-reduced-motion:no-preference){.dock-app.onb-spot{animation:spot-pulse 1.3s var(--ease-in-out) infinite;}}
@keyframes spot-pulse{0%,100%{box-shadow:0 0 0 2px var(--amber);}50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 55%,transparent);}}
body.onb-tour #dock{z-index:121;}
/* JUWEL is the guide - keep her, her bubble and her cursor ABOVE the tour dim */
body.onb-tour #companion{z-index:122;}
body.onb-tour #companion .comp-say{z-index:123;}

/* desktop tour - single hairline ring only (no multi-halo amber slop) */
.tour-spot{position:relative;z-index:97;box-shadow:0 0 0 2px var(--amber)!important;
  border-radius:13px;transition:box-shadow .2s var(--ease);}
/* whole-window spotlight during the tour - keeps the full app readable */
.tour-winspot{box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 55%,transparent), var(--shadow-2)!important;
  transition:left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), box-shadow .25s var(--ease);}
@media (prefers-reduced-motion:no-preference){.tour-spot{animation:spot-pulse 1.4s var(--ease-in-out) infinite;}}
body.os-tour #companion{z-index:122;}
body.os-tour #companion .comp-say{z-index:123;}

/* ════════ FILES - the brain ════════ */
.filesapp{display:flex;flex-direction:column;height:100%;}
.files-bar{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:16px 20px 12px;border-bottom:1px solid var(--line-2);}
.files-crumbs{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap;}
.crumb{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;border-radius:8px;padding:5px 9px;
  font-family:var(--ff-display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);transition:background .14s,color .14s;}
.crumb:hover{background:var(--surface-2);color:var(--ink-1);}
.crumb.on{color:var(--ink-1);}
.crumb svg{width:16px;height:16px;color:var(--ink-3);}
.crumb-sep{color:var(--ink-3);font-family:var(--mono);}
.files-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.files-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:7px 13px;}
.files-search svg{width:14px;height:14px;color:var(--ink-3);}
.files-search input{border:0;outline:0;background:transparent;font-family:var(--ff);font-size:13px;color:var(--ink-1);width:140px;}
.files-note{padding:11px 20px 0;}
.fn-org{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);}
.fn-org svg{width:14px;height:14px;color:var(--topaz-ink);}
.files-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px;padding:16px 20px 22px;align-content:start;}
.fnode{position:relative;display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;transition:transform .14s,box-shadow .18s,border-color .15s,background .15s;}
@media (hover:hover) and (pointer:fine){ .fnode:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--ink-1) 18%,var(--line));} }
.fnode:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.fnode.dragging{opacity:.45;}
.fnode.drop{border-color:var(--ink-1);box-shadow:inset 0 1px 0 var(--edge),0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 16%,transparent);background:var(--surface-2);}
.fnode.folder .fn-n{font-weight:600;}
.fn-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;}
.fn-ic svg{width:21px;height:21px;}
.fn-m{flex:1;min-width:0;}
.fn-n{font-family:var(--ff);font-size:14px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;}
.fn-n[contenteditable="true"]{white-space:normal;background:var(--surface-2);border-radius:5px;padding:1px 4px;}
.fn-s{font-size:12px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fn-x{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .14s,background .14s,color .14s;}
.fnode:hover .fn-x{opacity:1;}
.fn-x:hover{background:var(--garnet-soft);color:var(--garnet);}.fn-x svg{width:13px;height:13px;}
.files-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px;color:var(--ink-3);text-align:center;font-size:13px;}
.files-empty svg{width:42px;height:42px;opacity:.6;}
@media (hover:none),(pointer:coarse){ .fn-x,.sp-x{opacity:.55;} }
/* .ag-info (Facets "about" affordance, FACETS-UX-01) is the same opacity:0-until-hover
   pattern as .fn-x/.sp-x above - on a touchscreen there is no persistent :hover, so it
   was invisible and unreachable, not just small. Same fix, same convention. */
@media (hover:none),(pointer:coarse){ .ag-info{opacity:.55;} }

/* ════════ PAYWALL ════════ */
#paywall{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:24px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  opacity:1;}
#paywall.out{opacity:0;transition:opacity .28s var(--ease);}
/* LUXLIQ bloom (§9.5) - the paywall settles in by soft diffusion like the
   rest of the OS's modals. */
.pw-card{position:relative;width:min(420px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);padding:32px 30px 26px;text-align:center;
  animation:pw-rise var(--visc-settle,.4s) var(--ease-viscous,var(--ease-out));}
@keyframes pw-rise{from{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@media (prefers-reduced-motion:reduce){ .pw-card{animation:none;opacity:1;transform:none;filter:none;} }
.pw-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:7px;display:grid;place-items:center;}
.pw-x:hover{background:var(--surface-2);color:var(--ink-1);}.pw-x svg{width:16px;height:16px;}
.pw-gem{line-height:0;display:flex;justify-content:center;filter:none;}
.pw-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--topaz-ink);margin-top:14px;}
.pw-h{font-family:var(--ff-display);font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:6px;}
.pw-sub{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:8px;}
.pw-price{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:18px 0 4px;}
.pw-amt{font-family:var(--ff-display);font-size:46px;font-weight:700;letter-spacing:-.03em;}
.pw-per{font-size:15px;color:var(--ink-2);font-weight:500;}
.pw-list{list-style:none;margin:14px 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;}
.pw-list li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45;}
.pw-list li svg{width:15px;height:15px;color:var(--jade);flex-shrink:0;margin-top:2px;}
.pw-list b{color:var(--ink-1);font-weight:600;}
.pw-go{width:100%;justify-content:center;}
.pw-later{display:block;width:100%;margin-top:10px;border:0;background:transparent;color:var(--ink-2);font-family:var(--ff);font-size:13.5px;font-weight:500;cursor:pointer;padding:8px;}
.pw-later:hover{color:var(--ink-1);}
.pw-fine{font-size:11.5px;color:var(--ink-3);margin-top:12px;line-height:1.5;}

/* ════════ STUDIO - templates ════════ */
.studioapp{display:flex;flex-direction:column;height:100%;}
.studio-body{flex:1;min-height:0;overflow:auto;padding:18px 22px 24px;}
.studio-note{display:flex;gap:11px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-bottom:18px;}
.studio-note svg{width:17px;height:17px;color:var(--ink-2);flex-shrink:0;margin-top:1px;}
.studio-note span{font-size:13px;line-height:1.55;color:var(--ink-2);}
.studio-note b{color:var(--ink-1);font-weight:600;}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.tpl-card{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:16px;cursor:pointer;transition:border-color .16s, box-shadow .18s var(--ease-viscous,var(--ease-out)), transform .16s;}
@media (hover:hover) and (pointer:fine){ .tpl-card:hover{border-color:color-mix(in srgb,var(--ink-1) 24%,var(--line));box-shadow:var(--shadow-2);transform:translateY(-2px);} }
.tpl-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;}
.tpl-ic svg{width:22px;height:22px;}
.tpl-m{flex:1;min-width:0;}
.tpl-n{font-family:var(--ff-display);font-size:15.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.tpl-tag{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-full);padding:2px 7px;}
.tpl-tag.mine{color:var(--jade);border-color:color-mix(in srgb,var(--jade) 40%,transparent);background:var(--jade-soft);}
.tpl-d{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5;}
.tpl-actions{display:flex;flex-direction:column;gap:7px;flex-shrink:0;}
.tpl-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:124px;
  border:1px dashed var(--line);border-radius:var(--r-lg);background:transparent;color:var(--ink-3);cursor:pointer;
  font-family:var(--ff);font-size:13px;font-weight:500;transition:border-color .16s, color .16s, background .16s;}
.tpl-new:hover{border-color:var(--ink-3);color:var(--ink-1);background:var(--surface-2);}
.tpl-new svg{width:22px;height:22px;}
/* editor */
.tpl-edit{display:flex;flex-direction:column;gap:16px;}
.te-grid{display:grid;grid-template-columns:1fr 230px;gap:22px;}
.te-main{display:flex;flex-direction:column;}
.te-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 7px;}
.te-l:first-child{margin-top:0;}
.te-l span{text-transform:none;letter-spacing:0;color:var(--ink-3);font-family:var(--ff);font-size:11px;}
.te-in,.te-ta{width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  font-family:var(--ff);font-size:14px;color:var(--ink-1);padding:11px 13px;outline:0;
  transition:border-color var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out)),box-shadow var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out));}
.te-ta{font-size:13.5px;line-height:1.6;resize:vertical;min-height:120px;}
.te-in:focus,.te-ta:focus{border-color:var(--focus-ring,var(--ink));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.te-ai{display:flex;align-items:center;gap:11px;margin-top:11px;flex-wrap:wrap;}
.te-aihint{font-size:12px;color:var(--ink-3);}
.te-side{display:flex;flex-direction:column;}
.te-icons{display:flex;flex-wrap:wrap;gap:6px;}
.te-icbtn{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:border-color .14s, color .14s, background .14s;}
.te-icbtn svg{width:18px;height:18px;}
.te-icbtn.on{border-color:color-mix(in srgb,var(--ink-1) 45%,var(--line));background:var(--surface-2);color:var(--ink-1);}
.te-tints{display:flex;gap:8px;}
.te-tint{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.te-tint.on{border-color:var(--ink-1);box-shadow:0 0 0 2px var(--surface) inset;}
.te-preview{margin-top:20px;border:1px solid var(--line-2);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface-2);}
.te-pvn{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-1);text-align:center;}
.te-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:16px;}
.te-foot-l{display:flex;gap:9px;}
.te-foot-r{display:flex;gap:9px;}
@media (max-width:680px){ .te-grid{grid-template-columns:1fr;} }

/* ════════ PERSONALIZATION ════════ */
/* accent presets - gem hues + stone neutrals, flat. Re-skin JUWEL's hero color only;
   ink controls stay ink. Legacy stored keys (coral/plum/sky/lime) alias to the nearest gem. */
body[data-accent="garnet"],body[data-accent="coral"],body[data-accent="plum"]{
  --amber:#C93A52;--accent:#C93A52;--accent-2:#E06377;--accent-ink:#A62B41;--topaz-ink:#A62B41;
  --accent-contrast:#fff;--c-amber:#C93A52;--c-burn:#A62B41;--amber-glow:rgba(201,58,82,.22);}
body[data-accent="sapphire"],body[data-accent="sky"]{
  --amber:#2E86C9;--accent:#2E86C9;--accent-2:#5FAEE3;--accent-ink:#1F6AA5;--topaz-ink:#1F6AA5;
  --accent-contrast:#fff;--c-amber:#2E86C9;--c-burn:#1F6AA5;--amber-glow:rgba(46,134,201,.22);}
body[data-accent="jade"],body[data-accent="lime"]{
  --amber:#3E9B4F;--accent:#3E9B4F;--accent-2:#5DBB6E;--accent-ink:#2F7C3D;--topaz-ink:#2F7C3D;
  --accent-contrast:#fff;--c-amber:#3E9B4F;--c-burn:#2F7C3D;--amber-glow:rgba(62,155,79,.22);}
body[data-accent="slate"]{
  --amber:#57544E;--accent:#57544E;--accent-2:#6B6860;--accent-ink:#3B3934;--topaz-ink:#3B3934;
  --accent-contrast:#fff;--c-amber:#57544E;--c-burn:#3B3934;--amber-glow:rgba(87,84,78,.20);}
body[data-accent="basalt"]{
  --amber:#8B877E;--accent:#8B877E;--accent-2:#A6A29A;--accent-ink:#57544E;--topaz-ink:#57544E;
  --accent-contrast:#1A1915;--c-amber:#8B877E;--c-burn:#6B6860;--amber-glow:rgba(139,135,126,.22);}
html[data-theme="dark"] body[data-accent="garnet"],html[data-theme="dark"] body[data-accent="coral"],html[data-theme="dark"] body[data-accent="plum"]{
  --amber:#E06377;--accent:#E06377;--accent-2:#EA8496;--accent-ink:#EA8496;--topaz-ink:#EA8496;
  --accent-contrast:#2A1015;--amber-glow:rgba(224,99,119,.26);}
html[data-theme="dark"] body[data-accent="sapphire"],html[data-theme="dark"] body[data-accent="sky"]{
  --amber:#5FAEE3;--accent:#5FAEE3;--accent-2:#83C1EB;--accent-ink:#83C1EB;--topaz-ink:#83C1EB;
  --accent-contrast:#0F2233;--amber-glow:rgba(95,174,227,.26);}
html[data-theme="dark"] body[data-accent="jade"],html[data-theme="dark"] body[data-accent="lime"]{
  --amber:#5DBB6E;--accent:#5DBB6E;--accent-2:#7ACB88;--accent-ink:#7ACB88;--topaz-ink:#7ACB88;
  --accent-contrast:#0F2413;--amber-glow:rgba(93,187,110,.26);}
html[data-theme="dark"] body[data-accent="slate"]{
  --amber:#8B877E;--accent:#8B877E;--accent-2:#A6A29A;--accent-ink:#A6A29A;--topaz-ink:#A6A29A;
  --accent-contrast:#1A1915;--amber-glow:rgba(139,135,126,.24);}
html[data-theme="dark"] body[data-accent="basalt"]{
  --amber:#A6A29A;--accent:#A6A29A;--accent-2:#BDB9B1;--accent-ink:#BDB9B1;--topaz-ink:#BDB9B1;
  --accent-contrast:#1A1915;--amber-glow:rgba(166,162,154,.24);}
/* wallpaper presets on #room - STILL faceted planes: 3 angular cuts of tinted bedrock
   (±2-3% lightness) + one faint refraction low in the frame. No candy radial washes.
   "quartz" replaces retired "orchid" (purple is dead); orchid key kept as a legacy alias. */
body[data-wp="sunrise"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--topaz) 6%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--topaz) 3%,var(--paper)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,color-mix(in srgb,var(--topaz) 9%,transparent),transparent 62%),
  var(--paper);}
body[data-wp="ocean"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--sapphire) 5%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--sapphire) 3%,var(--paper)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,color-mix(in srgb,var(--sapphire) 8%,transparent),transparent 62%),
  var(--paper);}
body[data-wp="quartz"] #room,body[data-wp="orchid"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--garnet) 4%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--garnet) 2%,var(--paper)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,color-mix(in srgb,var(--garnet) 7%,transparent),transparent 62%),
  var(--paper);}
body[data-wp="mint"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--jade) 5%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--jade) 3%,var(--paper)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,color-mix(in srgb,var(--jade) 7%,transparent),transparent 62%),
  var(--paper);}
body[data-wp="mono"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--ink) 3%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--ink) 2%,var(--paper)) 0 58%,transparent 58.5%),
  var(--paper);}
body[data-wp="slate"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--ink) 3%,var(--paper)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--ink) 2%,var(--paper)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,color-mix(in srgb,var(--topaz) 7%,transparent),transparent 62%),
  var(--paper);}
/* dark: same cut planes on obsidian, refraction barely brighter */
html[data-theme="dark"] body[data-wp="sunrise"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--topaz) 7%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--topaz) 4%,var(--bg)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,rgba(255,180,42,.10),transparent 62%),var(--bg);}
html[data-theme="dark"] body[data-wp="ocean"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--sapphire) 6%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--sapphire) 3%,var(--bg)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,rgba(95,174,227,.09),transparent 62%),var(--bg);}
html[data-theme="dark"] body[data-wp="quartz"] #room,html[data-theme="dark"] body[data-wp="orchid"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--garnet) 6%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--garnet) 3%,var(--bg)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,rgba(224,99,119,.08),transparent 62%),var(--bg);}
html[data-theme="dark"] body[data-wp="mint"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--jade) 6%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--jade) 3%,var(--bg)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,rgba(93,187,110,.08),transparent 62%),var(--bg);}
html[data-theme="dark"] body[data-wp="mono"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--ink) 4%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--ink) 2%,var(--bg)) 0 58%,transparent 58.5%),
  var(--bg);}
html[data-theme="dark"] body[data-wp="slate"] #room{background:
  linear-gradient(164deg,color-mix(in srgb,var(--ink) 4%,var(--bg)) 0 34%,transparent 34.5%),
  linear-gradient(200deg,color-mix(in srgb,var(--ink) 2%,var(--bg)) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,rgba(255,180,42,.09),transparent 62%),var(--bg);}
/* generative custom wallpaper - driven by CSS vars JUWEL sets (stone-neutral fallbacks) */
body[data-wp="custom"] #room{background:
  linear-gradient(164deg,var(--cw1,#EDEBE6) 0 34%,transparent 34.5%),
  linear-gradient(200deg,var(--cw2,#EFEDE9) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,var(--cw3,rgba(255,154,0,.07)),transparent 62%),
  var(--paper);}
html[data-theme="dark"] body[data-wp="custom"] #room{background:
  linear-gradient(164deg,var(--cwd1,#18181C) 0 34%,transparent 34.5%),
  linear-gradient(200deg,var(--cwd2,#161619) 0 58%,transparent 58.5%),
  radial-gradient(52vw 40vh at 82% 104%,var(--cwd3,rgba(255,180,42,.09)),transparent 62%),
  var(--bg);}
/* Personalize swatches */
.pz-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 9px;}
.pz-design{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;margin-bottom:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
  background:var(--surface);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);
  transition:border-color .16s ease,box-shadow .2s ease,transform var(--dur-1) var(--ease-out);}
.pz-design:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){ .pz-design:hover{border-color:color-mix(in srgb,var(--ink) 24%,var(--line));box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);} }
.pz-design-gem{flex-shrink:0;line-height:0;}
.pz-design-m{flex:1;display:flex;flex-direction:column;gap:2px;}
.pz-design-m b{font-size:15px;font-weight:650;letter-spacing:-.02em;color:var(--ink-1);}
.pz-design-m i,.pz-design-m .pz-desc{font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.4;}
.pz-design-go{flex-shrink:0;width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--accent-contrast,#201200);
  background:var(--accent);}
.pz-design-go svg{width:18px;height:18px;}
.pz-script{display:flex;gap:8px;align-items:center;margin:-12px 0 22px;}
.pz-script-in{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface-2);
  font-family:var(--ff);font-size:13px;color:var(--ink-1);padding:10px 15px;outline:0;transition:border-color .15s,box-shadow .2s;}
.pz-script-in:focus{border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.pz-script-in::placeholder{color:var(--ink-3);}
.pz-row{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.pz-acc{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);cursor:pointer;background:var(--a,var(--surface-2));
  box-shadow:inset 0 1px 0 var(--edge);transition:box-shadow .15s ease,transform var(--dur-1) var(--ease-out);}
.pz-acc:active{transform:scale(.96);}
@media (hover:hover) and (pointer:fine){ .pz-acc:hover{box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);} }
.pz-acc.on{border-color:var(--ink-1);box-shadow:inset 0 0 0 2px var(--surface);}
.pz-acc[data-v=""]{background:var(--topaz);}
.pz-acc[data-v="garnet"]{background:#C93A52;}
.pz-acc[data-v="sapphire"]{background:#2E86C9;}
.pz-acc[data-v="jade"]{background:#3E9B4F;}
.pz-acc[data-v="slate"]{background:#57544E;}
.pz-acc[data-v="basalt"]{background:#8B877E;}
.pz-wp{width:64px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:box-shadow .15s ease;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);}
@media (hover:hover) and (pointer:fine){ .pz-wp:hover{box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent),var(--shadow-1);} }
.pz-wp.on{border-color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--surface),var(--shadow-1);}
.pz-wp[data-v="sunrise"]{background:linear-gradient(164deg,color-mix(in srgb,var(--topaz) 10%,var(--surface)) 0 40%,transparent 40.5%),linear-gradient(200deg,color-mix(in srgb,var(--topaz) 5%,var(--surface)) 0 66%,transparent 66.5%),var(--surface);}
.pz-wp[data-v="ocean"]{background:linear-gradient(164deg,color-mix(in srgb,var(--sapphire) 9%,var(--surface)) 0 40%,transparent 40.5%),linear-gradient(200deg,color-mix(in srgb,var(--sapphire) 5%,var(--surface)) 0 66%,transparent 66.5%),var(--surface);}
.pz-wp[data-v="quartz"]{background:linear-gradient(164deg,color-mix(in srgb,var(--garnet) 8%,var(--surface)) 0 40%,transparent 40.5%),linear-gradient(200deg,color-mix(in srgb,var(--garnet) 4%,var(--surface)) 0 66%,transparent 66.5%),var(--surface);}
.pz-wp[data-v="mint"]{background:linear-gradient(164deg,color-mix(in srgb,var(--jade) 8%,var(--surface)) 0 40%,transparent 40.5%),linear-gradient(200deg,color-mix(in srgb,var(--jade) 4%,var(--surface)) 0 66%,transparent 66.5%),var(--surface);}
.pz-wp[data-v="mono"]{background:linear-gradient(164deg,color-mix(in srgb,var(--ink) 5%,var(--surface)) 0 40%,transparent 40.5%),var(--surface);}
.pz-wp[data-v="slate"]{background:linear-gradient(164deg,color-mix(in srgb,var(--ink) 5%,var(--surface)) 0 40%,transparent 40.5%),radial-gradient(120% 90% at 84% 108%,color-mix(in srgb,var(--topaz) 12%,transparent),transparent 62%),var(--surface);}
/* dock size */
body[data-docksize="sm"] .dock-app,body[data-docksize="sm"] .dock-gem{width:36px;height:36px;}
body[data-docksize="sm"] .dock-app svg{width:17px;height:17px;}
body[data-docksize="lg"] .dock-app,body[data-docksize="lg"] .dock-gem{width:52px;height:52px;}
body[data-docksize="lg"] .dock-app svg{width:25px;height:25px;}
/* dock position: bottom */
body[data-dockpos="bottom"] #dock{left:50%;top:auto;bottom:16px;right:auto;transform:translateX(-50%);flex-direction:row;align-items:flex-end;}
body[data-dockpos="bottom"] #dock .dock-div{width:1px;height:24px;margin:0 4px;align-self:center;}
body[data-dockpos="bottom"] #dock .dock-app .run{left:50%;top:auto;bottom:-6px;transform:translateX(-50%) scaleY(0) rotate(90deg);}
body[data-dockpos="bottom"] #dock .dock-app.running .run{transform:translateX(-50%) scaleY(.55) rotate(90deg);}
body[data-dockpos="bottom"] #dock .dock-app.focused-app .run{transform:translateX(-50%) scaleY(1) rotate(90deg);}
body[data-dockpos="bottom"] #dock .dock-app .tip{left:50%;top:auto;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(4px);}
body[data-dockpos="bottom"] #dock .dock-app:hover .tip{transform:translateX(-50%) translateY(0);}
body[data-dockpos="bottom"] #stage{left:0;}
body[data-dockpos="bottom"]:not(.chat-active) #chatbar{bottom:92px;}
body[data-dockpos="bottom"]:not(.chat-active) #chatbar-disclaimer{bottom:74px;}
.apv-scrim{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;padding:24px;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  opacity:0;transition:opacity .18s var(--ease-out);}
.apv-scrim.on{opacity:1;}
/* LUXLIQ bloom (§9.5) - the approval-preview card blooms in like the rest
   of the OS's consequential-action modals. */
.apv-card{width:min(440px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);
  transform:translateY(8px) scale(.98);filter:blur(4px);
  transition:transform var(--visc-settle,.4s) var(--ease-viscous,var(--ease-out)),filter var(--visc-settle,.4s) var(--ease-viscous,var(--ease-out));}
.apv-scrim.on .apv-card{transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){ .apv-card{transition:opacity .15s ease;transform:none;filter:none;} }
.apv-card::before{content:"";display:block;height:2px;border-radius:2px;margin:-6px -4px 16px;}
.apv-coral::before{background:var(--garnet);}
.apv-sky::before{background:var(--sapphire);}
.apv-amber::before{background:var(--accent);}
.apv-grape::before{background:#57544E;}
.apv-head{display:flex;gap:13px;align-items:flex-start;}
.apv-gem{flex-shrink:0;line-height:0;}
.apv-htxt{flex:1;min-width:0;}
.apv-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--topaz-ink);}
.apv-badge svg{width:13px;height:13px;}
.apv-title{font-family:var(--ff-display);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:5px;color:var(--ink-1);}
.apv-detail{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:12px;}
.apv-rows{margin-top:14px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;}
.apv-row{display:flex;justify-content:space-between;gap:14px;padding:10px 13px;border-top:1px solid var(--line-2);font-size:13px;}
.apv-row:first-child{border-top:0;}
.apv-row .apv-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.apv-row .apv-v{color:var(--ink-1);font-weight:500;text-align:right;}
.apv-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:15px;
  background:var(--jade-soft);border:1px solid transparent;border-radius:var(--r-md);padding:11px 13px;}
.apv-note svg{width:15px;height:15px;color:var(--jade);flex-shrink:0;margin-top:1px;}
.apv-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.pbtn.lg{font-size:14.5px;padding:11px 22px;}

/* ════════ SETTINGS - account & integrations ════════ */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px;}
.acct-f{display:flex;flex-direction:column;gap:6px;}
.acct-f span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.acct-f span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-3);font-family:var(--ff);font-size:11px;margin-left:5px;}
.acct-f input{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-family:var(--ff);font-size:14px;color:var(--ink-1);padding:10px 12px;outline:0;
  transition:border-color var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out)),box-shadow var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out));}
.acct-f input:focus{border-color:var(--focus-ring,var(--ink));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.integ-list{display:flex;flex-direction:column;}
.integ{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2);}
.integ:last-child{border-bottom:0;}
.integ-ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-1);flex-shrink:0;}
.integ-ic svg{width:18px;height:18px;}
.integ-m{flex:1;min-width:0;}
.integ-n{font-size:14px;font-weight:600;color:var(--ink-1);}
.integ-d{font-size:12.5px;color:var(--ink-2);margin-top:2px;}
@media (max-width:680px){ .acct-grid{grid-template-columns:1fr;} }

/* ════════ TERMINAL - juwel codes here ════════ */
#stage .theme-flash{animation:theme-flash .4s var(--ease-out);}
@keyframes theme-flash{0%{filter:brightness(1)}30%{filter:brightness(1.08) saturate(1.15)}100%{filter:brightness(1)}}
.term{display:flex;flex-direction:column;height:100%;background:#171613;color:#F2F0EB;font-family:var(--mono);}
html[data-theme="dark"] .term{background:#101013;}
.term-tabs{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);flex-shrink:0;}
/* .term (terminal) is a forced-dark shell like the IDE, so these keep the
   dark foam-ink rgba rather than theme-flipping --surface/--ink (which would
   read light-on-dark). What was missing was a LuxLiq active STATE: .term-tab
   now routes through the .lx-tab meniscus (dormant strip, no live markup to
   carry the class, so aliased here) and pours a nectar meniscus on .on. */
.term-tab{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(242,240,235,.75);background:rgba(255,255,255,.06);border-radius:7px 7px 0 0;padding:6px 11px;
  transition:color var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out)),background var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out));}
.term-tab svg{width:13px;height:13px;}
.term-tab.ghost{color:rgba(242,240,235,.38);background:transparent;}
.term-tab.on{color:#F2F0EB;background:rgba(255,255,255,.10);}
/* active terminal tab persists at rest (opening a tab is you acting, not
   JUWEL), so the underline stays a light-ink hairline, not amber - matches
   the .brain-toggle/.seg convention above rather than a resting glow. */
.term-tab::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,240,235,.55),transparent);
  transform:scaleX(0);transform-origin:center;opacity:0;transition:transform var(--visc-pour,.42s) var(--ease-viscous,var(--ease-out)),opacity var(--visc-pour,.42s) var(--ease-viscous,var(--ease-out));}
.term-tab.on::after{transform:scaleX(1);opacity:1;}
@media (prefers-reduced-motion:reduce){ .term-tab::after{transform:none!important;transition:opacity .2s ease;} }
.term-sp{flex:1;}
.term-dotrow{display:flex;gap:5px;}
.term-dotrow i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);}
.term-dotrow i:nth-child(1){background:#E06377;}.term-dotrow i:nth-child(2){background:#FFC65C;}.term-dotrow i:nth-child(3){background:#7ACB88;}
.term-body{flex:1;min-height:0;overflow:auto;padding:14px 16px;}
.term-out{font-size:12.8px;line-height:1.72;white-space:pre-wrap;word-break:break-word;}
.term-line{min-height:1.2em;}
.term-prompt{color:var(--accent,#FFB42A);font-weight:600;margin-right:2px;}
.term-typed{color:#F2F0EB;}
.term-caret{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;margin-left:1px;background:var(--accent,#FFB42A);animation:term-blink 1s steps(1) infinite;}
@keyframes term-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.term-line.c-code{color:#E4E2DC;}
.term-line.c-dim,.c-dim{color:rgba(242,240,235,.5);}
.c-ok{color:#7ACB88;}
.c-prop{color:#83C1EB;}
.c-val{color:var(--accent,#FFB42A);}
.c-kw{color:#5FAEE3;}

/* ── juwel-cli terminal (live app) ── */
.termapp{display:flex;flex-direction:column;height:100%;background:#171613;color:#F2F0EB;
  font-family:var(--mono);font-size:12.9px;line-height:1.7;cursor:text;}
html[data-theme="dark"] .termapp{background:#101013;}
.term-screen{flex:1;min-height:0;overflow:auto;padding:16px 18px 10px;}
.term-screen::-webkit-scrollbar{width:9px;}
.term-screen::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:5px;}
.tl{min-height:1.1em;white-space:pre-wrap;word-break:break-word;animation:tl-in .12s var(--ease);}
@keyframes tl-in{from{opacity:0}to{opacity:1}}
.tspacer{height:8px;}
.term-logo{margin:0 0 2px;font-family:var(--mono);font-size:14px;font-weight:600;color:#fff;letter-spacing:.04em;}
.tver{color:#7ACB88;}
.tdim{color:rgba(242,240,235,.5);}
.tok{color:#7ACB88;font-weight:600;}
.twarn{color:#FFC65C;font-weight:600;}
.terr{color:#E06377;font-weight:600;}
.tspin{color:#7ACB88;display:inline-block;width:1em;}
.tprompt,.term-ps1{font-weight:600;}
.ps1-a{color:#7ACB88;}.ps1-at{color:rgba(242,240,235,.5);}.ps1-h{color:#FFB42A;}.ps1-p{color:#5FAEE3;}.ps1-c{color:#EA8496;}
.tcmd{color:#fff;}
.tans{color:#F2F0EB;margin:7px 0 9px;padding:9px 13px;border-left:2px solid #FF9A00;background:rgba(255,154,0,.12);border-radius:0 8px 8px 0;white-space:pre-wrap;}
.tkern{color:#FFB42A;}
.tspec{color:#7ACB88;font-weight:600;}
.tid{color:#FFC65C;}
.thex{color:#5FAEE3;font-size:12px;}
.trcpt{margin:7px 0;padding:9px 12px;border:1px solid rgba(122,203,136,.25);border-radius:8px;background:rgba(122,203,136,.06);}
.tverify{margin:6px 0;padding:8px 12px;border-radius:8px;}
.tverify.ok{border:1px solid rgba(122,203,136,.4);background:rgba(122,203,136,.08);}
.tverify.bad{border:1px solid rgba(224,99,119,.45);background:rgba(224,99,119,.1);}
.tconsensus{margin:6px 0;padding:7px 12px;border-radius:8px;}
.tconsensus.ok{color:#7ACB88;background:rgba(122,203,136,.08);}
.tconsensus.split{color:#FFC65C;background:rgba(255,198,92,.08);}
.trow{padding:1px 0;}
.thelp{color:#7ACB88;}
.tkbd{color:#FFC65C;background:rgba(255,255,255,.06);border-radius:5px;padding:1px 6px;font-size:12px;}
.term-inputline{display:flex;align-items:center;gap:8px;padding:10px 18px 14px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.term-in{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--mono);font-size:12.9px;caret-color:#7ACB88;}
.term-in:disabled{opacity:.6;}

/* ── per-reply affordances: copy + sources ── */
.msg-foot{ display:flex; gap:8px; margin-top:9px; }
.msg-copy{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-2);
  background:transparent; border:1px solid var(--line); border-radius:var(--r-full); padding:3px 10px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s; }
.msg-copy:hover{ color:var(--ink-1); border-color:var(--ink-2); }
.msg-copy:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.msg-srcs{ margin-top:9px; border-top:1px solid var(--line); padding-top:8px; }
.msg-srcs > summary{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-2);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; user-select:none; }
.msg-srcs > summary::-webkit-details-marker{ display:none; }
.msg-srcs > summary::before{ content:'\203A'; transition:transform .15s; display:inline-block; }
.msg-srcs[open] > summary::before{ transform:rotate(90deg); }
.msg-srcs > summary:hover{ color:var(--ink-1); }
.msg-srcs-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.msg-src{ font-size:13px; color:var(--ink-2); }
.msg-src a{ color:var(--sapphire-deep); text-decoration:none; font-weight:600; }
.msg-src a:hover{ text-decoration:underline; }
.msg-src-t{ font-weight:600; }
.msg-src-tier{ font-family:var(--mono); font-size:10px; color:var(--jade); margin-left:6px; background:var(--jade-soft); padding:1px 4px; border-radius:3px; }
.msg-src-snip{ font-size:12px; color:var(--ink-3); margin-top:2px; }



/* == shared micro-utilities - inline-style retirement (juwel-os-apps.js) == */
a.pbtn{text-decoration:none;}
.mt6{margin-top:6px;}.mt8{margin-top:8px;}.mt9{margin-top:9px;}.mt11{margin-top:11px;}.mt12{margin-top:12px;}
.mt16{margin-top:16px;}.mt18{margin-top:18px;}.mt20{margin-top:20px;}
.mb6{margin-bottom:6px;}.mb10{margin-bottom:10px;}.mb12{margin-bottom:12px;}.mb13{margin-bottom:13px;}
.mb14{margin-bottom:14px;}.mb16{margin-bottom:16px;}.mb18{margin-bottom:18px;}
.ml8{margin-left:8px;}.pt12{padding-top:12px;}.flex1{flex:1;}.col-span{grid-column:1/-1;}
.sp16{height:16px;}.app-fill{height:100%;}
.qnote{padding:14px 4px;color:var(--ink-3);font-size:13px;}
.qnote-inset{padding:18px 15px;color:var(--ink-3);font-size:13px;}
.qnote-note{padding:16px;color:var(--ink-2);font-size:13.5px;line-height:1.5;}
.o70{opacity:.7;}
.pane-sub{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:14px;}
.pane-sub.sm{font-size:13px;line-height:1.5;margin:2px 0 10px;}
.ti-topaz{background:var(--topaz-soft);color:var(--topaz-ink);}
.ti-jade{background:var(--jade-soft);color:var(--jade);}
.ti-sapphire{background:var(--sapphire-soft);color:var(--sapphire-deep);}
.dot-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;}
.is-ink{color:var(--ink-1);}.is-ok{color:var(--jade);}.is-dim{color:var(--ink-2);}.is-bad{color:var(--garnet);}
.ad.ad-ok{background:var(--jade);}.ad.ad-bad{background:var(--garnet);}
.b600{font-weight:600;}
.chip-pad{padding:4px 9px;}
.chip-plain{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);}
.chip-live{color:var(--jade);background:var(--jade-soft);border:1px solid transparent;}
.chip-dim{color:var(--ink-3);font-size:10px;}
.code-rec{font-family:var(--mono);color:var(--topaz-ink);}
.ak-token{font-family:var(--mono);font-size:12px;word-break:break-all;display:block;color:var(--topaz-ink);}
.a-link{color:var(--sapphire-deep);text-decoration:none;font-weight:600;}
.btn-row{display:flex;gap:9px;align-items:center;}
.plan-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line-2);margin-top:8px;padding-top:13px;}
.plan-links{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:13px;line-height:1.4;}
.legal-mono{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:12px;line-height:1.6;}
.meter{height:6px;border-radius:3px;background:var(--surface-2);margin-top:8px;overflow:hidden;}
.meter-fill{display:block;height:100%;width:0%;background:var(--accent);}
.ak-scopes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.ak-scope{display:inline-flex;align-items:center;gap:7px;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 13px;cursor:pointer;}
.ak-fresh{margin-top:12px;padding:14px;border-radius:var(--r-lg);background:var(--jade-soft);border:1px solid transparent;}
.ak-note{font-size:12.5px;color:var(--ink-2);margin-bottom:7px;}
.set-row.rule-top{border-top:1px solid var(--line-2);margin-top:6px;}
.set-row.no-rule{border-bottom:0;}
.toggle:disabled{opacity:.6;cursor:not-allowed;}
.mem.out{opacity:0;transform:translateX(10px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);}
@media (prefers-reduced-motion:reduce){ .mem.out{transform:none;} }

/* ── auth truth: hidden always wins (Sign out was leaking through .pbtn display) ── */
.fwin [hidden]{display:none!important;}

/* ── settings · account sign-in (passwordless code) ── */
.acct-signin{border:1px solid var(--line,rgba(23,19,12,.14));border-radius:12px;padding:14px 16px;margin:0 0 14px;background:var(--surface-2,rgba(255,255,255,.5));box-shadow:inset 0 1px 0 var(--edge,rgba(255,255,255,.6));}
.acct-signin .sr-s{margin:2px 0 10px;}
.si-row{display:flex;gap:8px;margin-top:8px;}
.si-row input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:9px 12px;border-radius:9px;border:1px solid var(--line,rgba(23,19,12,.16));background:var(--surface,rgba(255,255,255,.85));color:inherit;}
.si-row input:focus{outline:none;border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
.si-status{margin-top:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2,rgba(23,19,12,.66));}
.si-status.ok{color:var(--jade,#2E9E6B);}

/* Studio empty state — honest, no fake sample cards */
.studio-empty{margin:12px 0 18px;padding:18px 16px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);}
.studio-empty-t{font-weight:700;font-size:14.5px;color:var(--ink-1);margin-bottom:6px;}
.studio-empty-d{font-size:13px;color:var(--ink-2);line-height:1.45;max-width:52ch;margin-bottom:12px;}
.studio-empty-row{display:flex;flex-wrap:wrap;gap:8px;}
.tpl-grid[hidden]{display:none!important;}

/* ── OSS embed: xterm.js terminal (OSS_EMBEDS_BASE 2026-07-14) ──
   Mounted by juwel-oss-embeds.js into [data-term]; the DOM screen +
   input line stay in the tree as the automatic CDN-failure fallback. */
.termapp .oss-xterm{flex:1;min-height:0;padding:12px 14px 8px;}
.termapp .oss-xterm .xterm{height:100%;}
.termapp[data-xterm] .term-screen,.termapp[data-xterm] .term-inputline{display:none;}