/* Xurface Discern - app design system. Xurface matte-blue + severity semantics,
   IBM Plex Sans/Mono, Fraunces for the brand voice. Light + dark. */

:root{
  --xur:#3B6EA3; --xur-deep:#2f5c8c; --xur-ink:#24466b; --xur-soft:#e9f0f8;
  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb; --raise:#ffffff; --sunken:#eef2f6;
  --ink:#16212c; --muted:#5b6b7a; --faint:#93a2b1;
  --line:#e2e8ee; --line-2:#eef2f6; --hair:#d9e1e9;
  --lo:#1f9d57; --lo-bg:#e6f6ec; --me:#2f6fdb; --me-bg:#e9f0fd;
  --hi:#c9781a; --hi-bg:#fbf0df; --sv:#d63b41; --sv-bg:#fbe7e7;
  --warn:#c9781a; --ok:#1f9d57;
  --bezel:#0c1219; --bezel-2:#1a232e; --stage:#c7d0da;
  --sh-sm:0 1px 2px rgba(20,40,60,.06),0 1px 3px rgba(20,40,60,.05);
  --sh:0 6px 22px -14px rgba(20,45,70,.5),0 2px 6px -3px rgba(20,45,70,.12);
  --sh-lg:0 22px 50px -24px rgba(15,35,60,.55);
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Fraunces",Iowan Old Style,Georgia,serif;
  --r:16px; --r-lg:20px;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --bg:#0b1017; --surface:#141d27; --surface-2:#0f1822; --raise:#1a2530; --sunken:#0c141d;
  --ink:#e9eef4; --muted:#9aabbb; --faint:#65788a; --xur-soft:#16232f; --xur-ink:#a9c6e6;
  --line:#243140; --line-2:#1a2531; --hair:#22303e;
  --lo-bg:#0f2519; --me-bg:#112038; --hi-bg:#2a1f0f; --sv-bg:#2c1416;
  --stage:#05090d; --sh:0 8px 26px -16px rgba(0,0,0,.7),0 2px 6px -3px rgba(0,0,0,.4);
  --sh-lg:0 26px 60px -26px rgba(0,0,0,.8); --sh-sm:0 1px 2px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --bg:#0b1017; --surface:#141d27; --surface-2:#0f1822; --raise:#1a2530; --sunken:#0c141d;
  --ink:#e9eef4; --muted:#9aabbb; --faint:#65788a; --xur-soft:#16232f; --xur-ink:#a9c6e6;
  --line:#243140; --line-2:#1a2531; --hair:#22303e;
  --lo-bg:#0f2519; --me-bg:#112038; --hi-bg:#2a1f0f; --sv-bg:#2c1416;
  --stage:#05090d; --sh:0 8px 26px -16px rgba(0,0,0,.7),0 2px 6px -3px rgba(0,0,0,.4);
  --sh-lg:0 26px 60px -26px rgba(0,0,0,.8); --sh-sm:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer;color:inherit}
input{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--xur);outline-offset:2px;border-radius:6px}

/* ---------------- studio (web preview) ---------------- */
.studio{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(1100px 560px at 50% -12%, color-mix(in srgb,var(--xur) 14%, var(--stage)), var(--stage))}
.studio-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 18px;
  background:color-mix(in srgb,var(--stage) 82%, #000 8%);border-bottom:1px solid rgba(255,255,255,.06);color:#e8eef4;position:sticky;top:0;z-index:20}
.studio-brand{display:flex;align-items:center;gap:9px;font-weight:600}
.studio-brand .mk{width:22px;height:22px;color:#cfe0f2}
.studio-brand b{font-family:var(--serif);font-weight:600;letter-spacing:.2px;font-size:1.02rem}
.studio-brand small{color:#8fa4b8;font-weight:500;font-size:.72rem}
.studio-bar .grow{flex:1}
.studio-bar label{color:#8fa4b8;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;margin-right:2px}
.studio-select{background:rgba(255,255,255,.07);color:#e8eef4;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 11px;font-size:.82rem;font-weight:500}
.stage{flex:1;display:grid;place-items:center;padding:26px;overflow:auto}
.stage-scale{transform:scale(var(--scale,1));transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}

.device{position:relative;background:var(--bezel);box-shadow:var(--sh-lg)}
.device .screen{position:relative;overflow:hidden;background:var(--bg)}
.device.phone{border-radius:54px;padding:13px}
.device.phone .screen{border-radius:41px;width:var(--w);height:var(--h)}
.device.tablet{border-radius:32px;padding:15px}
.device.tablet .screen{border-radius:18px;width:var(--w);height:var(--h)}
.device.laptop{border-radius:16px 16px 0 0;padding:13px 13px 0}
.device.laptop .screen{border-radius:6px;width:var(--w);height:var(--h)}
.device.laptop::after{content:"";position:absolute;left:-7%;right:-7%;bottom:-18px;height:18px;background:linear-gradient(var(--bezel-2),var(--bezel));border-radius:0 0 13px 13px}
.device.laptop .notch-base{position:absolute;left:40%;right:40%;bottom:-18px;height:5px;background:rgba(255,255,255,.08);border-radius:0 0 5px 5px;z-index:2}
.cam{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;justify-content:center;pointer-events:none}
.cam .notch{height:24px;width:140px;background:var(--bezel);border-radius:0 0 15px 15px}
.cam .hole{margin-top:9px;height:9px;width:9px;background:#05090d;border-radius:99px}
[data-plat="windows"] .cam{display:none}

/* ---------------- app shell ---------------- */
.app-fill{position:fixed;inset:0;background:var(--bg)}
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);font-size:15px;line-height:1.5;color:var(--ink)}
/* Safe areas.
   We target API 36, where Android draws the app edge to edge under the status
   and navigation bars whether it wants to or not, and iOS has always done this
   with viewport-fit=cover. So the insets are not decoration: without them the
   header sits under the clock and the tab bar sits under the back button, where
   it cannot even be tapped.

   One set of variables, so the simulated phone in the preview and a real handset
   are driven by the same rules. The simulator substitutes plausible numbers
   because env() is zero in a desktop browser. */
.app{
  /* Android WebView maps env(safe-area-inset-*) to display cutouts only, not to
     the status and navigation bars, so on a phone with no notch it reports zero
     while the bars still cover the app. The safe-area plugin reads the real
     window insets and publishes them as --safe-area-inset-*; env() remains the
     fallback, which is what iOS and desktop use. */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
.device.phone .app{--sat:38px;--sab:22px}
.device.tablet .app{--sat:18px;--sab:14px}
.device.laptop .app{--sat:0px;--sab:0px}
.safe-top{display:none}

.topbar{display:flex;align-items:center;gap:10px;
  padding:calc(11px + var(--sat)) calc(16px + var(--sar)) 11px calc(16px + var(--sal));background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line-2);position:relative;z-index:5}
.topbar .mk{width:23px;height:23px;color:var(--xur);flex:none}
.topbar .title{font-weight:650;font-size:1.06rem;letter-spacing:-.01em}
.topbar .spacer{flex:1}
.envchip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.02em;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line)}
.envchip.test{color:var(--hi);background:var(--hi-bg);border-color:transparent}
.envchip.live{color:var(--lo);background:var(--lo-bg);border-color:transparent}
.envchip .off{width:6px;height:6px;border-radius:99px;background:var(--faint)}
.iconbtn{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);display:grid;place-items:center}
.iconbtn svg{width:20px;height:20px}
.iconbtn .count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--sv);color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}

.body{flex:1;display:flex;min-height:0}
.screen-wrap{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain}
.wrap{padding:16px 16px 30px;display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.rail{display:none}
.app.wide .rail{display:flex;flex-direction:column;gap:3px;width:220px;flex:none;padding:16px 12px;background:var(--surface);border-right:1px solid var(--line-2)}
.app.wide .rail a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:var(--muted);font-weight:550;font-size:.94rem;text-decoration:none}
.app.wide .rail a svg{width:20px;height:20px}
.app.wide .rail a[aria-current="page"]{background:var(--xur-soft);color:var(--xur-ink)}
.app.wide .rail .railcount{margin-left:auto;font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--sv);background:var(--sv-bg);padding:2px 7px;border-radius:99px}
.app.wide .railgrow{flex:1}
.app.wide .railuser{padding:10px 13px;color:var(--faint);font-size:.82rem;border-top:1px solid var(--line-2)}
.tabbar{display:flex;background:color-mix(in srgb,var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-2);
  padding:6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal))}
/* a tap target stays a tap target even when the inset is generous */
.tabbar button{min-height:46px}
.app.wide .tabbar{display:none}
.tabbar button{position:relative;flex:1;border:0;background:transparent;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border-radius:11px;font-size:.64rem;font-weight:600}
.tabbar button svg{width:23px;height:23px}
.tabbar button[aria-current="page"]{color:var(--xur)}
/* how many are waiting, on the tab that holds them: the number is the news */
.tabbar .tabcount{position:absolute;top:2px;left:calc(50% + 7px);min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--sv);color:#fff;font-size:.62rem;font-weight:700;line-height:18px;
  text-align:center;font-variant-numeric:tabular-nums;border:2px solid var(--surface);box-sizing:content-box}
[dir="rtl"] .tabbar .tabcount{left:auto;right:calc(50% + 7px)}

/* pull down to refresh: a disc that follows the finger and turns as it comes */
.pull{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 58px);z-index:60;width:38px;height:38px;
  margin-left:-19px;border-radius:99px;background:var(--raise,var(--surface));border:1px solid var(--line);
  box-shadow:var(--sh-lg);display:grid;place-items:center;color:var(--faint);pointer-events:none;
  opacity:0;transform:translateY(calc(var(--d,0px) - 46px)) scale(.8);
  transition:opacity .15s,color .15s,transform .18s cubic-bezier(.2,.8,.2,1)}
.pull.on{opacity:1;transform:translateY(calc(var(--d,0px) - 46px)) scale(1)}
.pull .pullic{display:grid;place-items:center;transform:rotate(var(--r,0deg))}
.pull svg{width:19px;height:19px}
.pull.ready{color:var(--xur)}
.pull.spin{color:var(--xur)}
.pull.spin .pullic{animation:spin .8s linear infinite}
@media (prefers-reduced-motion: reduce){.pull.spin .pullic{animation:none}}

/* ---------------- headings + generic ---------------- */
/* One line, and a second only when it carries state. A phone screen is 800px
   and the first thing on it should be the thing you came to do. */
.scrhead{display:flex;flex-direction:column;gap:1px;margin:2px 0 10px}
.scrhead h1{font-size:1.24rem;margin:0;letter-spacing:-.02em;text-wrap:balance;font-weight:650;line-height:1.25}
/* the inbox leads with how many are waiting, which is the whole point of it */
.scrhead.lead h1{font-size:1.34rem}
.eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sub{color:var(--muted);font-size:.86rem;margin:0;line-height:1.45}
.loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted);padding:70px 20px;font-size:.9rem}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--xur);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:600;font-size:.94rem;letter-spacing:.005em;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .06s,background .15s}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.big{padding:13px 16px;font-size:1rem}
.btn-primary{background:var(--xur);color:#fff;box-shadow:0 6px 16px -10px color-mix(in srgb,var(--xur) 80%, #000)}
.btn-primary:hover{background:var(--xur-deep)}
.btn-deny{flex:1;background:var(--surface-2);color:var(--sv);border:1px solid var(--line)}
.btn-warn{background:var(--hi-bg);color:var(--hi)}
.btn-ghost{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 24px;color:var(--muted)}
.empty-mk{width:52px;height:52px;color:var(--faint);opacity:.55;margin-bottom:4px}
.empty-mk svg{width:100%;height:100%}
.empty-t{font-weight:650;font-size:1.05rem;color:var(--ink)}
.empty p{margin:0 0 8px;max-width:34ch;font-size:.9rem}
.thin-empty{color:var(--muted);font-size:.9rem;padding:8px 2px 14px}

/* ---------------- intent cards ---------------- */
.cards{display:flex;flex-direction:column;gap:13px}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:15px 16px 16px;position:relative;overflow:hidden;animation:cardin .35s cubic-bezier(.2,.8,.2,1) both}
.icard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sev)}
@keyframes cardin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.icard-top{display:flex;align-items:center;gap:11px}
.slogo{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--sunken);color:var(--muted)}
.slogo svg{width:18px;height:18px}
.slogo.grad,.slogo.big.grad,.slogo.xl.grad{background:linear-gradient(140deg,#5f96cf,#2f5c8c);color:#fff}
.slogo.big{width:44px;height:44px;border-radius:13px}.slogo.big svg{width:22px;height:22px}
.slogo.xl{width:52px;height:52px;border-radius:15px}.slogo.xl svg{width:26px;height:26px}
.slogo.sm{width:26px;height:26px;border-radius:8px}.slogo.sm svg{width:14px;height:14px}
.iwho{min-width:0;flex:1}
.isol{font-weight:650;font-size:1rem;letter-spacing:-.01em;line-height:1.15}
.iagent{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;
  margin-top:2px;min-width:0}
.iagent>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sevtag{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.06em;padding:4px 9px;border-radius:8px;color:var(--sev);background:var(--sevb)}
.iact{font-size:1.12rem;font-weight:650;letter-spacing:-.01em;margin:11px 0 8px;text-wrap:balance}
.rchips{display:flex;flex-wrap:wrap;gap:6px}
.rchip{font-size:.7rem;font-weight:600;color:var(--c);background:var(--b);border-radius:99px;padding:3px 9px}
.ireason{color:var(--muted);font-size:.84rem;display:flex;gap:7px;line-height:1.45}
.ireason + .ireason{margin-top:-4px}
.ireason::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--sev);margin-top:7px;flex:none}
.idetails{margin-top:11px;background:var(--sunken);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.drow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line-2)}
.drow:last-child{border-bottom:0}
.dk{font-family:var(--mono);font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;min-width:80px}
.dv{font-weight:550;font-size:.86rem;flex:1;color:var(--ink)}
.dv-in{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:.86rem;font-weight:550}
.iacts{display:flex;gap:10px;margin-top:15px}

/* ---------------- timeline ---------------- */
.stpill{font-family:var(--mono);font-size:.62rem;font-weight:600;padding:3px 8px;border-radius:7px;letter-spacing:.02em;text-transform:capitalize}
.st-allowed{color:var(--lo);background:var(--lo-bg)}.st-approved{color:var(--me);background:var(--me-bg)}
.st-edited{color:var(--hi);background:var(--hi-bg)}.st-denied{color:var(--sv);background:var(--sv-bg)}
.st-active{color:var(--lo);background:var(--lo-bg)}.st-paused{color:var(--hi);background:var(--hi-bg)}
.ref{font-family:var(--mono);font-size:.62rem;color:var(--faint)}

/* ---------------- solutions ---------------- */
.secrow{display:flex;align-items:baseline;gap:8px;margin:16px 2px 7px}
.sech{font-size:.82rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0}
.secn{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.sollist{display:flex;flex-direction:column;gap:9px}
.solrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:var(--sh-sm);transition:border-color .15s,transform .06s}
.solrow:hover{border-color:var(--hair)}.solrow:active{transform:translateY(1px)}
.solm{flex:1;min-width:0}
.soln{font-weight:650;font-size:1rem;letter-spacing:-.01em}
.solmeta{color:var(--faint);font-size:.78rem;font-family:var(--mono)}
.solasks{color:var(--muted);font-size:.82rem;margin-top:3px}
.solasks.quiet{color:var(--faint)}
.solend{display:flex;align-items:center;gap:8px;color:var(--faint)}
.solend svg{width:19px;height:19px}
.catgrid{display:grid;grid-template-columns:1fr;gap:9px}
/* One tappable row, not a card with a full width button under it. Four of
   those filled the screen with four buttons that all said the same thing, and
   the card itself did nothing, which is the first thing anybody tries. */
.catcard{width:100%;text-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:15px;padding:12px;display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--sh-sm);transition:border-color .15s,transform .06s}
.catcard:active{transform:scale(.995)}
.catcard:hover{border-color:var(--xur)}
.catcard>.mark{flex:none}
.cattop{display:flex;align-items:center;gap:12px}
.catm{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start}
.catgo{flex:none;align-self:center;width:18px;height:18px;color:var(--faint);display:grid;place-items:center}
.catcard .catgo svg{width:18px;height:18px}
[dir="rtl"] .catgo svg{transform:scaleX(-1)}
.app.wide .catgrid{grid-template-columns:1fr 1fr}


.catn{font-weight:650;font-size:.98rem;letter-spacing:-.01em}
.catmeta{color:var(--faint);font-size:.76rem;font-family:var(--mono)}
.catd{color:var(--muted);font-size:.83rem;margin:2px 0 0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* solution detail */
.back{display:inline-flex;align-items:center;gap:2px;background:transparent;border:0;color:var(--muted);font-weight:600;font-size:.88rem;padding:2px 0 2px;margin-bottom:2px}
.back svg{width:18px;height:18px;transform:rotate(180deg)}
.soldhead{display:flex;align-items:center;gap:13px;margin:2px 0 6px}
.soldn{font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.soldsub{color:var(--muted);font-size:.84rem;font-family:var(--mono)}
.soldhead .stpill{margin-left:auto;font-size:.66rem;padding:5px 10px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-sm)}
.panelhd h3{margin:0;font-size:1rem;letter-spacing:-.01em}
.panelhd p{margin:3px 0 0;color:var(--muted);font-size:.84rem}
.apwrap{display:flex;flex-direction:column;gap:11px}
.aprow{display:flex;align-items:center;gap:12px}
.aplab{flex:1;min-width:0;font-weight:550;font-size:.9rem}
.apseg{display:inline-flex;background:var(--sunken);border:1px solid var(--line-2);border-radius:11px;padding:3px;gap:2px}
.apbtn{border:0;background:transparent;color:var(--muted);font-size:.72rem;font-weight:600;padding:6px 9px;border-radius:8px;min-width:38px;transition:background .15s,color .15s}
.apbtn.on.lv-LOW{background:var(--lo);color:#fff}.apbtn.on.lv-MEDIUM{background:var(--me);color:#fff}
.apbtn.on.lv-HIGH{background:var(--hi);color:#fff}.apbtn.on.lv-SEVERE{background:var(--sv);color:#fff}
.agentblock{padding:12px 0;border-top:1px solid var(--line-2)}
.agentblock:first-of-type{border-top:0;padding-top:2px}
.agentn{font-weight:600;font-size:.92rem;margin-bottom:8px}
.abchips{display:flex;flex-wrap:wrap;gap:7px}
.abchip{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);border:1px solid var(--line-2);border-radius:9px;padding:4px 9px}
.abk{font-family:var(--mono);font-size:.72rem;color:var(--ink)}
.absev{font-family:var(--mono);font-size:.6rem;font-weight:700}

/* ---------------- settings ---------------- */
.kv{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{font-weight:600}
.kv b.ok{color:var(--lo)} .kv b.warn{color:var(--hi)}
.envseg{display:inline-flex;background:var(--sunken);border:1px solid var(--line-2);border-radius:12px;padding:3px;gap:2px;align-self:flex-start}
.envseg button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:.85rem;padding:8px 18px;border-radius:9px}
.envseg button.on{background:var(--xur);color:#fff}
.motto{text-align:center;font-family:var(--serif);font-style:italic;color:var(--faint);font-size:1rem;margin:14px 0 4px}

/* ---------------- sign in ---------------- */
.signin{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:13px;padding:26px 24px;max-width:360px;margin:0 auto;width:100%}
.signin-mk{width:54px;height:54px;color:var(--xur);margin:0 auto}
.signin-mk svg{width:100%;height:100%}
.signin h1{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:0;text-align:center;letter-spacing:-.01em}
.signin-motto{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:.95rem;text-align:center;margin:-5px 0 4px;line-height:1.4}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.field input{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:11px;padding:9px 12px;
  /* 16px exactly: iOS zooms the whole page when a focused field is smaller */
  font-size:16px;line-height:1.25}
.signin-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--faint);font-size:.78rem}
.signin-note svg{width:16px;height:16px}

/* ---------------- overlays ---------------- */
#overlay{position:absolute;inset:0;pointer-events:none;z-index:40}
#overlay>*{pointer-events:auto}
.toast{position:absolute;left:12px;right:12px;top:var(--tt,12px);display:flex;align-items:center;gap:11px;
  background:var(--raise);border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh-lg);padding:12px 14px;
  transition:opacity .3s;animation:drop .34s cubic-bezier(.2,.8,.2,1)}
.device.phone .app .toast{top:44px}
.toast.ok{border-left:3px solid var(--lo)} .toast.warn{border-left:3px solid var(--hi)}
.toast .tm{min-width:0;font-size:.86rem}.toast .tm b{font-weight:650}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.scrim{position:absolute;inset:0;background:rgba(8,15,22,.5);display:grid;place-items:end center;animation:fade .18s ease}
.sheet{width:100%;background:var(--surface);border-radius:24px 24px 0 0;padding:24px 22px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -22px 55px -20px rgba(0,0,0,.45);animation:rise .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:10px}
.device.phone .sheet{padding-bottom:36px}
.faceic{width:60px;height:60px;border-radius:17px;margin:0 auto 4px;display:grid;place-items:center;background:var(--xur-soft);color:var(--xur-ink)}
.faceic svg{width:32px;height:32px}
.sheet h3{text-align:center;margin:0;font-size:1.14rem}
.sheet p{text-align:center;color:var(--muted);margin:0 0 8px;font-size:.88rem}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------------- pre-connect disclosure (what a solution can do) ---------- */
.panelhd h3 .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;margin-left:7px;
  border-radius:99px;font-family:var(--mono);font-size:.68rem;font-weight:700;vertical-align:middle}
.panelhd h3 .cnt.ask{color:var(--hi);background:var(--hi-bg)}
.panelhd h3 .cnt.run{color:var(--lo);background:var(--lo-bg)}
.abrow{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-top:1px solid var(--line-2)}
.abrow:first-of-type{border-top:0}
.abdot{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--c);background:var(--b);margin-top:1px}
.abdot svg{width:15px;height:15px}
.abm{flex:1;min-width:0}
.abt{font-weight:600;font-size:.93rem;line-height:1.3}
.abs{color:var(--muted);font-size:.78rem;margin-top:1px}
.abkey{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.abwhy{color:var(--faint);font-size:.78rem;margin-top:3px}
.abrow .sevtag{flex:none;margin-top:2px}
.consent-note{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:.83rem;margin:4px 2px 2px;line-height:1.45}
.consent-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--faint)}

/* ================== resilience, pagination and living states ==============
   The app must never look frozen. Every wait has a shape, every degraded
   state says what it is, and nothing silently fails.
   ========================================================================= */

/* ---- the connection strip ---- */
#netbar{display:none}
#netbar.has{display:block}
.netbar{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:.8rem;line-height:1.35;
  border-bottom:1px solid var(--line-2);animation:slidein .28s ease both}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.netbar b{font-weight:650;flex:none}
.netbar .nsub{color:inherit;opacity:.78;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.netbar .tic{display:grid;place-items:center;flex:none}
.netbar .tic svg{width:15px;height:15px}
.netbar.off{background:var(--hi-bg);color:var(--hi)}
.netbar.sync{background:var(--me-bg);color:var(--me)}
.netbar.demo{background:var(--sunken);color:var(--muted)}
.netbar.demo .dot{width:7px;height:7px;border-radius:99px;background:var(--me);flex:none;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nretry{margin-inline-start:auto;flex:none;border:1px solid currentColor;background:transparent;color:inherit;
  border-radius:99px;padding:3px 11px;font-size:.74rem;font-weight:600;opacity:.9}
.nretry:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.spin{animation:spin 1.1s linear infinite;transform-origin:50% 50%}

/* ---- skeletons: the shape of what is coming ---- */
.sk{display:block;border-radius:7px;background:linear-gradient(90deg,var(--sunken) 25%,var(--line-2) 37%,var(--sunken) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-eyebrow{width:110px;height:9px;margin-bottom:10px}
.sk-h1{width:180px;height:26px;margin-bottom:9px;border-radius:9px}
.sk-sub{width:70%;height:12px}
.sk-line{height:11px;margin:5px 0}
.sk-line.tall{height:17px;margin:12px 0 8px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w70{width:70%}.sk-line.w80{width:80%}
.sk-logo{width:30px;height:30px;border-radius:10px;flex:none}
.sk-logo.sm{width:26px;height:26px;border-radius:8px}
.sk-chip{display:inline-block;width:88px;height:20px;border-radius:99px;margin-inline-end:6px}
.sk-btn{flex:1;height:38px;border-radius:12px}
.sk-card{animation:cardin .4s ease both;animation-delay:var(--d,0ms)}
.sk-note{text-align:center;color:var(--faint);font-size:.8rem;padding:16px 0 4px}
.sk-review .abrow{align-items:center}

/* ---- a card leaving after a decision ---- */
.icard.settling,.arow.settling{pointer-events:none}
.icard.settling.approve,.arow.settling.approve{animation:settleok .34s cubic-bezier(.34,1.2,.64,1) both}
.icard.settling.deny,.arow.settling.deny{animation:settleno .34s cubic-bezier(.34,1.2,.64,1) both}
/* reflect leaves the same way a deny does: the action is not going ahead */
.icard.settling.reflect,.arow.settling.reflect{animation:settleno .34s cubic-bezier(.34,1.2,.64,1) both}
@keyframes settleok{to{opacity:0;transform:translateX(14px) scale(.97)}}
@keyframes settleno{to{opacity:0;transform:translateX(-14px) scale(.97)}}
[dir="rtl"] .icard.settling.approve,[dir="rtl"] .arow.settling.approve{animation-name:settleokR}
[dir="rtl"] .icard.settling.deny,[dir="rtl"] .arow.settling.deny,
[dir="rtl"] .icard.settling.reflect,[dir="rtl"] .arow.settling.reflect{animation-name:settlenoR}
@keyframes settleokR{to{opacity:0;transform:translateX(-14px) scale(.97)}}
@keyframes settlenoR{to{opacity:0;transform:translateX(14px) scale(.97)}}

/* ---- a decision made offline, waiting its turn ---- */
.iqueued{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;border-radius:12px;
  background:var(--sunken);color:var(--muted);font-size:.82rem;border:1px dashed var(--line)}
.iqueued svg{width:15px;height:15px;flex:none}

/* ---- load more ---- */
.more{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:14px 0 4px;padding:12px;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:.86rem;font-weight:600;transition:background .15s,color .15s}
.more:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.more:disabled{opacity:.7}
.more .tic svg{width:15px;height:15px}
.more-n{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--faint)}
.more-end{text-align:center;color:var(--faint);font-size:.78rem;padding:16px 0 6px}

/* ---- language picker ---- */
.langgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
.langb{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 11px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);text-align:start;transition:border-color .15s,background .15s}
.langb b{font-weight:600;font-size:.88rem}
.langb small{color:var(--faint);font-size:.68rem}
.langb.on{border-color:var(--xur);background:var(--xur-soft);color:var(--xur-ink)}
.langb.on small{color:inherit;opacity:.72}
.signin-langs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line-2)}
.signin-langs svg{width:15px;height:15px;color:var(--faint);margin-inline-end:3px}
.signin-langs button{border:0;background:transparent;color:var(--faint);font-size:.78rem;padding:3px 7px;border-radius:99px}
.signin-langs button.on{color:var(--xur-ink);background:var(--xur-soft);font-weight:600}

/* ---- toasts gain a queued variant and an icon slot ---- */
.toast .tic{display:grid;place-items:center;flex:none}
.toast .tic svg{width:16px;height:16px}
.toast.queued{border-color:var(--line);background:var(--surface)}

/* ================== right to left ==================
   Arabic reads the other way. Logical properties do most of the work; these
   are the places where a physical direction was baked in. */
[dir="rtl"] .solmeta,[dir="rtl"] .abs,[dir="rtl"] .awhen{direction:rtl}
/* a chevron that means "onward" has to point the way the language reads */
[dir="rtl"] .back svg,[dir="rtl"] .solend svg,[dir="rtl"] .fx svg,
[dir="rtl"] .gsolgo svg,[dir="rtl"] .gone svg{transform:scaleX(-1)}
[dir="rtl"] .iconbtn .count{right:auto;left:-5px}
[dir="rtl"] .app.wide .rail{border-right:0;border-left:1px solid var(--line-2)}
[dir="rtl"] .app.wide .rail .railcount{margin-left:0;margin-right:auto}
[dir="rtl"] .ref,[dir="rtl"] .abkey,[dir="rtl"] .more-n{direction:ltr;unicode-bidi:embed}
html[lang="ar"] body{font-family:"Noto Sans Arabic",var(--sans)}
html[lang="ar"] .studio-brand b,html[lang="ar"] h1,html[lang="ar"] .soldn{font-family:"Noto Sans Arabic",var(--serif)}

/* ---- horizontal containment ----
   A flex item defaults to min-width:auto, so an <input> (whose min-content
   width comes from its size attribute) refuses to shrink and pushes the whole
   card, the tab bar and the page past the viewport. Narrow phones showed the
   Approve button clipped off the right edge. Nothing may exceed the screen. */
.app-fill,.app,.screen-wrap,.body{max-width:100%;overflow-x:hidden}
.wrap{max-width:min(760px,100%);min-width:0;width:100%;box-sizing:border-box}
.cards,.icard,.tl,.sollist,.catgrid,.panel{min-width:0;max-width:100%}
.drow,.iwho,.solm,.abm,.catm{min-width:0}
.dv-in,.dv,.dk{min-width:0}
.dv-in{width:100%;box-sizing:border-box}
.dk{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv{overflow:hidden;text-overflow:ellipsis}
.iacts{min-width:0}
.iacts .btn{flex:1 1 0;min-width:0}
.isol,.iagent,.soln,.tlt,.catn,.soldn{overflow:hidden;text-overflow:ellipsis}
.iact{overflow-wrap:anywhere}
.rchips{flex-wrap:wrap}
.tabbar button{min-width:0;flex:1 1 0}
.tabbar button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.abchips{flex-wrap:wrap}
.abchip{max-width:100%;min-width:0}
.abchip .abk{overflow:hidden;text-overflow:ellipsis}
/* Arabic joins its letters: tracking and small caps break the script. */
html[lang="ar"] .eyebrow,html[lang="ar"] .envchip,html[lang="ar"] .stpill,
html[lang="ar"] .sech,html[lang="ar"] .sevtag,html[lang="ar"] .rchip{letter-spacing:0;text-transform:none}
html[lang="ar"] .eyebrow,html[lang="ar"] .sech{font-family:"Noto Sans Arabic",var(--sans)}

/* Content written by a developer (a solution's name, its description, an
   ability's wording) can be in any script, and it sits inside our chrome which
   follows the reader's language. Left alone, a Latin sentence inside an Arabic
   page has its trailing full stop reordered to the wrong end. plaintext makes
   the browser judge each string on its own characters, which is what dir="auto"
   does, without having to thread an attribute through every template. */
.catd,.abt,.abs,.soldn,.catn,.soln,.solmeta,.iact,.isol,.iagent,.dv,.dv-in,.sub{
  unicode-bidi:plaintext;text-align:start}

/* ================== launch and lock ================== */

/* The launch animation.
   Every moving part here is a transform or an opacity, which the compositor
   owns. The earlier version animated stroke-dashoffset, a main thread property,
   so any work the app did while booting showed up as a stutter in the mark.
   The stroke now appears under a panel the colour of the page that slides off
   to the right: the same left to right reveal, none of the contention. */
.splashlayer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--bg);opacity:1;transition:opacity .45s ease;will-change:opacity}
.splashlayer.out{opacity:0;pointer-events:none}

.spmk{position:relative;width:132px;height:132px;color:var(--xur)}
.spmk .mk{position:absolute;inset:0;width:100%;height:100%}
.spwave,.spring{position:absolute;inset:0}
/* the panel starts just left of the stroke and leaves to the right */
.spwipe{position:absolute;top:-6%;bottom:-6%;left:8%;right:-4%;background:var(--bg);
  transform:translate3d(0,0,0);animation:spwipe 1s cubic-bezier(.32,.02,.22,1) .1s both}
.spring .mk{transform:scale(.2);opacity:0;
  animation:spring .5s cubic-bezier(.18,.9,.28,1.25) .86s both}
/* one ring of attention leaving the eye, the product in a single gesture */
.sppulse{position:absolute;left:78.1%;top:50%;width:26.6%;aspect-ratio:1;margin:-13.3% 0 0 -13.3%;
  border:2px solid currentColor;border-radius:50%;opacity:0;
  animation:sppulse 1.05s cubic-bezier(.2,.6,.2,1) 1.18s forwards}

@keyframes spwipe{from{transform:translate3d(0,0,0)}to{transform:translate3d(105%,0,0)}}
@keyframes spring{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sppulse{
  0%{transform:scale(.92);opacity:.55}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes mkpop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .spwipe{animation:none;transform:translate3d(105%,0,0)}
  .spring .mk{animation:none;transform:none;opacity:1}
  .sppulse{animation:none;opacity:0}
}

/* The lock is a gate on this device, not a second sign in: the session is
   already valid, so the way out is the same face or PIN the phone uses. */
.lockscreen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:32px 26px;text-align:center;background:var(--bg)}
.lock-mk{width:64px;height:64px;color:var(--xur);opacity:.9}
.lock-mk .mk{width:64px;height:64px}
.lockscreen h1{margin:10px 0 0;font-family:var(--serif);font-size:1.5rem;font-weight:600}
.lock-body{margin:0 0 18px;color:var(--muted);font-size:.92rem;max-width:30ch;line-height:1.5}
.lockscreen .btn{max-width:340px}
.lockscreen .btn svg{width:19px;height:19px}

/* ---- sign in, one question at a time ---- */
.signin-lead{display:flex;flex-direction:column;gap:4px;margin:2px 0 16px;text-align:center;max-width:34ch}
.signin-lead b{font-size:1.02rem;font-weight:650;color:var(--ink)}
.signin-lead span{color:var(--muted);font-size:.9rem;line-height:1.5}
.signin-err{width:100%;max-width:300px;margin:0 0 12px;padding:10px 13px;border-radius:12px;
  background:var(--sv-bg);color:var(--sv);font-size:.87rem;line-height:1.45;
  border:1px solid color-mix(in srgb,var(--sv) 30%,transparent);animation:cardin .25s ease both}
.signin .btn .tic{display:grid;place-items:center}
.signin .btn .tic svg{width:17px;height:17px}

/* ---- one field for an email or a number ---- */
/* The field, the button under it and the message above it are one column and
   the same width. It is 300 rather than the full screen because a thumb reaches
   the middle of a phone, not its edges, and a line of text that runs the whole
   width of the glass reads like a form. */
.idfield{width:100%;max-width:300px}
.idwrap{display:flex;align-items:stretch;gap:0;width:100%}
.idwrap input{flex:1;min-width:0}
.idwrap.phone input{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:0}
.cc{display:flex;align-items:center;gap:6px;flex:none;padding:0 11px;
  border:1px solid var(--line);border-radius:12px;border-start-end-radius:0;border-end-end-radius:0;
  background:var(--sunken);color:var(--ink);font-size:.92rem;font-weight:600;
  transition:background .15s,border-color .15s}
.cc:hover{background:var(--surface-2);border-color:var(--xur)}
.ccflag{font-size:1.12rem;line-height:1}
.ccdial{font-family:var(--mono);font-size:.84rem;color:var(--muted)}
.idhint{margin-top:7px;font-family:var(--mono);font-size:.76rem;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}

/* the country sheet */
.ccscrim{align-items:flex-end}
.ccsheet{width:100%;max-width:460px;max-height:78vh;display:flex;flex-direction:column;gap:10px}
.ccsheet h3{margin:0}
.ccsearch{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--sunken);
  color:var(--ink);border-radius:12px;padding:10px 13px;font-size:.94rem}
.cclist{flex:1;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
.ccrow{display:flex;align-items:center;gap:11px;width:100%;padding:10px 10px;border:0;
  border-radius:11px;background:transparent;text-align:start;color:var(--ink);font-size:.94rem}
.ccrow:hover{background:var(--surface-2)}
.ccrow.on{background:var(--xur-soft);color:var(--xur-ink)}
.ccname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccrow .ccdial{flex:none}
[dir="rtl"] .idwrap.phone input{border-start-start-radius:12px;border-end-start-radius:12px;
  border-start-end-radius:0;border-end-end-radius:0;border-inline-start:1px solid var(--line);border-inline-end:0}
[dir="rtl"] .cc{border-start-end-radius:12px;border-end-end-radius:12px;
  border-start-start-radius:0;border-end-start-radius:0}
/* A dial code is a number that reads left to right in every language. Left to
   the paragraph direction, Arabic renders "+972" as "972+". */
.ccdial,.idhint{direction:ltr;unicode-bidi:embed}
[dir="rtl"] .ccrow .ccdial,[dir="rtl"] .cc .ccdial{direction:ltr;unicode-bidi:embed}

/* the head of the identifier field: a flag, or what sort of address this is */
.idlead{display:grid;place-items:center;flex:none;width:40px;
  border:1px solid var(--line);border-inline-end:0;
  border-radius:12px;border-start-end-radius:0;border-end-end-radius:0;
  background:var(--sunken);color:var(--faint);transition:color .18s,background .18s}
.idlead svg{width:18px;height:18px}
.idlead.lead-personal{color:var(--lo);background:var(--lo-bg)}
.idlead.lead-work{color:var(--me);background:var(--me-bg)}
.idwrap.mail input{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:0}
[dir="rtl"] .idlead{border-inline-end:1px solid var(--line);border-inline-start:0;
  border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:12px;border-end-end-radius:12px}
[dir="rtl"] .idwrap.mail input{border-start-end-radius:0;border-end-end-radius:0;
  border-start-start-radius:12px;border-end-start-radius:12px;
  border-inline-end:0;border-inline-start:1px solid var(--line)}

/* password, with a way to look at what you typed */
.pwwrap{position:relative;display:flex;width:100%}
.pwwrap input{flex:1;min-width:0;padding-inline-end:46px}
.pweye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--faint);border-radius:10px;transition:color .15s,background .15s}
.pweye:hover{color:var(--ink);background:var(--surface-2)}
.pweye svg{width:19px;height:19px}

/* the full height screens need the same room */
.signin,.lockscreen{padding-top:calc(30px + var(--sat));padding-bottom:calc(26px + var(--sab));
  padding-inline:calc(26px + var(--sal)) calc(26px + var(--sar))}

.rail{padding-top:calc(16px + var(--sat));padding-bottom:calc(16px + var(--sab))}
.wrap{padding-inline:calc(16px + var(--sal)) calc(16px + var(--sar))}
/* nothing should end up under the navigation bar when a list runs long */
.app.wide .screen-wrap{padding-bottom:var(--sab)}

/* ---- lock choices and the keypad ---- */
.lockopts{display:flex;flex-direction:column;gap:7px}
.lockopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface-2);text-align:start;
  transition:border-color .15s,background .15s}
.lockopt b{font-weight:650;font-size:.95rem}
.lockopt small{color:var(--muted);font-size:.79rem;line-height:1.4}
.lockopt.on{border-color:var(--xur);background:var(--xur-soft);color:var(--xur-ink)}
.lockopt.on small{color:inherit;opacity:.78}
.lockopt:disabled{opacity:.6}

.pindots{display:flex;gap:11px;margin:4px 0 20px}
.pindot{width:11px;height:11px;border-radius:99px;background:var(--line);
  transition:background .18s,transform .18s}
.pindot.on{background:var(--xur);transform:scale(1.18)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:12px;margin-bottom:20px}
.key{height:62px;border-radius:18px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);font-size:1.4rem;font-weight:550;font-variant-numeric:tabular-nums;
  transition:background .12s,transform .06s}
.key:active{transform:scale(.95);background:var(--sunken)}
.key.kback{background:transparent;border-color:transparent;color:var(--muted)}
.key svg{width:22px;height:22px}
.keygap{height:62px}
.lockscreen .btn{max-width:340px;width:100%}

/* what was used here before, so a phone keyboard is not retyped */
.recents{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.recentlab{font-size:.74rem;color:var(--faint);margin-inline-end:2px}
.recent{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  border-radius:99px;padding:5px 11px;font-size:.8rem;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color .15s,color .15s}
.recent:hover{border-color:var(--xur);color:var(--ink)}
.idhint.quiet{color:var(--faint);font-family:var(--sans);font-size:.79rem;white-space:normal}

/* ---- marks: a solution's glyph, an agent's initials ---- */
.mark{display:inline-grid;place-items:center;flex:none;width:var(--px);height:var(--px);
  border-radius:calc(var(--px) * .28);color:#fff;
  background:linear-gradient(150deg,var(--a),var(--b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mark svg{width:calc(var(--px) * .52);height:calc(var(--px) * .52)}
.mark.avatar{border-radius:99px}
.avtx{font-size:calc(var(--px) * .40);font-weight:650;letter-spacing:.01em;line-height:1}

/* ---- the agent's account, in writing ----
   The player that used to sit here is gone on purpose: this gets read while
   someone is being talked to, which is when audio is the wrong medium. */
.dsay{margin:2px 0 0;color:var(--muted);font-size:.89rem;line-height:1.55}

/* ---- filters ---- */
/* (the filter chips that used to live here became the menus below) */

.detailsheet{max-height:86vh;overflow-y:auto}
.dhead{display:flex;align-items:center;gap:11px}
.dwho{flex:1;min-width:0;display:flex;flex-direction:column}
.dwho b{font-size:1.02rem;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.dwho span{color:var(--muted);font-size:.83rem}
.dagent{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem}
.dagent .sevtag{margin-inline-start:auto}

/* ---- the agent graph ---- */
.soldesc{margin:-2px 2px 4px;color:var(--muted);font-size:.9rem;line-height:1.55}
.graph{display:flex;flex-direction:column;gap:0}
.gnode{position:relative;padding-inline-start:4px}
.gedge{display:block;width:2px;height:14px;margin-inline-start:18px;
  background:linear-gradient(var(--line),var(--c,var(--line)))}
.gbody{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-2);border-inline-start:3px solid var(--c)}
.gmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.gmeta b{font-size:.92rem;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.gmeta small{color:var(--faint);font-size:.75rem}
.gasks,.gruns{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:.78rem;
  font-weight:650;padding:4px 9px;border-radius:99px}
.gasks{color:var(--hi);background:var(--hi-bg)}
.gruns{color:var(--lo);background:var(--lo-bg)}
.gasks svg,.gruns svg{width:13px;height:13px}

/* ---- what is waiting, at a glance ---- */
.sevbar{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:-2px 0 2px}
.sevbar::-webkit-scrollbar{display:none}
.sevcount{display:inline-flex;align-items:baseline;gap:5px;flex:none;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:5px 11px;font-size:.74rem;font-weight:600;
  color:var(--muted);transition:border-color .15s,background .15s}
.sevcount b{font-size:1.02rem;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.sevcount.on{border-color:var(--c);background:var(--b);color:var(--c)}

/* ---- narrowing: two menus, not a sideways scroll ----
   A row of chips that scrolls sideways is a bad answer on a phone, because the
   chip you want is always the one just off the edge. Two buttons that open a
   list of checkboxes fit any number of solutions without moving anything. */
.fbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:relative;z-index:5;margin-bottom:10px}
.fdrop{position:relative;flex:1 1 0;min-width:0}
.fbtn{width:100%;display:flex;align-items:center;gap:6px;min-width:0;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:999px;padding:6px 11px;font-size:.79rem;font-weight:600;
  transition:border-color .15s,background .15s,color .15s}
.fbtn .flab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.fbtn.on{border-color:var(--xur);background:var(--xur-soft);color:var(--xur-ink)}
.fbtn .fcount{flex:none;background:var(--xur);color:#fff;border-radius:999px;
  min-width:19px;height:19px;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.fbtn .fchev{flex:none;width:15px;height:15px;display:grid;place-items:center;
  transform:rotate(90deg);transition:transform .18s ease;color:var(--faint)}
.fbtn .fchev svg{width:15px;height:15px}
.fbtn.open .fchev{transform:rotate(-90deg)}
.fdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c,var(--me))}
/* the second menu hangs from its own end, or a wide one would run off the
   side of a screen that clips horizontally */
.fbar .fdrop + .fdrop .fmenu{inset-inline-start:auto;inset-inline-end:0}
.fmenu{position:absolute;inset-inline-start:0;top:calc(100% + 6px);min-width:100%;
  max-width:min(300px,86vw);max-height:min(58vh,340px);overflow:auto;z-index:20;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.26),0 2px 6px rgba(0,0,0,.14);
  padding:6px;display:flex;flex-direction:column;gap:2px;
  animation:fmenuin .16s ease both}
@keyframes fmenuin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fopt{display:flex;align-items:center;gap:9px;width:100%;min-width:0;text-align:start;
  padding:9px 9px;border-radius:10px;background:transparent;border:0;color:var(--muted);
  font-size:.86rem;font-weight:550}
.fopt:hover{background:var(--sunken);color:var(--ink)}
.fopt.on{color:var(--ink)}
.fopt .foptn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbox{flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:#fff}
.fbox svg{width:12px;height:12px}
.fbox.on{background:var(--xur);border-color:var(--xur)}
.fopt.sev.on .fdot{box-shadow:0 0 0 3px var(--b)}
.fclear{flex:none;border:0;background:transparent;color:var(--faint);
  font-size:.8rem;font-weight:600;padding:8px 4px;text-decoration:underline}
.fclear:hover{color:var(--ink)}

/* ---- an agent's asks, gathered ----
   The agent is named once, at the top. Everything underneath is that agent, so
   repeating the name on every row is noise that pushes the actual question off
   the screen. */
.agrps{display:flex;flex-direction:column;gap:11px}
.agrp{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  border-inline-start:3px solid var(--sev);overflow:hidden}
.ghead{display:flex;align-items:center;gap:9px;padding:10px 8px 10px 11px}
.gav{flex:none}
.gm{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.gtog{flex:1;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  background:transparent;border:0;padding:0;text-align:start;color:inherit}
.gname{font-size:.97rem;font-weight:650;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* the count and where it came from, on one line: two facts, one row */
.gcount{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--faint);font-weight:550;
  max-width:100%;min-width:0}
.gchev{flex:none;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
  background:transparent;display:grid;place-items:center;color:var(--faint);
  transform:rotate(90deg);transition:transform .2s ease,background .15s}
.gchev:hover{background:var(--sunken)}
.gchev svg{width:18px;height:18px}
.agrp.open .gchev{transform:rotate(-90deg)}
/* the solution, said properly: its mark, its name, and a way into it */
.gsol{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:2px;
  border:0;background:transparent;padding:0;color:var(--muted);font-size:.76rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.gsol:hover{color:var(--xur-ink)}
.gsol svg{width:13px;height:13px;flex:none;opacity:.7}
.gcount .gsol::before{content:"";width:3px;height:3px;border-radius:99px;background:currentColor;
  opacity:.5;margin-inline-end:5px;flex:none}
.gsol:hover{border-color:var(--xur);color:var(--xur-ink);background:var(--xur-soft)}
.gsoln{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.gsolgo{flex:none;width:13px;height:13px;display:grid;place-items:center;opacity:.6}
.gsolgo svg{width:13px;height:13px}

.gbreak{padding:8px 12px 11px;display:flex;flex-direction:column;gap:7px}
.gbar{display:flex;height:5px;border-radius:99px;overflow:hidden;background:var(--sunken)}
.gbar i{background:var(--c);min-width:5px}
.gtags{display:flex;gap:5px;flex-wrap:wrap}

/* ---- what you decided, in two seconds, and the way into the detail ---- */
.asum{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  padding:12px 12px 11px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.asum-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.asum-all{display:flex;align-items:baseline;gap:6px;border:0;background:transparent;padding:0;
  color:var(--ink);border-radius:10px}
.asum-all b{font-size:1.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.asum-all span{font-size:.8rem;color:var(--faint);font-weight:600}
.asum-all.on b{color:var(--xur)}
.asum-chips{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.asum-chip{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:4px 10px;color:var(--muted);
  font-size:.74rem;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.asum-chip b{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--ink)}
.asum-chip.on{border-color:var(--xur);background:var(--xur-soft);color:var(--xur-ink)}
.asum-chip.on b{color:var(--xur-ink)}
.asum-facts{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:9px}
.asum-fact{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--faint)}
.asum-fact svg{width:14px;height:14px;flex:none}
.asum-fact.heavy{color:var(--hi)}
.gtag{flex:none;display:inline-flex;align-items:baseline;gap:4px;border-radius:999px;
  padding:3px 9px;font-size:.72rem;font-weight:600;color:var(--c);background:var(--b);
  border:1px solid color-mix(in oklab,var(--c) 30%,transparent)}
.gtag i{font-style:normal;opacity:.65;font-size:.68rem}
.gtag b{font-size:.82rem;font-weight:750;font-variant-numeric:tabular-nums}

.gopen{padding:0 11px 11px;display:flex;flex-direction:column;gap:8px;
  animation:cardin .22s ease both}
.gbulk{display:flex;gap:6px;flex-wrap:wrap}
.gb{flex:1 1 0;min-width:80px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);border-radius:10px;padding:9px 6px;font-size:.79rem;font-weight:650;
  transition:all .15s}
.gb.deny:hover{border-color:var(--sv);color:var(--sv);background:var(--sv-bg)}
.gb.reflect:hover{border-color:var(--me);color:var(--me);background:var(--me-bg)}
.gb.approve:hover{border-color:var(--xur);color:var(--xur-ink);background:var(--xur-soft)}
/* walking them one at a time is a different kind of act from answering the
   group, so it sits apart from the three that decide */
.gone{align-self:flex-start;display:inline-flex;align-items:center;gap:3px;border:0;
  background:transparent;color:var(--faint);font-size:.79rem;font-weight:600;
  padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.gone svg{width:13px;height:13px}
.gone:hover{color:var(--xur-ink)}
.glist{display:flex;flex-direction:column;gap:7px}

/* ---- one action ---- */
.arow{border:1px solid var(--line);border-radius:13px;background:var(--surface);
  transition:border-color .16s,box-shadow .16s}
.arow.open{border-color:color-mix(in oklab,var(--sev) 45%,var(--line));
  box-shadow:0 6px 20px rgba(0,0,0,.10)}
.atop{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 0}
.aopen{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:transparent;
  border:0;text-align:start;color:inherit;padding:0}
.adot{flex:none;width:4px;align-self:stretch;min-height:30px;border-radius:0 4px 4px 0;
  background:var(--sev)}
.am{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding-inline-start:2px}
.aname{font-size:.92rem;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.awhen{font-size:.74rem;color:var(--faint)}
.arow .sevtag{flex:none}
.achev{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--faint);display:grid;place-items:center;
  transform:rotate(90deg);transition:transform .2s ease,background .15s}
.achev svg{width:16px;height:16px}
.achev.sm svg{width:14px;height:14px}
.achev:hover{background:var(--sunken)}
.arow.open .achev{transform:rotate(-90deg)}
.abody{padding:0 12px 12px;display:flex;flex-direction:column;gap:9px;
  animation:cardin .2s ease both}
.tlitem .stpill{flex:none}

/* ---- one action, over everything else ---- */
.asksheet{max-height:86vh;display:flex;flex-direction:column;gap:11px}
.askhead{display:flex;align-items:center;gap:10px}
.askwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.askwho b{font-size:.97rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.asksol{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:3px 9px 3px 4px;
  color:var(--muted);font-size:.74rem;font-weight:600;max-width:100%;min-width:0}
.asksol span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asksol:hover{border-color:var(--xur);color:var(--xur-ink)}
.askhead .sevtag{flex:none}
.asksheet .askact{margin:0;font-size:1.12rem;font-weight:650;line-height:1.3;
  text-wrap:balance;text-align:start}
/* the sheet centres its own headings; everything being read inside it
   should still start where the language starts */
.asksheet .askscroll,.asksheet .askscroll p,.asksheet .askscroll div{text-align:start}
.askscroll{flex:1;min-height:0;overflow:auto;text-align:start;display:flex;flex-direction:column;gap:9px;
  -webkit-overflow-scrolling:touch}

/* ---- three answers ---- */
.iacts.three{gap:7px}
.iacts.three .btn{padding-inline:10px;font-size:.88rem}
.btn-reflect{flex:1 1 0;background:var(--me-bg);color:var(--me);border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:5px}
.btn-reflect:hover{border-color:var(--me)}
.btn-reflect svg{width:15px;height:15px}

/* ---- the written case ---- */
.whybox{margin-top:10px;padding:11px 13px;border-radius:12px;background:var(--sunken);
  border:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px;
  animation:cardin .25s ease both}
.whysum{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink);font-weight:550}
.whyblock{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.whyblock b{color:var(--hi);font-weight:650}
.whyfull{margin:0;font-size:.85rem;line-height:1.55;color:var(--faint)}

/* ---- one at a time ---- */
.focusbar{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.fx{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--muted);
  font-size:.86rem;font-weight:600;padding:4px 0}
.fx svg{width:16px;height:16px}
[dir="rtl"] .fx svg{transform:none}
.fxpos{margin-inline-start:auto;font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.focusone .icard{animation:cardin .3s ease both}

/* ---- confirming ---- */
.confirmsheet h3{margin:0;font-size:1.16rem}
.confirmsheet p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.cmany{color:var(--ink)!important;font-weight:550}
.confirmsheet .btn{width:100%}

/* ---- which environment am I in ---- */
.envsheet{gap:12px;text-align:center;align-items:center}
.envsheet h3{margin:0;font-size:1.18rem}
.envsheet p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:38ch}
.envbadge{align-self:center;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border-radius:99px}
.envbadge.live{color:var(--lo);background:var(--lo-bg)}
.envbadge.test{color:var(--hi);background:var(--hi-bg)}
.envdont{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.85rem;
  padding:6px 0;cursor:pointer}
.envdont input{width:18px;height:18px;accent-color:var(--xur);flex:none}
.envsheet .btn{width:100%}

/* the connect field was full width and looked like a form, not a question */
/* one column width for everything asked for, so the fields read as a set
   rather than a wide box with a narrow button under it */
.signin .field,.signin .btn,.signin .recents,.signin .signin-err,
.signin .signin-lead,.signin .hnote,.signin .idhint{max-width:300px;width:100%}
.signin .idfield{max-width:300px}

/* The state of the world, stated on the sign in screen. A notice, not a wall:
   someone who has been here before can still get in. */
.hnote{display:flex;gap:9px;align-items:flex-start;width:100%;max-width:300px;
  padding:10px 12px;border-radius:13px;text-align:start;font-size:.85rem;
  border:1px solid color-mix(in oklab,var(--warn) 38%,transparent);
  background:color-mix(in oklab,var(--warn) 12%,var(--card))}
.hnote .tic{flex:none;width:18px;height:18px;color:var(--warn);margin-top:1px}
.hnote .tic svg{width:18px;height:18px}
.hnote div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hnote b{font-size:13.5px;font-weight:600}
.hnote span{font-size:12.5px;line-height:1.4;color:var(--dim)}

/* a live count on an agent in the solution graph is a way in, not a label */
.gasks.live{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  background:var(--xur);color:#fff;border-radius:999px;padding:3px 9px 3px 6px;
  font-size:.76rem;font-weight:700;transition:transform .12s,box-shadow .15s}
.gasks.live svg{width:13px;height:13px}
.gasks.live b{font-variant-numeric:tabular-nums}
.gasks.live:hover{box-shadow:0 4px 14px color-mix(in oklab,var(--xur) 45%,transparent)}
.gasks.live:active{transform:scale(.96)}
.gnode.live .gbody{border-color:color-mix(in oklab,var(--xur) 40%,var(--line))}

/* ================== the vault ==================
   A list that can be read without opening anything: names and hints are in the
   clear, secrets are not. Seeing one is always its own deliberate tap. */
.vpanel{display:flex;flex-direction:column;gap:12px}
.vlead{display:flex;gap:11px;align-items:flex-start}
.vic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--xur-soft);color:var(--xur-ink)}
.vic svg{width:18px;height:18px}
.vic.sm{width:28px;height:28px;border-radius:9px}
.vic.sm svg{width:15px;height:15px}
.vlead div{display:flex;flex-direction:column;gap:2px;min-width:0}
.vlead b{font-size:.98rem;font-weight:650}
.vlead span{font-size:.85rem;color:var(--muted);line-height:1.5}
.vwarn{border:1px solid color-mix(in oklab,var(--warn,#c9781a) 40%,transparent);
  background:color-mix(in oklab,var(--warn,#c9781a) 12%,var(--card,var(--surface)));
  color:var(--ink);border-radius:12px;padding:10px 12px;font-size:.84rem;line-height:1.5}
.vcheck{display:flex;align-items:center;gap:9px;font-size:.87rem;color:var(--muted)}
.vcheck input{width:18px;height:18px;flex:none;accent-color:var(--xur)}
.vtop{display:flex;align-items:center;gap:10px}
.vprot{flex:1;display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:.78rem;font-weight:600}
.vprot svg{width:14px;height:14px}

.vlist{display:flex;flex-direction:column;gap:8px}
.vitem{border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}
.vitem.open{border-color:var(--xur)}
.vhead{display:flex;align-items:center;gap:10px;padding:11px 12px}
.vm{flex:1;min-width:0;display:flex;flex-direction:column}
.vm b{font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm small{font-size:.75rem;color:var(--faint)}
.vgrants{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--xur-soft);
  color:var(--xur-ink);font-size:.72rem;font-weight:700;display:grid;place-items:center}
.vshow{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:9px;padding:5px 10px;font-size:.78rem;font-weight:600}
.vshow:hover{border-color:var(--xur);color:var(--xur-ink)}
.vbody{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px;animation:cardin .2s ease both}
.vbody .dv.mono{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  word-break:break-all;unicode-bidi:plaintext;direction:ltr}
/* who may ask for this again, for what, since when, and the way to stop them */
.vgrantlist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.vglab{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.vgrant{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;
  padding:8px 8px 8px 10px;font-size:.8rem;color:var(--muted);background:var(--surface)}
.vgm{flex:1;min-width:0;display:flex;flex-direction:column}
.vgm b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgm small{color:var(--faint);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgrant button{flex:none;border:0;background:transparent;color:var(--sv,#d23b3b);font-size:.76rem;font-weight:650;
  padding:6px 9px;border-radius:9px}
.vgrant button:hover{background:var(--sv-bg,transparent)}
.vacts{display:flex;gap:8px}
.vacts .btn{flex:1}

/* once, or for this purpose: chosen before anything is handed over */
.credscope{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.credscope>b{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.scopeopt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;color:var(--ink);transition:.15s}
.scopeopt:hover{border-color:var(--xur)}
.scopeopt.on{border-color:var(--xur);background:var(--xur-soft)}
.scopeopt .credm small{white-space:normal}
.scopeopt .fbox{flex:none;width:20px;height:20px;border-radius:99px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:#fff}
.scopeopt .fbox svg{width:12px;height:12px}
.scopeopt .fbox.on{background:var(--xur);border-color:var(--xur)}
.vkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.vkind{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);border-radius:12px;padding:11px 6px;
  font-size:.76rem;font-weight:600;transition:.15s}
.vkind .tic{width:20px;height:20px;display:grid;place-items:center}
.vkind .tic svg{width:19px;height:19px}
.vkind:hover{border-color:var(--xur);color:var(--ink)}
.vkind.on{border-color:var(--xur);background:var(--xur-soft);color:var(--xur-ink)}
.vform{display:flex;flex-direction:column;gap:10px;animation:cardin .2s ease both}
.vnote{margin:0;font-size:.79rem;color:var(--faint);line-height:1.5}

/* an agent asking to be handed something, rather than to do something */
.credask{display:flex;gap:11px;align-items:flex-start}
.credask div{display:flex;flex-direction:column;gap:2px;min-width:0}
.credask b{font-size:.97rem;font-weight:650;line-height:1.35}
.credask span{font-size:.83rem;color:var(--muted)}
.credpick{display:flex;flex-direction:column;gap:7px}
.credopt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;
  color:var(--ink);transition:.15s}
.credopt:hover{border-color:var(--xur)}
.credopt.on{border-color:var(--xur);background:var(--xur-soft)}
.credm{display:flex;flex-direction:column;min-width:0}
.credm b{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credm small{font-size:.76rem;color:var(--faint)}
.credopt .fbox{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:#fff}
.credopt .fbox svg{width:13px;height:13px}
.credopt .fbox.on{background:var(--xur);border-color:var(--xur)}

/* ---- moving the vault to another phone ---- */
/* the code is read off one screen and typed into another, so it is set large,
   in a face where every character is unmistakable, in three groups */
.xcode{font-family:var(--mono);font-size:1.7rem;font-weight:600;letter-spacing:.14em;text-align:center;
  padding:16px 10px;border:1px dashed var(--xur);border-radius:14px;background:var(--xur-soft);color:var(--xur-ink);
  direction:ltr;user-select:all;word-spacing:.3em}
.xwait{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--faint);font-size:.82rem}
.xwait .tic{display:grid;place-items:center}
.xwait svg{width:16px;height:16px}
.xinput{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;direction:ltr}
.vmove .vacts{margin-top:2px}

/* the terms, where somebody agrees to them and where they can find them again */
.signin .legal{max-width:300px;width:100%;text-align:center;font-size:.74rem;color:var(--faint);line-height:1.5}
.signin .legal a,.legallinks a{color:var(--muted)}
.legallinks{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem}

/* ---- hold to approve: the ring from the mark fills while the finger is down ---- */
.holdbtn{position:relative;gap:8px;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;overflow:hidden}
.holdbtn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .08s linear;pointer-events:none}
[dir="rtl"] .holdbtn::before{transform-origin:right}
.holdbtn:not(.holding)::before{transition:transform .25s ease}
.holdring{width:20px;height:20px;flex:none;transform:rotate(-90deg)}
.holdring circle{fill:none;stroke-width:2.6}
.holdring .hr-bg{stroke:rgba(255,255,255,.28)}
.holdring .hr-fg{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100)}
.holdbtn.held{animation:heldpop .28s ease}
@keyframes heldpop{50%{transform:scale(.96)}}
@media (prefers-reduced-motion: reduce){.holdbtn::before{transition:none}.holdbtn.held{animation:none}}

/* ---- the risk glyph ---- */
.rglyph{display:block;flex:none;overflow:visible}
.iglyph{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.aglyph{flex:none;display:grid;place-items:center;width:28px;height:28px}
.gglyph{flex:none;display:grid;place-items:center}

/* ---- the pulse: recent answers as the wave from the mark ---- */
.pulse{width:100%;height:auto;max-height:84px;display:block;margin:-2px 0 2px}
.pulse .pbase{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.pulse .pwave{fill:none;stroke:var(--xur);stroke-width:1.6;opacity:.55;vector-effect:non-scaling-stroke}
.pulse .ppt{cursor:pointer;stroke:var(--surface-2);stroke-width:1.5;vector-effect:non-scaling-stroke}

.iacts.decide{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.iacts.decide .holdbtn{grid-column:1/-1;min-height:50px;font-size:1rem}