/* ============================================================ WAYPATH V2 — SOFT LIGHT SKIN (skin-soft.css) Net-new light skin over the agentic surface: depth + shadow perspective. Loads LAST — remaps tokens, re-materials cards. Variants via mat: float · pillow · glass temp: warm · cool · neutral shadow: soft · std · deep streak: on · off ============================================================ */ /* ── 1 · TEMPERATURE RAMPS ─────────────────────────────── */ :root{ color-scheme:light; --bg:#E8E1D4;--bg-1:#F4EFE5;--bg-2:#FBF7EF;--bg-3:#FFFFFF; --hair:#D9CEBC;--hair-2:#CBBFA9;--hair-h:#B4A78D; --fg:#272219;--fg-2:#5B5344;--fg-3:#877D6A;--fg-4:#A99E89; --signal:#C0512E;--orange:#C0512E;--signal-soft:rgba(192,81,46,.13); --status-run:#C96A34;--status-ready:#3E8A5D;--status-wait:#A17C2C;--status-done:#A99E89;--status-err:#B8402E; --info:#3B6EA8; --sh-ink:92 72 44; --ascii-base:#9A8E79;--ascii-light:#C0512E; --a1:7%;--a2:16%;--a3:24%; --hov:rgb(255 255 255/.55);--hov2:rgb(var(--sh-ink)/.07); --line:rgb(var(--sh-ink)/.12);--sep:rgb(var(--sh-ink)/.09);--sep2:rgb(var(--sh-ink)/.1); --pane:rgb(255 255 255/.52);--pane-bd:rgb(255 255 255/.65); --chipglass:rgb(255 255 255/.62);--barglass:rgb(255 255 255/.6);--termbg:rgb(255 255 255/.86); --rowon:rgb(255 255 255/.75);--dashfill:rgb(255 255 255/.32);--dotoff:rgb(var(--sh-ink)/.18); --navtint:rgb(var(--sh-ink)/.045);--sidetint:rgb(var(--sh-ink)/.035);--sidetint2:rgb(var(--sh-ink)/.055); } html[data-temp="cool"]{ --bg:#E1E7EF;--bg-1:#EFF3F9;--bg-2:#F7FAFE;--bg-3:#FFFFFF; --hair:#CDD5E1;--hair-2:#BBC6D5;--hair-h:#A0AFC4; --fg:#1F2530;--fg-2:#4B5566;--fg-3:#788498;--fg-4:#9FACBF; --status-ready:#388457;--status-wait:#97772E;--status-done:#9FACBF; --info:#3568A5;--sh-ink:46 62 90;--ascii-base:#8B98AC; } html[data-temp="neutral"]{ --bg:#E5E4E1;--bg-1:#F2F1EE;--bg-2:#FAF9F6;--bg-3:#FFFFFF; --hair:#D2D0CA;--hair-2:#C2BFB8;--hair-h:#A9A69C; --fg:#232220;--fg-2:#55524C;--fg-3:#807D75;--fg-4:#A5A29A; --status-done:#A5A29A;--sh-ink:55 52 46;--ascii-base:#96938B; } /* ── 2 · SHADOW DEPTH ──────────────────────────────────── */ html[data-shadow="soft"]{--a1:4%;--a2:10%;--a3:15%} html[data-shadow="deep"]{--a1:11%;--a2:24%;--a3:34%} /* ── 3 · MATERIALS ─────────────────────────────────────── */ :root,html[data-mat="float"]{ --card-bg:var(--bg-1); --card-bd:rgb(255 255 255/.75); --card-sh:0 1px 0 rgb(255 255 255/.85) inset,1px 2px 3px rgb(var(--sh-ink)/var(--a1)),7px 12px 24px -8px rgb(var(--sh-ink)/var(--a2)),18px 30px 56px -18px rgb(var(--sh-ink)/var(--a3)); --card-sh-hi:0 1px 0 rgb(255 255 255/.9) inset,2px 3px 4px rgb(var(--sh-ink)/var(--a1)),10px 16px 30px -8px rgb(var(--sh-ink)/var(--a2)),24px 40px 70px -20px rgb(var(--sh-ink)/var(--a3)); --pop-bg:var(--bg-2); --well-bg:rgb(var(--sh-ink)/7%); --well-sh:inset 2px 3px 6px rgb(var(--sh-ink)/14%),inset -1px -1px 2px rgb(255 255 255/.6); --card-blur:none; } html[data-mat="pillow"]{ --card-bg:linear-gradient(145deg,var(--bg-2),var(--bg-1)); --card-bd:transparent; --card-sh:-6px -6px 14px rgb(255 255 255/.85),7px 8px 18px rgb(var(--sh-ink)/var(--a2)),18px 22px 44px -14px rgb(var(--sh-ink)/var(--a2)); --card-sh-hi:-8px -8px 18px rgb(255 255 255/.95),10px 12px 26px rgb(var(--sh-ink)/var(--a2)),22px 30px 54px -16px rgb(var(--sh-ink)/var(--a3)); --pop-bg:var(--bg-1); --well-bg:var(--bg); --well-sh:inset 3px 3px 7px rgb(var(--sh-ink)/16%),inset -3px -3px 7px rgb(255 255 255/.8); --card-blur:none; } html[data-mat="glass"]{ --card-bg:rgb(255 255 255/.5); --card-bd:rgb(255 255 255/.8); --card-sh:inset 0 1px 0 rgb(255 255 255/.95),inset 0 -1px 0 rgb(255 255 255/.4),inset 1px 0 0 rgb(255 255 255/.5),0 2px 4px rgb(var(--sh-ink)/var(--a1)),8px 14px 30px -10px rgb(var(--sh-ink)/var(--a2)),20px 32px 60px -20px rgb(var(--sh-ink)/var(--a3)); --card-sh-hi:inset 0 1px 0 rgb(255 255 255/1),inset 0 -1px 0 rgb(255 255 255/.45),0 3px 6px rgb(var(--sh-ink)/var(--a1)),12px 18px 36px -10px rgb(var(--sh-ink)/var(--a2)),24px 38px 66px -20px rgb(var(--sh-ink)/var(--a3)); --pop-bg:rgb(255 255 255/.72); --well-bg:rgb(255 255 255/.35); --well-sh:inset 1px 2px 5px rgb(var(--sh-ink)/12%),inset 0 -1px 0 rgb(255 255 255/.7); --card-blur:blur(18px) saturate(150%); } :root{--pop-sh:0 2px 6px rgb(var(--sh-ink)/10%),0 18px 44px -12px rgb(var(--sh-ink)/28%)} /* ── 4 · GROUND / GLOBAL ───────────────────────────────── */ html,body{background:var(--bg);color:var(--fg)} ::selection{background:var(--signal);color:#fff} *{scrollbar-color:rgb(var(--sh-ink)/.3) transparent} *::-webkit-scrollbar-thumb{background:rgb(var(--sh-ink)/.18);background-clip:content-box} .a2-shell{background:linear-gradient(148deg,var(--bg-2) 0%,var(--bg) 46%,var(--bg) 100%)} .a2-rail{background:transparent;border-right-color:var(--hair)} .a2-right{background:transparent;border-left-color:var(--hair)} /* diagonal sun streak across the whole shell */ html[data-streak="on"] body::after{ content:"";position:fixed;inset:0;z-index:120;pointer-events:none;mix-blend-mode:soft-light;opacity:.85; background: radial-gradient(120% 90% at 10% -12%,rgb(255 255 255/.5),transparent 55%), linear-gradient(112deg,transparent 30%,rgb(255 255 255/.55) 42%,rgb(255 255 255/.14) 54%,transparent 61%), linear-gradient(112deg,transparent 58%,var(--sep2) 78%,transparent 97%); } /* ── 5 · ASCII ATMOSPHERE → FROSTED GHOST ──────────────── */ .a2-bgascii{filter:blur(2.5px) saturate(1.15)} .a2-bgascii.on{opacity:.5} /* readability halos flip to light */ .a2-spark .readout,.a2-wel h1,.a2-center h1,.a2-page > h1,.a2-page > .sub,.a2-sec > h2{text-shadow:0 0 4px var(--bg),0 0 9px var(--bg),0 1px 3px var(--bg)} .ib-head,.rv-sec h2,.oc-head h1,.ac-head h1,.ac-col h2,.au-h2,.au-row .au-k{text-shadow:0 0 4px var(--bg),0 0 9px var(--bg)} /* thread dialog panes — frosted plates over the ghost glyphs */ .a2-thread > .a2-amsg,.a2-thread > .a2-agentmsg,.a2-thread > .a2-tools,.a2-thread > .a2-toolcall,.a2-thread > .a2-agentsteps,.a2-thread > .a2-typing{ background:var(--pane);border:1px solid var(--pane-bd); -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%); box-shadow:2px 4px 14px -4px rgb(var(--sh-ink)/12%); } /* ── 6 · RAIL ──────────────────────────────────────────── */ /* grid equalization (the au-seg pattern): the puck's equal-slot formulas only hold when every slot is the same width. flex:1 buttons collapse to content widths in shrink-to-fit contexts (Reports toolbar, Settings rows), so force equal columns — width-constrained segs (rail) render identically. */ .a2-seg{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh);position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr} .a2-seg button{color:var(--fg-3);position:relative;z-index:1;transition:color .2s} .a2-seg button.on{background:var(--card-bg);border:1px solid var(--card-bd);color:var(--fg);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%),1px 3px 8px -2px rgb(var(--sh-ink)/18%)} /* glass puck — a frosted key that glides between the three slots */ @supports selector(.a2-seg:has(button.on)){ .a2-seg button.on{background:transparent;border:none;box-shadow:none} .a2-seg::before{ content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;box-sizing:border-box; width:calc((100% - 14px)/3);border-radius:inherit; background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.8); -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%); box-shadow:inset 0 1px 0 rgb(255 255 255/.95),0 1px 2px rgb(var(--sh-ink)/12%),2px 4px 10px -3px rgb(var(--sh-ink)/22%); transition:transform .32s cubic-bezier(.3,1.35,.35,1),box-shadow .32s; } .a2-seg:has(button:nth-child(2).on)::before{transform:translateX(calc(100% + 4px))} .a2-seg:has(button:nth-child(3).on)::before{transform:translateX(calc(200% + 8px))} /* sheen sweeps across the key as it lands */ .a2-seg::after{ content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;box-sizing:border-box; width:calc((100% - 14px)/3);border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 32%,rgb(255 255 255/.75) 50%,transparent 68%) no-repeat; background-size:250% 100%;background-position:130% 0;opacity:0; transition:transform .32s cubic-bezier(.3,1.35,.35,1); } .a2-seg:has(button:nth-child(2).on)::after{transform:translateX(calc(100% + 4px))} .a2-seg:has(button:nth-child(3).on)::after{transform:translateX(calc(200% + 8px))} /* two-slot segs (Settings · Appearance) — same puck, half-width key */ .a2-seg:has(button:nth-child(2):last-child)::before, .a2-seg:has(button:nth-child(2):last-child)::after{width:calc((100% - 10px)/2)} /* mini segs pad 2px (not 3) — their chrome is 12px for thirds, 8px for halves; translate offsets stay +4/+8 (same 4px gap) */ .a2-seg.mini::before,.a2-seg.mini::after{top:2px;bottom:2px;left:2px;width:calc((100% - 12px)/3)} .a2-seg.mini:has(button:nth-child(2):last-child)::before, .a2-seg.mini:has(button:nth-child(2):last-child)::after{width:calc((100% - 8px)/2)} .a2-seg:has(button:nth-child(1).on)::after{animation:segSheen1 .55s .1s} .a2-seg:has(button:nth-child(2).on)::after{animation:segSheen2 .55s .1s} .a2-seg:has(button:nth-child(3).on)::after{animation:segSheen3 .55s .1s} html[data-mode="dark"] .a2-seg::before{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.14);box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 1px 2px rgb(var(--sh-ink)/30%),2px 4px 10px -3px rgb(var(--sh-ink)/45%)} html[data-mode="dark"] .a2-seg::after{background-image:linear-gradient(105deg,transparent 32%,rgb(255 255 255/.28) 50%,transparent 68%)} } @keyframes segSheen1{15%{opacity:1;background-position:130% 0}85%{opacity:1}to{opacity:0;background-position:-130% 0}} @keyframes segSheen2{15%{opacity:1;background-position:130% 0}85%{opacity:1}to{opacity:0;background-position:-130% 0}} @keyframes segSheen3{15%{opacity:1;background-position:130% 0}85%{opacity:1}to{opacity:0;background-position:-130% 0}} @media (prefers-reduced-motion:reduce){.a2-seg::before,.a2-seg::after,.au-seg::before{transition:none;animation:none!important}} .a2-ritem{} .a2-ritem:hover{background:var(--hov)} .a2-ritem.on{background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-bd),0 1px 2px rgb(var(--sh-ink)/10%),2px 4px 10px -3px rgb(var(--sh-ink)/16%)} .a2-ritem .kbd kbd{} .a2-rec{} .a2-rec:hover{background:var(--hov)} .a2-rec.on{background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-bd),0 1px 2px rgb(var(--sh-ink)/10%),2px 4px 10px -3px rgb(var(--sh-ink)/16%)} .a2-update{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-update:hover{border-color:var(--card-bd);box-shadow:var(--card-sh-hi)} .a2-update::before{ background-image:radial-gradient(color-mix(in srgb,var(--signal) 55%,transparent) .8px,transparent .9px),radial-gradient(color-mix(in srgb,var(--signal) 32%,transparent) .7px,transparent .8px); opacity:.5; } .a2-update .upbtn{background:var(--bg-2);border-color:var(--hair-2);} .a2-userchip{border-top-color:var(--hair)} .a2-userchip .av{background:radial-gradient(circle at 30% 30%,var(--signal),#7A3018)} /* ── 7 · TITLEBAR + CHROME ─────────────────────────────── */ .a2-titlebar .ib{} .a2-titlebar .ib:hover{background:var(--hov)} .a2-titlebar .tag{background:var(--bg-2);border-color:var(--hair)} .a2-toast{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:var(--pop-sh)} .a2-toast .act{background:var(--bg-2);border-color:var(--hair-2);} .a2-menu{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:var(--pop-sh)} .a2-menu .mi{} .a2-menu .mi:hover{background:var(--hov2)} .a2-menu .sep{background:var(--sep2)} .a2-overlay{background:rgb(var(--sh-ink)/.22);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)} .a2-pal{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:var(--pop-sh)} .a2-pal input{border-bottom-color:var(--sep2)} .a2-pal .it{} .a2-pal .it.sel{background:var(--hov2)} .a2-pal .foot{border-top-color:var(--sep2)} .a2-slash{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:var(--pop-sh)} .a2-slash .it{} .a2-slash .it.sel{background:var(--hov2)} .a2-slash .foot{border-top-color:var(--sep2)} .a2-settings{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:0 4px 10px rgb(var(--sh-ink)/12%),0 34px 80px -18px rgb(var(--sh-ink)/38%)} .a2-set-nav{background:var(--navtint);border-right-color:var(--sep2)} .a2-set-nav .tab{} .a2-set-nav .tab:hover{background:var(--hov)} .a2-set-nav .tab.on{background:var(--card-bg);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%)} .a2-set-row{border-bottom-color:var(--sep)} .a2-term{background:var(--termbg);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-top-color:var(--hair)} /* ── 8 · HOME ──────────────────────────────────────────── */ .a2-srow{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);transition:background .12s,border-color .12s,color .12s,box-shadow .18s,transform .18s} .a2-srow:hover{background:var(--card-bg);border-color:var(--card-bd);box-shadow:var(--card-sh-hi);transform:translateY(-1px)} .a2-srow .size,.a2-srow .code{} .a2-srow .size{background:var(--bg-2);border-color:var(--hair)} .a2-empty{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-empty-row{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-pbcard,.a2-schedrow{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-pbcard:hover,.a2-schedrow:hover{border-color:var(--card-bd);box-shadow:var(--card-sh-hi)} .a2-crow:hover{background:var(--hov)} .a2-crow{border-bottom-color:var(--sep)} /* ── 9 · THREAD ────────────────────────────────────────── */ .a2-umsg .bubble{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-warncard{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-warncard button{background:var(--bg-2);border-color:var(--hair-2);} .a2-warncard .log{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh);} .a2-draftcard{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-draftcard .hd{border-bottom-color:var(--sep)} .a2-draftcard .row{border-bottom-color:var(--sep)} .a2-draftcard .act{background:var(--bg-2);border-color:var(--hair-2);} .a2-draftcard .act.send{color:#fff} .a2-draftcard .act.send:hover{color:#fff;filter:brightness(1.05)} .a2-draftcard .act.send.done{color:#fff} .a2-draftcard .prov{border-top-color:var(--sep)} .a2-draftcard .prov .pi{border-color:var(--hair);} .a2-draftcard textarea.body{background:var(--sidetint);border-top-color:var(--sep)} .a2-draftcard textarea.body:focus{background:var(--sidetint2)} .a2-actcard{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-actcard.high{border-color:color-mix(in srgb,var(--signal) 45%,transparent)} .a2-actcard .acts .ghost{background:var(--bg-2);border-color:var(--hair-2);} .a2-actcard .acts .go{color:#fff;box-shadow:1px 3px 8px -2px rgb(var(--sh-ink)/30%)} .a2-schip{background:var(--bg-2);border-color:var(--hair);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%)} .a2-tools .body{border-left-color:var(--hair-2)} /* ── 10 · DOCK / COMPOSER ──────────────────────────────── */ .a2-sessionbar{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-banner{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-banner a{color:var(--info)} .a2-chip{background:var(--bg-2);border:1px solid var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%),1px 2px 5px -1px rgb(var(--sh-ink)/12%);white-space:nowrap} .a2-chip:hover{border-color:var(--hair-h)} .a2-ctxchip{background:var(--chipglass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%)} .a2-ctxchip.audience .k{color:var(--info)} .a2-chips .critter{background:var(--bg-2);box-shadow:var(--well-sh),0 0 10px var(--signal-soft) inset} /* glass gloss — the seg puck's frosted finish set over the two identity marks (rail avatar + composer critter): a curved lens cap — top dome shine, hairline inner ring, shaded under-edge — with the art crisp underneath */ .a2-userchip .av{position:relative} .a2-userchip .av::after,.a2-chips .critter::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: radial-gradient(130% 105% at 30% 16%,rgb(255 255 255/.45),rgb(255 255 255/.12) 42%,transparent 60%), linear-gradient(160deg,rgb(255 255 255/.14),transparent 48%); box-shadow:inset 0 1px 1px rgb(255 255 255/.55),inset 0 0 0 1px rgb(255 255 255/.22),inset 0 -2px 3px rgb(var(--sh-ink)/14%); } html[data-mode="dark"] .a2-userchip .av::after,html[data-mode="dark"] .a2-chips .critter::after{ background: radial-gradient(130% 105% at 30% 16%,rgb(255 255 255/.28),rgb(255 255 255/.07) 42%,transparent 60%), linear-gradient(160deg,rgb(255 255 255/.08),transparent 48%); box-shadow:inset 0 1px 1px rgb(255 255 255/.3),inset 0 0 0 1px rgb(255 255 255/.12),inset 0 -2px 3px rgb(0 0 0/.35); } .a2-composer{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-composer:focus-within{border-color:var(--card-bd);box-shadow:var(--card-sh),0 0 0 3px var(--signal-soft)} .a2-home .a2-composer{} .a2-perm{white-space:nowrap} .a2-cbtn{} .a2-cbtn:hover{background:var(--hov2)} .a2-send{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh);} .a2-send:hover{border-color:transparent} .a2-send.ready{background:var(--signal);border-color:transparent;color:#fff;box-shadow:0 2px 5px rgb(var(--sh-ink)/25%),1px 4px 12px -2px rgb(var(--sh-ink)/30%)} .a2-oring.spin::after{border-top-color:var(--bg-1)} .a2-projchip{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .a2-projchip:hover{border-color:var(--card-bd);box-shadow:var(--card-sh-hi)} /* ── 11 · PRIMARY CTA — the composer-send recipe: the SURFACE is a neutral well (depth + lighting), the accent rides the text only ── */ .a2-fire,.ib-acts .fire{clip-path:none} .a2-fire,.ib-acts .fire,.rv-changes .fire,.ac-next .fire{ color:var(--signal); background:var(--well-bg);box-shadow:var(--well-sh); transition:box-shadow .15s,color .15s; } .a2-fire{padding:7px 14px} .a2-fire:hover,.ib-acts .fire:hover,.rv-changes .fire:hover,.ac-next .fire:hover{ transform:none;color:var(--signal); box-shadow:var(--well-sh),0 0 0 3px var(--signal-soft); } .a2-fire:active,.ib-acts .fire:active,.rv-changes .fire:active,.ac-next .fire:active{ box-shadow:inset 3px 4px 8px rgb(var(--sh-ink)/22%),inset -1px -1px 2px rgb(255 255 255/.5); } html[data-mode="dark"] .a2-fire:active,html[data-mode="dark"] .ib-acts .fire:active,html[data-mode="dark"] .rv-changes .fire:active,html[data-mode="dark"] .ac-next .fire:active{ box-shadow:inset 3px 4px 8px rgb(0 0 0/.6),inset -1px -1px 2px rgb(255 255 255/.04); } .a2-fire.done,.a2-fire.done:hover{ color:var(--status-ready);clip-path:none;transform:none;filter:none; background:var(--well-bg);box-shadow:var(--well-sh);cursor:default; } /* Dither Kit texture transfer (from the sign-in page's skinned buttons — the restore-elevation recipe): an accent gradient-dither rides ON the CTA's raised well ground, dense at the base dissolving upward, so the well's lighting shows through the dither gaps. Hover eases it denser, press denser still — composing with the ring + inset press above. */ .a2-fire,.ib-acts .fire,.rv-changes .fire,.ac-next .fire{position:relative;overflow:hidden;isolation:isolate} .a2-fire::before,.ib-acts .fire::before,.rv-changes .fire::before,.ac-next .fire::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit; background-image: radial-gradient(color-mix(in srgb,var(--signal) 60%,transparent) .8px,transparent .9px), radial-gradient(color-mix(in srgb,var(--signal) 34%,transparent) .7px,transparent .8px); background-size:4px 4px,7px 7px; background-position:0 0,2px 3px; -webkit-mask-image:linear-gradient(to top,black 6%,rgb(0 0 0/.4) 52%,transparent 90%); mask-image:linear-gradient(to top,black 6%,rgb(0 0 0/.4) 52%,transparent 90%); opacity:.34;transition:opacity .18s; } .a2-fire:hover::before,.ib-acts .fire:hover::before,.rv-changes .fire:hover::before,.ac-next .fire:hover::before{opacity:.52} .a2-fire:active::before,.ib-acts .fire:active::before,.rv-changes .fire:active::before,.ac-next .fire:active::before{opacity:.62} .a2-fire.done::before,.a2-fire.done:hover::before{opacity:0} .sk-byo button,.md-spec .acts2 button,.byok-row button{color:#fff} .sk-byo button:disabled,.byok-row button:disabled{color:var(--fg-4)} /* ── 12 · RIGHT PANEL ──────────────────────────────────── */ .a2-bgrow small{color:var(--fg-3)} .a2-finlist{border-top-color:var(--sep2)} /* ── 13 · ROUTES (inherit pass — light grounds only) ───── */ .ob-overlay{background:rgb(var(--sh-ink)/.3)} .ob-card{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:0 4px 10px rgb(var(--sh-ink)/12%),0 34px 80px -18px rgb(var(--sh-ink)/38%)} .a2-keys{background:var(--pop-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--line);box-shadow:var(--pop-sh)} .lbl.meet{color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)} .ac-ev.reply .ln::after{background:var(--info)} .rv-diff{background:var(--bg-2);border-color:var(--hair)} .rv-side{background:var(--sidetint);border-left-color:var(--hair)} .md-spec-area{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh)} .a2-toggle{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh)} .a2-toggle::after{background:var(--fg-3)} .a2-swatch{border-color:rgb(var(--sh-ink)/.2);box-shadow:0 1px 2px rgb(var(--sh-ink)/15%)} /* ── 14 · MOBILE SHADOWS RECOLOR ───────────────────────── */ @media (max-width:880px){ .a2-right{background:var(--bg-1);box-shadow:-10px 0 44px rgb(var(--sh-ink)/.3)} } @media (max-width:860px){ .a2-rail{background:var(--bg-1);box-shadow:12px 0 40px rgb(var(--sh-ink)/.3)} .a2-scrim{background:rgb(var(--sh-ink)/.28)} } /* ════════════════════════════════════════════════════════════ REFINEMENT SWEEP — route views join the material language ════════════════════════════════════════════════════════════ */ /* shared recipes */ .ib-acts .ghost,.rv-changes .ghost,.rv-bar .ghost,.ac-next .ghost,.au-kill button,.au-add button,.sk-lib button,.sk-card .auto,.sk-card .detail .acts button,.ob-acts .ghost{ background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%),1px 3px 7px -2px rgb(var(--sh-ink)/14%); } .ib-draft textarea,.rv-changes textarea,.au-add input,.sk-libhead input,.sk-byo input,.byok-row input,.spec-area,.sk-ren{ background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh); } .ib-draft textarea:focus,.rv-changes textarea:focus,.au-add input:focus,.sk-libhead input:focus,.sk-byo input:focus,.byok-row input:focus,.spec-area:focus{ border-color:transparent;box-shadow:var(--well-sh),0 0 0 3px var(--signal-soft); } /* inbox */ .ib-row{border-bottom-color:var(--sep)} .ib-row:hover{background:var(--hov)} .ib-row.on{background:var(--rowon);box-shadow:inset 0 0 0 1px var(--card-bd)} .ib-row.needs{box-shadow:inset 2px 0 0 var(--signal)} .ib-row.needs.on{box-shadow:inset 2px 0 0 var(--signal),inset 0 0 0 1px var(--card-bd)} .ib-filters .f{background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/8%)} .ib-filters .f.on{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%),1px 3px 8px -2px rgb(var(--sh-ink)/18%)} .lbl{} .lbl.reply{border-color:color-mix(in srgb,var(--status-ready) 40%,transparent)} .lbl.esc{border-color:color-mix(in srgb,var(--status-wait) 45%,transparent)} .lbl.blk{border-color:color-mix(in srgb,var(--status-err) 40%,transparent)} .ib-esc{border-color:color-mix(in srgb,var(--status-wait) 45%,transparent);background:color-mix(in srgb,var(--status-wait) 8%,transparent);} .ib-draft{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .ib-back{background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%);} /* review */ .rv-step{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .rv-diff .ln.add{background:color-mix(in srgb,var(--status-ready) 12%,transparent);color:#2E6B47} .rv-diff .ln.del{background:color-mix(in srgb,var(--status-err) 9%,transparent);color:#A44A38;text-decoration-color:color-mix(in srgb,var(--status-err) 55%,transparent)} .rv-bar{background:var(--barglass);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-top-color:var(--hair);box-shadow:0 -6px 20px -8px rgb(var(--sh-ink)/14%)} .rv-check{border-bottom-color:var(--sep)} .rv-assembling{background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} /* outcomes */ .oc-range{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh);} .oc-range span{} .oc-range span.on{background:var(--card-bg);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%),1px 3px 8px -2px rgb(var(--sh-ink)/18%)} .oc-kpis .k{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .oc-row{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);transition:box-shadow .18s,transform .18s} .oc-row:hover{background:var(--card-bg);border-color:var(--card-bd);box-shadow:var(--card-sh-hi);transform:translateY(-1px)} /* account */ .ac-head .pill{border-color:color-mix(in srgb,var(--signal) 45%,transparent);} .ac-next{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .ac-fire,.ac-stk{border-bottom-color:var(--sep)} /* skills */ /* V1 bare-class collision — platform/styles.css `.top` (dark glass topbar) leaks into .sk-card .top; `.list` ground leaks into popover lists */ .sk-card .top{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto} .sk-card .top::after{display:none} .a2-pal .list,.a2-slash .list{background:transparent} .sk-card{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .sk-card.open{border-color:var(--card-bd)} .sk-card .detail{border-top-color:var(--sep)} .sk-lib{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .sk-byo{border-color:var(--hair-h);background:var(--dashfill);} .spec-chip{background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/8%)} .spec-chip.open{border-color:color-mix(in srgb,var(--signal) 45%,transparent)} .md-spec{background:var(--dashfill);border-color:var(--hair);} .md-spec-badge{} .md-spec-badge.saved{border-color:color-mix(in srgb,var(--status-ready) 45%,transparent)} .md-spec-badge.err{border-color:color-mix(in srgb,var(--status-err) 45%,transparent)} /* autonomy */ .au-kill{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .au-kill.on{border-color:color-mix(in srgb,var(--status-err) 50%,transparent);background:color-mix(in srgb,var(--status-err) 6%,var(--bg-1))} .au-row,.au-skill,.au-dnc{border-bottom-color:var(--sep)} .au-seg{background:var(--well-bg);border-color:transparent;box-shadow:var(--well-sh);} .au-seg span{} .au-seg span.on{background:var(--card-bg);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%),1px 3px 8px -2px rgb(var(--sh-ink)/18%)} .au-slider input::-webkit-slider-thumb,.ob-floor input::-webkit-slider-thumb{box-shadow:0 1px 3px rgb(var(--sh-ink)/30%),0 3px 8px -2px rgb(var(--sh-ink)/25%)} .au-guide{border-color:var(--hair-h);} /* onboarding */ .ob-chips span{background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%),1px 3px 7px -2px rgb(var(--sh-ink)/14%);} .ob-chips span.on{border-color:var(--signal);background:var(--signal-soft)} .ob-inboxes div,.ob-skills div{background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-sh);} .ob-skills div.on{border-color:var(--signal)} .ob-dots i{background:var(--dotoff)} .ob-dots i.on{background:var(--signal)} /* settings + right panel + misc */ .av-picker .cell{background:var(--bg-2);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%)} .av-picker .cell.on{border-color:var(--signal)} .av-picker{border-bottom-color:var(--sep)} .a2-right .fbtn{} .a2-right .fbtn.set{border-color:color-mix(in srgb,var(--signal) 45%,transparent)} .a2-right .a2-bgrow .ktag{} .a2-warncard.ok{border-color:color-mix(in srgb,var(--status-ready) 45%,transparent)} .byok-err{border-bottom-color:var(--sep)} .byok-row{border-bottom-color:var(--sep)} /* ════════════════════════════════════════════════════════════ DARK MODE — same philosophy: elevation by layered shadow + rim light, wells, frost. html[data-mode="dark"] ════════════════════════════════════════════════════════════ */ html[data-mode="dark"]{ color-scheme:dark; --bg:#1B1712;--bg-1:#241F18;--bg-2:#2B251C;--bg-3:#332C22; --hair:#352E23;--hair-2:#403828;--hair-h:#4E4433; --fg:#EFE9DD;--fg-2:#B5AC9C;--fg-3:#8A8172;--fg-4:#635B4D; --status-run:#D97B4A;--status-ready:#6FC18F;--status-wait:#D6B46A;--status-done:#635B4D;--status-err:#E0604A; --info:#69A8FF;--sh-ink:8 6 3;--ascii-base:#7A7161; --a1:18%;--a2:38%;--a3:52%; --hov:rgb(255 255 255/.05);--hov2:rgb(255 255 255/.06); --line:rgb(255 255 255/.12);--sep:rgb(255 255 255/.07);--sep2:rgb(255 255 255/.09); --pane:rgb(18 16 12/.55);--pane-bd:rgb(255 255 255/.08); --chipglass:rgb(24 21 16/.66);--barglass:rgb(26 22 17/.72);--termbg:rgb(22 19 14/.92); --rowon:rgb(255 255 255/.07);--dashfill:rgb(255 255 255/.035);--dotoff:rgb(255 255 255/.14); --navtint:rgb(0 0 0/.22);--sidetint:rgb(0 0 0/.18);--sidetint2:rgb(0 0 0/.28); } html[data-mode="dark"][data-temp="cool"]{ --bg:#14181E;--bg-1:#1C2129;--bg-2:#232A34;--bg-3:#2A323E; --hair:#2C343F;--hair-2:#364050;--hair-h:#445062; --fg:#E8EDF4;--fg-2:#A9B3C2;--fg-3:#7E8898;--fg-4:#59636F; --status-done:#59636F;--sh-ink:2 5 10;--ascii-base:#6E7A8C; } html[data-mode="dark"][data-temp="neutral"]{ --bg:#171716;--bg-1:#201F1E;--bg-2:#272625;--bg-3:#2E2D2B; --hair:#31302E;--hair-2:#3C3A37;--hair-h:#4A4844; --fg:#ECEAE6;--fg-2:#B0ADA7;--fg-3:#85827C;--fg-4:#5E5B56; --status-done:#5E5B56;--sh-ink:4 4 4;--ascii-base:#75726B; } html[data-mode="dark"][data-shadow="soft"]{--a1:12%;--a2:26%;--a3:38%} html[data-mode="dark"][data-shadow="deep"]{--a1:26%;--a2:52%;--a3:68%} /* materials — rim light replaces bright borders; shadows go black */ html[data-mode="dark"],html[data-mode="dark"][data-mat="float"]{ --card-bg:var(--bg-1); --card-bd:rgb(255 255 255/.09); --card-sh:inset 0 1px 0 rgb(255 255 255/.06),1px 2px 3px rgb(var(--sh-ink)/var(--a1)),7px 12px 24px -8px rgb(var(--sh-ink)/var(--a2)),18px 30px 56px -18px rgb(var(--sh-ink)/var(--a3)); --card-sh-hi:inset 0 1px 0 rgb(255 255 255/.09),2px 3px 4px rgb(var(--sh-ink)/var(--a1)),10px 16px 30px -8px rgb(var(--sh-ink)/var(--a2)),24px 40px 70px -20px rgb(var(--sh-ink)/var(--a3)); --pop-bg:var(--bg-2); --well-bg:rgb(0 0 0/.32); --well-sh:inset 2px 3px 6px rgb(0 0 0/.5),inset -1px -1px 2px rgb(255 255 255/.05); --card-blur:none; } html[data-mode="dark"][data-mat="pillow"]{ --card-bg:linear-gradient(145deg,var(--bg-2),var(--bg-1)); --card-bd:transparent; --card-sh:-6px -6px 14px rgb(255 255 255/.045),7px 8px 18px rgb(var(--sh-ink)/var(--a2)),18px 22px 44px -14px rgb(var(--sh-ink)/var(--a2)); --card-sh-hi:-8px -8px 18px rgb(255 255 255/.06),10px 12px 26px rgb(var(--sh-ink)/var(--a2)),22px 30px 54px -16px rgb(var(--sh-ink)/var(--a3)); --pop-bg:var(--bg-1); --well-bg:var(--bg); --well-sh:inset 3px 3px 7px rgb(0 0 0/.55),inset -3px -3px 7px rgb(255 255 255/.05); --card-blur:none; } html[data-mode="dark"][data-mat="glass"]{ --card-bg:rgb(255 255 255/.06); --card-bd:rgb(255 255 255/.14); --card-sh:inset 0 1px 0 rgb(255 255 255/.16),inset 0 -1px 0 rgb(255 255 255/.05),0 2px 4px rgb(var(--sh-ink)/var(--a1)),8px 14px 30px -10px rgb(var(--sh-ink)/var(--a2)),20px 32px 60px -20px rgb(var(--sh-ink)/var(--a3)); --card-sh-hi:inset 0 1px 0 rgb(255 255 255/.2),inset 0 -1px 0 rgb(255 255 255/.06),0 3px 6px rgb(var(--sh-ink)/var(--a1)),12px 18px 36px -10px rgb(var(--sh-ink)/var(--a2)),24px 38px 66px -20px rgb(var(--sh-ink)/var(--a3)); --pop-bg:rgb(23 23 25/.8); --well-bg:rgb(0 0 0/.28); --well-sh:inset 1px 2px 5px rgb(0 0 0/.45),inset 0 -1px 0 rgb(255 255 255/.08); --card-blur:blur(18px) saturate(140%); } /* moonlight streak — same geometry, gentler */ html[data-mode="dark"][data-streak="on"] body::after{ opacity:.55; background: radial-gradient(120% 90% at 10% -12%,rgb(255 255 255/.28),transparent 55%), linear-gradient(112deg,transparent 30%,rgb(255 255 255/.3) 42%,rgb(255 255 255/.08) 54%,transparent 61%), linear-gradient(112deg,transparent 58%,rgb(0 0 0/.28) 78%,transparent 97%); } /* scrollbars + diff semantics */ html[data-mode="dark"] *{scrollbar-color:rgb(255 255 255/.2) transparent} html[data-mode="dark"] *::-webkit-scrollbar-thumb{background:rgb(255 255 255/.13);background-clip:content-box} html[data-mode="dark"] .rv-diff .ln.add{color:#A9D9BC} html[data-mode="dark"] .rv-diff .ln.del{color:#D9A49A} html[data-mode="dark"] .a2-userchip .av{background:radial-gradient(circle at 30% 30%,var(--signal),#4A1E0C)} /* radius decision reverted — base sharp system (3-8px) applies. Two keeps: */ .a2-send,.a2-send.ready{} .a2-thread > .a2-amsg,.a2-thread > .a2-agentmsg,.a2-thread > .a2-tools,.a2-thread > .a2-toolcall,.a2-thread > .a2-agentsteps,.a2-thread > .a2-typing{} /* ── RADIUS RULING · restored original partially-rounded system ── skin adds no radii; net-new skin elements sized to that scale */ .a2-thread > .a2-amsg,.a2-thread > .a2-agentmsg,.a2-thread > .a2-tools,.a2-thread > .a2-toolcall,.a2-thread > .a2-agentsteps,.a2-thread > .a2-typing{border-radius:8px} .a2-fire,.ib-acts .fire,.rv-changes .fire,.ac-next .fire{border-radius:7px} /* wordmark plate (.a2-wmplate) removed — operator ruling 2026-07-19: the W glyph plate didn't fit the platform; assets/w-glyph-*.png stay parked */ /* mode flip — a physical inset switch: sun-well in light, moon-well in dark */ .ib.mode-flip{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--well-bg);box-shadow:var(--well-sh)} .ib.mode-flip:hover{background:var(--well-bg)} .ib.mode-flip .mf-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFE9A8,#E8B84B 58%,#C9942E);box-shadow:0 1px 3px rgb(var(--sh-ink)/35%),0 0 8px rgb(232 184 75/.55);transition:background .25s,box-shadow .25s,transform .35s} html[data-mode="dark"] .ib.mode-flip .mf-dot{background:radial-gradient(circle at 62% 34%,#F4F1E8,#B9B4A6 55%,#8E897B);box-shadow:0 1px 3px rgb(0 0 0/.6),inset -2px -2px 3px rgb(0 0 0/.25);transform:rotate(180deg)} /* ── 15 · REPORTS (net-new route · light skin · dithered charts) ── */ .rp-wrap{height:100%;overflow:auto;padding:28px 34px 60px;scrollbar-gutter:stable} .rp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1180px;margin:0 auto 20px} .rp-head h1{margin:0 0 6px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:28px;letter-spacing:.01em;line-height:1;color:var(--fg);text-shadow:0 0 4px var(--bg),0 0 9px var(--bg)} .rp-head .sub{margin:0;color:var(--fg-3);font-size:12.5px} .rp-tools{display:flex;align-items:center;gap:10px} .rp-export{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:7px;cursor:pointer;color:var(--fg-2);background:var(--bg-2);border:1px solid var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/10%),1px 3px 7px -2px rgb(var(--sh-ink)/14%)} /* range seg — §6's grid equalization sizes the slots; keep them roomy (36px min beats the widest label's max-content) and drop the base seg's rail margin in this toolbar row */ .rp-range{margin:0} .rp-range button{min-width:36px} .rp-export:hover{color:var(--fg)} .rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1180px;margin:0 auto 14px} .rp-kpi{padding:14px 16px 12px;background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-sh);border-radius:8px;-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);min-width:0} .rp-kpi .k{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} .rp-kpi .row{display:flex;align-items:baseline;gap:8px} .rp-kpi .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;color:var(--fg)} .rp-kpi .d{font-family:var(--f-mono);font-size:9.5px;color:var(--status-ready)} .rp-kpi canvas{width:100%;height:34px;display:block;margin-top:6px} .rp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;max-width:1180px;margin:0 auto} .rp-card{padding:16px 18px;background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-sh);border-radius:8px;-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);min-width:0} .rp-card h2{margin:0 0 3px;font-size:13px;font-weight:650;color:var(--fg)} .rp-card .hint{margin:0 0 12px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)} .rp-flow{grid-column:span 8} .rp-mix{grid-column:span 4} .rp-skillbars{grid-column:span 5} .rp-tablecard{grid-column:span 7} .rp-flow canvas{width:100%;height:238px;display:block} .rp-mix canvas{width:100%;height:196px;display:block;margin:2px 0 6px} .rp-skillbars canvas{width:100%;height:228px;display:block} .rp-legend{display:flex;gap:14px;margin-top:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);flex-wrap:wrap} .rp-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:-1px} .rp-table{width:100%;border-collapse:collapse;font-size:12px} .rp-table th{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);text-align:left;font-weight:500;padding:6px 8px;border-bottom:1px solid var(--sep)} .rp-table td{padding:8px;border-bottom:1px solid var(--sep);color:var(--fg-2)} .rp-table td.b{color:var(--fg);font-weight:600} .rp-table td.num{font-family:var(--f-mono);font-size:11px} .rp-table tr:last-child td{border-bottom:0} .rp-table canvas{width:84px;height:20px;display:block} .rp-auto{font-family:var(--f-mono);font-size:9px;padding:2px 7px;border-radius:6px;background:var(--signal-soft);color:var(--signal);white-space:nowrap} /* chart scrub tooltip — DitherCharts engagement layer (kit reaction): glides between snap points via the left/top transition */ .dk-tip{position:fixed;z-index:200;pointer-events:none;min-width:88px;padding:7px 9px 6px;border-radius:7px;background:var(--pop-bg);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);border:1px solid var(--line);box-shadow:var(--pop-sh);font-family:var(--f-mono);font-size:10px;color:var(--fg-2);opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:left .14s cubic-bezier(.3,1,.4,1),top .14s cubic-bezier(.3,1,.4,1),opacity .12s} .dk-tip.on{opacity:1} .dk-tip.below{transform:translate(-50%,14px)} .dk-tip .h{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin-bottom:4px} .dk-tip .r{display:flex;align-items:center;gap:6px;margin-top:2px} .dk-tip .r i{width:7px;height:7px;border-radius:2px;flex:none} .dk-tip .r .n{color:var(--fg-3);margin-right:auto} .dk-tip .r b{font-family:var(--f-num,var(--f-mono));font-weight:700;color:var(--fg);margin-left:10px} @media (prefers-reduced-motion:reduce){.dk-tip{transition:opacity .12s}} @media(max-width:1100px){.rp-kpis{grid-template-columns:1fr 1fr}.rp-flow,.rp-mix,.rp-skillbars,.rp-tablecard{grid-column:span 12}} @media(max-width:640px){.rp-kpis{grid-template-columns:1fr}.rp-wrap{padding:20px 16px 50px}} /* ── 16 · GLASS MOTION — micro-interactions ────────────── */ /* autonomy segs join the puck system (slots equalized) */ .au-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr} .au-seg span{text-align:center;position:relative;z-index:1;transition:color .2s} @supports selector(.au-seg:has(span.on)){ .au-seg span.on{background:transparent;box-shadow:none} .au-seg::before{ content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;box-sizing:border-box; width:calc((100% - 12px)/3);border-radius:inherit; background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.8); -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%); box-shadow:inset 0 1px 0 rgb(255 255 255/.95),0 1px 2px rgb(var(--sh-ink)/12%),2px 4px 10px -3px rgb(var(--sh-ink)/22%); transition:transform .32s cubic-bezier(.3,1.35,.35,1); } .au-seg:has(span:nth-child(2):last-child)::before{width:calc((100% - 9px)/2)} .au-seg:has(span:nth-child(2).on)::before{transform:translateX(calc(100% + 3px))} .au-seg:has(span:nth-child(3).on)::before{transform:translateX(calc(200% + 6px))} html[data-mode="dark"] .au-seg::before{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.14);box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 1px 2px rgb(var(--sh-ink)/30%),2px 4px 10px -3px rgb(var(--sh-ink)/45%)} } /* inbox filter pills — sheen sweeps the pill that becomes active (longhands re-declared post-sweep) */ .ib-filters .f.on{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border-color:var(--card-bd);box-shadow:0 1px 2px rgb(var(--sh-ink)/12%),1px 3px 8px -2px rgb(var(--sh-ink)/18%)} .ib-filters .f.on{background-image:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.7) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat} html[data-mode="dark"] .ib-filters .f.on{background-image:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.2) 50%,transparent 65%)} /* popovers — frost condenses in (glass material); toasts also get a landing sheen. Honors the base starvation-safe contract: opacity ramps stay the base's own, frost ramp starts at blur(3px) — never hides content, no transforms. */ @media (prefers-reduced-motion:no-preference){ .ib-filters .f.on{animation:skinSheen .5s ease .05s} .a2-toast{background-image:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.6) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat;animation:a2-toast-in .26s cubic-bezier(.22,1,.36,1),skinSheen .55s ease .1s} html[data-mode="dark"] .a2-toast{background-image:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.16) 50%,transparent 65%)} html[data-mat="glass"] .a2-pal{animation:a2-pop-down .2s cubic-bezier(.22,1,.36,1),skinFrostIn .3s ease} html[data-mat="glass"] .a2-slash{animation:a2-pop-up .14s ease,skinFrostIn .3s ease} html[data-mat="glass"] .a2-menu.down{animation:a2-pop-down .14s ease,skinFrostIn .3s ease} html[data-mat="glass"] .a2-menu.up{animation:a2-pop-up .14s ease,skinFrostIn .3s ease} html[data-mat="glass"] .a2-settings,html[data-mat="glass"] .a2-keys,html[data-mat="glass"] .ob-card{animation:a2-modal-in .22s cubic-bezier(.22,1,.36,1),skinFrostIn .34s ease} html[data-mat="glass"] .a2-toast{animation:a2-toast-in .26s cubic-bezier(.22,1,.36,1),skinSheen .55s ease .1s,skinFrostIn .3s ease} } @keyframes skinSheen{from{background-position:130% 0}to{background-position:-130% 0}} @keyframes skinFrostIn{from{-webkit-backdrop-filter:blur(3px) saturate(105%);backdrop-filter:blur(3px) saturate(105%)}}