@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  color-scheme:light;
  --bg:#EEF2F7; --paper:#F6F8FB; --surface:#FFFFFF; --surface-2:#F1F4F8;
  --ink:#0F1B2D; --ink-2:#3A4860; --muted:#5C6B82; --line:#D9E0EA; --line-2:#E8EDF3;
  /* the accent follows an organization's colour (B1, applyBrand sets --brand*); --accent is for text and outlines,
     --accent-strong for fills under white text (they differ in dark mode, B3) */
  --accent:var(--brand,#233F99); --accent-strong:var(--brand,#233F99); --accent-2:var(--brand-2,#3D63D9); --accent-ink:#FFFFFF; --accent-soft:var(--brand-soft,#E6EBF8);
  --edge-strong:#94A3B8; --grid:var(--brand-grid,rgba(35,63,153,.10));
  --warn-bg:#FBF1E1; --warn-bg-2:#FBF7EE; --warn-ink:#8A5200; --warn-line:#E7B458; --ok-bg:#E9F6EF; --ok-ink:#16653F; --bad-bg:#FDECEC; --bad-bg-2:#FDF3F3; --bad-line:#F1C4C4; --bad-ink:#A82B2B;
  --glass:rgba(255,255,255,.94); --placeholder:#94A3B8; --k-place:#233F99; --k-job:#C93838; --k-incident:#E4580C; --k-ship:#0B6E99; --chart-2:#B9C8F4; --sel-bg:#F3F6FD; --report-bg:#F3F6FC;
  --ok:#187A47; --warn:#C27B12; --bad:#C93838;
  --toast-bg:#0F1B2D; --toast-ink:#FFFFFF;
  --k-trigger:#C27B12; --k-scan:#E4580C; --k-poi:#2F55C9; --k-mob:#7644E0; --k-jobs:#B4235B; --k-region:#8A5A12; --k-db:#0B7C93; --k-ai:#0A8C7E; --k-logic:#5A6A80; --k-action:#1C8C52;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 10px 24px -12px rgba(15,27,45,.25);
  --shadow-lg:0 24px 60px -20px rgba(15,27,45,.35);
  /* the one dropdown arrow (select.inp, the city picker, Showcases); a data URI cannot read a colour token, so dark mode has its own */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235C6B82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ctl-h:38px;   /* the one height of a button, a field and a two-way switch, so a row never mixes heights (owner, 2026-10-18) */
  --r:10px;   /* the one corner curve of every box, button, card, panel and bar (owner, 2026-10-18: "the exact same angle ... like how apple design its products"); circles stay circles */
  --page-w:1240px;   /* the one width of every page (only the flow editor uses the whole screen) */
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Avenir Next','Avenir','Nunito Sans','Geeza Pro','SF Arabic','Noto Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* B3: dark mode for the signed-in app (Settings, Appearance: light, dark or the device's setting), set as
   <html data-theme="dark">. Public pages, the home page and emails stay light. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B111B; --paper:#0F1622; --surface:#151E2C; --surface-2:#1B2637;
  --ink:#E7EDF6; --ink-2:#B9C4D6; --muted:#8E9CB3; --line:#2A3649; --line-2:#222D3E;
  --accent:var(--brand-light,#8FA8FF); --accent-strong:var(--brand,#3D63D9); --accent-2:var(--brand-light,#7D96F0); --accent-soft:var(--brand-dsoft,#1E2B4D);
  --edge-strong:#5B6B85; --grid:rgba(143,168,255,.07);
  --ok:#3AAE74; --warn:#DE9B32; --bad:#EE6767;
  --toast-bg:#2A3954; --toast-ink:#F2F5FA;
  --k-trigger:#DE9B32; --k-scan:#F07A3A; --k-poi:#6F8FF0; --k-mob:#9C7BF0; --k-jobs:#E0558A; --k-region:#D49A45; --k-db:#2BA8C2; --k-ai:#2EB8A8; --k-logic:#8D9BB0; --k-action:#3AAE74;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
  --warn-bg:#2A2214; --warn-bg-2:#231E14; --warn-ink:#EDBB66; --warn-line:#6B5321; --ok-bg:#122A1E; --ok-ink:#82DCAB; --bad-bg:#2E1719; --bad-bg-2:#291618; --bad-line:#6B2C30; --bad-ink:#F4A3A3;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238E9CB3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass:rgba(21,30,44,.94); --placeholder:#6E7D95; --k-place:#6F8FF0; --k-job:#EE6767; --k-incident:#F07A3A; --k-ship:#2BA8C2; --chart-2:#3A4A6B; --sel-bg:#1B2742; --report-bg:#18233A;
}
:root[data-theme="dark"] .logo{color:#C9D5FF}
:root[data-theme="dark"] .leaflet-container{background:#1B2637}
:root[data-theme="dark"] .leaflet-bar a,:root[data-theme="dark"] .leaflet-bar a:hover{background:var(--surface-2);color:var(--ink);border-bottom-color:var(--line)}
:root[data-theme="dark"] .leaflet-bar{border-color:var(--line)}
:root[data-theme="dark"] .leaflet-control-attribution{background:var(--glass)!important;color:var(--muted)}:root[data-theme="dark"] .leaflet-control-attribution a{color:var(--accent)}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,:root[data-theme="dark"] .leaflet-popup-tip{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .xm-tiles{filter:invert(1) hue-rotate(180deg) grayscale(.75) brightness(.82) contrast(.92)}
:root[data-theme="dark"] .sticky,:root[data-theme="dark"] .sticky textarea{color:#0F1B2D}
:root[data-theme="dark"] img.org-logo:not(.lg-dark),:root[data-theme="dark"] img.org-mark:not(.lg-dark),:root[data-theme="dark"] img.org-logo-top:not(.lg-dark),:root[data-theme="dark"] .bl-light img,.bl-dark img.bl-plate{background:#fff;border-radius:var(--r);padding:3px 6px}
/* two logos (owner, 2026-10-07): the one that fits the theme shows */
.lg-dark{display:none!important}:root[data-theme="dark"] .lg-dark{display:block!important}:root[data-theme="dark"] .mobile-top .lg-dark{display:inline-block!important}:root[data-theme="dark"] .lg-light{display:none!important}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,#root{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}   /* only for codes, ids, keys and addresses */
.num{font-variant-numeric:tabular-nums}   /* amounts and counts: the product font with even digits */
.muted{color:var(--muted)}
.logo{color:#233F99;display:block;overflow:visible;aspect-ratio:1450/570}   /* every logo also has its width set: Safari otherwise clipped the p of map */
.c-trigger{--cc:var(--k-trigger)}.c-scan{--cc:var(--k-scan)}.c-poi{--cc:var(--k-poi)}.c-mob{--cc:var(--k-mob)}.c-jobs{--cc:var(--k-jobs)}.c-region{--cc:var(--k-region)}.c-db{--cc:var(--k-db)}.c-ai{--cc:var(--k-ai)}.c-logic{--cc:var(--k-logic)}.c-action{--cc:var(--k-action)}

/* buttons, inputs */
.btn{height:var(--ctl-h);padding:0 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-weight:500;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .15s,transform .1s}
.btn:hover{background:var(--surface-2);border-color:#C9D2DE}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent-strong);border-color:transparent;color:#fff;box-shadow:none}
.btn.primary:hover{background:#1C3380;background:color-mix(in srgb,var(--accent-strong) 82%,#000);border-color:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:var(--r)}
.btn.ghost{border-color:transparent;background:transparent}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:15px;height:15px}
.inp{width:100%;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r);padding:0 11px;background:var(--surface);font-size:14px}
textarea.inp{height:auto;padding:9px 11px;line-height:1.45;resize:vertical}
.inp:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* every dropdown looks the same in every browser: no native arrow (Chrome put it 4px from the border, Safari drew its own),
   one chevron 12px from the right edge, centred whatever the box's height, and room on the right so long choices never run under it */
select.inp,.inp.chev{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:32px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;text-overflow:ellipsis;white-space:nowrap}
select.inp{cursor:pointer}
select.inp:disabled{cursor:default;opacity:.65}
select.inp[multiple]{height:auto;min-height:38px;padding:4px 6px;background-image:none;white-space:normal;cursor:default}
select.inp[multiple] option{padding:3px 6px;border-radius:var(--r)}
/* right to left: the arrow and its room move to the left */
[dir="rtl"] select.inp,[dir="rtl"] .inp.chev{padding-right:11px;padding-left:32px;background-position:left 12px center}
.lab{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin:14px 0 6px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}
.ok-msg{color:var(--ok);font-size:13px}
.pill{font:500 12px/1 var(--sans);padding:5px 9px;border-radius:var(--r);border:1px solid transparent;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center;white-space:nowrap;background:var(--surface-2)}   /* one badge for every status (owner, 2026-10-18 audit): the product font, sentence case, a tinted fill */
.pill.live{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.warn{color:var(--warn-ink);background:var(--warn-bg)}
.pill.accent{color:var(--accent);background:var(--accent-soft)}
.st{font:500 12px/1 var(--sans);padding:5px 9px;border:1px solid transparent;border-radius:var(--r);display:inline-block;white-space:nowrap}
.st.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.st.mute{background:var(--surface-2);color:var(--muted)}
.st.wait{background:var(--warn-bg);color:var(--warn-ink)}
.ap-msg h4{margin:0 0 4px}.ap-msg p{margin:0;white-space:pre-wrap}.ap-msg,.ap-act{margin-top:14px}.ap-act p{margin:0 0 12px}.ap-act p:last-child{margin-bottom:0}.ap-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.map-view{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}.map-view button{border:0;background:var(--surface);font:500 12px var(--sans);padding:6px 10px;cursor:pointer;color:var(--ink-2)}.map-view button+button{border-left:1px solid var(--line)}.map-view button.on{background:var(--accent-strong);color:#fff}
.map-legend span.off{opacity:.4;text-decoration:line-through}
.xm-cluster{background:transparent}.xm-cluster div{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(35,63,153,.85);color:#fff;font:600 12px var(--sans);border:3px solid rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.25)}.xm-cluster-s div{width:34px;height:34px}.xm-cluster-l div{width:46px;height:46px;background:rgba(228,88,12,.85)}.ap-note{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin:0 0 6px}.ap-act textarea{max-width:560px}
.st.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn-ink)}
.st.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}

/* auth screens */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:radial-gradient(900px 600px at 10% 0%,#F7F9FD 0,transparent 60%),radial-gradient(900px 600px at 100% 100%,#DCE4F4 0,transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:30px}
.auth-card .logo{height:30px;width:77px;margin-bottom:18px}
.auth-card h1{margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.auth-card p.sub{margin:0 0 8px;color:var(--muted)}
.auth-card .btn.primary{width:100%;height:42px;margin-top:18px}
.auth-foot{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.auth-note{margin-top:14px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:var(--r);padding:10px 12px}

/* shell */
.shell{display:grid;grid-template-columns:232px 1fr;grid-template-rows:minmax(0,1fr);height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:4px;overflow:auto}
.side .logo{height:22px;width:57px;margin:4px 6px 16px}
.org-sw{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;cursor:pointer;background:var(--surface);margin-bottom:12px;position:relative}
.org-sw b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-sw small{color:var(--muted);font-size:11.5px}
.org-sw .org-logo{display:block;max-width:100%;max-height:36px;margin:2px 0 8px;object-fit:contain;object-position:left center}
.mobile-top .org-logo-top{height:26px;max-width:140px;object-fit:contain;object-position:left center}
.brand-logo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:84px;padding:14px;border:1px dashed var(--line);border-radius:var(--r);background:#fff;margin:6px 0 8px}
.brand-logo .muted{color:#5C6B82}   /* the logo is shown on white in both themes: its words stay dark */
.brand-logo.bl-dark{background:#0F1726;border-color:#2A3446}.bl-dark .muted,.bl-note{color:#A9B4C6;font-size:12px}
.brand-logos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:10px}@media (max-width:640px){.brand-logos{grid-template-columns:minmax(0,1fr)}}
.brand-logo img{max-width:100%;max-height:64px;object-fit:contain}
.brand-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.brand-row input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer}
.brand-row #bSample{pointer-events:none}
.brand-sw{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.brand-sw button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.brand-sw button:disabled{cursor:default}
@media (max-width:640px){.brand-sw button{width:44px;height:44px}}
.org-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;z-index:30;max-height:360px;overflow:auto}
.org-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:var(--r);cursor:pointer;font-size:13px}
.org-menu button:hover,.org-menu button.on{background:var(--accent-soft)}
.org-menu small{display:block;color:var(--muted);font-size:11px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:13.5px}
.nav a svg{width:17px;height:17px;color:var(--muted)}
.nav a:hover{background:var(--surface-2)}
.nav a.on{background:var(--accent-soft);color:var(--accent)}
.nav a.on svg{color:var(--accent)}
.nav .sep{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 10px 4px}
.side-foot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:12px;font-size:12.5px}
.side-foot .who{display:flex;gap:9px;align-items:center;padding:4px 6px}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.nm-av{display:flex;gap:10px;align-items:center}.nm-av>div{min-width:0}
.avatar.avatar-big{width:72px;height:72px;font-size:22px}
.av-row{display:flex;gap:14px;align-items:center;margin-bottom:6px}.av-row .btns{display:flex;gap:8px;flex-wrap:wrap}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-strong);color:#fff;display:grid;place-items:center;font-weight:500;font-size:12px;flex:none}
.avatar.sm{width:24px;height:24px;font-size:11px}
.who b{display:block;font-size:13px}
.who small{color:var(--muted);font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.main{overflow:auto;min-width:0}
.page{max-width:var(--page-w);margin:0 auto;padding:28px 28px 92px}   /* room at the end for the floating Ask xMap button */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:24px;letter-spacing:-.01em}
.page-head p{margin:4px 0 0;color:var(--muted)}
.head-btns{display:flex;gap:8px;flex-wrap:wrap}
.head-btns a.btn{text-decoration:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card h3{margin:0 0 4px;font-size:15px}
.card h3 svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
* + .kpis{margin-top:18px}   /* tiles after a table or a card never touch it (admin overview, 2026-10-07) */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.tabs .red-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 22%,transparent)}
.tbl-wrap{overflow-x:auto}
.ap-tbl th.long,.ap-tbl td.long{min-width:min(460px,78vw)}
.tbl.ap-tbl td{vertical-align:top}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--surface-2)}
.tbl td.nm{font-weight:500}
.tbl td.nm small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.tbl td.nm small.k-reach{color:var(--ink-2,var(--ink));margin-top:2px}
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state h3{color:var(--ink);font-size:17px;margin:0 0 6px}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.wf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.wf-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -16px rgba(15,27,45,.35)}
.wf-card h3{margin:0;font-size:15px}
.wf-card .meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wf-card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line-2)}
.act{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.act:last-child{border:0}
.act time{color:var(--muted);font-size:11.5px;display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--toast-bg);color:var(--toast-ink);border:1px solid rgba(255,255,255,.08);padding:11px 16px;border-radius:var(--r);font-size:13px;opacity:0;transition:opacity .25s,transform .3s;z-index:100;pointer-events:none;box-shadow:var(--shadow-lg);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(15,27,45,.32);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:60;padding:16px;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:22px;max-height:90vh;overflow:auto;animation:mod .3s cubic-bezier(.2,1.2,.3,1) both}
.modal.wide{max-width:760px}
@keyframes mod{from{opacity:0;transform:translateY(14px) scale(.97)}}
.modal h2{margin:0 0 6px;font-size:19px}
.modal .sub{margin:0 0 10px;color:var(--muted)}
.modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
.copybox{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 12px;font:12px var(--mono);word-break:break-all}
.copybox span{flex:1}
.choice{display:grid;gap:8px}
.choice label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer}
.choice label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice small{display:block;color:var(--muted)}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.tpl-grid button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;cursor:pointer}
.tpl-grid button.on{border-color:var(--accent);background:var(--accent-soft)}
.tpl-grid b{display:block;font-size:13.5px}
.tpl-grid small{color:var(--muted);font-size:12px}

/* editor */
.ed{display:grid;grid-template-rows:auto 1fr;height:100%}
.ed-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ed-top .name{font-weight:500;font-size:16px;letter-spacing:-.005em;border:1px solid transparent;border-radius:var(--r);padding:4px 8px;min-width:120px;max-width:340px;background:transparent}
.ed-top .name:hover,.ed-top .name:focus{border-color:var(--line);background:var(--surface);outline:0}
.ed-top .save{font:11.5px var(--sans);color:var(--muted);white-space:nowrap}
.ed-top .spacer{flex:1}
.ed-body{position:relative;display:grid;grid-template-columns:220px 1fr;min-height:0}
.lib{background:var(--surface);border-right:1px solid var(--line);padding:10px;overflow:auto}
.lib .lib-h{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 6px 5px}
.lib .lib-h:first-child,.lib .lib-group:first-child .lib-h{margin-top:4px}
.lib-item{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px;border-radius:var(--r);font-size:12.5px;cursor:grab;color:var(--ink-2);white-space:nowrap;user-select:none;touch-action:none}
.lib-item span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.lib-item:hover{background:var(--accent-soft);color:var(--ink)}
.li-ico{width:20px;height:20px;border-radius:var(--r);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);flex:none}
.li-ico svg{width:12px;height:12px}
.lib-about{display:inline-flex;align-items:center;gap:6px;margin:2px 4px 8px;font-size:12.5px;color:var(--accent);text-decoration:none}.lib-about:hover{text-decoration:underline}.lib-about svg{width:14px;height:14px}
.li-badge{margin-left:auto;font:11px/1 var(--sans);color:var(--muted);background:var(--surface-2);padding:3px 5px;border-radius:var(--r)}
.li-badge.smp{color:var(--warn-ink);background:var(--warn-bg)}
.readonly .lib{opacity:.5;pointer-events:none}
.cv{container:cv / inline-size;position:relative;overflow:hidden;overflow:clip;background:var(--paper);cursor:grab;touch-action:none;user-select:none}
.cv::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--grid) 1.1px,transparent 1.4px) 0 0/22px 22px;pointer-events:none}
.cv.panning{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0}
.edges{position:absolute;left:0;top:0;width:10px;height:10px;overflow:visible;pointer-events:none}
.edge{fill:none;stroke:var(--edge-strong);stroke-width:1.8}
.edge.flow{stroke:color-mix(in srgb,var(--accent) 55%,transparent)}
.edge.ok{stroke:var(--ok)}
.edge.sel{stroke:var(--accent);stroke-width:2.6}
.edge.temp{stroke:var(--accent);stroke-dasharray:4 5}
.edges .hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.dot{fill:var(--accent)}
.node{position:absolute;width:140px;height:80px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;box-shadow:var(--shadow);cursor:grab;transition:border-color .2s,box-shadow .2s,opacity .3s}
.node.pop{animation:pop .4s cubic-bezier(.2,1.2,.3,1) both}
@keyframes pop{from{opacity:0;transform:scale(.7)}}
.node.dragging{cursor:grabbing;box-shadow:0 20px 36px -14px rgba(15,27,45,.45);z-index:5;transition:none}
.node.selected{outline:2px solid var(--accent);outline-offset:3px}
.node.msel{outline:2px dashed var(--accent);outline-offset:3px;background:var(--sel-bg)}
.marquee{position:absolute;z-index:5;border:1.5px dashed var(--accent);background:rgba(35,63,153,.08);border-radius:var(--r);pointer-events:none}
.node.target{outline:2px dashed var(--accent);outline-offset:3px}
.n-head{display:flex;align-items:center;gap:6px}
.n-ico{width:20px;height:20px;border-radius:var(--r);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 15%,transparent);flex:none}
.n-ico svg{width:12px;height:12px}
.n-cat{font:600 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.n-state{margin-left:auto;width:15px;height:15px;display:grid;place-items:center}
.n-title{font-weight:500;font-size:13px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-title[contenteditable="true"]{outline:1.5px solid var(--accent);border-radius:var(--r);background:var(--surface);cursor:text;overflow:visible}
.n-sub{font:11px/1.3 var(--sans);color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node.warn{border-color:color-mix(in srgb,var(--warn) 50%,transparent)}.node.warn .n-sub{color:var(--warn-ink)}
.node.err{border-color:var(--bad)}.node.err .n-sub{color:var(--bad)}
.node.done .n-sub{color:var(--cc);font-weight:500}
.node.skip{opacity:.45}
.steps .step.wait{border-color:var(--warn-line)}.steps .step.wait small{color:var(--warn-ink)}.steps .step .hold{display:inline-flex;color:var(--warn-ink)}.steps .step .hold svg{width:18px;height:18px}
.node.wait{border-color:var(--warn-line)}.node.wait .n-sub{color:var(--warn-ink)}.node .hold{display:inline-flex;color:var(--warn-ink)}.node .hold svg{width:14px;height:14px}
.node.running{border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--cc) 14%,transparent)}
.node.running::before{content:"";position:absolute;inset:-2px;border-radius:var(--r);padding:2px;background:conic-gradient(from var(--a),transparent 0 60%,var(--cc));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring 1s linear infinite;pointer-events:none}
@keyframes ring{to{--a:360deg}}
.port{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--surface);border:1.5px solid var(--edge-strong);top:33px;cursor:crosshair}
.port.in{left:-7px}.port.out{right:-7px}
.port.out:hover,.port.hot{background:var(--accent-strong);border-color:var(--accent);transform:scale(1.3)}
.readonly .port{pointer-events:none}
.badge-dot{width:15px;height:15px;border-radius:50%;color:#fff;font:600 10px/15px var(--sans);text-align:center}
.badge-dot.w{background:var(--warn);color:#0F1B2D}.badge-dot.e{background:var(--bad)}
.chk{width:15px;height:15px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff}
.chk svg{width:9px;height:9px}
.spin{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--cc,var(--accent)) 25%,transparent);border-top-color:var(--cc,var(--accent));border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.drag-ghost{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg);opacity:.95}
.drag-ghost .node{position:static}
.edge-del{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;transform:translate(-50%,-50%);cursor:pointer;color:var(--bad);padding:0;z-index:4}
.edge-del svg{width:11px;height:11px}
.cv-empty{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);width:min(460px,90%);pointer-events:none}
.cv-empty h3{color:var(--ink);margin:0 0 6px}
.zoom{position:absolute;right:14px;bottom:14px;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;z-index:3}
.zoom button{width:32px;height:32px;border:0;background:none;cursor:pointer;font-size:16px;color:var(--ink-2)}
.zoom button+button{border-left:1px solid var(--line)}
.panel{position:absolute;top:0;right:0;bottom:0;width:320px;background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 36px -24px rgba(15,27,45,.45);transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:6;display:flex;flex-direction:column}
.panel.open{transform:none}
.panel .ph{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.panel .ph .n-ico{width:30px;height:30px;border-radius:var(--r)}
.panel .ph .n-ico svg{width:16px;height:16px}
.panel .kick{font:600 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.panel .pn{width:100%;border:1px solid transparent;border-radius:var(--r);font:500 15px var(--sans);padding:1px 4px;margin-left:-5px;background:transparent}
.panel .pn:hover,.panel .pn:focus{border-color:var(--line);outline:0}
.panel .pb{flex:1;overflow:auto;padding:4px 16px 16px}
/* Test up to here and the price: one row with a gap (they were two inline boxes with nothing between them) */
.panel .cost{display:inline-flex;align-items:center;gap:5px;margin:8px 0 0;padding:3px 9px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500}
.panel .cost svg{width:12px;height:12px}
.panel .pf{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.x{width:30px;height:30px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;margin-left:auto}
.x svg{width:12px;height:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:var(--r);padding:4px 10px;background:var(--surface);cursor:pointer}
.chip.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent);font-weight:500}
/* a picked chip in a block's settings shows a tick, so on and off are told apart at a glance (Showcases test, 2026-10-30) */
.panel .chip.on{border-color:var(--accent);color:var(--accent)}.panel .chip.on::before{content:'\2713';margin-right:5px;font-weight:600}
/* the run panel keeps its own cursor after a block was dragged on the canvas */
.drawer{cursor:auto}
.ag-calls{margin:6px 0 0;padding-left:16px;font-size:12.5px;color:var(--ink-2,var(--ink))}.ag-calls li{margin:2px 0}.ag-calls li.bad{color:var(--bad)}.drawer .tbl{cursor:default}
.rng{display:flex;align-items:center;gap:10px}
.rng input{flex:1;accent-color:var(--accent)}
.rng span{font:12px var(--sans);min-width:44px;text-align:right}
.tgl{position:relative;display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl span{flex:none;width:34px;height:20px;border-radius:var(--r);background:var(--line);position:relative;transition:background .2s}
.tgl span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl input:checked+span{background:var(--accent-strong)}
.tgl input:checked+span::after{transform:translateX(14px)}
.note{font-size:12px;color:var(--muted);margin-top:6px}
.note.w{color:var(--warn)}
.drawer{position:absolute;left:0;right:0;bottom:0;height:46%;min-height:240px;background:var(--surface);border-top:1px solid var(--line);transform:translateY(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:7;display:flex;flex-direction:column;box-shadow:0 -18px 40px -26px rgba(15,27,45,.45)}
.drawer.open{transform:none}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.drawer .db{flex:1;overflow:auto}
.drawer .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sum{display:flex;gap:6px;flex-wrap:wrap}
.sum span{font:11px var(--sans);padding:4px 8px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2)}
.preview-note{font-size:12px;color:var(--ink-2);padding:8px 16px;background:var(--warn-bg-2);border-bottom:1px solid var(--line-2)}
.side-panel{position:absolute;top:0;right:0;bottom:0;width:360px;background:var(--surface);border-left:1px solid var(--line);z-index:8;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-16px 0 36px -24px rgba(15,27,45,.45)}
.side-panel.open{transform:none}
.side-panel .sh{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.side-panel .sh h3{margin:0;font-size:15px}
.side-panel .sb{flex:1;overflow:auto;padding:12px 16px}
.side-panel .sf{padding:12px 16px;border-top:1px solid var(--line-2)}
.cmt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.cmt b{font-size:13px}.cmt time{font-size:11px;color:var(--muted);margin-left:6px}
.cmt p{margin:3px 0 0;white-space:pre-wrap;font-size:13px;color:var(--ink-2)}
.banner-ro{background:var(--warn-bg-2);border-bottom:1px solid var(--line-2);padding:8px 16px;font-size:12.5px;color:var(--ink-2)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:50;transform:translateX(-102%);transition:transform .3s}
  .side.open{transform:none}
  .mobile-top{display:flex!important}
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .panel,.side-panel{width:100%}
  .page{padding:18px 16px 60px}
}
.verify-bar{background:var(--warn-bg-2);border-bottom:1px solid var(--line);padding:8px 16px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mobile-top{display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.mobile-top .logo{height:18px;width:46px}

.field-note{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted)}
.field-note.bad{color:var(--bad)}
.field-note.good{color:var(--ok)}
.otp{display:flex;gap:8px;justify-content:space-between;margin:18px 0 2px}
.otp .inp{width:46px;height:54px;padding:0;text-align:center;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
.linkbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
@media (max-width:400px){.otp{gap:5px}.otp .inp{width:40px;height:48px}}

/* ---------- phones ---------- */
.add-fab,.lib-close{display:none}
@media (max-width:900px){
  .ed-body{grid-template-columns:1fr}
  .add-fab{display:flex;position:absolute;left:14px;bottom:14px;z-index:4;height:44px;padding:0 16px 0 12px;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent-strong);color:#fff;font:500 14px var(--sans);align-items:center;gap:6px;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 70%,transparent);cursor:pointer}
  .add-fab svg{width:18px;height:18px}
  .readonly .add-fab{display:none}
  .ed-body .lib{display:block;position:absolute;left:0;right:0;bottom:0;height:62%;z-index:9;border:0;border-top:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -18px 40px -20px rgba(15,27,45,.45);padding:8px 14px calc(16px + env(safe-area-inset-bottom));transform:translateY(104%);transition:transform .3s cubic-bezier(.2,.8,.2,1);overflow:auto;-webkit-overflow-scrolling:touch}
  .ed-body.lib-open .lib{transform:none}
  .ed-body .lib .lib-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-8px;background:var(--surface);padding:8px 0 6px;z-index:1}
  .ed-body .lib .lib-head b{font-size:15px}
  .lib-close{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer}
  .lib-close svg{width:16px;height:16px}
  .ed-body .lib-item{height:40px;font-size:14px;touch-action:pan-y}
  .ed-body .lib .lib-items{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  .zoom button{width:40px;height:40px}
  .zoom [data-z="-"],.zoom [data-z="+"]{display:none}   /* phones pinch to zoom; room for undo and redo */
  .drawer{height:78%}
  .drawer .grid2{grid-template-columns:minmax(0,1fr)}
  .panel{box-shadow:none}
}
/* a live flow with run labels: the buttons go to icons a little sooner */
@media (min-width:641px) and (max-width:1560px){
  .ed-top.has-runs .btn .bl{display:none}
  .ed-top.has-runs #bCmt,.ed-top.has-runs #bHist,.ed-top.has-runs #bShare,.ed-top.has-runs #bMore,.ed-top.has-runs #bDup{width:34px;padding:0;justify-content:center}
}
@media (max-width:640px){
  .ed-top{gap:6px;padding:8px 10px}
  .ed-top .name{flex:1 1 140px;min-width:0;max-width:none;font-size:15px;padding:4px 6px;font-weight:500}
  .ed-top .save,.ed-top .vis{display:none}
  .ed-top .spacer{flex:0 0 100%;height:0}
  .ed-status{flex:1 1 100%;flex-wrap:wrap;gap:6px;order:2}
  .ed-top .btn{order:3}
  .ed-top .back{order:0}
  .ed-top .btn.sm{height:34px}
  .ed-top .btn .bl{display:none}
  .ed-top #bRun{margin-left:auto}
  .page-head h1{font-size:22px}
  .t-shared th:nth-child(2),.t-shared td:nth-child(2),.t-shared th:nth-child(3),.t-shared td:nth-child(3),.t-shared th:nth-child(6),.t-shared td:nth-child(6),
  .t-runs th:nth-child(4),.t-runs td:nth-child(4),.t-runs th:nth-child(5),.t-runs td:nth-child(5),.t-runs th:nth-child(6),.t-runs td:nth-child(6),
  .t-team th:nth-child(3),.t-team td:nth-child(3),
  .t-inv th:nth-child(3),.t-inv td:nth-child(3),.t-inv th:nth-child(4),.t-inv td:nth-child(4),
  .t-conn th:nth-child(3),.t-conn td:nth-child(3),
  .t-orgs th:nth-child(2),.t-orgs td:nth-child(2),.t-orgs th:nth-child(3),.t-orgs td:nth-child(3),.t-orgs th:nth-child(5),.t-orgs td:nth-child(5),.t-orgs th:nth-child(6),.t-orgs td:nth-child(6),.t-orgs th:nth-child(8),.t-orgs td:nth-child(8){display:none}
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}
  .modal-back{place-items:end center;padding:0}
  .modal{max-width:none!important;border-radius:var(--r) var(--r) 0 0;max-height:92vh;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
  .side-panel{width:100%}
}
.lib-head{display:none}
@media (max-width:900px){.ed-body .lib .lib-head{display:flex}}
.ed-top .back{width:32px;padding:0;justify-content:center;flex:none}
.ed-top .back svg{width:18px;height:18px}
@media (max-width:900px){.ed-body .lib .lib-items{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ed-body .lib-item .li-badge{display:none}}
@media (max-width:640px){
  .ed-top{gap:5px}
  .ed-top .btn.sm{padding:0 10px}
  .ed-top #bCmt,.ed-top #bHist,.ed-top #bShare,.ed-top #bMore,.ed-top #bDup,.ed-top #bTpl,.ed-top #bClear{width:36px;padding:0}
}

.guest{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.guest .ed{flex:1;min-height:0;display:grid}

.only-narrow{display:none}
@media (max-width:900px){
  .only-wide{display:none}.only-narrow{display:block}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}   /* above the tabs, never over the top bar (audit, 2026-10-18) */
}

.legal-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;padding:0 6px;font-size:12px;color:var(--muted)}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--accent);text-decoration:underline}
.auth{grid-template-rows:1fr auto}
.agree{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.agree input{width:17px;height:17px;margin:1px 0 0;flex:none;accent-color:var(--accent)}

/* ---------- library search */
.lib-search{display:flex;align-items:center;gap:8px;height:36px;margin:2px 0 6px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--muted);cursor:text}
.lib-search:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.lib-search svg{width:15px;height:15px;flex:none}
.lib-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:0;height:100%}
.lib-search input::-webkit-search-cancel-button{cursor:pointer}
.lib-none{font-size:12.5px;color:var(--muted);margin:10px 6px;line-height:1.5}
/* ---------- branch ports */
.port.out.p-yes{top:21px}.port.out.p-no{top:53px}
.port.out.p-fail{top:auto;bottom:-6px;left:50%;right:auto;margin-left:-5px;width:10px;height:10px;border-color:#D9534F;opacity:0;transition:opacity .15s}
.node:hover .port.p-fail,.node.selected .port.p-fail,.node.has-fail .port.p-fail{opacity:1}
.port.out.p-fail:hover,.port.p-fail.hot{background:#D9534F;border-color:#D9534F}
.edge.edge-fail{stroke:#D9534F;stroke-dasharray:3 4}.edge.edge-fail.ok{stroke:#D9534F}
.pfail{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.pfail .note{margin:6px 0 0}
textarea.inp.code{font:12.5px/1.5 var(--mono);white-space:pre;overflow:auto;tab-size:2;min-height:160px}textarea.inp.code[data-k="sql"]{min-height:96px;white-space:pre-wrap}
.port-lab{position:absolute;right:9px;font:600 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.port-lab.p-yes{top:23px;color:var(--ok)}.port-lab.p-no{top:55px;color:var(--bad)}
.edge.edge-no{stroke-dasharray:6 5}
/* ---------- settings fields */
.fld{margin:0}
.ferr{font-size:12px;color:var(--bad);margin-top:5px}
.ferr:empty{display:none}
.tz-local{display:inline-block;margin-top:6px;font-size:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;padding:5px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tags:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;background:var(--accent-soft);color:var(--ink);border-radius:var(--r);padding:4px 6px 4px 10px}
.tag button{display:grid;place-items:center;width:18px;height:18px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--muted);padding:0}
.tag button:hover{background:var(--surface);color:var(--bad)}
.tag button svg{width:11px;height:11px}
.tag-in{flex:1;min-width:120px;border:0;outline:0;font:inherit;font-size:13px;padding:4px;background:transparent}
input[type=time].inp{font-variant-numeric:tabular-nums}
/* ---------- Ask xMap AI */
/* centred in the room left of the tools at the bottom right, so the two never overlap (product audit, Q3) */
/* the AI box sits on the canvas's middle line, like the home card and "Start building" (owner, 2026-10-11: "nothing aligned"); where the
   canvas is too narrow for it to clear the zoom buttons at the bottom right, it rises above them instead of moving aside */
.ai-wrap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));z-index:4;display:flex;flex-direction:column;gap:8px}
.no-ai .ai-wrap,.readonly .ai-wrap{display:none}
.ai-bar{display:flex;align-items:flex-end;gap:8px;min-height:46px;padding:5px 5px 5px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.ai-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.ai-ico{display:grid;place-items:center;color:var(--accent);flex:none;height:34px}
.ai-ico svg{width:19px;height:19px}
.ai-bar textarea{flex:1;min-width:0;height:34px;max-height:132px;padding:7px 0;border:0;outline:0;resize:none;overflow-y:auto;font:inherit;font-size:14px;line-height:20px;background:transparent;color:var(--ink)}
.ai-bar button{width:34px;height:34px;border-radius:var(--r);border:0;background:var(--accent-strong);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.ai-bar button svg{width:16px;height:16px}
.ai-bar.busy .ai-ico{animation:none}   /* the X does not spin: while Ask xMap works its arms light up in turn (.xai, 2026-10-21) */
.ai-msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;font-size:13px;line-height:1.5;color:var(--ink-2);box-shadow:var(--shadow)}
/* the chat (owner, 2026-10-09): stays beside a block's settings panel, so a selected block can be changed by asking */
.panel.open~.ai-wrap{left:calc((100% - 320px) / 2);width:min(560px,calc(100% - 360px))}
.ai-bar .ai-exp{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.ai-bar .ai-exp:hover{background:var(--accent-soft);color:var(--accent)}
.ai-sel{display:inline-flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;max-width:42%;height:28px;margin:3px 2px 3px 0;padding:0 2px 0 10px;background:var(--accent-soft);color:var(--accent);border-radius:var(--r);font:500 12.5px/1 var(--sans);cursor:default}
.ai-sel[hidden]{display:none}
.ai-sel span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-bar .ai-sel button{width:22px;height:22px;border:0;border-radius:var(--r);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:none}
.ai-bar .ai-sel button svg{width:13px;height:13px}
.ai-bar .ai-sel button:hover{background:var(--surface)}
.ai-wrap.big{width:min(560px,calc(100% - 32px))}
.panel.open~.ai-wrap.big{width:min(560px,calc(100% - 360px))}
.ai-chat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);height:min(44vh,420px);min-height:220px;overflow:hidden}
.ai-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line)}
.ai-t{flex:1;display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.ai-t small{font-weight:400;color:var(--muted)}
.ai-t svg{color:var(--accent)}
.ai-head button{height:30px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 10px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.ai-head .ai-min{width:30px;padding:0}
.ai-head button:hover{background:var(--accent-soft);color:var(--accent)}
.ai-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-m{max-width:88%;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.5}
.ai-m>div{padding:9px 12px;border-radius:var(--r);white-space:pre-wrap;overflow-wrap:anywhere}
.ai-m.me{align-self:flex-end;align-items:flex-end}
.ai-m.me>div{background:var(--accent-strong);color:#fff;border-bottom-right-radius:4px}
.ai-m.ai{align-self:flex-start}
.ai-m.ai>div:first-of-type{padding-right:34px}
.ai-m.ai>div{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.ai-m.err>div{background:var(--bad-bg);color:var(--bad)}
.ai-m.typing>div{display:flex;align-items:center;gap:8px;color:var(--muted)}
.ai-on{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.ai-on svg{width:12px;height:12px}
.ai-diff{font:500 12px var(--sans);color:var(--muted)}
.ai-undo{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.ai-undo:hover{background:var(--accent-soft);color:var(--accent)}
.ai-empty{margin:auto 0;display:flex;flex-direction:column;gap:6px;text-align:center;color:var(--ink-2);font-size:14px;padding:10px}
.ai-empty b{font-weight:600;color:var(--ink)}
@media (max-width:900px){
  .ai-wrap{left:12px;right:12px;width:auto;transform:none;bottom:calc(12px + env(safe-area-inset-bottom))}
  .ai-wrap.big,.panel.open~.ai-wrap.big{width:auto}
  .panel.open~.ai-wrap{display:none}
  .ai-chat{height:min(50dvh,440px)}
  .add-fab{bottom:calc(70px + env(safe-area-inset-bottom))}
  .zoom{bottom:calc(70px + env(safe-area-inset-bottom))}
  .ai-bar textarea{font-size:16px}
  .ed-body .lib-search input{font-size:16px}
}
/* a phone is too narrow for Add block and the canvas toolbar side by side (they overlapped: the toolbar's first buttons
   were under Add block): the toolbar goes one row up */
@media (max-width:560px){
  .zoom{bottom:calc(124px + env(safe-area-inset-bottom))}
}

/* ---------- reference files */
.files{display:flex;flex-direction:column;gap:8px}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.f-ext{flex:none;width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--bad-bg);color:var(--bad);font:500 11px var(--sans)}
.f-meta{flex:1;min-width:0}
.f-meta a,.f-meta b{display:block;font-weight:500;font-size:13px;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-meta a:hover{color:var(--accent);text-decoration:underline}
.f-meta small{display:block;font-size:11.5px;color:var(--muted)}
.f-rm{flex:none;width:28px;height:28px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.f-rm:hover{color:var(--bad);border-color:var(--bad)}
.f-rm svg{width:13px;height:13px}
.f-empty{font-size:12.5px;color:var(--muted)}
.f-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f-up{cursor:pointer}
.f-pick{flex:1;min-width:160px;height:32px;font-size:12.5px}
.f-status{font-size:12px;color:var(--muted)}
.f-status:empty{display:none}
.f-status.bad{color:var(--bad)}

.next-run{font-size:12px;font-weight:500;color:var(--ok);white-space:nowrap}
.next-run:empty{display:none}
.pill.done{background:var(--surface-2);color:var(--ink-2)}
.last-run{font:500 12px var(--sans);white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:3px 10px;cursor:pointer;color:var(--ink-2)}
.presence{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}.presence[hidden]{display:none}.presence .avatar.sm{width:22px;height:22px;font-size:10px;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}.presence .avatar.editing{box-shadow:0 0 0 2px var(--ok)}
.last-run.ok{color:var(--ok);border-color:#BFE3CD}.last-run.bad{color:var(--bad);border-color:var(--bad-line)}.last-run.wait{color:var(--warn-ink);border-color:var(--warn-line)}
.preview-note.wait-note{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-ink);flex-wrap:wrap}.wait-note>svg{flex:0 0 auto;margin-top:2px}.wait-note>div{flex:1 1 260px;min-width:0}.wait-note .wn-btns{display:flex;gap:8px;flex-wrap:wrap}
.last-run:hover{background:var(--surface-2)}
.last-run[hidden]{display:none}
@media (max-width:640px){.ed-top .next-run{font-size:11.5px}.ed-top .last-run{font-size:11px;padding:2px 8px}}

/* ---------- maps */
.c-area{--cc:var(--k-area)}
:root{--k-area:#B83280}
.geo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;padding:5px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.geo:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.geo .tag{max-width:100%}
.geo .tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-in-wrap{position:relative;flex:1;min-width:140px}
.geo-in{width:100%;border:0;outline:0;font:inherit;font-size:13px;padding:4px;background:transparent}
.geo-drop{position:absolute;left:-6px;right:-6px;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:260px;overflow:auto;padding:4px}
.geo-drop button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 9px;border-radius:var(--r);cursor:pointer;font:inherit}
.geo-drop button b{display:block;font-size:13px}
.geo-drop button small{display:block;font-size:11.5px;color:var(--muted)}
.geo-drop button:hover,.geo-drop button.on{background:var(--accent-soft)}
.geo-none{padding:8px 10px;font-size:12.5px;color:var(--muted)}
.draw-search .geo-drop{left:0;right:0}
.shapes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shape-sum{font-size:13px;color:var(--ink-2);flex:1;min-width:120px}
.aoi-mini{height:180px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.map-loading{display:grid;place-items:center;height:100%;min-height:120px;font-size:12.5px;color:var(--muted);text-align:center;padding:10px}
.modal.draw-modal{max-width:1100px!important;width:100%;height:min(88vh,860px);display:flex;flex-direction:column;padding:16px 18px}
.draw-head{display:flex;align-items:center;justify-content:space-between}
.draw-head h2{margin:0}
.draw-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.draw-tools .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.conn-new{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.draw-pt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.draw-r{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.draw-r select.inp{width:auto;height:32px;padding:0 28px 0 8px;font-size:13px}
.draw-search{position:relative;flex:1;min-width:200px}
.draw-search .inp{height:32px}
.draw-map{flex:1;min-height:260px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.draw-json{margin-top:10px}
.draw-json textarea{font:12px var(--mono)}
.run-maps{padding:12px 16px 0}
.run-map{margin-bottom:12px}
.rm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rm-head b{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.rm-head b svg{width:16px;height:16px;color:var(--accent)}
.rm-head .spacer{flex:1}
.rm-map{height:320px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.map-legend{background:var(--glass);border-radius:var(--r);padding:6px 9px;font:12px var(--sans);color:var(--ink-2);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;max-width:200px}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.map-card{display:flex;flex-direction:column;gap:3px;padding:16px;text-decoration:none;color:var(--ink)}
.map-card:hover{border-color:var(--accent)}
.map-card small{color:var(--muted);font-size:12.5px}
.mc-ico{width:34px;height:34px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:6px}
.mc-ico svg{width:18px;height:18px}
.map-full{height:min(62vh,620px);overflow:hidden;padding:0}
.map-name{font-size:24px!important;font-weight:600;border:1px solid transparent;border-radius:var(--r);padding:2px 6px;margin-left:-7px;width:100%;max-width:640px;background:transparent;font-family:inherit;color:var(--ink)}
.map-name:hover,.map-name:focus{border-color:var(--line);background:var(--surface);outline:0}
.map-actions{display:flex;gap:8px;flex-wrap:wrap}
.leaflet-container{font-family:var(--sans);isolation:isolate}   /* the map's own layers (400 to 1000) stay inside the map, under windows and menus */
@media (max-width:640px){
  .modal.draw-modal{height:92vh;border-radius:var(--r) var(--r) 0 0;padding:12px}
  .draw-tools .btn{padding:0 9px}
  .rm-map{height:260px}
  .map-full{height:52vh}
  .map-name{font-size:20px!important}
}
.xm-tiles{filter:grayscale(.85) brightness(1.04) contrast(.92)}

/* ---------- tidy up */
.zoom .z-tidy{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 11px;font:500 12.5px var(--sans);color:var(--ink)}
.zoom .z-tidy svg{width:15px;height:15px}
.zoom .z-keys{font:500 14px var(--sans)}
.kbd-help{position:absolute;z-index:8;right:16px;bottom:64px;width:min(440px,calc(100% - 32px));max-height:calc(100% - 90px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(15,27,45,.45);padding:12px 16px 14px;cursor:default;user-select:text}
.kbd-help .kh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.kbd-help .kh-head b{font-size:15px}
.kbd-help h5{margin:12px 0 4px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kbd-help table{width:100%;border-collapse:collapse;font-size:12.5px}
.kbd-help td{padding:4px 0;vertical-align:top;color:var(--ink-2)}
.kbd-help table{table-layout:fixed}.kbd-help td:first-child{padding-right:12px;width:46%}
.kbd-help kbd{display:inline-block;min-width:20px;text-align:center;font:500 11px var(--mono);background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r);padding:1px 5px;color:var(--ink)}
.zoom .z-hist{display:inline-flex;align-items:center;justify-content:center}
.zoom .z-hist svg{width:16px;height:16px}
.zoom button:disabled{opacity:.35;cursor:default}
.readonly .zoom .z-tidy{display:none}
@media (max-width:640px){.zoom .z-tidy span{display:none}.zoom .z-tidy{width:40px;padding:0;justify-content:center}}

/* book a call, leave your email, and the free starter card */
.call-side{width:100%;justify-content:center;margin-bottom:10px;text-decoration:none}
.auth-more{width:100%;max-width:420px;margin:14px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font-size:13.5px;color:var(--ink-2)}
.auth-more b{color:var(--ink);font-size:14.5px}
.auth-more p{margin:2px 0 10px}
.auth-more form{display:flex;gap:8px;margin-bottom:10px}
.auth-more form .inp{flex:1;min-width:0}
.auth-more .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.auth-more a.btn{width:100%;justify-content:center;text-decoration:none}
.lead-msg{font-size:13px;font-weight:500;margin-bottom:10px}
.lead-msg:empty{display:none}
.lead-msg.bad,.st-note.bad{color:var(--bad)}
.lead-msg.ok{color:var(--ok)}
.starter{padding:18px 20px;margin-bottom:18px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--surface)}
.starter .st-txt h3{margin:8px 0 4px;font-size:17px}
.starter .st-txt p{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.st-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.st-f{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:0;font-size:12px;font-weight:500;color:var(--muted)}
.st-f.st-t{flex:0 1 130px}
.st-form .btn{height:40px;text-decoration:none}
.st-note{margin-top:10px;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.st-form .btn{flex:1 1 100%;justify-content:center}.st-f.st-t{flex:1 1 120px}}
.auth{grid-template-rows:1fr auto auto}

/* connections, access keys, webhook and MCP tool panels */
.conn-note{margin-bottom:6px;background:var(--surface-2)}
.conn-h{margin:22px 0 4px;font-size:15px}
.cstat small{display:block;color:var(--muted);font-size:11.5px;margin-top:5px;max-width:380px;line-height:1.4}
.t-conn td.nm small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.code-box{font:11.5px/1.5 var(--mono);background:var(--surface-2,#F4F6FA);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;white-space:pre-wrap;word-break:break-all;margin:6px 0 8px;max-height:220px;overflow:auto}
.mono-in{font-family:var(--mono);font-size:12px}
.tool-list{display:grid;gap:6px}
.tool{text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink-2)}
.tool:hover{border-color:var(--accent)}
.tool.on{border-color:var(--accent);background:var(--accent-soft)}
.tool b{font-size:13px}
.tool small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
/* editor top bar: the status strip (pills, next and last run, edit note) shrinks and fades; the buttons always fit */
.ed-status{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
@media (min-width:641px){
  .ed-top{min-width:0;max-width:100%}
  .ed-status{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .ed-status>*{flex:none}
  .ed-top .btn{flex:none}
}
/* editor top bar: one line on desktop; the edit note gives way first, then button labels */
@media (min-width:641px){
  .ed-top{flex-wrap:nowrap}
  .ed-top .save{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
  .ed-top .name{flex:0 1 auto;min-width:90px}
  .ed-top .btn,.ed-top .pill,.ed-top .next-run{flex:none}
}
@media (min-width:641px) and (max-width:1680px){
  .ed-top .save{display:none}   /* the check beside the name says it (its time on hover) */
}
@media (min-width:641px){
  .ed-top .next-run,.ed-top .last-run{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:641px) and (max-width:1500px){
  .ed-top .vis{display:none}
}
@media (min-width:641px) and (max-width:1100px){
  .ed-top .btn .bl{display:none}
  .ed-top #bCmt,.ed-top #bHist,.ed-top #bShare,.ed-top #bMore,.ed-top #bDup,.ed-top #bTpl,.ed-top #bClear{width:34px;padding:0;justify-content:center}
  .ed-top .vis{display:none}
}
@media (max-width:640px){
  .t-conn thead{display:none}
  .t-conn tr{display:block;padding:10px 0;border-bottom:1px solid var(--line-2,var(--line))}
  .t-conn tr:last-child{border-bottom:0}
  .t-conn td{display:block;border:0!important;padding:4px 14px!important}
  .t-conn td:nth-child(3){display:none}
  .t-conn td:last-child{text-align:left!important;white-space:normal!important;padding-top:8px!important}
  .cstat small{max-width:none}
}
.preview-note.sent{background:var(--ok-bg);color:var(--ok-ink)}
.preview-note.pn-handled{background:var(--warn-bg);color:var(--warn-ink)}
.preview-note.pn-error{background:var(--bad-bg);color:var(--bad)}   /* theme colours: they were written in light ones (2026-10-16) */
.preview-note .btn{margin-left:8px;vertical-align:middle}
/* app blocks (Activepieces apps) */
:root{--k-app:#0E7C6B}
.c-app{--cc:var(--k-app)}
.n-ico img,.li-ico img{width:16px;height:16px;object-fit:contain;display:block}
.n-ico img[src$="typesafe.png"],.li-ico img[src$="typesafe.png"]{width:100%;height:100%;border-radius:inherit}
.ph .n-ico img{width:20px;height:20px}
.avatar.app-logo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);flex:none;display:grid;place-items:center}
.avatar.app-logo img{width:70%;height:70%;object-fit:contain}
.apin .apf{margin-bottom:2px}
.apdd{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.apdd select{width:100%}
.apdyn .apsub{border-left:3px solid var(--line);padding-left:10px;margin-top:4px}
/* Live: the dot pulses so a live flow looks active; just deployed: the button and the pill flash once */
.pill.live::before{animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.btn.busy{opacity:.85;pointer-events:none}
.btn.just-live{animation:deployFlash 2.4s ease-out}
@keyframes deployFlash{0%{background:var(--ok);border-color:var(--ok);transform:scale(1.08)}15%{transform:scale(1)}30%{background:var(--accent-strong);border-color:var(--accent)}45%{background:var(--ok);border-color:var(--ok)}100%{}}
.pill.just-live{animation:pillPop 1.2s ease-out}
@keyframes pillPop{0%{transform:scale(1.35);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}40%{transform:scale(1)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.pill.live::before,.btn.just-live,.pill.just-live{animation:none}}
/* the home page (flows.xmap.ai): a slim header, then the guest editor full screen with the live flow's choices floating on it */
.home{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.home-ed{flex:1;min-height:0;height:auto}
.try-card{position:absolute;z-index:6;top:28px;left:50%;transform:translateX(-50%);width:min(780px,calc(100% - 32px));box-sizing:border-box;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 10px;box-shadow:var(--shadow-lg,0 24px 60px -20px rgba(15,27,45,.35));backdrop-filter:blur(6px)}
.try-card h1{font-size:18px;line-height:1.2;margin:0 30px 2px 0;letter-spacing:-.01em;color:var(--ink)}
.try-card .lede{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin:0 30px 8px 0;min-height:2.9em}
.try-card.compact{padding:10px 44px 8px 14px}
.try-card.compact h1,.try-card.compact .lede{display:none}
.try-min{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.try-min svg{width:14px;height:14px}
.try-pill{position:absolute;z-index:6;top:28px;left:50%;transform:translateX(-50%);height:38px;padding:0 16px;border-radius:var(--r);border:0;background:var(--accent-strong);color:#fff;font:500 14px var(--sans);display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:var(--shadow)}
.try-pill svg{width:15px;height:15px}
.try-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.try-bar label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:500;color:var(--muted);min-width:0;flex:0 1 130px}
.try-bar label.grow{flex:1;min-width:200px}
.try-bar .inp{height:36px;font-size:14px}
.try-bar .btn{height:36px;font-size:14px;padding:0 14px}
.try-bar.off{opacity:.75}
.city-box{position:relative;display:block}
.city-box .inp{width:100%;box-sizing:border-box}
.city-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;width:240px;max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg,0 24px 60px -20px rgba(15,27,45,.35));padding:4px}
.city-list .ci{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:var(--r);font:500 14px var(--sans);color:var(--ink);cursor:pointer}
.city-list .ci:hover,.city-list .ci.on{background:var(--accent-soft)}
.city-list .ci.own{color:var(--accent)}
.city-list .ci.none{color:var(--muted);cursor:default}
.city-list .ch{display:block;padding:8px 10px 4px;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.city-list .ci small{display:block;margin-top:1px;font:400 11.5px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-list .ci.own small{color:var(--ink-2)}
.city-list.find-list{width:300px;max-height:min(360px,60vh)}
.city-list .fi-pop{display:flex;flex-wrap:wrap;gap:6px;padding:2px 8px 8px}
.city-list .fi-pop .ci.fpop{display:inline-flex;width:auto;padding:6px 11px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;line-height:1.2}
.city-list .fi-pop .ci.fpop:hover,.city-list .fi-pop .ci.fpop.on{border-color:var(--accent);color:var(--accent)}
.city-list .ci.sec,.city-list .ci.back{display:flex;align-items:center;justify-content:space-between;gap:8px}
.city-list .ci.back{justify-content:flex-start;color:var(--accent)}
.city-list .ci.sec svg{color:var(--muted);flex:none}
.city-list .ch.sec-h{color:var(--ink);font:600 13px var(--sans);text-transform:none;letter-spacing:0;padding-top:4px}
/* the card's one-tap filters (step 2): a row of toggles; on phones one line that scrolls sideways inside the card */
.try-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;order:10;flex:1 1 100%}
.try-chip{height:30px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:500 12.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.try-chip:hover{border-color:var(--accent);color:var(--accent)}
.try-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.try-chip[aria-pressed="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.try-card.compact .try-chips{margin-top:0}
/* the three questions (step 3): a switch on top; each question shows its own fields */
.try-modes{display:inline-flex;gap:2px;padding:3px;margin:0 30px 8px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);max-width:100%;overflow-x:auto;scrollbar-width:none}
.try-modes::-webkit-scrollbar{display:none}
.try-modes button{height:30px;padding:0 12px;border:0;border-radius:var(--r);background:none;color:var(--ink-2);font:500 13px var(--sans);cursor:pointer;white-space:nowrap;flex:none;transition:background .15s,color .15s,box-shadow .15s}
.try-modes button:hover{color:var(--ink)}
.try-modes button[aria-selected="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(15,27,45,.12)}
/* every question has the same card: the same width and height, its own fields in one slot of the same size, the email
   and Run always in the same place, the filters under them (owner, 2026-10-11: "the experience needs to be identical") */
.try-card:not(.m-brand) .try-brand,.try-card:not(.m-market) .try-radius{display:none}
.try-fields{display:flex;gap:8px;flex:1 1 0;min-width:0}
.try-fields > label{flex:1 1 0;min-width:0}
.try-bar > label.mail{flex:0 0 190px;min-width:0}
.try-bar > .btn{flex:0 0 132px;justify-content:center}
.node.n-live{animation:nLive .9s ease-out}
@keyframes nLive{0%{box-shadow:0 0 0 0 var(--accent-soft),var(--shadow)}30%{box-shadow:0 0 0 6px var(--accent-soft),var(--shadow)}100%{box-shadow:0 0 0 0 transparent,var(--shadow)}}
@media (prefers-reduced-motion:reduce){.node.n-live{animation:none}}
.try-chip:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--muted)}
.try-fields > label.try-radius{flex:0 0 86px}

.try-status .try-big{font-size:15px;color:var(--ink)}
/* a market's size or a brand's branches, as figures over the results */
.try-figs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 16px 0}
.try-figs > div{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:96px}
.try-figs b{font:600 20px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.try-figs span{font-size:12px;color:var(--muted)}
.try-figs .tf-big{flex:1 1 220px;background:var(--accent-soft);border-color:transparent}
.try-figs .tf-share{align-self:center;flex-direction:row;gap:6px;min-width:0;padding:8px 14px;border-radius:var(--r)}
.try-figs .tf-big b{font-size:30px;color:var(--accent);line-height:1.1}
.try-figs .tf-big span{color:var(--ink-2);font-size:13px}
@media (max-width:760px){.city-list{left:auto;right:0;width:220px}}
.try-bar label.mail i{font-style:normal;font-weight:500;color:var(--muted)}
.try-terms{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.home-legal{position:absolute;z-index:5;left:12px;bottom:12px;margin:0;padding:3px 9px;font-size:11.5px;color:var(--muted);background:var(--lg,rgba(255,255,255,.8));border:1px solid var(--lg-bd,var(--line));border-radius:var(--r)}
.home-legal a{color:inherit}
@media (max-width:760px){.home > .home-legal{position:static;align-self:center;margin:4px auto 16px;width:max-content}}
.home-legal a:hover{color:var(--accent)}
.try-terms[hidden]{display:none}
.try-card.compact .try-terms{margin-top:6px}
.try-status{min-height:18px;margin-top:6px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.try-status:empty{display:none}
.try-status.ok{color:var(--ok)}
.try-status.ok b{color:var(--ink)}
.try-status.bad{color:var(--bad)}
.try-status .spin{width:14px;height:14px;border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spinTry .8s linear infinite;display:inline-block}
@keyframes spinTry{to{transform:rotate(360deg)}}
.preview-note.try-cta{background:var(--accent-soft);color:var(--ink)}
.preview-note.try-cta .btn{margin-left:6px}
.modal .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:760px){
  .try-card{top:14px;width:calc(100% - 16px);padding:12px 12px 8px;border-radius:var(--r)}
  .try-card h1{font-size:19px}
  .try-card .lede{display:none}
  .try-bar{gap:8px}
  .try-bar label{min-width:0;flex:1 1 40%}
  .try-bar label.grow{flex:1 1 100%;min-width:0}
  .try-bar .inp,.try-bar .btn{height:40px;font-size:14.5px}
  .try-bar .btn{flex:1 1 100%;justify-content:center}
  .try-card.compact .try-bar label.grow{display:none}
  .try-bar label.mail{flex:1 1 100%;min-width:0}
  .try-card.compact .try-bar label.mail{display:none}
  /* phones: the two pickers' lists open as wide as the card, from the field's own edge */
  .try-fields{position:relative}
  .try-fields .city-box{position:static}
  .try-fields .city-list,.try-fields .city-list.find-list{left:0;right:0;width:auto}
}
.nm small.src{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px;color:var(--ink-2,#3A4860)}
/* the home card keeps its size when a block panel opens; it only moves to the middle of the canvas still visible */
.cv:has(> .panel.open) .try-card,.cv:has(> .panel.open) .try-pill{left:calc((100% - 320px) / 2)}
.cv:has(> .panel.open) .try-card{width:min(780px,calc(100% - 352px))}
@media (max-width:760px){.cv:has(> .panel.open) .try-card,.cv:has(> .panel.open) .try-pill{display:none}}
/* the home card's "Find" list and the city picker next to it: the same text position and the same arrow (select.inp, .inp.chev) */
.try-bar select.inp,.try-bar .city-box .inp{padding-left:12px}
/* the home page before the app has loaded (index.html): the same header, canvas and card, with grey stand-ins for the fields */
.home.boot .boot-top{height:54px;flex:none;background:var(--surface);border-bottom:1px solid var(--line)}
.home.boot .boot-body{flex:1;display:flex;min-height:0}
.home.boot .boot-lib{width:220px;flex:none;background:var(--surface);border-right:1px solid var(--line)}
.home.boot .boot-cv{flex:1;position:relative;background:var(--paper);background-image:radial-gradient(circle,var(--grid) 1.1px,transparent 1.4px);background-size:22px 22px}
.boot-bar{display:flex;gap:8px;margin-top:4px}
.boot-modes{width:min(330px,100%);height:38px;margin-bottom:8px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.boot-bar span{height:36px;flex:1 1 150px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.boot-bar span.w{flex:0 0 190px}
.boot-chips{display:flex;gap:6px;margin-top:8px}
.boot-chips i{height:30px;width:120px;border-radius:var(--r);border:1px solid var(--line)}
.boot-bar span.b{flex:0 0 132px;background:var(--accent-strong);border-color:var(--accent);opacity:.85}
.home.boot .try-card h1{margin-right:30px}
@media (max-width:760px){.boot-modes{width:100%;height:44px;margin-bottom:10px}.home.boot .boot-top{height:93px}.home.boot .boot-lib{display:none}.home.boot .try-card .lede{display:none}.boot-bar{flex-wrap:wrap}.boot-bar span{flex:1 1 100%}.boot-bar span.w,.boot-bar span.b{flex:1 1 100%}.boot-chips{overflow:hidden}.boot-chips i{flex:none}}
/* the home card draws the eye: a blue light runs around its edge (until the first run) with a soft glow */
.try-card::before{content:"";position:absolute;inset:-2px;border-radius:var(--r);padding:2px;background:conic-gradient(from var(--a),transparent 0 62%,rgba(61,99,217,.35) 72%,#3D63D9 84%,#7FA0FF 90%,transparent 97%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring 3.2s linear infinite;pointer-events:none}
.try-card{animation:tryGlow 3.2s ease-in-out infinite}
@keyframes tryGlow{0%,100%{box-shadow:0 24px 60px -20px rgba(15,27,45,.35),0 0 0 0 rgba(61,99,217,0)}50%{box-shadow:0 24px 60px -20px rgba(15,27,45,.35),0 0 26px 2px rgba(61,99,217,.22)}}
.try-card.compact,.try-card.compact::before{animation:none}
.try-card.compact::before{display:none}
@media (prefers-reduced-motion:reduce){.try-card,.try-card::before{animation:none}.try-card::before{background:linear-gradient(#3D63D9,#3D63D9);opacity:.5}}
/* owner's rule (2026-10-04): no bold type. Headings and emphasis at most Demi Bold (600); buttons, labels and titles Medium (500);
   what people type or pick is regular, in dark ink (a field never takes its label's weight or colour) */
h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}
.inp,input,select,textarea{font-weight:400}
.inp{color:var(--ink)}
.inp::placeholder{color:var(--placeholder);font-weight:400}
/* admin organizations: fits the page, no sideways scroll; the actions wrap when space is short */
.t-orgs{width:100%;table-layout:fixed}
.t-orgs th:nth-child(1){width:34%}.t-orgs th:nth-child(2){width:20%}.t-orgs th:nth-child(3){width:16%}.t-orgs th:nth-child(4){width:130px}.t-orgs th:nth-child(5){width:auto}
.t-orgs td{vertical-align:top;overflow-wrap:anywhere}
.t-orgs td small{display:block;color:var(--muted);font-size:12px;font-family:var(--sans);margin-top:2px}
.t-orgs td.acts{text-align:right}
.t-orgs td.acts .btn{margin:0 0 6px 6px}
@media (max-width:760px){.t-orgs,.t-orgs tbody,.t-orgs tr,.t-orgs td{display:block;width:auto}.t-orgs thead{display:none}.t-orgs tr{padding:10px 0;border-bottom:1px solid var(--line)}.t-orgs td{padding:4px 14px;border:0}.t-orgs td.acts{text-align:left}.t-orgs td.acts .btn{margin:0 6px 6px 0}}
/* admin: the apps everyone can see */
.apps-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.apps-head .spacer{flex:1}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.app-sw{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--surface);opacity:.55;font-size:13.5px}
.app-sw.on{opacity:1;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft)}
.app-sw img{width:22px;height:22px;object-fit:contain;flex:none}
.app-sw span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-sw input{flex:none;width:16px;height:16px;accent-color:var(--accent)}
/* results panel: a grip on its top edge to drag it taller, and a full-height button; the map grows with it */
.drawer .dr-grip{position:absolute;left:0;right:0;top:-6px;height:14px;cursor:ns-resize;z-index:2;display:flex;justify-content:center;align-items:center;touch-action:none}
.drawer .dr-grip span{width:44px;height:5px;border-radius:var(--r);background:var(--edge-strong);box-shadow:0 0 0 3px var(--surface)}
.drawer .dr-grip:hover span,.drawer.sizing .dr-grip span{background:var(--accent-strong)}
.drawer.sizing{transition:none;user-select:none}
.drawer .dr-full svg{width:16px;height:16px}
.drawer .dh .dr-full{margin-left:auto}
.drawer .dh .dr-full + .x{margin-left:0}
.rm-map{height:max(260px,calc(var(--drh,400px) * .58))}
/* ---------- phones: the home page is a page you scroll (the card on top, then the flow), and no text box makes iPhone zoom in */
@media (max-width:760px){
  .inp,input,select,textarea{font-size:16px !important}
  .home{height:auto;min-height:100dvh}
  .home > .try-card{position:relative;top:auto;left:auto;transform:none;width:auto;margin:12px 12px 4px;padding:16px 14px 12px;border-radius:var(--r)}
  .home > .try-card h1{font-size:21px;line-height:1.2;margin:0 0 4px}
  .home > .try-card .lede{display:block;font-size:13.5px;margin:0 0 12px}
  .home > .try-card .try-min{display:none}
  .home > .try-card .try-bar > label,.home > .try-card .try-bar > .btn{flex:1 1 100%;min-width:0}
  .home > .try-card .try-fields{flex:1 1 100%;flex-wrap:wrap}
  .home > .try-card .try-fields > label{flex:1 1 100%}
  .home > .try-card.m-market .try-fields > label.try-find{flex:1 1 55%}
  .home > .try-card.m-market .try-fields > label.try-radius{flex:1 1 30%}
  .home > .try-card.m-brand .try-fields > label.try-brand,.home > .try-card.m-brand .try-fields > label.try-find{flex:1 1 40%}
  .home > .try-card h1{min-height:2.4em}
  .home > .try-card .lede{min-height:5.8em}
  .home > .try-card .try-bar label.mail{flex:1 1 100%}
  .home > .try-card .try-bar .btn{flex:1 1 100%;height:46px;font-size:16px}
  .home > .try-card .try-bar .inp{height:44px}
  .home > .try-card .try-chips{order:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px;-webkit-overflow-scrolling:touch}
  .home > .try-card .try-chips::-webkit-scrollbar{display:none}
  .home > .try-card .try-chip{height:36px;padding:0 14px;font-size:14px;flex:none}
  .home > .try-card .try-modes{display:flex;width:100%;margin:0 0 10px;box-sizing:border-box}
  .home > .try-card .try-modes button{flex:1 1 auto;height:36px;padding:0 8px;font-size:13.5px}
  .try-figs{display:grid;grid-template-columns:1fr 1fr;margin:10px 12px 0}
  .try-figs .tf-big{grid-column:1 / -1}
  .home > .try-card.compact h1,.home > .try-card.compact .lede{display:block}
  .home > .try-card.compact .try-bar label.grow,.home > .try-card.compact .try-bar label.mail{display:flex}
  .home-ed{flex:none;height:78dvh;min-height:440px;margin:8px 0 0;border-top:1px solid var(--line);overflow:hidden;scroll-margin-top:52px}
  .home .xh .xh-long{display:none}
  .home .ed-top .name{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .home .ed-top .pill{display:none}
}

.near-pt{background:var(--surface);border:2.5px solid #233F99;border-radius:var(--r);box-sizing:border-box}

/* ---------------------------------------------------------------- billing */
.bill-flows .bill-note,.bill .bill-note{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;font-size:14px}
.bill-flows .bill-note.bad,.bill .bill-note.bad{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.bill-flows .bill-note svg,.bill .bill-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.bill-flows .bill-note b,.bill .bill-note b{font-weight:600}
.bill .bill-top{margin-bottom:28px}
.bill-lab{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.bill-big{font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bill-plan{font-size:24px;font-weight:600;display:flex;gap:10px;align-items:center}
.bill-bar{height:8px;border-radius:var(--r);background:color-mix(in srgb,var(--ok) 30%,var(--surface-2));overflow:hidden;margin:12px 0 8px}
.bill-bar i{display:block;height:100%;background:var(--accent-strong);border-radius:var(--r)}
.bill-split{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.bill-split .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.bill-split .dot.pl{background:var(--accent-strong)}.bill-split .dot.bo{background:color-mix(in srgb,var(--ok) 60%,transparent)}
.bill-sec{margin:28px 0}
.bill-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bill-sec-head h2{margin:0;font-size:18px;font-weight:600}
.bill-sec-head p{margin:0}
.seg{display:inline-flex;align-items:stretch;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r);padding:3px;background:var(--surface)}
.seg button{border:0;background:none;padding:0 14px;border-radius:var(--r);font:500 13px var(--sans);color:var(--muted);cursor:pointer}
.seg button.on{background:var(--accent-strong);color:#fff}
/* tabs inside a page (Team: People, Teams, Sharing groups...) */
.in-tabs{display:flex;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 0 20px}
.in-tabs::-webkit-scrollbar{display:none}
.in-tabs a{flex:none;padding:7px 14px;border-radius:var(--r);font:500 13px var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap}
.in-tabs a:hover{color:var(--ink)}
.in-tabs a.on{background:var(--accent-strong);color:#fff}
.in-tab-body{display:flex;flex-direction:column;gap:18px}
.seg em{font-style:normal;font-size:11px;opacity:.85;margin-left:4px}
.plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 12px}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.plan-card.pop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.plan-card.cur{background:var(--accent-soft)}
.plan-card h3{margin:0;font-size:16px;font-weight:600}
.plan-pop{position:absolute;top:-10px;left:16px;background:var(--accent-strong);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r)}
.plan-price{font-size:26px;font-weight:600;letter-spacing:-.01em}
.plan-price small{display:block;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan-cr{font-weight:500}
.plan-blurb{font-size:13px;color:var(--muted);margin:4px 0}
.plan-card ul{list-style:none;padding:0;margin:4px 0 12px;display:grid;gap:6px;font-size:13px;flex:1;align-content:start}
.plan-card li{display:flex;gap:6px;align-items:flex-start}
.plan-card li svg{width:14px;height:14px;flex:none;color:var(--ok);margin-top:2px}
.plan-card .btn{width:100%;justify-content:center}
.plan-cur{display:block;text-align:center;font:500 13px var(--sans);color:var(--accent);padding:8px 0}
.small{font-size:12px}
.pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pack{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;align-items:center}
.pack-cr{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.pack-price{font-size:20px;font-weight:500;margin-top:8px}
.pack .btn{margin-top:10px;min-width:96px;justify-content:center}
.ar-row{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:center;margin-top:8px}
.ar-row .lab{margin:0}
.cr-plus{color:var(--ok)}
@media (max-width:1100px){.plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.plan-grid,.pack-grid{grid-template-columns:1fr 1fr}.ar-row{grid-template-columns:1fr}.bill .grid2{grid-template-columns:1fr}}
@media (max-width:460px){.plan-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- product layer (product.js, extras.js) */
.page.wide{max-width:var(--page-w)}   /* every page is one width (owner, 2026-10-10: tabs must not change the width or move the buttons) */
.st.accent{background:var(--accent-soft);color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filters .inp{width:auto;min-width:150px;flex:0 1 auto}
.filters input[type=search]{flex:1 1 260px}
.r-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:13.5px}
.r-sum b{font-weight:600}
.r-sum .spacer{flex:1}
.bulk{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.t-res td{vertical-align:middle}
.t-res .nm small svg{width:12px;height:12px;vertical-align:-2px;color:var(--muted)}
.st-sel{height:30px;width:122px;font-size:12.5px;padding:0 8px}
.st-sel.st-new{color:var(--accent)}.st-sel.st-contacted{color:var(--warn)}.st-sel.st-won{color:var(--ok)}.st-sel.st-ignored{color:var(--muted)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0}
.seg-st{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:3px;background:var(--surface);flex-wrap:wrap}
.seg-st button{border:0;background:none;padding:7px 14px;border-radius:var(--r);font:500 13px var(--sans);color:var(--muted);cursor:pointer}
.seg-st button.on{color:#fff}
@media (max-width:640px){.seg-st{display:flex;width:100%;flex-wrap:nowrap;gap:2px}.seg-st button{flex:1 1 auto;padding:8px 6px}}
.seg-st button.st-new{background:var(--accent-strong)}.seg-st button.st-contacted{background:var(--warn)}.seg-st button.st-won{background:var(--ok)}.seg-st button.st-ignored{background:var(--muted)}
.tbl.kv th{width:34%;text-align:left;font-weight:500;color:var(--muted);text-transform:none;font-family:var(--sans);font-size:12.5px;letter-spacing:0}
.tbl.kv td{word-break:break-word}
.tl{display:grid;gap:12px;margin-top:8px}
.tl-i{display:flex;gap:10px;font-size:13px}
.tl-i b{font-weight:500}
.tl-i time{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.tl-d{width:10px;height:10px;border-radius:50%;background:var(--line);margin-top:4px;flex:none}
.tl-found{background:var(--accent-strong)}.tl-sent{background:var(--ok)}.tl-status{background:var(--warn)}.tl-score{background:#7644E0}.tl-note{background:var(--muted)}
.tabs a{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 12px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none}
.tabs a.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile .t-l{font-size:12.5px;color:var(--muted)}
.tile .t-v{font-size:26px;font-weight:600;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.tile .t-s{font-size:12px;color:var(--muted);margin-top:2px}
.tile .t-ch{font-size:12.5px;font-weight:500;margin-left:4px}.tile .t-ch.up{color:var(--ok)}.tile .t-ch.down{color:var(--bad)}
.chart svg{display:block;overflow:visible}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:var(--r);margin-right:5px;vertical-align:-1px}
.hbars{display:grid;gap:8px;margin-top:8px}
.hb{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr 70px;gap:10px;align-items:center;font-size:13px}
.hb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-b{height:9px;background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.hb-b i{display:block;height:100%;background:var(--accent-strong);border-radius:var(--r)}
.hb-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.rate{display:inline-block;width:60px;height:7px;background:color-mix(in srgb,var(--bad) 25%,var(--surface-2));border-radius:var(--r);overflow:hidden;vertical-align:1px;margin-right:4px}
.rate i{display:block;height:100%;background:var(--ok)}
.explore{position:relative;overflow:hidden;padding:0}
.ex-map{height:calc(100dvh - 330px);min-height:420px}
.ex-cmp{position:absolute;top:12px;right:12px;z-index:610;background:var(--lg-solid,var(--surface));border:1px solid var(--lg-bd,var(--line));box-shadow:var(--lg-sh,none);color:var(--ink)}
.ex-cmp.on{background:var(--on-bg);box-shadow:var(--on-sh)}
.ex-filters{align-items:flex-end}
.ex-sel{display:contents}
.ex-sel .inp{width:auto;flex:0 1 220px}
.ex-when{flex:1 1 260px;min-width:200px}
.ex-when .lab{margin:0 0 4px}
.ex-when input{width:100%}
.ex-sum{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13px}
.ex-sum .legend{margin:0}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tpl{padding:16px;display:flex;flex-direction:column;gap:6px}
.tpl h3{margin:6px 0 0;font-size:15.5px}
.tpl p{margin:0;font-size:13px}
.tpl-strip{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:10px;background:var(--surface-2);border-radius:var(--r)}
.tpl-b{width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent)}
.tpl-b svg{width:14px;height:14px}.tpl-b img{width:16px;height:16px}
.tpl-ar{width:8px;height:2px;background:var(--line);border-radius:var(--r)}
.tpl-tags{display:flex;gap:5px;flex-wrap:wrap}
.tpl-sample{border:1px dashed var(--line);border-radius:var(--r);padding:8px 10px;font-size:12.5px}
.tpl-sample .lab{margin:0 0 4px}
.tpl-row{display:flex;gap:8px;justify-content:space-between}
.tpl-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.news{display:grid;gap:14px;max-width:820px}
.news-i time{font-size:12px;color:var(--muted)}
.news-i h3{margin:4px 0 8px}
.news-i ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px}
.news-i b{font-weight:600}
/* the bell */
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#bellSide,#bellTop{position:relative}
.bell{position:relative;border:0;background:none;width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.bell:hover{background:var(--surface-2)}
.bell svg{width:19px;height:19px}
.bell b{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r);background:var(--bad);color:#fff;font:600 10px/16px var(--sans);text-align:center}
/* the panel is placed under its bell when it opens (extras.js) */
/* the bell's notices (2026-10-16: dark mode showed white rows with pale titles): theme colours only, an icon by kind */
.side-help{display:flex;gap:6px;margin-bottom:8px}
.side-help .btn{flex:1;justify-content:center;position:relative}
.dot-new{position:absolute;top:4px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
/* help panel */
.help-panel{position:fixed;inset:0;z-index:1200;background:rgba(15,27,45,.25);display:none}
.help-panel.open{display:block}
.hp-in{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);padding:18px;overflow:auto;box-shadow:-12px 0 40px rgba(15,27,45,.2);display:flex;flex-direction:column;gap:12px}
.hp-h{display:flex;align-items:center;justify-content:space-between}
.hp-h h3{margin:0;display:flex;align-items:center;gap:8px}
.hp-h h3 svg{width:18px;height:18px}
.hp-list details{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-bottom:6px;font-size:13.5px}
.hp-list summary{cursor:pointer;font-weight:500}
.hp-list details div{margin-top:6px;color:var(--ink-2);line-height:1.5}
.hp-sec{border-top:1px solid var(--line-2);padding-top:12px}
.hp-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hp-links a{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink-2)}
.hp-links svg{width:16px;height:16px;color:var(--muted)}
.hp-res{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);margin-bottom:6px}
.hp-res:hover{border-color:var(--accent)}
.hp-res span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.hp-res b{font-weight:500;font-size:14px}.hp-res small{font-size:12px;color:var(--muted);line-height:1.35}
.hp-res svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
/* welcome setup */
.wel-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.wel-g{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface);cursor:pointer;font:400 13px var(--sans);color:var(--ink)}
.wel-g svg{width:22px;height:22px;color:var(--accent)}
.wel-g b{font-weight:600;font-size:14px}
.wel-g span{color:var(--muted)}
.wel-g.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:color-mix(in srgb,var(--accent) 4%,transparent)}
/* checklist */
.checklist{margin-bottom:16px}
.ck-h{display:flex;justify-content:space-between;align-items:flex-start}
.ck-h h3{margin:0}
.ck-bar{height:6px;background:var(--surface-2);border-radius:var(--r);margin:10px 0 12px;overflow:hidden}
.ck-bar i{display:block;height:100%;background:var(--ok)}
.ck-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ck-i{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-size:13px}
.ck-i b{display:block;font-weight:500}
.ck-i small{color:var(--muted)}
.ck-i.done{opacity:.6}
.ck-i.done b{text-decoration:line-through}
.ck-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;color:#fff}
.ck-i.done .ck-dot{background:var(--ok);border-color:var(--ok)}
.ck-dot svg{width:12px;height:12px}
/* sticky notes on the canvas */
.sticky{position:absolute;z-index:3;border-radius:var(--r);box-shadow:0 6px 18px rgba(15,27,45,.14);background:#FFF6C9;border:1px solid #F0DC84}
.sticky.sk-blue{background:#E3ECFF;border-color:#B9C8F4}.sticky.sk-green{background:#DFF5E8;border-color:#A8DDBF}.sticky.sk-pink{background:#FCE4EF;border-color:#F2B8D1}
.sk-bar{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;cursor:grab}
.readonly .sk-bar{cursor:default}
.sk-dots{display:flex;gap:4px}
.sk-c{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.15);padding:0;cursor:pointer}
.sk-c.sk-yellow{background:#FFE58A}.sk-c.sk-blue{background:#9DB3F7}.sk-c.sk-green{background:#7FD3A3}.sk-c.sk-pink{background:#F29BC1}
.sk-x{border:0;background:none;padding:0;cursor:pointer;color:var(--muted);display:grid}
.sk-x svg{width:13px;height:13px}
.sk-t{display:block;width:100%;border:0;background:transparent;resize:none;padding:2px 10px 10px;font:400 13px/1.45 var(--sans);color:var(--ink);outline:none;overflow:hidden}
.z-note span{margin-left:4px}
/* variables, account, QR, sign in with */
.var-row{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.var-row code{font-size:11.5px}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-2)}
.acc-row b{display:block;font-weight:500}
.acc-row small{color:var(--muted)}
.qr{display:grid;place-items:center;margin:10px 0}
.qr svg{width:200px;height:200px}
.sso{display:grid;gap:8px;margin-bottom:6px}
.sso:empty{display:none}
.sso-b{justify-content:center;gap:10px;text-decoration:none;width:100%}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:6px 0 2px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ck-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tiles,.ck-list{grid-template-columns:1fr}.filters .inp{flex:1 1 140px;min-width:0}.hb{grid-template-columns:1fr 1.2fr 56px}.var-row{grid-template-columns:1fr 1fr auto}.var-row code{display:none}}
.back-link{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:13px}
.back-link svg{width:15px;height:15px}
.back-link:hover{color:var(--accent)}
.chart-sc{overflow-x:auto;padding-top:6px}
@media (max-width:640px){.t-res th:nth-child(3),.t-res td:nth-child(3),.t-res th:nth-child(4),.t-res td:nth-child(4),.t-res th:nth-child(7),.t-res td:nth-child(7){display:none}.t-res .st-sel{width:120px}.t-res .nm{min-width:150px}}
/* the data between blocks (run panel): click a block to see what it passed on */
.run-steps tr.has-out{cursor:pointer}
.run-steps tr.has-out:hover td,.run-steps tr.has-out.on td{background:var(--accent-soft)}
.run-steps tr.has-out:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.field-chips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;max-height:96px;overflow:auto}
.field-chips .chip{font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:2px 8px}
.run-out .tbl td{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-out .tbl td.cut{cursor:pointer}.run-out .tbl td.cut.open{white-space:normal;max-width:480px;overflow-wrap:anywhere}
.run-out code{font-size:11px;background:var(--line-2);padding:0 4px;border-radius:var(--r)}
.run-report{margin-top:10px;border-left:3px solid var(--accent);background:var(--report-bg);border-radius:0 var(--r) var(--r) 0;padding:8px 12px;font-size:13px}
.run-report p{margin:4px 0 0;white-space:pre-line}
.pfields{margin-top:14px}
.pfields .chip{font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:2px 8px;margin:0 4px 4px 0}
/* Weather forecast block (Open-Meteo) */
:root{--k-weather:#1F7FB8}
.c-weather{--cc:var(--k-weather)}
/* Satellite images block */
:root{--k-space:#4A5BD4}
.c-space{--cc:var(--k-space)}
/* Public tenders block */
:root{--k-tender:#5B4BA8}
:root[data-theme="dark"]{--k-tender:#A99BEA}
.c-tender{--cc:var(--k-tender)}
/* Web page watch block */
:root{--k-web:#2B6C8A}
:root[data-theme="dark"]{--k-web:#6FB6D6}
.c-web{--cc:var(--k-web)}
/* Terrain and elevation block */
:root{--k-land:#6B5B2E;--k-osm:#2E7D4F;--k-risk:#A23B3B;--k-flight:#1F6FB2}
:root[data-theme="dark"]{--k-land:#C9B47A;--k-osm:#7FCB9A;--k-risk:#F08A8A;--k-flight:#7DB7E8}
.c-land{--cc:var(--k-land)}
.c-osm{--cc:var(--k-osm)}
.c-risk{--cc:var(--k-risk)}
.c-flight{--cc:var(--k-flight)}
/* Property changes block */
:root{--k-prop:#5F7316}
:root[data-theme="dark"]{--k-prop:#B5CB5E}
.c-prop{--cc:var(--k-prop)}
/* Exchange rates block */
:root{--k-fx:#8A6D00}
:root[data-theme="dark"]{--k-fx:#E0C25A}
.c-fx{--cc:var(--k-fx)}
/* EV charging block */
:root{--k-ev:#2F7D32}
:root[data-theme="dark"]{--k-ev:#7CCB80}
.c-ev{--cc:var(--k-ev)}
/* Floods and sea conditions block */
:root{--k-water:#1D6FA5}
:root[data-theme="dark"]{--k-water:#6BB3E3}
.c-water{--cc:var(--k-water)}
/* Air quality block */
:root{--k-air:#3E7D5A}
:root[data-theme="dark"]{--k-air:#7FC89D}
.c-air{--cc:var(--k-air)}
/* Natural hazards block */
:root{--k-hazard:#946200}
:root[data-theme="dark"]{--k-hazard:#E4B53E}
.c-hazard{--cc:var(--k-hazard)}
/* News block */
:root{--k-news:#A3472A}
:root[data-theme="dark"]{--k-news:#E07A55}
.c-news{--cc:var(--k-news)}
/* Ships (AIS) block */
:root{--k-sea:#0B6E99}
.c-sea{--cc:var(--k-sea)}

/* account card: buttons side by side, the list of signed-in devices */
.acc-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.acc-sess{margin-top:8px;display:grid;gap:6px}
.acc-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.acc-dev small{display:block;color:var(--muted);font-size:12px}
.acc-dev .pill{font-style:normal;margin-left:6px}

/* admin console: service status */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.status-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;font-size:13.5px}
.status-row b{font-weight:500}
.status-row small{display:block;color:var(--muted);font-size:12px;line-height:1.4}

.plan-buys{font-size:12.5px;color:var(--ink-2);margin:3px 0 2px;line-height:1.4}

/* product audit: the cost beside Run once, a live flow's problem, the toast clear of the Ask xMap AI bar, no "?" on phones */
.run-cost{font-size:11.5px;color:var(--muted);margin-left:7px;font-weight:400;white-space:nowrap}
.btn.primary .run-cost{color:inherit;opacity:.85}
.banner-warn{background:var(--bad-bg-2);color:var(--bad);border-bottom-color:var(--bad-line)}
@media (min-width:761px){body:has(.ai-wrap) .toast{bottom:88px}}
@media (max-width:900px){.zoom .z-keys{display:none}}
@media (max-width:760px){.run-cost{display:none}}

/* the side menu shows what a new person needs; the rest opens under "More" (product audit, U1) */
/* product audit, U6: on phones, things to tap are at least 40px tall */
@media (max-width:760px){
  .chip,.tabs button{min-height:40px;display:inline-flex;align-items:center}
  .x,.drawer .x{min-width:40px;min-height:40px}
  .btn.sm{min-height:38px}
  .linkbtn{padding:8px 4px;display:inline-block}
  .chips button,.chips label{min-height:40px}
  .leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important}
}

/* the flow as a list of steps (product audit, U5): phones, and on computers the simple view beside the chat (2026-10-10) */
.steps{display:none}
.steps:not([hidden]){display:flex;flex-direction:column;gap:0;position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--bg);z-index:2;padding:24px 28px 120px}
/* on phones the Add block button and the Ask xMap bar sit over the end of the list: room for both (Showcases test, 2026-10-30) */
@media (max-width:900px){.steps:not([hidden]){padding-bottom:calc(210px + env(safe-area-inset-bottom,0px))}}
.step{flex:none;display:grid;grid-template-columns:24px 34px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin:0 0 18px;font:inherit;color:var(--ink);cursor:pointer;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;left:23px;bottom:-19px;height:18px;border-left:2px solid var(--line)}
.step-n{font:500 12px var(--sans);color:var(--muted);text-align:center}
.step-ico{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center}
.step-txt{display:grid;gap:1px;min-width:0}
.step-txt b{font-weight:500;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.step-txt small{font-size:12.5px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-from{font-size:11.5px;color:var(--muted)}
.step-st{display:flex;align-items:center}
.step.warn{border-color:var(--warn-line)}.step.warn small{color:var(--warn-ink)}
.step.err{border-color:var(--bad)}.step.err small{color:var(--bad)}
.step.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.step.selected{box-shadow:0 0 0 2px var(--accent)}
.as-list .zoom [data-z="tidy"],.as-list .zoom [data-z="fit"],.as-list .zoom [data-z="note"],.as-list .zoom [data-z="+"],.as-list .zoom [data-z="-"]{display:none}
/* computers: the steps on the left, the chat as a column on the right */
@media (min-width:761px){
  .simple .steps:not([hidden]){padding:24px calc(min(430px,46% - 32px) + 44px) 90px 28px}
  .simple .steps .step,.simple .steps .steps-sent{max-width:720px}
  .simple .ai-wrap,.simple .ai-wrap.big{left:auto;right:16px;transform:none;width:min(430px,calc(46% - 32px));top:16px;bottom:16px;justify-content:flex-end}
  .simple .ai-wrap.big .ai-chat{flex:1;height:auto;min-height:0}
  .simple .panel.open~.ai-wrap{display:none}
  .simple .zoom{right:auto;left:16px}
  .simple .add-fab{display:none}
}
@media (max-width:760px){
  .steps:not([hidden]){padding:14px 12px calc(170px + env(safe-area-inset-bottom))}
}

/* Billing: the organization's monthly spending limit */
.lim-bar{display:block;height:6px;border-radius:var(--r);background:var(--line);overflow:hidden;margin:2px 0 8px}
.lim-bar i{display:block;height:100%;background:var(--accent-strong);border-radius:var(--r)}
.lim-bar i.full{background:var(--bad)}

/* Flows page: search, folders, tags, favourites, archive (the feature build, F1) */
.fl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.fl-few > .fl-bar:not(:has(.fl-view)),.fl-few > #flTabs{display:none}
.fl-few > .fl-bar > :not(.fl-view):not(.fl-runs){display:none}   /* a small team: only Cards / Chart and the runs button */
.fl-few > .fl-bar{justify-content:flex-end}
.fl-find{height:var(--ctl-h)}.fl-find .inp{height:100%}
.fl-find{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 10px;color:var(--muted);min-width:0}
.fl-find:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fl-find .inp{border:0;box-shadow:none;background:transparent;padding-left:0;flex:1;min-width:0}
.fl-find .inp:focus{box-shadow:none}
.fl-bar select.inp{width:auto;max-width:210px;flex:0 1 auto}
.wf-cell{position:relative;display:flex;min-width:0}
.wf-cell .wf-card{flex:1;min-width:0}
.wf-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding-right:82px}
.wf-top h3{overflow-wrap:anywhere}
.wf-pills{display:flex;gap:5px;flex:none}
.wf-card.archived{background:var(--surface-2)}
.wf-card.archived h3{color:var(--ink-2)}
.wf-folder{display:inline-flex;align-items:center;gap:4px}
.wf-folder svg{width:13px;height:13px}
.wf-tags{display:flex;gap:5px;flex-wrap:wrap}
.tagp{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:var(--r);padding:1px 8px;font-size:11.5px;font-weight:500;line-height:1.5;font-family:inherit}
button.tagp{cursor:pointer}
button.tagp:hover{border-color:var(--accent);color:var(--accent)}
.wf-star,.wf-more{position:absolute;top:10px;width:30px;height:30px;border-radius:var(--r);border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;z-index:1}
.wf-more{right:8px}
.wf-star{right:44px}   /* 4 px from the ... button beside it (they touched) */
.wf-star:hover,.wf-more:hover{background:var(--accent-soft);color:var(--accent)}
.wf-star.on{color:#C98A00}
.wf-star.on svg{fill:currentColor}
.fo-list{display:grid;gap:6px;margin:12px 0;max-height:46vh;overflow:auto}
.fo-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px;font:inherit;font-weight:500;cursor:pointer;color:var(--ink)}
.fo-pick span{flex:1;min-width:0;overflow-wrap:anywhere}
.fo-pick:hover,.fo-pick.on{border-color:var(--accent);background:var(--accent-soft)}
.fo-row{display:flex;align-items:center;gap:8px;color:var(--muted)}
.fo-row .inp{flex:1;min-width:0}
.fo-row small{white-space:nowrap;font-size:12px}
.fo-new{display:flex;gap:8px;margin-top:6px}
.fo-new .inp{flex:1;min-width:0}
.tg-have{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:12.5px}
@media (max-width:760px){
  .fl-bar select.inp{flex:1 1 130px;max-width:none}
  .fl-bar .btn{flex:1 1 100%}
  .wf-star,.wf-more{width:40px;height:40px;top:6px}
  .wf-more{right:4px}.wf-star{right:48px}
  .wf-top{padding-right:96px}
  .fo-row{flex-wrap:wrap}.fo-row small{order:3}
}

/* New flow window: import a file (F2) */
.modal-foot .spacer{flex:1}
.nf-import{cursor:pointer}
@media (max-width:760px){.modal-foot .spacer{display:none}}
/* a wide window's buttons stay in view while its content scrolls (the New flow window lists many templates) */
.modal.wide>.modal-foot:last-child{position:sticky;bottom:-22px;background:var(--surface);margin:18px -22px -22px;padding:12px 22px 22px;border-top:1px solid transparent;z-index:2}
.modal.wide.scrolls>.modal-foot:last-child{border-top-color:var(--line)}
@media (max-width:760px){.modal.wide>.modal-foot:last-child{bottom:calc(-20px - env(safe-area-inset-bottom));margin:16px -18px calc(-20px - env(safe-area-inset-bottom));padding:12px 18px calc(20px + env(safe-area-inset-bottom))}}

/* Templates page: the team's own templates (F3) */
.tpl-h{font-size:15px;font-weight:600;margin:18px 0 10px}
.tpl-h:first-child{margin-top:0}
.tpl-hint{border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px;color:var(--muted);font-size:13.5px;margin-bottom:16px;background:var(--surface)}
.tpl-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#tTeam .tpl-grid{margin-bottom:6px}
/* dashboards (R4) */
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.widget{min-width:0}.widget.full{grid-column:1/-1}
.w-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;min-width:0}
.w-head h3{margin:0;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-head small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.w-tools{display:flex;gap:2px;margin-left:auto;flex:none}
.w-tools .x{width:28px;height:28px}
.w-num{font-size:34px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px}
.w-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.w-sub .up{color:var(--ok)}.w-sub .down{color:var(--bad)}
.w-runs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.w-run{font-size:12px;border:1px solid var(--line);border-radius:var(--r);padding:3px 9px;background:var(--surface)}
.w-run a{color:inherit;text-decoration:none}.w-run i{font-style:normal;color:var(--muted)}
.w-run.passed i{color:var(--ok)}.w-run.failed i{color:var(--bad)}.w-run.waiting i{color:var(--warn)}
.w-tbl{font-size:13px}.w-tbl td,.w-tbl th{padding:7px 8px}
.w-map{height:320px;border-radius:var(--r);overflow:hidden;background:var(--surface-2);margin-top:4px}
.page-head .name{font-weight:500;font-size:22px;letter-spacing:-.01em;border:1px solid transparent;border-radius:var(--r);padding:2px 6px;margin-left:-7px;width:100%;max-width:520px;background:transparent}
.page-head .name:hover,.page-head .name:focus{border-color:var(--line);background:var(--surface)}
@media (max-width:720px){.dash-grid{grid-template-columns:1fr}.w-map{height:260px}.w-tools .x{width:40px;height:40px}.dash-head{flex-direction:column;align-items:stretch}.dash-head .head-btns{flex-wrap:wrap}.page-head .name{max-width:none}}

/* B5: the email sender card */
.sd-form{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:6px}
.sd-form .lab{margin-top:0}
.sd-addr{display:flex;align-items:center;gap:6px}.sd-addr .inp{flex:1;min-width:0}.sd-addr span{color:var(--muted);font-size:13px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.sd-rec,.sd-edit{margin-top:8px}.sd-rec summary,.sd-edit summary{cursor:pointer;font-weight:500;color:var(--ink-2);padding:6px 0}
.sd-recs{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sd-r{display:grid;grid-template-columns:110px 1fr 1fr;gap:10px;align-items:end;padding:10px;border:1px solid var(--line-2);border-radius:var(--r)}
.sd-r small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:4px}.sd-r .copybox{min-width:0}
.sd-t{display:flex;flex-direction:column;gap:6px;align-items:flex-start;align-self:center}
@media (max-width:700px){.sd-r{grid-template-columns:1fr}.sd-t{flex-direction:row;align-items:center}}
@media (max-width:900px){.sd-form{grid-template-columns:1fr}}

/* B6: an organization's own address */
.wl-head{display:flex;align-items:center;justify-content:center;padding:22px 16px 0}.wl-head .wl-logo{max-height:44px;max-width:220px;object-fit:contain}
.wl-name{font:600 20px var(--sans);color:var(--ink)}
.side-top .wl-logo{display:block;max-height:30px;max-width:150px;object-fit:contain;margin:2px 6px 14px}.side-top .wl-name{display:block;margin:2px 6px 14px;font-size:16px}
.wl-foot{text-align:center;color:var(--muted);font-size:12px;padding:18px 16px 26px}.wl-foot a{color:var(--muted)}

/* A1: notification choices */
.note-tbl td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.note-tbl td:nth-child(n+2),.note-tbl th:nth-child(n+2){width:110px;text-align:center}
.note-tbl .tgl{justify-content:center}

/* A2: @mentions */
.mention-wrap{position:relative}
.mention-pop{position:absolute;left:0;right:0;bottom:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:4px;z-index:5;max-height:260px;overflow:auto}
.mention-pop button{display:flex;gap:8px;align-items:center;width:100%;border:0;background:none;padding:6px 8px;border-radius:var(--r);text-align:left;cursor:pointer;color:var(--ink)}
.mention-pop button.on,.mention-pop button:hover{background:var(--accent-soft)}
.mention-pop b{display:block;font-weight:500;font-size:13px}.mention-pop small{color:var(--muted);font-size:11.5px}
.mention{color:var(--accent);font-weight:500;background:var(--accent-soft);border-radius:var(--r);padding:0 3px}
@media (max-width:640px){.mention-pop button{min-height:44px}}

/* A4: security rules */
.sec-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.sec-grid .lab:first-child{margin-top:0}
@media (max-width:800px){.sec-grid{grid-template-columns:1fr}}

/* A5: roles and groups */
.role-tbl td:not(:first-child):not(:last-child),.role-tbl th:not(:first-child):not(:last-child){text-align:center}.role-tbl .tgl{justify-content:center}
.grp-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.grp{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);flex-wrap:wrap}
.grp b{font-weight:500}.grp small{display:block;color:var(--muted);font-size:12px}.grp-btns{display:flex;gap:6px}
.teams-card{margin-top:24px}
#admInvites{margin-bottom:22px}#admSwitches{margin-bottom:22px}
.sw-card{display:flex;flex-direction:column;gap:0;padding:4px 18px}.sw-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;flex-wrap:wrap}.sw-row+.sw-row{border-top:1px solid var(--line-2)}.sw-row b{font-weight:500;display:block}.sw-row small{color:var(--muted);font-size:12.5px;display:block;max-width:760px}
.pr-ed{margin-top:12px}.pr-ed summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px}.pr-ed summary b{font-weight:500}.pr-ed summary small{color:var(--muted);font-size:12.5px}.pr-ed[open] summary{margin-bottom:12px}
.pr-tbl .inp{height:34px;min-width:80px}.pr-tbl td{vertical-align:middle}
.pr-pack{display:flex;gap:10px;align-items:flex-end;margin-bottom:8px;flex-wrap:wrap}.pr-pack label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.pr-pack .inp{width:160px;height:34px}
.pr-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
/* Daily caps on outside services (admin console, System; extras.js adminCaps) */
.cap-tbl td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.cap-tbl .st{margin-left:6px}
.cap-use{min-width:170px}
.cap-bar{display:block;height:6px;margin-top:6px;border-radius:var(--r);background:var(--track,var(--line));overflow:hidden}
.cap-bar>i{display:block;height:100%;border-radius:var(--r);background:var(--accent-strong,var(--accent))}
.cap-bar.warn>i{background:var(--warn,#B54708)}.cap-bar.over>i{background:var(--bad,#B42318)}
.cap-tbl small.cap-full{color:var(--bad,#B42318)}
.cap-ex{display:flex;gap:8px;align-items:center;margin:0 0 8px}.cap-ex [data-f="name"]{flex:1 1 auto}.cap-ex [data-f="limit"]{flex:0 0 110px}
.inv-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.tm-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.tm-line b{font-weight:500}
.team-main{min-width:0;flex:1}
.tq{margin-top:6px;max-width:420px}.tq-bar{height:6px;border-radius:var(--r);background:var(--surface-2);overflow:hidden}.tq-bar i{display:block;height:100%;background:var(--accent-strong);border-radius:var(--r)}.tq-bar i.near{background:var(--warn,#B7791F)}.tq-bar i.full{background:var(--bad,#C53030)}
.grp-pick{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.grp-pick label{display:flex;gap:10px;align-items:center;padding:6px 4px;border-radius:var(--r);cursor:pointer}.grp-pick label:hover{background:var(--surface-2)}
.grp-pick small{display:block;color:var(--muted);font-size:11.5px}

/* A6: single sign-on */
.saml-step{display:flex;gap:8px;align-items:center;margin:16px 0 6px;font-weight:500;font-size:14px}
.saml-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px}
.saml-sp{display:grid;grid-template-columns:1fr 1fr 160px;gap:10px}.saml-sp small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:4px}
.saml-tg{display:flex;flex-direction:column;gap:8px;margin-top:14px}
@media (max-width:800px){.saml-sp{grid-template-columns:1fr}}
.saml-tg .tgl{align-items:flex-start}.saml-tg .tgl span{flex:none}.saml-tg .tgl em{line-height:1.35}
.scim-box{margin-top:18px;padding-top:12px;border-top:1px solid var(--line-2)}

/* S1: chat with support */
.sup{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.sup-list{padding:8px;max-height:calc(100dvh - 210px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.sup-new{margin:4px 4px 8px}
.sup-i{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px;border-radius:var(--r);color:var(--ink);text-decoration:none;position:relative}
.sup-i:hover{background:var(--surface-2)}.sup-i.on{background:var(--accent-soft)}
.sup-i b{font-weight:500;grid-column:1/-1;padding-right:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sup-i.un b{font-weight:600}
.sup-i small{grid-column:1/-1;color:var(--muted);font-size:12px}
.sup-i span{color:var(--ink-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sup-i time{color:var(--muted);font-size:11.5px}
.sup-i .dot-new{position:absolute;top:14px;right:10px}
.sup-t{display:flex;flex-direction:column;min-height:420px;max-height:calc(100dvh - 210px)}
.sup-h{padding:14px 16px;border-bottom:1px solid var(--line-2)}.sup-h h3{margin:0}
.sup-back{display:none;align-items:center;gap:4px;font-size:13px;margin-bottom:6px;color:var(--accent);text-decoration:none}
.sup-ms{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.sup-m{max-width:80%;align-self:flex-end}.sup-m.staff{align-self:flex-start}
.sup-b{background:var(--accent-strong);color:#fff;padding:10px 12px;border-radius:var(--r) var(--r) var(--r) var(--r);white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:1.45}
.sup-m.staff .sup-b{background:var(--surface-2);color:var(--ink);border-radius:var(--r) var(--r) var(--r) var(--r);border:1px solid var(--line-2)}
.sup-m small{display:block;color:var(--muted);font-size:11.5px;margin-top:4px;text-align:right}.sup-m.staff small{text-align:left}
.sup-c{border-top:1px solid var(--line-2);padding:12px 16px}.sup-cb{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.sup-empty{display:grid;place-items:center;flex:1;padding:40px}
@media (max-width:860px){.sup{grid-template-columns:1fr}.sup.has-t .sup-list{display:none}.sup:not(.has-t) .sup-t{display:none}.sup-back{display:inline-flex}.sup-t,.sup-list{max-height:none}.sup-m{max-width:92%}}

/* S2: guided tours */
.tour{position:fixed;inset:0;z-index:90;pointer-events:none}
.tour-spot{position:fixed;border-radius:var(--r);box-shadow:0 0 0 9999px rgba(15,27,45,.45);transition:all .25s ease;pointer-events:none;outline:2px solid #fff}
.tour-pop{position:fixed;pointer-events:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:14px 16px;transition:left .25s ease,top .25s ease}
.tour-pop b{display:block;font-weight:600;font-size:15px;margin-bottom:4px}.tour-pop p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tour-f{display:flex;justify-content:space-between;align-items:center;gap:8px}.tour-f small{color:var(--muted)}.tour-f span{display:flex;gap:6px}
@media (prefers-reduced-motion:reduce){.tour-spot,.tour-pop{transition:none}}
@media (max-width:640px){.tour-f .btn{min-height:40px}}

/* the run page: the run panel fills the page */
.card.run-page{overflow:hidden}
.run-page .drawer{position:static;height:auto;min-height:0;transform:none;transition:none;box-shadow:none;border-top:0}
.run-page .drawer .db{overflow:visible}

/* UI review: on narrow screens a page title keeps a readable width (its buttons wrap below it), and a table's first
   column keeps its words on one line so the table scrolls sideways instead of crushing it */
.page-head>div:first-child{flex:1 1 260px;min-width:min(100%,260px)}
@media (max-width:760px){.tbl-wrap .tbl td.nm,.tbl-wrap .tbl td:first-child:not(:has(input)){min-width:150px}}
:root[data-theme="dark"] .modal-back{background:rgba(3,6,12,.62)}
:root[data-theme="dark"] .modal{border:1px solid var(--line)}

.tbl.kv th::first-letter{text-transform:uppercase}   /* sentence case: "First found", "Rating", "Nearest ambulance name" */
.chip-link{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:3px 10px;font-size:12.5px;font-weight:500;text-decoration:none;margin:0 6px 6px 0}
.chip-link:hover{border-color:var(--accent)}

/* audit 2, UXPROD: touch targets of at least 24 px (WCAG 2.5.8): the results' pick boxes on phones, and the sticky note's
   colour dots and close button (the dot stays small, the area around it takes the tap) */
@media (max-width:760px){.tbl input[type=checkbox]{width:22px;height:22px}}
.sk-c{position:relative}.sk-c::after{content:"";position:absolute;inset:-7px}
.sk-x{position:relative}.sk-x::after{content:"";position:absolute;inset:-6px}
/* the map's zoom buttons carried Leaflet's bold */
.leaflet-control-zoom a{font-weight:500}
/* audit 2, UXPROD: the name fields and sticky notes removed the focus ring without a visible replacement (WCAG 2.4.7) */
.ed-top .name:focus-visible,.panel .pn:focus-visible,.map-name:focus-visible,.page-head .name:focus-visible,.sk-t:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Admin, Data sources: the dataset form */
.ds-form .ds-h{font-size:15px;font-weight:600;margin:18px 0 4px;padding-top:12px;border-top:1px solid var(--line-2)}
.ds-form .tgl{margin:8px 0}
.ds-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ds-frow{display:grid;grid-template-columns:1fr 1.3fr 100px 1.6fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.ds-frow input[hidden],.ds-frow select[hidden]{display:none}
.ds-frow [data-ff="at"]{grid-column:1}
.ds-req{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
@media (max-width:760px){.ds-map{grid-template-columns:1fr 1fr}.ds-frow{grid-template-columns:1fr 1fr}}
/* a skipped block (switched off): greyed, dashed, its pause button lit */
.node .n-off{display:none;width:22px;height:22px;border-radius:var(--r);place-items:center;color:var(--muted);cursor:pointer;margin-left:2px;flex:none}
.node .n-off svg{width:14px;height:14px}
.node:hover .n-off,.node.selected .n-off,.node:focus-within .n-off{display:grid}
.node .n-off:hover{background:var(--surface-2);color:var(--ink)}
.node.off{opacity:.6;border-style:dashed}
.node.off .n-off{display:grid;background:var(--warn-bg);color:var(--warn-ink,#8A5A12)}
.node.off .n-title{text-decoration:line-through;text-decoration-color:var(--muted)}
.panel .poff{margin:10px 0 0}
@media (hover:none){.node.selected .n-off{display:grid;width:30px;height:30px}}

/* a test run's preview of what an Email or app block would send */
.send-preview{margin-top:6px}
.send-preview summary{cursor:pointer;color:var(--accent);font-size:12.5px;font-weight:500}
.send-preview dl{margin:6px 0 0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 10px;font-size:12.5px}
.send-preview dt{color:var(--muted)}
.send-preview dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}
/* selecting several flows on the Flows page */
.fl-pick{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 0 12px;box-shadow:var(--shadow)}
.fl-pick b{font-weight:600;margin-right:4px}
.wf-cell.picking .wf-card{cursor:pointer}
.wf-cell.picked .wf-card{outline:2px solid var(--accent);outline-offset:-1px}
.wf-check{position:absolute;top:12px;left:12px;width:20px;height:20px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;z-index:2;pointer-events:none;color:#fff}
.wf-cell.picked .wf-check{background:var(--accent-strong,var(--accent));border-color:var(--accent-strong,var(--accent))}
.wf-check svg{width:14px;height:14px}
.wf-cell.picking .wf-card h3{padding-left:26px}

/* the admin console's Users list: full width, scrolling inside its own box with the header kept in view (owner, 2026-10-08) */
.u-scroll{max-height:620px;overflow:auto}
.u-tbl thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
.u-tbl td:last-child{text-align:right;white-space:nowrap}
@media (max-width:760px){.u-scroll{max-height:70vh}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======================================================================================================================
   A more modern, easier app (owner, 2026-10-10): five places (Home, Flows, Results, Data, Settings) with tabs inside each,
   a tab bar at the bottom on phones, the AI box on Home, result cards, the flow in words, what comes next, Search
   everything, and outlines while pages load. Colours come from the tokens above, so dark mode follows by itself.
   ====================================================================================================================== */
.shell-main{display:flex;flex-direction:column;min-width:0;height:100%;position:relative}
.side-find{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--muted);font:500 13px var(--sans);cursor:pointer;flex:none}
.side-find svg{width:15px;height:15px}
.side-find span{flex:1;text-align:left}
.side-find kbd{font:500 11px var(--mono);border:1px solid var(--line);border-radius:var(--r);padding:1px 5px;background:var(--surface);color:var(--muted)}
.side-find:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--ink-2)}
.nav a{transition:background .15s,color .15s}
/* the tabs inside a place */
.subnav{display:flex;gap:4px;max-width:var(--page-w);margin:0 auto;padding:20px 28px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:7px 13px;border-radius:var(--r);color:var(--muted);font-weight:500;font-size:13.5px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.subnav a:hover{background:var(--surface);color:var(--ink)}
.subnav a.on{background:var(--surface);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(15,27,45,.06)}
.subnav + .page{padding-top:18px}
/* pages arrive with a short ease; outlines show while they load */
.main > .page:not([aria-busy]){animation:pageIn .22s ease-out both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}}
.sk{background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 35%,var(--surface)) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:var(--r)}
.sk-title{height:28px;width:220px;max-width:70%;margin-bottom:12px}
.sk-line{height:14px;width:420px;max-width:85%;margin-bottom:22px}
.sk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sk-card{height:150px;border-radius:var(--r)}
.sk-row{height:64px;margin-bottom:8px;border-radius:var(--r)}
@keyframes shimmer{to{background-position:-200% 0}}
/* empty pages get a friendly mark above their words */
.empty-state{position:relative;padding-top:124px}
.empty-state::before{content:'';position:absolute;left:50%;top:44px;width:58px;height:58px;margin-left:-29px;border-radius:var(--r);background:var(--accent-soft)}
.empty-state::after{content:'';position:absolute;left:50%;top:59px;width:28px;height:28px;margin-left:-14px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 570 570'%3E%3Cg fill='black'%3E%3Cpath d='M296,240.6l-.3.3a21.1,21.1,0,0,1-27.7-2L70.5,41.4a20.8,20.8,0,0,1-6.4-15.3A21,21,0,0,1,70.5,11,21.8,21.8,0,0,1,85.7,4.4a20.9,20.9,0,0,1,15.4,6.4L283.2,193l96.2-95.9a21,21,0,0,1,30,0c4.5,4.5,6.7,9.6,6.7,15.3a21.4,21.4,0,0,1-6.5,15L296.3,240.6Z'/%3E%3Cpath d='M239.4,271.6l.4.4a20.6,20.6,0,0,1,4.1,14.1,20.2,20.2,0,0,1-6.2,13.5L40.2,497.1a21,21,0,0,1-30.4,0,21.5,21.5,0,0,1-6.5-15.2c-.2-5.9,2-11,6.3-15.4L191.8,284.4,96,188.3a20.9,20.9,0,0,1,0-30.1c4.4-4.5,9.5-6.7,15.2-6.6a20.9,20.9,0,0,1,15,6.4L239.4,271.3A.2.2,0,0,1,239.4,271.6Z'/%3E%3Cpath d='M270.5,329.4l.4-.3a21,21,0,0,1,27.6,2L496,528.6a21,21,0,0,1,0,30.4,21.6,21.6,0,0,1-15.2,6.6,20.9,20.9,0,0,1-15.4-6.4L283.3,377l-96.1,95.9a21.1,21.1,0,0,1-30.1,0q-6.7-6.7-6.6-15.3a20.9,20.9,0,0,1,6.4-15L270.2,329.4Z'/%3E%3Cpath d='M327.6,298.2l-.4-.3a20.8,20.8,0,0,1-4.1-14.2,20.2,20.2,0,0,1,6.2-13.5L526.8,72.7c4.4-4.3,9.4-6.5,15.3-6.4a21,21,0,0,1,15.1,6.4,21.7,21.7,0,0,1,6.5,15.2,20.5,20.5,0,0,1-6.4,15.4L375.2,285.4,471,381.6a20.8,20.8,0,0,1,0,30c-4.5,4.5-9.6,6.7-15.3,6.7a21.2,21.2,0,0,1-14.9-6.5L327.6,298.5Q327.3,298.3,327.6,298.2Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 570 570'%3E%3Cg fill='black'%3E%3Cpath d='M296,240.6l-.3.3a21.1,21.1,0,0,1-27.7-2L70.5,41.4a20.8,20.8,0,0,1-6.4-15.3A21,21,0,0,1,70.5,11,21.8,21.8,0,0,1,85.7,4.4a20.9,20.9,0,0,1,15.4,6.4L283.2,193l96.2-95.9a21,21,0,0,1,30,0c4.5,4.5,6.7,9.6,6.7,15.3a21.4,21.4,0,0,1-6.5,15L296.3,240.6Z'/%3E%3Cpath d='M239.4,271.6l.4.4a20.6,20.6,0,0,1,4.1,14.1,20.2,20.2,0,0,1-6.2,13.5L40.2,497.1a21,21,0,0,1-30.4,0,21.5,21.5,0,0,1-6.5-15.2c-.2-5.9,2-11,6.3-15.4L191.8,284.4,96,188.3a20.9,20.9,0,0,1,0-30.1c4.4-4.5,9.5-6.7,15.2-6.6a20.9,20.9,0,0,1,15,6.4L239.4,271.3A.2.2,0,0,1,239.4,271.6Z'/%3E%3Cpath d='M270.5,329.4l.4-.3a21,21,0,0,1,27.6,2L496,528.6a21,21,0,0,1,0,30.4,21.6,21.6,0,0,1-15.2,6.6,20.9,20.9,0,0,1-15.4-6.4L283.3,377l-96.1,95.9a21.1,21.1,0,0,1-30.1,0q-6.7-6.7-6.6-15.3a20.9,20.9,0,0,1,6.4-15L270.2,329.4Z'/%3E%3Cpath d='M327.6,298.2l-.4-.3a20.8,20.8,0,0,1-4.1-14.2,20.2,20.2,0,0,1,6.2-13.5L526.8,72.7c4.4-4.3,9.4-6.5,15.3-6.4a21,21,0,0,1,15.1,6.4,21.7,21.7,0,0,1,6.5,15.2,20.5,20.5,0,0,1-6.4,15.4L375.2,285.4,471,381.6a20.8,20.8,0,0,1,0,30c-4.5,4.5-9.6,6.7-15.3,6.7a21.2,21.2,0,0,1-14.9-6.5L327.6,298.5Q327.3,298.3,327.6,298.2Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.empty-state p{max-width:560px;margin-left:auto;margin-right:auto}
.empty-mini{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:18px}
.empty-mini>svg{width:22px;height:22px;color:var(--accent);flex:none;background:var(--accent-soft);border-radius:var(--r);padding:8px;box-sizing:content-box}
.empty-mini b{display:block;font-weight:600;margin-bottom:2px}
.empty-mini p{margin:0 0 8px;color:var(--muted);font-size:13px}
/* one look for an empty section (audit, 2026-10-18): the dashed box, muted words; a whole empty page keeps .empty-state */
p.empty-mini,div.empty-mini{color:var(--muted);font-size:13.5px;line-height:1.5;margin:12px 0 0}

/* ---------- Home */
.page.pg-home{max-width:var(--page-w)}
.pg-home > section + section,.pg-home > div + section{margin-top:24px}   /* Overview's parts, one under the other */
.ask-hero{padding:18px 0 4px}
/* on Flows, under the page title and above the list (2026-10-12: Home's box moved here) */
.ask-hero.ask-flows{padding:0 0 24px}.ask-flows .ask-q{margin-top:0}
.ask-hero h1{font-size:30px;margin:0;letter-spacing:-.02em;font-weight:600}
.ask-q{font-size:17px;color:var(--ink-2);margin:6px 0 16px}
.ask-box{display:flex;align-items:flex-end;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 12px 16px;box-shadow:0 1px 2px rgba(15,27,45,.05),0 22px 44px -26px color-mix(in srgb,var(--accent) 55%,transparent);transition:border-color .2s,box-shadow .2s}
.ask-box:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 22px 44px -26px color-mix(in srgb,var(--accent) 55%,transparent)}
.ask-ico{color:var(--accent);align-self:flex-start;padding-top:8px}
.ask-ico svg{width:22px;height:22px}
.ask-box textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;font:400 16px/1.45 var(--sans);color:var(--ink);padding:6px 0;min-height:52px;max-height:220px}
.ask-box textarea::placeholder{color:var(--placeholder)}
.ask-go{height:42px;border-radius:var(--r);padding:0 16px;font-size:14px}
.ask-go svg{width:16px;height:16px}
.ask-ideas{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.idea{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:7px 13px;font:400 13px var(--sans);color:var(--ink-2);cursor:pointer;text-align:left;transition:border-color .15s,color .15s,background .15s}
.idea:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);background:var(--accent-soft)}
.ask-alt{font-size:13px;color:var(--muted);margin:12px 0 0}
#ckHost:not(:empty){margin-top:22px}
.need{margin:24px 0 0}
.need h2,.home-sec h2,.home-map h2{font-size:16px;margin:0;font-weight:600}
.need-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);padding:10px 12px;margin-top:8px;font-size:13.5px}
.need-row.bad{border-left-color:var(--bad)}
.need-row>svg{color:var(--warn);flex:none}
.need-row.bad>svg{color:var(--bad)}
.need-row span{flex:1;min-width:0}
.home-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;margin-top:28px;align-items:start}
.hs-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.hs-head a{font-size:13px;color:var(--accent);text-decoration:none;font-weight:500}
.hs-head a:hover{text-decoration:underline}
.pg-home .rc-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hf-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.hf{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-top:1px solid var(--line-2)}
.hf:first-child{border-top:0}
.hf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.hf-main:hover b{color:var(--accent)}
.hf-top{display:flex;align-items:center;gap:8px;min-width:0}
.hf-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14px;min-width:0}
.hf-top .pill{flex:none}
.hf-sum{color:var(--muted);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hf-run{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.home-stats{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.home-stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- flows: the sentence under the name, and a quick switch */
.wf-sum{margin:0;color:var(--ink-2);font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wf-onoff{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font:500 12px var(--sans);color:var(--ink-2);cursor:pointer;flex:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.wf-onoff svg{width:13px;height:13px}
.wf-onoff:hover{border-color:var(--accent);color:var(--accent)}
.wf-onoff.live{color:var(--warn-ink);background:var(--warn-bg-2)}
.wf-onoff.live:hover{border-color:var(--warn);color:var(--warn-ink)}
.wf-cell .wf-onoff{position:absolute;right:12px;bottom:11px;z-index:1}
.wf-cell:has(.wf-onoff) .wf-card .foot>span:last-child{visibility:hidden}

/* ---------- result cards */
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);min-width:0;transition:transform .18s,box-shadow .18s}
.rc:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(15,27,45,.35)}
.rc-top{display:flex;gap:10px;align-items:flex-start;min-width:0}
.rc-ico{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:var(--k-place);background:color-mix(in srgb,var(--k-place) 12%,var(--surface))}
.rc-ico.k-job{color:var(--k-job);background:color-mix(in srgb,var(--k-job) 12%,var(--surface))}
.rc-ico.k-incident{color:var(--k-incident);background:color-mix(in srgb,var(--k-incident) 12%,var(--surface))}
.rc-ico.k-ship{color:var(--k-ship);background:color-mix(in srgb,var(--k-ship) 12%,var(--surface))}
.rc-id{flex:1;min-width:0}
.rc-name{display:block;font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;line-height:1.3}
a.rc-name:hover{color:var(--accent)}
.rc-id small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.rc-score{flex:none;min-width:38px;height:28px;border-radius:var(--r);display:grid;place-items:center;font:600 13px var(--sans);font-variant-numeric:tabular-nums;padding:0 9px}
.rc-score.s-hi{background:var(--ok-bg);color:var(--ok-ink)}
.rc-score.s-mid{background:var(--warn-bg);color:var(--warn-ink)}
.rc-score.s-lo{background:var(--surface-2);color:var(--muted)}
.rc-why{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rc-meta{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.rc-meta a{color:inherit}
.rc-meta .rc-new{color:var(--ok);font-weight:500}
.rc-star{display:inline-flex;align-items:center;gap:3px;color:var(--ink-2);font-weight:500}
.rc-star svg{width:13px;height:13px;color:#C98A00;fill:#C98A00}
.rc-star i{font-style:normal;color:var(--muted);font-weight:400}
.rc-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line-2)}
.rc-acts{display:flex;gap:6px;flex-wrap:wrap}
.rc-act{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;font:500 12.5px var(--sans)}
.rc-act:hover{border-color:var(--accent);color:var(--accent)}
.rc-act svg{width:14px;height:14px}
.rc-status{display:flex;background:var(--surface-2);border-radius:var(--r);padding:3px;gap:2px}
.rc-status button{flex:1;border:0;background:none;border-radius:var(--r);padding:5px 4px;font:500 12px var(--sans);color:var(--muted);cursor:pointer;min-height:30px;transition:background .15s,color .15s}
.rc-status button:hover{color:var(--ink)}
.rc-status button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(15,27,45,.14)}
.rc-status button.on[data-rst="contacted"]{color:var(--warn-ink)}
.rc-status button.on[data-rst="won"]{color:var(--ok)}
.rc-status button.on[data-rst="ignored"]{color:var(--muted)}
.ro-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.seg.ro-view button,.seg.r-view button{padding:5px 11px;font-size:12.5px}
.r-sum .seg{margin-left:auto}
.run-cards{margin-bottom:4px}

/* ---------- the editor: the flow in words, what comes next, simpler settings */
.sentence{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;align-items:flex-start;gap:10px;max-width:900px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:9px 8px 9px 14px;box-shadow:var(--shadow);font-size:14px;line-height:1.65;color:var(--ink-2);cursor:default;user-select:text}
.panel.open~.sentence{right:332px}
.sentence p{margin:0;flex:1;min-width:0}
.sentence [data-sn],.steps-sent [data-sn]{border:0;background:none;padding:0 2px;margin:0 -1px;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;border-radius:var(--r);transition:background .15s,color .15s}
.sentence [data-sn]:hover,.sentence [data-sn].on,.steps-sent [data-sn]:hover,.steps-sent [data-sn].on{color:var(--accent);background:var(--accent-soft);text-decoration-color:var(--accent)}
.sn-ico{color:var(--accent);padding-top:3px;flex:none}
.sn-x{flex:none;width:28px;height:28px;border:0;background:none;border-radius:var(--r);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.sn-x:hover{background:var(--surface-2);color:var(--ink)}
.sn-x svg{width:14px;height:14px}
.sentence.shut{right:auto;padding:0;border-radius:var(--r)}
.sn-open{display:inline-flex;gap:6px;align-items:center;height:34px;padding:0 13px;border:0;background:none;font:500 12.5px var(--sans);color:var(--ink-2);cursor:pointer;border-radius:var(--r)}
.sn-open:hover{color:var(--accent)}
.sn-open svg{width:14px;height:14px;color:var(--accent)}
.as-list .sentence{display:none}
.steps-sent{margin:0 0 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:14px;line-height:1.65;color:var(--ink-2)}
.n-next{display:none;position:absolute;right:-42px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-strong);color:#fff;place-items:center;cursor:pointer;box-shadow:var(--shadow);z-index:3;padding:0;animation:pop .18s ease-out}
.node.selected .n-next{display:grid}
.readonly .n-next,.node.selected.multi .n-next{display:none!important}
.n-next svg{width:15px;height:15px}
.n-next:hover{transform:scale(1.08)}
.next-pop{position:absolute;z-index:12;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;animation:mod .18s ease-out both}
.np-head{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-find{margin:2px 4px 4px;width:calc(100% - 8px)}.np-list{display:flex;flex-direction:column;gap:2px}
.np-item{display:flex;gap:10px;align-items:center;text-align:left;border:0;background:none;border-radius:var(--r);padding:8px;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.np-item:hover,.np-item:focus-visible{background:var(--surface-2);outline:none}
.np-item .n-ico{width:30px;height:30px;border-radius:var(--r)}
.np-item .n-ico svg{width:15px;height:15px}
.np-item span:last-child{min-width:0}
.np-item b{display:block;font-weight:500;font-size:13.5px}
.np-item small{display:block;color:var(--muted);font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-all{border:0;border-top:1px solid var(--line-2);background:none;padding:10px 8px;margin-top:2px;display:flex;gap:8px;align-items:center;color:var(--accent);font:500 13px var(--sans);cursor:pointer;min-height:40px}
.np-all:hover{text-decoration:underline}
.np-all svg{width:14px;height:14px}
.more-opts{display:flex;align-items:center;gap:6px;width:100%;margin:14px 0 2px;padding:10px 0;border:0;border-top:1px dashed var(--line);background:none;color:var(--accent);font:500 13px var(--sans);cursor:pointer;min-height:40px}
.more-opts:hover{text-decoration:underline}
.more-opts svg{width:14px;height:14px}

/* ---------- Search everything */
.find-wrap{position:fixed;inset:0;z-index:90;background:rgba(15,27,45,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;animation:fade .15s both}
.find{width:min(620px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;animation:mod .22s cubic-bezier(.2,1.2,.3,1) both}
.find-in{display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;border-bottom:1px solid var(--line-2);min-height:58px;flex:none}
.find-in>svg{width:18px;height:18px;color:var(--muted);flex:none}
.find-in input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 16px var(--sans);color:var(--ink);height:56px}
.find-in input::-webkit-search-cancel-button{display:none}
.find-in kbd{font:500 11px var(--mono);border:1px solid var(--line);border-radius:var(--r);padding:2px 6px;color:var(--muted)}
.find-x{display:none;border:0;background:none;color:var(--accent);font:500 15px var(--sans);padding:8px 4px;cursor:pointer}
.find-list{overflow:auto;padding:6px;overscroll-behavior:contain}
.find-g{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.find-it{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:9px 10px;border-radius:var(--r);text-align:left;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.find-it>svg{width:17px;height:17px;color:var(--muted);flex:none}
.find-it>span:not(.pill){flex:1;min-width:0}
.find-it b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-it small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-it.on{background:var(--accent-soft)}
.find-it.on>svg{color:var(--accent)}
.find-none{padding:28px;text-align:center;color:var(--muted);margin:0}
body.noscroll{overflow:hidden}

/* ---------- phones: an app, not a shrunken web page */
.tabbar,.side-scrim{display:none}
html{-webkit-tap-highlight-color:transparent}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{width:min(300px,86vw);padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:24px 0 60px -30px rgba(15,27,45,.6);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .side .nav a.nv,.side .side-find{display:none}
  .side-scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgba(15,27,45,.36);z-index:49;animation:fade .2s both}
  .mobile-top{position:relative;z-index:6;padding:calc(6px + env(safe-area-inset-top)) 8px 6px 10px;gap:6px;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line-2);flex:none}
  .mt-org{border:0;background:none;padding:6px 6px;display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--ink)}
  .mt-org .logo{height:20px;width:51px}
  .mt-sp{flex:1}
  .mt-btn,.mt-me{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;padding:0}
  .mt-btn svg{width:20px;height:20px}
  .mt-me .avatar{width:30px;height:30px;font-size:12px}
  .mobile-top .bell{width:44px;height:44px}
  .shell.full .mobile-top{display:none!important}
  .main{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:none;position:relative;z-index:6;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line-2);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;color:var(--muted);text-decoration:none;font:500 11px var(--sans);border-radius:var(--r);transition:color .15s}
  .tabbar a svg{width:23px;height:23px;transition:transform .15s}
  .tabbar a.on{color:var(--accent)}
  .tabbar a.on svg{stroke-width:2.3}
  .tabbar a:active svg{transform:scale(.88)}
  .subnav{position:sticky;top:0;z-index:5;margin:0;max-width:none;padding:10px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .subnav a{padding:8px 14px;min-height:36px;display:flex;align-items:center}
  .subnav + .page{padding-top:8px}
  .home-cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .ask-hero h1{font-size:25px}
  .ask-q{font-size:16px;margin-bottom:12px}
  .modal-back{animation:fade .2s both}
  .sentence{font-size:13px;line-height:1.6}
  .panel.open~.sentence{display:none}
}
@media (max-width:640px){
  .ask-box{flex-wrap:wrap;padding:12px;border-radius:var(--r)}
  .ask-ico{display:none}
  .ask-box textarea{flex:1 1 100%;min-height:72px}
  .ask-go{flex:1 1 100%;height:46px}
  .ask-ideas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .ask-ideas::-webkit-scrollbar{display:none}
  .idea{flex:none;white-space:nowrap;padding:9px 14px}
  .rc-act{height:40px;flex:1 1 auto;justify-content:center}
  .rc-status button{min-height:38px}
  .hf{padding:14px 12px}
  .wf-onoff{height:36px}
  .modal{animation:sheet .3s cubic-bezier(.2,.9,.25,1) both}
  .modal::before{content:'';display:block;width:38px;height:5px;border-radius:var(--r);background:var(--line);margin:-8px auto 12px}
  .find-wrap{padding:0;align-items:stretch;background:var(--surface)}
  .find{max-height:none;height:100%;border-radius:0;border:0;box-shadow:none;padding-top:env(safe-area-inset-top);animation:fade .15s both}
  .find-in kbd{display:none}
  .find-x{display:block}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters>.inp{flex:none;width:auto;min-width:150px}
  .filters>input.inp{min-width:220px}
}
@keyframes sheet{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.sk,.main>.page,.modal,.find,.next-pop,.n-next{animation:none!important}}
@media (max-width:640px){
  .fl-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .fl-bar .fl-find{grid-column:1/-1}
  .fl-bar select.inp,.fl-bar .btn{flex:none;width:100%;max-width:none}
  .fl-bar select.inp[hidden]{display:none}
  .r-view{display:none!important}
  .page-head .head-btns{width:100%}
  .page-head .head-btns .btn.primary{flex:1}
}
.main-full.has-sub{display:flex;flex-direction:column}
.main-full.has-sub>.subnav{flex:none;width:100%;max-width:none;padding-bottom:12px;margin:0}
.main-full.has-sub>:not(.subnav){flex:1;min-height:0}
.copy-row{display:flex;gap:8px;flex-wrap:wrap}
.copy-row .inp{flex:1 1 220px;min-width:0;font-family:var(--mono);font-size:13px}
.ref-stats{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.ref-stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ok-note{display:flex;align-items:center;gap:6px;color:var(--ok-ink)}
.seg-ask{margin:16px 0 4px;font-size:14px}
.seg-ask b{font-weight:600}
.seg-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.seg-chip{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:7px 13px;font:500 13px var(--sans);cursor:pointer}
.seg-chip:hover{background:var(--accent-strong);color:#fff}
.seg-now{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.home-map{margin-top:26px}
.hm-map{height:300px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-2)}
.tip-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:var(--r);padding:10px 12px;margin:22px 0 22px;font-size:13.5px}   /* air below too: it sat on the search row (owner's report, 2026-10-19) */
.tip-row>svg{color:var(--accent);flex:none}
.tip-row span{flex:1 1 240px;min-width:0}
@media (max-width:640px){.hm-map{height:230px}.seg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.seg-chip{flex:none;white-space:nowrap}}
.btns-c{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.example-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-bg-2);border:1px solid var(--warn-line);border-radius:var(--r);padding:10px 12px;margin-bottom:14px;font-size:13.5px;color:var(--ink-2)}
.example-note>svg{color:var(--warn-ink);flex:none}
.example-note span{flex:1 1 240px;min-width:0}
.r-ask{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13px}
.ask-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:4px 8px 4px 11px;font:500 12.5px var(--sans);cursor:pointer}
.ask-chip svg{width:12px;height:12px}
.toast.undo{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px}
.toast.undo button{border:0;background:rgba(255,255,255,.14);color:#fff;font:600 13px var(--sans);border-radius:var(--r);padding:7px 12px;cursor:pointer;min-height:34px}
.toast.undo button:hover{background:rgba(255,255,255,.24)}
@media (max-width:900px){.toast.undo{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,16px)}.toast.undo.show{transform:translate(-50%,0)}}
/* flow cards: the name gets the card's whole width (it wrapped word by word beside the badge); the badge goes under it */
.wf-top{flex-direction:column;align-items:flex-start;gap:6px}
.wf-top h3{line-height:1.35}
/* the AI box keeps one width and its buttons stay put, open or closed (owner, 2026-10-10) */
.ai-wrap.big{width:min(560px,calc(100% - 32px))}
.panel.open~.ai-wrap.big{width:min(560px,calc(100% - 360px))}
@media (min-width:761px){@container cv (max-width:1310px){.ai-wrap{bottom:64px}}}
/* the chat can be made smaller from its own header too (tester's feedback, 2026-10-13); its text can be selected and each
   answer copied, and the block panel's text can be selected (the canvas switches selection off for dragging) */
.ai-chat,.ai-chat *,.panel,.panel *,.hook-try{user-select:text;-webkit-user-select:text}
.ai-m{position:relative}
.ai-m .ai-copy{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--muted);display:grid;place-items:center;opacity:0;transition:opacity .15s;cursor:pointer}
.ai-m .ai-copy svg{width:14px;height:14px}
.ai-m:hover .ai-copy,.ai-m .ai-copy:focus-visible{opacity:1}
.ai-m .ai-copy:hover{background:var(--surface-2);color:var(--ink)}
@media (hover:none){.ai-m .ai-copy{opacity:.7}}
.try-copy{display:flex;justify-content:flex-end;margin-top:6px}
@media (max-width:900px){.ai-wrap.big,.panel.open~.ai-wrap.big{width:auto}}
/* page headers: the buttons on the right sit level with the title on every page, whatever the length of the text under it */
.page-head{align-items:flex-start}
.page-head>:not(:first-child){margin-top:-2px}
/* every row of filters is built the same way and fills the page on one line: the search box takes the room it needs, the
   choices share the rest equally (Results, Insights, Templates, Map...) */
@media (min-width:641px){
  .filters{flex-wrap:nowrap}
  .filters>.inp,.filters .ex-sel>.inp{flex:1 1 0;min-width:0;width:auto;max-width:none}
  .filters>input[type=search].inp{flex:2 1 0}
  .ex-filters .ex-when{flex:1.4 1 0;min-width:0}
}
@media (min-width:641px) and (max-width:1100px){.filters{flex-wrap:wrap}.filters>.inp,.filters .ex-sel>.inp{flex:1 1 160px}.filters>input[type=search].inp{flex:1 1 100%}}
.news{max-width:none}
/* phones: the buttons under a page's title follow one rule on every page: the main one fills the row, the others keep
   their size beside it (owner, 2026-10-10: some pages had full-width buttons, others small ones) */
@media (max-width:640px){
  .page-head>:not(:first-child){width:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
  .page-head .btn.primary,.page-head label.btn.primary{flex:1 1 auto;justify-content:center}
  .page-head .btn:not(.primary){flex:0 0 auto}
  .ex-sel{display:contents}
  .ex-sel>.inp{flex:none;width:auto;min-width:150px}
  .ex-filters .ex-when{flex:none;min-width:220px}
}
/* pages you reach by clicking into something (a result, a run, a map, a table, a dashboard): the same way back above the
   same title, at the same height (owner, 2026-10-10: one layout everywhere) */
.back-link{display:flex;width:fit-content;margin:0 0 8px;min-height:20px}
.map-name,.page-head .name{font-size:24px!important;font-weight:600;letter-spacing:-.01em;line-height:1.25}
@media (max-width:640px){.map-name,.page-head .name{font-size:22px!important}}
/* block panels (owner, 2026-10-10: "keep only the most important options, the rest under advanced"): two lines of
   description and the price, what the block needs, More options, then Advanced (test, skip, if it fails) folded */
.panel .pdesc{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel .pb>.cost{margin:8px 0 0}
.panel:not(.typing) .pfields{display:none}
.padv{margin:16px 0 4px;border-top:1px solid var(--line-2);padding-top:6px}
.padv>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font:500 13px var(--sans);color:var(--ink-2);padding:8px 0;min-height:36px}
.padv>summary::-webkit-details-marker{display:none}
.padv>summary::before{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin:0 4px 0 2px}
.padv[open]>summary::before{transform:rotate(45deg)}
.padv>summary:hover{color:var(--accent)}
.padv-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:4px 0 6px}
.padv-in .pfail{width:100%}
.padv-in .poff{margin:0}
/* a newer release is on the site: a bar with Reload */
.upd-bar{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top));z-index:95;display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px 8px 8px 14px;font-size:13.5px;animation:mod .25s ease-out both;max-width:calc(100% - 32px)}
.upd-bar>svg{color:var(--accent);flex:none}
.upd-x{border:0;background:none;color:var(--muted);width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;cursor:pointer}
.upd-x:hover{background:var(--surface-2)}
/* the sentence's parts that can be changed in place, and their small editor */
.sentence [data-sn].sn-ed,.steps-sent [data-sn].sn-ed{text-decoration-style:dashed}
.sentence [data-sn].sn-ed::after,.steps-sent [data-sn].sn-ed::after{content:'';display:inline-block;width:5px;height:5px;margin:0 2px 2px 4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
.sn-pop{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 14px;animation:mod .16s ease-out both}
.sn-pop .lab{margin-top:0}
.sn-pop .lab+.inp,.sn-pop .lab+.sn-opts{margin-bottom:10px}
.sn-opts{display:flex;flex-wrap:wrap;gap:6px}
.sn-opts button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 11px;font:500 12.5px var(--sans);color:var(--ink-2);cursor:pointer;min-height:32px}
.sn-opts button.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sn-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12.5px}
/* buttons and lists inside the AI chat (what a test found, Deploy, Change something) */
.ai-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ai-list{margin:6px 0 6px 18px;padding:0;font-size:13px}
.ai-list li{margin:2px 0}
@media (max-width:640px){.sn-opts button{min-height:38px}}
/* acting on result cards (2026-10-10): a swipe on phones, keys on Results, Send to... */
.rc[data-rc]{touch-action:pan-y}
.rc.swiping{transition:none;box-shadow:0 18px 34px -16px rgba(15,27,45,.4)}
.rc[data-swipe="contacted"]{border-color:var(--warn-ink);background:color-mix(in srgb,var(--warn-bg) 55%,var(--surface))}
.rc[data-swipe="ignored"]{border-color:var(--muted);opacity:.75}
.rc[data-rc]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.rc-act{cursor:pointer}
.send-apps{margin:4px 0 14px;display:flex;flex-wrap:wrap}
.send-form{display:grid;gap:10px}
.send-acct,.send-hint{margin:0;font-size:13px}
.r-keys{font-size:12px;color:var(--muted)}
.r-keys kbd{font:500 11px var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r);padding:0 5px;background:var(--surface);color:var(--ink-2)}
/* saved views on Results (2026-10-10) */
.r-views{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:-4px 0 14px;font-size:13px}
.r-views[hidden]{display:none}
.vchip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.vchip.on{border-color:var(--accent);background:var(--accent-soft)}
.vchip button{border:0;background:none;cursor:pointer;color:var(--ink-2);font:500 13px var(--sans);min-height:32px;padding:0 6px;display:inline-flex;align-items:center}
.vchip button:first-child{padding-left:12px}
.vchip .vdel{padding-right:10px;color:var(--muted)}
.vchip .vpin{color:var(--muted)}
.vchip .vpin.pinned{color:#C98A00}
.vchip .vpin.pinned svg{fill:#C98A00}
.vchip svg{width:13px;height:13px}
@media (max-width:640px){.vchip button{min-height:40px}}
/* pinned views on Home */
.hv-list{display:flex;gap:10px;flex-wrap:wrap}
.hv{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);min-width:150px;flex:1 1 150px;max-width:260px}
.hv:hover{border-color:var(--accent)}
.hv b{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.hv span{font-size:12.5px;color:var(--muted)}
.hv em{font-style:normal;font-variant-numeric:tabular-nums;font:600 20px var(--sans);color:var(--accent)}
/* what a flow did lately, on its card (2026-10-10) */
.wf-act:empty{display:none}
.wf-act-in{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.wf-card .wf-act{margin-top:2px;padding:8px 10px;border-radius:var(--r);background:var(--surface-2)}
.hf .wf-act{margin-top:4px}
.wf-act-last{overflow-wrap:anywhere}
.wf-act-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.wf-act-row small{color:var(--muted);font-size:12px;min-width:0}
.spark{flex:none;display:block}
/* speak instead of type (2026-10-10) */
.mic{flex:none;width:34px;height:34px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.mic:hover{color:var(--accent);border-color:var(--accent)}
.mic.on{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--bad) 18%,transparent)}}
.ai-bar .mic{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.ai-bar .mic.on{background:var(--bad-bg);color:var(--bad)}
.ask-box .ask-mic{align-self:flex-end;width:40px;height:40px;margin-bottom:2px}
@media (max-width:640px){.ask-box .ask-mic{flex:0 0 46px;height:46px;margin:0}.ask-box .ask-go{flex:1 1 0}}
@media (max-width:640px){.mic{width:40px;height:40px}}
.filters .fq-mic{width:var(--ctl-h);height:var(--ctl-h)}   /* exactly as tall as the fields beside it, on every screen (owner, 2026-10-18) */
/* a first message to a result (2026-10-10) */
.dr-ch{margin:2px 0 12px}
.dr-foot .spacer{flex:1}
.dr-foot{flex-wrap:wrap}
@media (max-width:640px){.dr-foot .spacer{display:none}}
/* start from the website (2026-10-10) */
.site-row{display:grid;gap:6px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.site-row .lab{display:flex;align-items:center;gap:6px;margin:0;color:var(--ink)}
.site-row .lab svg{color:var(--accent)}
.site-in{display:flex;gap:8px}
.site-in .inp{flex:1;min-width:0}
.site-row small{font-size:12px}
.wel-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;margin:12px 0 8px}
.wel-or::before,.wel-or::after{content:'';flex:1;border-top:1px solid var(--line)}
.wel-alt{margin:14px 0 0;font-size:13px;color:var(--muted)}
/* the first minute: three AI employees with real results (owner, 2026-10-21, UX upgrade 7) */
.site-in .btn{flex:none}
.fm-step{color:var(--ink)}
.fm-step::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--accent);vertical-align:1px;animation:fmPulse 1.2s ease-in-out infinite}
@keyframes fmPulse{50%{opacity:.25}}
.fm-card{margin:0 0 18px}
.fm-card h3{margin:0 0 4px}
.fm-card .site-row{margin-bottom:0}
.fm-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 10px}
.fm-emp{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.fm-emp.hired{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fm-h{display:flex;align-items:center;gap:10px;min-width:0}
.fm-h>div{display:grid;gap:1px;min-width:0}
.fm-h b{font-weight:600}
.fm-h span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.fm-why{margin:0;font-size:13.5px}
.fm-works{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--muted)}
.fm-works svg{width:14px;height:14px;flex:none}
.fm-found{flex:1;display:grid;align-content:start;gap:6px;padding:10px;border-radius:var(--r);background:var(--lg-in,var(--bg))}
.fm-n{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:500}
.fm-live{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok,#1f9d55);animation:fmPulse 1.6s ease-in-out infinite}
.fm-none{margin:0;font-size:13px;color:var(--muted)}
.fm-rows{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.fm-rows li{display:grid;gap:1px;min-width:0}
.fm-rows b{font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-rows span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-acts{display:grid;gap:8px}
.fm-acts>.btn{width:100%;justify-content:center}
.fm-btns{display:flex;gap:8px;flex-wrap:wrap}
.fm-btns .btn{flex:1 1 auto;justify-content:center}
.fm-ok{display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
.fm-ok svg{width:15px;height:15px;color:var(--accent);flex:none}
.fm-ok.on svg{color:var(--ok,#1f9d55)}
.fm-cost{margin:0}
@media (prefers-reduced-motion:reduce){.fm-step::before,.fm-live{animation:none}}
@media (max-width:900px){.fm-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.site-in{flex-direction:column}.site-in .btn{width:100%;justify-content:center}}
.runs-left{margin:2px 0 0;color:var(--muted);font-size:13px}
/* an answer to a question about results (2026-10-10) */
.r-answer{display:grid;gap:8px;margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--surface)}
.ra-top{display:flex;align-items:flex-start;gap:8px}
.ra-top>svg{color:var(--accent);flex:none;margin-top:2px}
.ra-top b{flex:1;font-weight:600;font-size:15px;line-height:1.4}
.ra-x{border:0;background:none;color:var(--muted);cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r);flex:none}
.ra-x:hover{background:var(--surface-2);color:var(--ink)}
.r-answer .btn{justify-self:start}
/* "+" on a link: add a block between two (2026-10-10) */
.edge-add{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.edge-add:hover{background:var(--accent-soft)}
@media (pointer:coarse){.edge-del{width:34px;height:34px}}
/* Shared links (2026-10-10) */
.links-tbl td small{display:block;color:var(--muted);font-size:12px}
.links-tbl .link-url{font-size:12.5px;overflow-wrap:anywhere}
.links-acts{white-space:nowrap;text-align:right}
.links-acts .btn+.btn{margin-left:6px}
.danger-text{color:var(--bad)}
@media (max-width:640px){.links-acts{white-space:normal}.links-acts .btn{margin:4px 0 0}}
/* Settings: the credits card spans the page, the balance beside the latest charges (owner, 2026-10-10) */
.credits-card{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:12px 32px;align-items:start}
.credits-card .credits-h{font-size:13px;color:var(--muted);font-weight:500}
@media (max-width:760px){.credits-card{grid-template-columns:1fr}}
/* name a flow from what it does (2026-10-10) */
.name-ai{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--accent);display:grid;place-items:center;cursor:pointer;padding:0}
.name-ai:hover{background:var(--accent-soft)}

/* the Regional block's default country (2026-10-10) */
.def-c{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.def-c svg{width:13px;height:13px;color:var(--ok)}
/* Ask xMap (2026-10-11): the round button on every page, the panel, its Confirm cards, and step 3's dot and bubble */
.ax-fab{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 14px;border-radius:var(--r);border:0;background:var(--accent-strong);color:var(--accent-ink);font:inherit;font-weight:500;box-shadow:var(--shadow-lg);cursor:pointer}
.ax-fab svg{width:18px;height:18px}
.ax-fab.has-dot::after{content:"";position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}
.ax-on .ax-fab{display:none}
/* the floating button steps aside while a window or Search is open (2026-10-12: it sat on top of them) */
body:has(.modal-back) .ax-fab,body:has(.find-wrap) .ax-fab{display:none}
.mt-ax{position:relative}.mt-ax.has-dot::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}
@media (min-width:901px){.mt-ax{display:none}}
.ax-wrap{position:fixed;inset:0;z-index:1150;display:none;background:rgba(15,27,45,.18)}
.ax-wrap.open{display:block}
.ax-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg)}
.ax-head{display:flex;align-items:center;gap:6px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line-2)}
.ax-head b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.ax-head b svg{width:18px;height:18px;color:var(--accent)}
.ax-head .spacer{flex:1}
.ax-head .x{width:36px;height:36px;border:0;background:none;color:var(--muted);border-radius:var(--r);cursor:pointer;display:grid;place-items:center}
.ax-head .x:hover{background:var(--surface-2);color:var(--ink)}
.ax-list{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ax-m{display:flex}
.ax-m.me{justify-content:flex-end}
.ax-b{max-width:88%;padding:10px 13px;border-radius:var(--r);font-size:14px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.ax-m.me .ax-b{background:var(--accent-strong);color:var(--accent-ink);border-bottom-right-radius:4px}
.ax-m.bot .ax-b{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px}
.ax-b p{margin:0 0 8px}.ax-b p:last-child{margin-bottom:0}
.ax-b ul{margin:4px 0 8px;padding-left:18px}
.ax-b b{font-weight:600}
.ax-note{color:var(--muted);font-size:13px}
.ax-did{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.ax-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.en-price{margin:12px 0 0;font-size:14px}
.golive-skip.en-ai{margin-top:12px;font-size:14px;color:var(--ink)}
#enPr{margin-top:8px}
.en-prog{margin-top:14px}
.en-bar{height:8px;border-radius:var(--r);background:var(--track);overflow:hidden}
.en-bar i{display:block;height:100%;width:0;background:var(--accent-strong);transition:width .4s}
.en-ok{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border-radius:var(--r);background:var(--ok-bg)}
.en-ok svg{flex:none;width:20px;height:20px;color:var(--ok)}
.en-ok p{margin:4px 0 0}
.ax-map{height:230px;margin:10px 0 8px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ax-mapq b{display:flex;align-items:center;gap:6px}
@media (max-width:900px){.ax-map{height:200px}}
.ax-card{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ax-card.danger{border-color:var(--bad-line);background:var(--bad-bg-2)}
.ax-card b{display:block;font-weight:600;margin-bottom:2px}
.ax-card p{margin:0 0 8px;color:var(--ink-2);font-size:13px}
.ax-card small{color:var(--muted);font-size:12px}
.ax-cbtn{display:flex;gap:6px;justify-content:flex-end}
.ax-hello{display:grid;gap:6px;color:var(--ink-2);font-size:14px;line-height:1.5}
.ax-hello b{color:var(--ink);font-weight:600;font-size:16px}
.ax-hello p{margin:0}
.ax-ideas{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.ax-idea{text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.ax-idea:hover{border-color:var(--accent);background:var(--sel-bg)}
.ax-nudges{display:flex;flex-direction:column;gap:8px}
.ax-nudge{display:grid;gap:8px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-size:14px}
.ax-nudge.k-failed{border-color:var(--bad-line);background:var(--bad-bg-2)}
.ax-nudge.k-credits{border-color:var(--warn-line);background:var(--warn-bg-2)}
.ax-nudge div{display:flex;gap:6px;flex-wrap:wrap}
.ax-typing{display:flex;gap:4px;align-items:center;min-height:20px}
.ax-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:axdot 1.2s infinite ease-in-out}
.ax-typing i:nth-child(2){animation-delay:.15s}.ax-typing i:nth-child(3){animation-delay:.3s}
@keyframes axdot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ax-in{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 6px;border-top:1px solid var(--line-2)}
.ax-in textarea{flex:1;min-width:0;resize:none;max-height:140px;line-height:1.45}
.ax-in .btn{flex:none}
.ax-foot{display:block;padding:0 14px 10px;color:var(--muted);font-size:11px;line-height:1.4}
.hp-ask{width:100%;justify-content:center;margin-bottom:10px}
@media (max-width:900px){
  .ax-fab{display:none}   /* on phones it is the top bar's sparkle (#axTop) */
  .ax-fab span{display:none}
  .ax-panel{top:env(safe-area-inset-top,0px);width:100%;border-left:0;border-radius:0}
  .ax-in{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .ax-in textarea{font-size:16px}
  .ax-head .btn span{display:none}
}
@media print{.ax-fab,.ax-wrap{display:none!important}}
/* AI agent (2026-10-11): its Tools port (purple, under the block), the dashed links to its tools, and the tools themselves */
.port.out.p-tool{top:auto;bottom:-6px;left:22%;right:auto;margin-left:-6px;border-color:var(--k-mob)}
.port.out.p-tool:hover,.port.p-tool.hot{background:var(--k-mob);border-color:var(--k-mob)}
.port-lab.p-tool{top:auto;bottom:-20px;right:auto;left:22%;transform:translateX(-50%);color:var(--k-mob)}
.edge.edge-tool{stroke:var(--k-mob);stroke-dasharray:5 4}
.node.is-tool{border-style:dashed;border-color:var(--k-mob)}
.node.is-tool .n-cat::after{content:" \00b7  tool";color:var(--k-mob)}
.agent-tools{margin:6px 0 4px;padding:9px 11px;border:1px dashed var(--k-mob);border-radius:var(--r);font-size:13px;color:var(--ink-2);line-height:1.45}
.agent-tools b{font-weight:600;color:var(--ink)}
.agent-tools.chat-risk{border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}.agent-tools.chat-risk .btn{display:block;margin-top:8px}.agent-tools.chat-risk.ok{border-color:transparent;background:var(--ok-bg);color:var(--ok-ink)}

/* ---- the run in one line, results first (owner, 2026-10-11) */
.run-line{display:flex;align-items:flex-start;gap:8px;margin:0 16px 4px;padding:10px 12px;border-radius:var(--r);background:var(--ok-bg);color:var(--ink);font-size:15px;line-height:1.4}
.run-line svg{flex:none;margin-top:2px;color:var(--ok)}
.run-line.bad{background:var(--bad-bg)}
.run-line.bad svg{color:var(--bad)}
.run-body{display:flex;flex-direction:column;gap:14px;padding:12px 16px}
.run-body .run-out{order:-1}
.run-body.blocks-first .run-out{order:0}
.run-blocks>summary{cursor:pointer;font-weight:500;font-size:14px;padding:4px 0;list-style-position:outside}
.run-blocks>summary .muted{font-weight:400}
.run-blocks .tbl-wrap{margin-top:6px}
/* ---- Settings: Advanced folded, and a search box (owner, 2026-10-11) */
.set-find{display:flex;align-items:center;gap:6px;position:relative}
.set-find svg{position:absolute;left:10px;color:var(--muted);pointer-events:none}
.set-find .inp{padding-left:32px;width:240px;max-width:100%}
.set-adv{margin-top:24px;border-top:1px solid var(--line);padding-top:6px}
.set-adv>summary{cursor:pointer;padding:12px 0;list-style:none;display:flex;align-items:flex-start;gap:10px}
.set-adv>summary::-webkit-details-marker{display:none}
.set-adv>summary::before{content:'';flex:none;width:8px;height:8px;margin-top:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.set-adv[open]>summary::before{transform:rotate(45deg)}
.set-adv>summary b{display:block;font-size:17px;font-weight:600}
.set-adv>summary small{display:block;color:var(--muted);font-size:13px;margin-top:2px;max-width:72ch}
.set-adv .set-advg{margin-top:8px}
.set-adv .set-col{display:flex;flex-direction:column;gap:24px}
.set-none{margin-top:18px}
.set-elsewhere{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px}
/* ---- Ready to go live? */
.golive{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;margin:14px 0 4px}
.golive dt{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);white-space:nowrap}
.golive dt svg{color:var(--accent)}
.golive dd{margin:0;color:var(--ink-2,var(--ink))}
.golive-skip{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
@media (max-width:600px){.golive{grid-template-columns:1fr;gap:4px}.golive dd{margin-bottom:10px}.set-find .inp{width:100%}.set-find{width:100%}}

/* ================================================================ alive (owner, 2026-10-11: "the product needs to feel ALIVE")
   Confetti, a check that draws itself, menus that pop, the morning inbox, the pipeline board, counting numbers, cards that
   lift and spring. Everything stops for people who ask their device for less motion (the block at the end). */
.cf{position:fixed;inset:0;pointer-events:none;z-index:4000;overflow:hidden}
.cf i{position:absolute;width:var(--w);height:calc(var(--w) * 1.5);background:var(--c);border-radius:var(--r);animation:cfFly var(--d) cubic-bezier(.12,.65,.35,1) forwards;will-change:transform,opacity}
.cf i.round{border-radius:50%;height:var(--w)}
.cf i.strip{height:calc(var(--w) * 2.4);width:calc(var(--w) * .5)}
@keyframes cfFly{0%{transform:translate(-50%,-50%) rotate(0) scale(.6);opacity:1}30%{transform:translate(calc(-50% + var(--dx) * .7),calc(-50% + var(--dy))) rotate(calc(var(--r) * .4)) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 520px)) rotate(var(--r)) scale(.9);opacity:0}}
.ck-burst{display:flex;flex-direction:column;align-items:center;gap:8px}
.ck-burst svg{width:58px;height:58px;overflow:visible}
.ck-burst circle{fill:var(--ok-bg);stroke:var(--ok);stroke-width:2.5;transform-origin:center;animation:ckRing .5s cubic-bezier(.2,1.4,.4,1) both}
.ck-burst path{fill:none;stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:ckDraw .45s .25s ease-out forwards}
@keyframes ckRing{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ckDraw{to{stroke-dashoffset:0}}

/* menus next to a button */
.menu-pop{position:fixed;z-index:3500;min-width:200px;max-width:min(340px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;animation:popIn .18s cubic-bezier(.2,1.2,.4,1)}
.menu-pop.up{transform-origin:bottom center}.menu-pop.down{transform-origin:top center}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:none}}
.pop-h{display:flex;align-items:center;gap:7px;font:500 12px var(--sans);color:var(--muted);padding:6px 10px 4px}
.pop-h svg{width:14px;height:14px}
.menu-pop > button,.pop-list > button{display:flex;align-items:center;gap:9px;text-align:left;border:0;background:none;border-radius:var(--r);padding:9px 10px;font:400 14px var(--sans);color:var(--ink);cursor:pointer;min-height:38px}
.menu-pop > button:hover,.pop-list > button:hover,.menu-pop button:focus-visible{background:var(--accent-soft);color:var(--accent);outline:none}
.menu-pop > button svg{width:15px;height:15px;color:var(--muted)}
.pop-list{display:flex;flex-direction:column;max-height:260px;overflow:auto}
.pop-list > button.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.menu-pop .pop-quiet{color:var(--muted)}
.pop-sep{height:1px;background:var(--line-2);margin:4px 6px}
.pop-why{width:340px;padding:14px}
.why-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.why-top b{font-size:17px;font-weight:600}
.why-band{font:500 12px var(--sans);border-radius:var(--r);padding:3px 10px}
.why-band.b-hi{background:var(--ok-bg);color:var(--ok-ink)}.why-band.b-mid{background:var(--warn-bg);color:var(--warn-ink)}.why-band.b-lo{background:var(--surface-2);color:var(--muted)}
.why-bar{position:relative;height:10px;border-radius:var(--r);background:var(--surface-2);margin:12px 0 4px;overflow:hidden}
.why-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--to);border-radius:var(--r);background:linear-gradient(90deg,#4F6BD8,var(--accent-strong));animation:whyFill .9s cubic-bezier(.2,.8,.2,1) both}
.why-bar span{position:absolute;top:0;bottom:0;width:2px;background:var(--surface);opacity:.8}
@keyframes whyFill{from{width:0}}
.why-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.why ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.why li{display:flex;gap:8px;font-size:13.5px;line-height:1.45;color:var(--ink-2);opacity:0;animation:riseIn .35s ease both}
.why li:nth-child(2){animation-delay:.08s}.why li:nth-child(3){animation-delay:.16s}.why li:nth-child(4){animation-delay:.24s}.why li:nth-child(5){animation-delay:.32s}
.why li svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--accent)}
.why-note{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
/* Ask why (2026-10-22): a question about one result under its facts; the popover floats as glass and grows with the answer */
.pop-why{max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.why-ask{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.why-qs{display:flex;flex-wrap:wrap;gap:6px}
.menu-pop .why-q{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid var(--line);background:var(--lg-in);border-radius:var(--r);font:500 12.5px var(--sans);color:var(--ink-2);cursor:pointer;text-align:left}
.menu-pop .why-q:hover,.menu-pop .why-q:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--lg-in)}
.why-in{display:flex;gap:8px}
.why-in .inp{flex:1;min-width:0;background:var(--lg-in);border-color:var(--lg-in-bd)}
.why-in .btn{flex:none}
.why-in .btn svg{width:15px;height:15px}
.menu-pop .why-in .btn.primary:focus-visible{background:var(--accent-strong);color:#fff;outline:2px solid var(--accent);outline-offset:2px}
.why-ask.busy .why-q{opacity:.55;pointer-events:none}
.why-ans:empty{display:none}
.why-think{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.why-think svg{width:18px;height:18px}
.why-a{background:var(--lg-in);border:1px solid var(--lg-in-bd);border-radius:var(--r);padding:10px 12px;animation:riseIn .3s ease both}
.why-a p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.why-a .why-you{font-size:12px;color:var(--muted);margin-bottom:6px}
.why-used{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px}
.why-used small{font-size:11px;color:var(--muted);margin-right:2px}
.why-used span{font:500 11.5px var(--sans);padding:2px 8px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent)}
.why-by{display:block;margin-top:8px;font-size:11px;color:var(--muted)}
.why-err{margin:0;font-size:13px;color:var(--bad)}
@media (max-width:900px){.why-in .inp{font-size:16px}.pop-why{width:calc(100vw - 16px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* won: what was it worth */
.won-head{display:flex;gap:14px;align-items:flex-start}
.won-head .ck-burst svg{width:46px;height:46px}
.won-head h2{margin:0 0 4px}
.deal-row{display:flex;gap:8px;margin-top:12px}
.deal-row select{flex:none;width:96px}
.deal-row input{flex:1;font-size:18px;font-variant-numeric:tabular-nums}

/* cards: chips, a tappable score, a little spring when marked, a lift on hover */
.rc-chips{display:flex;flex-wrap:wrap;gap:6px}
.rc-chip{display:inline-flex;align-items:center;gap:5px;font:500 12px var(--sans);border-radius:var(--r);padding:3px 9px 3px 4px;background:var(--surface-2);color:var(--ink-2)}
.rc-chip svg{width:13px;height:13px;margin-left:4px}
.rc-chip .avatar{width:20px;height:20px;font-size:9px}
.rc-chip.rem{padding-left:4px}.rc-chip.rem.due{background:var(--warn-bg);color:var(--warn-ink)}
.rc-chip.deal{background:var(--ok-bg);color:var(--ok-ink);padding-left:4px}
button.rc-score{border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
button.rc-score:hover{transform:scale(1.08);box-shadow:0 0 0 3px var(--accent-soft)}
.rc-more{min-width:34px}
.rc.marked{animation:spring .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes spring{0%{transform:scale(1)}35%{transform:scale(.97)}100%{transform:scale(1)}}
.rc-status button.on{animation:popOn .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes popOn{0%{transform:scale(.85)}100%{transform:scale(1)}}
@media (hover:hover){.rc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
.btn:active:not(:disabled){transform:scale(.97)}
.rec-work{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* the morning inbox */

@keyframes pulseSoft{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 20%,transparent)}}
.bd-score{flex:none;border:0;cursor:pointer;min-width:42px;height:30px;border-radius:var(--r);font:600 14px var(--sans);font-variant-numeric:tabular-nums}
.bd-score.s-hi{background:var(--ok-bg);color:var(--ok-ink)}.bd-score.s-mid{background:var(--warn-bg);color:var(--warn-ink)}.bd-score.s-lo{background:var(--surface-2);color:var(--muted)}
.wins{display:flex;gap:14px;align-items:center;background:linear-gradient(120deg,var(--ok-bg),var(--surface) 70%);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:0 0 22px;animation:riseIn .45s .08s ease both}
.wins > svg{flex:none;width:34px;height:34px;color:var(--ok);padding:6px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.wins p{margin:2px 0 0;font-size:17px}
.wins b{font-weight:600;font-variant-numeric:tabular-nums}
.wins .w-v{color:var(--ok-ink)}
.wins small{display:flex;align-items:center;gap:4px;color:var(--muted);margin-top:2px}
.wins small svg{width:13px;height:13px;color:var(--ok)}
.home-ideas{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.idea-card{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r);padding:14px 16px;animation:riseIn .45s calc(var(--i) * .1s + .15s) ease both;transition:opacity .3s,transform .3s}
.idea-card.gone{opacity:0;transform:translateX(30px)}
.idea-ico{flex:none;width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.idea-ico svg{width:19px;height:19px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(14deg) scale(1.12)}}
.idea-card b{font-weight:600}
.idea-card p{margin:2px 0 0;color:var(--muted);font-size:14px}
.idea-btns{display:flex;gap:6px;margin-left:auto;flex:none}

/* the pipeline board */
.bd{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.bd-col{background:var(--surface-2);border:2px solid transparent;border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:340px;transition:border-color .2s,background .2s;scroll-snap-align:start}
.bd-col.over{border-color:var(--accent);background:var(--accent-soft)}
.bd-col header{display:flex;align-items:center;gap:8px}
.bd-col header b{font-weight:600}
.bd-n{font-style:normal;font:600 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface);border-radius:var(--r);padding:2px 9px}
.bd-n.bump{animation:bump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.35);color:var(--accent)}}
.bd-col[data-st="won"] header b{color:var(--ok-ink)}
.bd-sum{display:flex;flex-wrap:wrap;gap:6px}
.bd-sum span{font:600 13px var(--sans);color:var(--ok-ink);background:var(--ok-bg);border-radius:var(--r);padding:3px 9px}
.bd-sum:empty{display:none}
.bd-list{display:flex;flex-direction:column;gap:8px;min-height:60px}
.bd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);cursor:grab;transition:transform .15s,box-shadow .15s,opacity .3s}
.bd-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.bd-card.dragging{opacity:.45;transform:rotate(3deg) scale(1.02)}
.bd-card.landed{animation:land .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes land{0%{transform:scale(1.08) rotate(-2deg);box-shadow:0 10px 30px rgba(35,63,153,.25)}100%{transform:none}}
.bd-card.gone{opacity:0;transform:scale(.9)}
.bd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.bd-top a{font-weight:500;color:var(--ink);text-decoration:none;line-height:1.3}
.bd-top a:hover{color:var(--accent)}
.bd-score{min-width:34px;height:24px;font-size:12px}
.bd-card small{color:var(--muted);font-size:12.5px}
.bd-foot{display:flex;align-items:center;gap:6px;min-height:24px}
.bd-deal{font:600 12px var(--sans);color:var(--ok-ink);background:var(--ok-bg);border-radius:var(--r);padding:2px 7px}
.bd-rem{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted)}.bd-rem.due{color:var(--warn-ink)}
.bd-rem svg{width:12px;height:12px}
.bd-foot .avatar{width:22px;height:22px;font-size:9px}
.bd-move{border:0;background:none;color:var(--muted);border-radius:var(--r);width:28px;height:26px;display:grid;place-items:center;cursor:pointer}
.bd-move:hover{background:var(--surface-2);color:var(--ink)}
.bd-move svg{width:15px;height:15px}
.bd-empty{font-size:13px;color:var(--muted);text-align:center;padding:18px 8px;border:1.5px dashed var(--line);border-radius:var(--r)}

/* "Was this useful?" */
.run-fb{margin:6px 16px 14px}
.fbk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.fbk-b{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:4px 12px;font:500 13px var(--sans);color:var(--ink-2);cursor:pointer;transition:transform .15s,background .15s}
.fbk-b svg{width:13px;height:13px}
.fbk-b:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.fbk.done{color:var(--ok-ink);animation:riseIn .3s ease both}
.fbk.done svg{width:15px;height:15px}
.fbk-form{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-2)}
.fbk-form div{display:flex;gap:6px}
.side-fb{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;color:var(--muted);font:500 13px var(--sans);padding:8px 10px;border-radius:var(--r);cursor:pointer;margin-top:4px}
.side-fb:hover{background:var(--accent-soft);color:var(--accent)}
.side-fb svg{width:15px;height:15px}

/* sections rise into place; sparklines draw themselves */
.page > *,.pg-home > section,.pg-home > div{animation:riseIn .4s ease both}
.pg-home > :nth-child(2){animation-delay:.05s}.pg-home > :nth-child(3){animation-delay:.1s}.pg-home > :nth-child(4){animation-delay:.15s}.pg-home > :nth-child(n+5){animation-delay:.2s}
.spark polyline{stroke-dasharray:400;stroke-dashoffset:400;animation:sparkDraw 1.2s .2s ease-out forwards}
.spark polygon{opacity:0;animation:fadeIn .6s .9s ease forwards}
@keyframes sparkDraw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

@media (max-width:700px){
  .idea-card{flex-wrap:wrap}.idea-btns{margin-left:52px}
  .bd{grid-template-columns:repeat(4,82vw)}
}
@media (prefers-reduced-motion:reduce){
  .cf,.ck-burst circle,.ck-burst path{animation:none!important}.ck-burst path{stroke-dashoffset:0}
  .menu-pop,.why li,.why-bar i,.why-a,.rc.marked,.rc-status button.on,.wins,.idea-card,.idea-ico svg,.bd-card.landed,.bd-n.bump,.fbk.done,.page > *,.pg-home > section,.pg-home > div,.spark polyline,.spark polygon{animation:none!important}
  .spark polyline{stroke-dashoffset:0}.spark polygon{opacity:1}
  .bd-card,.rc,.btn{transition:none!important}
}
.bd-foot .spacer{flex:1}

/* the top of Flows once a team has flows (tester's feedback, 2026-10-13): one line to ask, the ideas when it is clicked */
.ask-flows.ask-compact{padding-top:4px;padding-bottom:22px}
.ask-flows.ask-compact .ask-q{font-size:14px;font-weight:500;color:var(--muted);margin-bottom:6px}
.ask-flows.ask-compact .ask-box textarea{min-height:0}
.ask-flows.ask-compact .ask-ico{align-self:center;padding-top:0;display:flex;transform:translateY(3px)}   /* one line: the X sits on the text's line (owner, 2026-10-21: it sat above it) */
@media (max-width:640px){.ask-flows.ask-compact .ask-box textarea{min-height:52px}}
.ask-flows.ask-compact:not(.open) #askIdeas,.ask-flows.ask-compact:not(.open) .ask-alt{display:none}

/* Approval, each item on its own: a tick box per item with its text (an email draft) */
.ap-each-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px}
.ap-each-head h4{margin:0}
.ap-all{display:flex;gap:6px}
.ap-items{display:grid;gap:10px}
.ap-item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;cursor:pointer}
.ap-item input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent-strong)}
.ap-item.off{opacity:.55}
.ap-item .ap-text{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink-2,inherit);margin:6px 0 0;max-height:420px;overflow:auto}
@media (max-width:900px){.ap-item input{width:24px;height:24px}}
/* what the approver can rewrite for each item (an email draft): boxes under its text; a card with boxes is not one big label */
div.ap-item{cursor:default}
.ap-edits{display:grid;gap:10px;margin-top:12px}
.ap-ed{display:grid;gap:4px}
.ap-ed>span{font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ap-ed>span em{font-style:normal;text-transform:none;letter-spacing:0}
.ap-ed textarea.inp{height:auto;min-height:72px;resize:vertical;line-height:1.5;font-size:13.5px}
.ap-ed .ap-text{margin:0}
.ap-item .ap-ed input.inp{width:100%;height:var(--ctl-h);margin:0;accent-color:auto}
@media (max-width:900px){.ap-ed textarea.inp,.ap-item .ap-ed input.inp{font-size:16px}}
/* Share as a template (app/tplshare.js) and the share buttons it shares with template pages (templates/share.js) */
/* share buttons: the networks' own colours on hover */
.tu-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.tu-share-l{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.tu-sb{--b:var(--accent);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;padding:0}
.tu-sb:hover,.tu-sb:focus-visible{background:var(--b);border-color:var(--b);color:#fff;transform:translateY(-2px)}
.tu-sb svg{width:18px;height:18px}
.tu-copy{--b:var(--accent)}
.tsh{display:flex;flex-direction:column;gap:14px}
.tsh-sec{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface)}
.tsh-sec h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:0 0 10px}
.tsh-sec h3 svg{width:16px;height:16px;color:var(--accent)}
.tsh-sec h3 .muted{font-weight:400;font-size:12.5px;margin-left:auto}
.tsh-sec>p{margin:0 0 10px;font-size:13.5px}
.tsh-sec .lab{display:block;margin:10px 0 5px}
.tsh-g{border:1px solid var(--line-2);border-radius:var(--r);margin-top:8px;background:var(--surface)}
.tsh-g summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.tsh-g summary::-webkit-details-marker{display:none}
.tsh-g summary b{font-weight:500}
.tsh-g summary .muted{font-size:12px;margin-left:auto}
.tsh-gt{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent-strong);cursor:pointer}
.tsh-gs{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right;max-width:55%}.tsh-gs.on{color:var(--accent);font-weight:500}
.tsh-q{border-top:1px solid var(--line-2);padding:10px 12px}
.tsh-q.on{background:var(--accent-soft)}
.tsh-qh{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap}
.tsh-qh span:first-of-type{font-weight:500}
.tsh-qh .muted{font-size:12px}
.tsh-qb{padding:4px 0 2px 28px}
.tsh-chips{display:flex;flex-wrap:wrap;gap:6px}
.tsh-chip{font:inherit;font-size:13px;padding:6px 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;text-decoration:line-through}
.tsh-chip.on{color:var(--ink);border-color:var(--accent);text-decoration:none}
.tsh-aud{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.tsh-aud input{margin-top:3px}
.tsh-aud>span{display:flex;flex-direction:column;gap:2px}
.tsh-aud b{font-weight:500}
.tsh-aud .muted{font-size:13px}
.tsh-aud.sub{padding-left:26px}
.tsh-aud[hidden]{display:none}
.tsh-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r);padding:9px 11px;margin:10px 0 0}
.tsh-note svg{width:15px;height:15px;flex:none;margin-top:2px}
.tsh-note.bad{background:var(--bad-bg,#FDECEC)}
.tsh-done{text-align:center;padding:10px 0}
.tsh-done h2{margin:10px 0 4px}
.tsh-check{width:52px;height:52px;border-radius:50%;display:inline-grid;place-items:center;background:#16A34A;color:#fff}
.tsh-check svg{width:24px;height:24px}
.tsh-link{display:flex;gap:8px;margin:16px 0}
.tsh-link .inp{flex:1;min-width:0;font:13px var(--mono)}
.tsh-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.tsh-stats b{color:var(--ink);font-weight:600}
@media (max-width:760px){.tsh-link{flex-wrap:wrap}.tsh-link .inp{flex-basis:100%}}
.tpl-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);margin:2px 0 0}
.tpl-stats span{display:inline-flex;align-items:baseline;gap:4px}
.tpl-stats b{display:inline;color:var(--ink);font-weight:600}
.tpl-stats .tpl-pl{flex-basis:100%}
.sh-tpl{display:flex;align-items:center;gap:12px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;margin:4px 0 14px}
.sh-tpl>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sh-tpl b{font-weight:600}
.sh-tpl .muted{font-size:13px;overflow-wrap:anywhere}
.sh-tpl-i{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--surface);color:var(--accent);flex:none}
.sh-tpl-i svg{width:18px;height:18px}
@media (max-width:760px){.sh-tpl{flex-wrap:wrap}.sh-tpl .btn{width:100%;justify-content:center}}
.tsh-sec h3 .tsh-ai{margin-left:auto;font-weight:500}
.tsh-sec h3 .tsh-ai svg{width:14px;height:14px}
.tsh-writing{background:linear-gradient(90deg,var(--surface) 0%,var(--accent-soft) 50%,var(--surface) 100%);background-size:200% 100%;animation:tshShimmer 1.2s linear infinite}
@keyframes tshShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.tsh-writing{animation:none}}
.tsh-one{resize:none;min-height:0}
@media (max-width:760px){.tsh-sec h3{flex-wrap:wrap}.tsh-sec h3 .tsh-ai{margin-left:0;width:100%;justify-content:center}}

/* xMap support access (Settings): status, the allow row, what support opened */
.xsa-on{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.xsa-row{display:grid;grid-template-columns:auto minmax(0,160px) auto minmax(0,1fr) auto;gap:8px 10px;align-items:center;margin-top:12px}
.xsa-row .lab{margin:0}
.xsa-log{margin-top:12px}
.xsa-log summary{cursor:pointer;color:var(--accent);font-weight:500}
.xsa-log .tbl-wrap{max-height:320px;overflow:auto;margin-top:8px}
.xsa-log code{font-size:12px;word-break:break-all}
@media (max-width:900px){.xsa-row{grid-template-columns:1fr}.xsa-row .btn{width:100%}}
.conn-who{display:block;color:var(--muted);font-size:12px;margin-top:2px;max-width:340px}

/* the save status (2026-10-16): a green check beside the flow's name pops on every save (every width); the words, where
   there is room, flash green and settle */
.sv-tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;flex:none;margin-left:2px}
.sv-tick.ok{background:var(--ok-bg);color:var(--ok)}
.sv-tick svg{width:12px;height:12px}
.sv-tick.busy::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted);animation:svDot .9s ease-in-out infinite alternate}
.sv-tick.bad::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--bad)}
.sv-tick.just{animation:svPop .6s cubic-bezier(.2,1.5,.4,1)}
.save.bad{color:var(--bad)}
.save.just{animation:svFlash 2s ease}
@keyframes svPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.3);opacity:1}100%{transform:scale(1)}}
@keyframes svFlash{0%,35%{color:var(--ok)}100%{color:var(--muted)}}
@keyframes svDot{from{opacity:.25}to{opacity:.85}}
@media (prefers-reduced-motion:reduce){.sv-tick.just,.save.just,.sv-tick.busy::before{animation:none}}
/* live cursors (app/cursors.js): other people in the same flow; drawn on the canvas at a fixed size (--iz undoes the zoom) */
.peer-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:40;pointer-events:none}
.peer-cursor{position:absolute;left:0;top:0;transform:scale(var(--iz,1));transform-origin:0 0;transition:opacity .4s;pointer-events:none;color:var(--peer);will-change:transform}
.peer-cursor svg{width:18px;height:18px;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.peer-cursor .peer-name{position:absolute;left:13px;top:15px;background:var(--peer);color:#fff;font-size:12px;line-height:1;font-weight:500;padding:4px 8px;border-radius:var(--r);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.peer-cursor.idle{opacity:.35}
.node.peer-sel{box-shadow:0 0 0 2px var(--peer),var(--shadow)}
.peer-typing{position:relative}
.peer-typing .inp,.peer-typing.pn,.peer-typing .pn,.peer-typing textarea{box-shadow:0 0 0 2px var(--peer)}
.peer-typing::after{content:attr(data-peer);position:absolute;right:0;top:-2px;background:var(--peer);color:#fff;font-size:11px;line-height:1;font-weight:500;padding:4px 8px;border-radius:var(--r);pointer-events:none;z-index:2}
/* Ask xMap's steps while it works (editor.js): ticked off as they pass, like Claude's thinking */
.ai-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ai-steps li{display:flex;align-items:flex-start;gap:8px;line-height:1.35}
.ai-steps li.ok{color:var(--muted)}
.ai-steps li.ok svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--ok)}
.ai-steps li.now{color:var(--ink);font-weight:500}
.ai-steps li.now .spin{flex:none;margin-top:2px}
.ai-steps li span{flex:1;min-width:0}
.ai-steps small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px;animation:ai-sub .4s ease}
.ai-steps em{font-style:normal;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
@keyframes ai-sub{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ai-steps small{animation:none}}
/* who is editing which block (app/cursors.js): a tag in their colour above it, kept the same size at any zoom */
.peer-tag{position:absolute;left:-2px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:6px;background:var(--peer);color:#fff;font-size:12px;line-height:1;font-weight:500;padding:5px 9px 5px 5px;border-radius:var(--r);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:6;pointer-events:none;transform:scale(var(--iz,1));transform-origin:0 100%;animation:pt-in .2s ease}
.peer-tag::after{content:"";position:absolute;left:14px;bottom:-5px;border:5px solid transparent;border-top-color:var(--peer);border-bottom:0}
.peer-tag .pt-av{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--peer);display:grid;place-items:center;font-size:10px;font-weight:600}
.peer-tag svg{width:12px;height:12px}
.peer-tag .pt-dots{display:inline-flex;gap:2px;margin-left:1px}
.peer-tag .pt-dots i{width:3px;height:3px;border-radius:50%;background:#fff;opacity:.45;animation:pt-dot 1s infinite}
.peer-tag .pt-dots i:nth-child(2){animation-delay:.2s}.peer-tag .pt-dots i:nth-child(3){animation-delay:.4s}
.node.peer-sel:has(.peer-tag.editing){box-shadow:0 0 0 2px var(--peer),0 0 0 6px color-mix(in srgb,var(--peer) 16%,transparent),var(--shadow)}
.peer-band{margin:10px 16px 0;display:flex;align-items:flex-start;gap:9px;background:color-mix(in srgb,var(--peer) 10%,var(--surface));color:var(--ink);border-radius:var(--r);padding:9px 11px;font-size:12.5px;font-weight:500;line-height:1.35}
.peer-band .pb-dot{flex:none;width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--peer);box-shadow:0 0 0 3px color-mix(in srgb,var(--peer) 22%,transparent)}
@keyframes pt-dot{50%{opacity:1}}
@keyframes pt-in{from{opacity:0;transform:translateY(3px) scale(var(--iz,1))}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.peer-tag,.peer-tag .pt-dots i{animation:none}}

/* slim panels (owner, 2026-10-18: "make each panel ... smaller like slim version, where user can expand it and shrink it"):
   the block list and the main menu fold to a strip of icons on computers; the button at their top switches */
.lib-top{display:flex;align-items:center;gap:6px}
.lib-top .lib-search{flex:1;min-width:0}
.lib-tog,.side-tog{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--muted);cursor:pointer;padding:0}
.lib-tog{margin:2px 0 6px}
.lib-tog:hover,.side-tog:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.lib-tog svg,.side-tog svg{width:15px;height:15px}
@media (max-width:900px){.lib-tog,.side-tog{display:none}.lib-top{display:block}}
@media (min-width:901px){
  .ed-body{transition:grid-template-columns .22s ease}
  .ed-body.lib-slim{grid-template-columns:104px 1fr}   /* wide enough that the scroll bar never covers an icon (owner, 2026-10-18) */
  .lib-slim .lib{padding:10px 4px;overflow-x:hidden;scrollbar-width:thin;scrollbar-gutter:stable both-edges}
  .lib-slim .lib-top{flex-direction:column;gap:0}
  .lib-slim .lib-tog{order:-1;width:36px;height:36px;margin:0 auto 6px}   /* open it again first, search under it (owner, 2026-10-18) */
  .lib-slim .lib-search{flex:none;width:36px;padding:0;justify-content:center;cursor:pointer;margin:0 auto 4px}
  .lib-slim .lib-search input{display:none}
  .lib-slim .lib-about,.lib-slim .lib-none{display:none}
  .lib-slim .lib .lib-h{font-size:0;height:1px;background:var(--line-2);margin:8px 6px}
  .lib-slim .lib-item{justify-content:center;padding:0;height:34px}
  .lib-slim .lib-item>span:not(.li-ico){display:none}
  .lib-slim .li-ico{width:28px;height:28px;border-radius:var(--r)}.lib-slim .li-ico svg,.lib-slim .li-ico img{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.ed-body{transition:none}}


/* ---------- the glass design (owner, 2026-10-18: "floating ... like glass ... like Apple ... modern"; approved on mock-ups):
   a quiet ground with two soft washes of colour, and frosted glass for everything that floats over it: the menu as one
   bar across the top, the editor's one bar, the block list, the settings panel, the run panel, the flow in words, the
   Ask xMap bar, the zoom buttons and the blocks. Buttons stay flat in xMap blue. Phones keep their own layout (the top
   bar, the tabs at the bottom, the editor full screen) with the same colours. Write new floating pieces with these
   tokens: --lg (the glass), --lg-bd (its edge), --lg-sh (its light and shadow), --lg-blur, --lg-in (a box inside glass). */
:root{
  --ground:radial-gradient(60% 55% at 0% 0%,rgba(110,135,255,.24) 0%,rgba(110,135,255,0) 70%),radial-gradient(55% 55% at 100% 100%,rgba(80,200,235,.20) 0%,rgba(80,200,235,0) 70%),linear-gradient(180deg,#F5F6FB 0%,#ECEFF7 100%);
  --lg:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.52) 100%);
  --lg-solid:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 100%);
  --lg-bd:rgba(255,255,255,.78);
  --lg-sh:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.35),0 24px 50px -24px rgba(30,45,110,.30),0 4px 12px -6px rgba(30,45,110,.12);
  --lg-blur:blur(28px) saturate(180%);
  --lg-in:rgba(255,255,255,.55); --lg-in-bd:rgba(255,255,255,.85);
  --lg-on:rgba(255,255,255,.85);
  --grid:var(--brand-grid,rgba(35,63,153,.08));
}
:root[data-theme="dark"]{
  --ground:radial-gradient(60% 55% at 0% 0%,rgba(70,95,255,.24) 0%,rgba(70,95,255,0) 70%),radial-gradient(55% 55% at 100% 100%,rgba(40,185,230,.14) 0%,rgba(40,185,230,0) 70%),linear-gradient(180deg,#0C1222 0%,#090D18 100%);
  --lg:linear-gradient(180deg,rgba(34,44,68,.70) 0%,rgba(22,30,48,.58) 100%);
  --lg-solid:linear-gradient(180deg,rgba(34,44,68,.92) 0%,rgba(24,32,51,.88) 100%);
  --lg-bd:rgba(255,255,255,.10);
  --lg-sh:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.03),0 26px 54px -26px rgba(0,0,0,.75),0 4px 12px -6px rgba(0,0,0,.4);
  --lg-blur:blur(28px) saturate(150%);
  --lg-in:rgba(255,255,255,.06); --lg-in-bd:rgba(255,255,255,.10);
  --lg-on:rgba(255,255,255,.12);
  --grid:rgba(170,190,255,.07);
}
body{background:var(--ground) fixed,var(--bg)}
.main,.ed,.cv{background:transparent}
.cv::before{background:radial-gradient(circle,var(--grid) .9px,transparent 1.3px) 0 0/28px 28px}
.node{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));border-color:rgba(255,255,255,.95);border-radius:var(--r);box-shadow:0 14px 30px -18px rgba(30,45,110,.38),0 1px 2px rgba(30,45,110,.06),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
:root[data-theme="dark"] .node{background:linear-gradient(180deg,rgba(38,50,76,.86),rgba(26,35,54,.76));border-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 34px -18px rgba(0,0,0,.8)}
.edge{stroke:rgba(70,90,150,.42);stroke-width:2}
:root[data-theme="dark"] .edge{stroke:rgba(160,178,220,.42)}
.port{border-color:rgba(70,90,150,.45)}
:root[data-theme="dark"] .port{border-color:rgba(160,178,220,.5)}
/* the price under a block's name: xMap blue, slight corners like the boxes under it (it wraps onto lines) */
/* what a block costs: a short quiet note at the foot of its settings, not a box under its name (owner, 2026-10-21: "intimidating ... takes from the view") */
.panel .pb>.cost,.panel .cost{display:flex;align-items:flex-start;gap:6px;margin:18px 0 2px;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--muted);font-size:12px;font-weight:400;line-height:1.45}
.panel .cost svg{width:12px;height:12px;flex:none;margin-top:2px;opacity:.8}
/* glass for what floats, on every screen size */
.sentence,.ai-bar,.zoom,.try-card,.ax-fab:not(:hover){-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.sentence,.ai-bar,.zoom{background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh)}
.sentence{border-radius:var(--r)}.ai-bar{border-radius:var(--r)}.zoom{border-radius:var(--r)}.zoom button{background:transparent}
.ai-bar .ai-exp{background:var(--lg-in);border-color:var(--lg-in-bd)}
.n-next{box-shadow:0 0 0 3px var(--lg-on)}

@media (min-width:901px){
  /* the menu: one floating bar across the top */
  .shell{display:flex;flex-direction:column}
  .shell-main{flex:1;min-height:0}
  .side{flex:none;position:relative;z-index:40;align-self:center;width:calc(min(var(--page-w),100%) - 56px);max-width:none;flex-direction:row;align-items:center;gap:4px;height:60px;margin:14px 0 2px;padding:0 9px;border-radius:var(--r);overflow:visible;border:1px solid var(--lg-bd);background:var(--lg);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh)}
  .side-top,.side-foot,.nav,.side-help{display:contents}
  .side-top>a:first-child{order:1;display:flex;align-items:center}
  .side .logo{margin:0 8px;height:21px;width:55px}
  .side-top .wl-logo,.side-top .wl-name{margin:0 8px;max-height:28px}
  .org-sw{order:2;display:flex;align-items:center;gap:10px;height:40px;margin:0 4px 0 0;padding:0 12px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd)}
  .org-sw b{font-size:13px;font-weight:500;max-width:170px}
  .org-sw small{display:none}
  .org-sw .org-logo{display:block;height:24px;width:auto;max-width:130px;margin:0;object-fit:contain}   /* the organization's logo in the bar (it was hidden by the glass design; owner's report, 2026-10-18) */
  .org-sw .org-logo~b{display:none}
  .org-sw::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-1px)}
  .org-menu{right:auto;min-width:250px}
  .side-find{order:3;width:200px;flex:0 1 200px;min-width:110px;height:40px;margin:0 6px 0 2px;border-radius:var(--r);background:var(--lg-in);border-color:var(--lg-in-bd)}
  .nav a.nv{order:4;height:40px;padding:0 14px;border-radius:var(--r);gap:8px}
  .nav a.nv:hover{background:var(--lg-in)}
  .nav a.nv.on{background:var(--lg-on);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px -5px rgba(30,45,110,.3)}
  :root[data-theme="dark"] .nav a.nv.on{box-shadow:none}
  .nav .sep,.nav a:not(.nv){display:none}
  .side-help a.btn{margin-left:auto}   /* the bar is as wide as the page (owner, 2026-10-18): the places and Help on the left, What's new, bell, Book a call and the picture on the right */
  .side-help .btn{order:6;flex:none;width:40px;height:40px;padding:0;justify-content:center;border-radius:var(--r);background:transparent;border:0;box-shadow:none}
  .side-help .btn>span{display:none}
  .side-help .btn svg{width:18px;height:18px;margin:0}
  .side-help .btn:hover,.side-top .bell:hover{background:var(--lg-in)}
  #bellSide{order:7}#bellSide .bell{width:40px;height:40px;border-radius:var(--r)}
  .call-side{order:8;width:auto;height:40px;margin:0 4px;padding:0 16px;border-radius:var(--r)}
  .side-foot{margin:0;padding:0;border:0}
  .side-foot .who{order:9;padding:0 2px;cursor:pointer;border-radius:50%}
  .side-foot .who>div{display:none}
  .side-foot .who .avatar,.mk-me .avatar{width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2px var(--lg-on)}
  .side-fb,#signOut,.legal-links{display:none}
  .main:not(.main-full) .card,.wf-card{background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh)}
  /* the editor: its own bar is the only one */
  .shell.full .side{display:none}
  .ed{grid-template-rows:auto minmax(0,1fr)}
  .ed-top{position:relative;z-index:10;margin:14px 16px 0;min-height:60px;padding:0 10px;gap:6px;flex-wrap:nowrap;border-radius:var(--r);border:1px solid var(--lg-bd);background:var(--lg);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh)}
  .ed-top .btn:not(.primary){background:var(--lg-in);border-color:var(--lg-in-bd);border-radius:var(--r)}
  .ed-top .btn{height:38px;flex:none}
  .ed-top .btn.primary{border-radius:var(--r);padding:0 18px}
  .ed-top .back{display:none}
  .ed-top .name{font-size:15.5px;max-width:260px;min-width:0}
  #bCmt .bl,#bHist .bl,#bShare .bl{display:none}
  #bCmt,#bHist,#bShare,#bMore{width:38px;padding:0;justify-content:center}
  #bRun{border-radius:var(--r)}
  .mk-logo{display:flex;align-items:center;margin:0 8px 0 10px;flex:none}.mk-logo img{width:26px;height:26px;display:block}.mk-logo img.org-mark{width:auto;max-width:110px;height:26px;object-fit:contain}.mk-logo .wl-logo{max-height:26px;max-width:90px}
  .mk-nav{display:flex;gap:2px;padding:3px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd);flex:none}
  .mk-nav a{display:grid;place-items:center;width:36px;height:34px;border-radius:var(--r);color:var(--ink-2)}
  .mk-nav a svg{width:17px;height:17px}
  .mk-nav a:hover{background:var(--lg-in)}
  .mk-nav a.on{background:var(--lg-on);color:var(--accent);box-shadow:0 2px 8px -3px rgba(30,45,110,.3)}
  .mk-div{width:1px;height:28px;background:var(--lg-in-bd);margin:0 6px;flex:none}
  .mk-bell{display:flex}.mk-bell .bell{width:38px;height:38px;border-radius:var(--r)}
  .mk-me{display:flex;border:0;background:none;padding:0 2px;cursor:pointer;border-radius:50%;flex:none}
  .ed-body{grid-template-columns:268px 1fr}
  .lib{margin:14px 16px 16px;border:1px solid var(--lg-bd);border-radius:var(--r);padding:12px;background:var(--lg);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh)}
  .lib-search,.lib-tog{background:var(--lg-in);border-color:var(--lg-in-bd)}
  .lib-search{border-radius:var(--r)}
  .lib-item{border-radius:var(--r);height:30px}
  .lib-item:hover{background:var(--lg-in)}
  /* the canvas's buttons and a block's settings share one column on the right (owner, 2026-10-18): the same width, the
     buttons at the foot, the settings ending just above them, never over them */
  .ed{--side-w:320px;--zoom-h:46px}   /* the buttons are as tall as the Ask xMap bar beside them (owner, 2026-10-18) */
  /* in a flow's editor the Ask xMap bar stays in one place (owner, 2026-10-18: "no need to move the box when you open the side
     panel"): in the middle of the canvas left of the right column, on the buttons' line, so a block's settings never cover it */
  .shell .ed-body:not(.simple) .ai-wrap,.shell .ed-body:not(.simple) .panel.open~.ai-wrap{left:calc((100% - var(--side-w) - 16px) / 2);width:min(560px,calc(100% - var(--side-w) - 48px));bottom:16px}
  @container cv (max-width:1310px){.guest .ai-wrap{bottom:calc(16px + var(--zoom-h) + 10px)}}
  .zoom{right:16px;bottom:16px;width:var(--side-w)}
  .zoom button{flex:1 1 auto;width:auto;min-width:0;height:calc(var(--zoom-h) - 2px)}
  .zoom .z-tidy{justify-content:center}
  .panel{top:14px;right:16px;bottom:calc(16px + var(--zoom-h) + 10px);width:var(--side-w);border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);transform:translateX(calc(100% + 32px));overflow:hidden}
  .panel.open~.sentence{right:352px}
  .panel.open~.ai-wrap,.panel.open~.ai-wrap.big{left:calc((100% - 352px) / 2);width:min(560px,calc(100% - 392px))}
  .drawer{left:16px;right:16px;bottom:16px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);transform:translateY(calc(100% + 32px));overflow:hidden}
  /* Ask xMap and Chat with this flow float as glass like the other panels (owner, 2026-10-18), over a lighter veil */
  .ax-wrap{background:rgba(15,27,45,.10)}
  .ax-panel{top:14px;right:16px;bottom:16px;width:min(440px,calc(100% - 32px));border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);overflow:hidden}
  .ax-head,.ax-in{border-color:var(--lg-in-bd)}
  .ax-idea,.ax-card:not(.danger),.ax-nudge:not(.k-failed):not(.k-credits){background:var(--lg-in);border-color:var(--lg-in-bd)}
  .ax-m.bot .ax-b{background:var(--lg-in);box-shadow:inset 0 0 0 1px var(--lg-in-bd)}
  /* the home page and the try-out editor: the site's header floats, the flow's buttons are a small pill on the right */
  .home .xh{position:relative;top:0;margin:14px 16px 0;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);height:60px}
  .guest .ed{grid-template-rows:minmax(0,1fr);position:relative}
  .guest .ed-top{position:absolute;top:14px;right:16px;margin:0;min-height:0;padding:6px;border-radius:var(--r);gap:6px}
  /* the same width as a block's settings under it, so their edges line up (owner, 2026-10-21) */
  .guest .ed-top{width:var(--side-w);box-sizing:border-box}
  .guest .ed-top>.btn.primary{flex:1;justify-content:center}
  .guest .ed-top>:not(.btn){display:none}
  #bTpl .bl,#bClear .bl{display:none}#bTpl,#bClear{width:38px;padding:0;justify-content:center}
  .guest .panel{top:72px}   /* under the flow's buttons */
  .home-ed .try-card{left:16px;transform:none;top:14px;width:min(760px,calc(100% - 362px));border-radius:var(--r);background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh)}
  /* the picture shown while the home page loads (index.html) is laid out like the page it becomes, so nothing jumps
     (owner, 2026-10-20: the card sat in the middle while loading, then moved left): the header's place, the block list,
     the card next to it */
  .home.boot .boot-top{margin:14px 16px 0;height:60px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg);box-shadow:var(--lg-sh)}
  .home.boot .xh ~ .boot-top{display:none}
  .home.boot .boot-lib{width:236px;margin:14px 0 16px 16px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg);box-shadow:var(--lg-sh)}
  .home.boot .boot-cv{margin-left:16px;background:none}
  .home.boot .try-card{left:16px;transform:none;top:14px;width:min(760px,calc(100% - 362px));background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh)}
}
@media (min-width:901px) and (max-width:1300px){
  .nav a.nv>span{display:none}
  .nav a.nv{width:42px;padding:0;justify-content:center}
  .side-find{width:44px;padding:0;justify-content:center}.side-find span,.side-find kbd{display:none}
  .home-ed .try-card,.home.boot .try-card{top:72px;width:auto;right:16px}
}
@media (min-width:901px) and (max-width:1100px){
  .call-side{width:40px;padding:0;justify-content:center}.call-side>span{display:none}
  .org-sw b{max-width:110px}
}
@media (min-width:901px) and (max-width:1500px){ .ed-top #monthCost,.ed-top .pill.vis{display:none} }
@media (min-width:901px) and (max-width:1180px){ .ed-top .run-cost{display:none} }
.mk-logo,.mk-nav,.mk-div,.mk-bell,.mk-me{display:none}
@media (min-width:901px){.mk-logo,.mk-nav,.mk-bell,.mk-me{display:flex}.mk-div{display:block}}
/* the account menu under the picture */
.me-pop{min-width:240px;padding:6px}
.me-pop .me-head{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.me-pop .me-head>div{min-width:0}.me-pop .me-head b{display:block;font-size:13.5px;font-weight:500}.me-pop .me-head small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.me-pop button{display:flex;align-items:center;gap:10px;width:100%}
.me-pop button svg{width:16px;height:16px;color:var(--muted)}
.me-pop .me-out{border-top:1px solid var(--line-2);margin-top:4px;border-radius:0 0 var(--r) var(--r)}
.me-pop .me-legal{display:flex;gap:14px;padding:8px 10px 4px;font-size:12px}.me-pop .me-legal a{color:var(--muted);text-decoration:none}.me-pop .me-legal a:hover{color:var(--accent)}
:root[data-theme="dark"] .mk-logo img{filter:brightness(1.9) saturate(.7)}
/* the slim block list's names (owner, 2026-10-18: "a tool tip ... animated going outside of the icon on the right side"):
   one label on the page, placed by the editor beside the list, sliding out from the icon */
.lib-tip{position:fixed;z-index:120;left:0;top:0;display:flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 4px;border-radius:var(--r);background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 14px 30px -14px rgba(30,45,110,.4),0 2px 6px -2px rgba(30,45,110,.14);color:var(--ink);font:500 13px/1 var(--sans);white-space:nowrap;pointer-events:none;transform:translateY(-50%);opacity:0;clip-path:inset(0 calc(100% - 38px) 0 0 round var(--r));transition:clip-path .3s cubic-bezier(.2,.9,.25,1),opacity .1s}
.lib-tip.on{opacity:1;clip-path:inset(0 0 0 0 round var(--r))}
.lib-tip .li-ico{width:28px;height:28px}.lib-tip .li-ico svg,.lib-tip .li-ico img{width:16px;height:16px}
.lib-tip small{font-weight:400;font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.lib-tip{transition:opacity .12s;clip-path:none}}
/* ---------- one look for "selected" (audit, 2026-10-18): tab rows (the section tabs, the tabs inside a page, filter tabs) are
   words on the page with the chosen one in a white pill; switches (two or more choices side by side: views, periods, statuses,
   map views) are a grey track with the chosen one in a white pill. Never a solid blue fill for a choice. */
:root{--on-bg:var(--surface);--on-sh:inset 0 0 0 1px var(--line),0 1px 2px rgba(15,27,45,.06);--track:var(--surface-2)}
:root[data-theme="dark"]{--on-bg:rgba(255,255,255,.12);--on-sh:inset 0 0 0 1px rgba(255,255,255,.08);--track:rgba(255,255,255,.05)}
.tabs button,.tabs a,.in-tabs a{border:0;background:transparent;color:var(--muted);box-shadow:none;padding:7px 13px}
.tabs button:hover,.tabs a:hover,.in-tabs a:hover{background:var(--on-bg);color:var(--ink)}
.tabs button.on,.tabs a.on,.in-tabs a.on,.subnav a.on{background:var(--on-bg);color:var(--accent);box-shadow:var(--on-sh);border-color:transparent}
.seg,.seg-st,.rc-status,.map-view{background:var(--track);border:0;box-shadow:none;padding:3px;gap:2px;border-radius:var(--r)}
.seg button,.seg-st button,.map-view button{background:transparent;color:var(--muted);border:0}
.seg button:hover,.seg-st button:hover,.map-view button:hover{color:var(--ink)}
.seg button.on,.seg-st button.on,.rc-status button.on,.map-view button.on{background:var(--on-bg);color:var(--accent);box-shadow:var(--on-sh)}
.seg-st button.on.st-contacted,.rc-status button.on[data-rst="contacted"]{color:var(--warn-ink)}
.seg-st button.on.st-won,.rc-status button.on[data-rst="won"]{color:var(--ok)}
.seg-st button.on.st-ignored,.rc-status button.on[data-rst="ignored"]{color:var(--muted)}
.seg-st button.on.st-new{color:var(--accent)}
.map-view{background:var(--surface);box-shadow:var(--shadow)}.map-view button+button{border-left:0}   /* it floats on a map: an opaque track */
.map-view button.on{background:var(--track)}
/* the bell's list: glass like the other floating pieces; on phones a sheet from the bottom (audit, 2026-10-18) */
/* a page's header buttons are full size, also where a page reuses small ones (audit, 2026-10-18: Share, GeoJSON, CSV, Delete on a map) */
.page-head .btn.sm,.head-btns .btn.sm{height:var(--ctl-h);padding:0 14px;font-size:13px}
@media (max-width:640px){
  /* filters on phones: the search across the row (its microphone beside it) and the lists two by two, like the Flows page,
     instead of a row that runs off the screen (audit, 2026-10-18) */
  .filters{flex-wrap:wrap;overflow:visible}
  .filters>.inp,.filters .ex-sel>.inp{flex:1 1 calc(50% - 4px);min-width:0;width:auto;max-width:none}
  .filters>input.inp,.filters>input[type=search].inp{flex:1 1 calc(100% - 46px);min-width:0}
  .filters .ex-sel{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  .filters .ex-when{flex:1 1 100%}
  /* a tab row that is wider than the phone scrolls sideways and keeps each tab on one line */
  .in-tabs,.seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .page .card,.page .grid>*,.page .grid2>*,.page .grid3>*{min-width:0}   /* a card never grows past the screen to fit a row that scrolls */
  .in-tabs a,.tabs button,.tabs a,.seg button{white-space:nowrap;flex:none}
  /* tables keep their columns and scroll sideways in their card instead of squeezing a word to a line */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap>.tbl{min-width:560px}
  .card:has(> table.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card>table.tbl{min-width:560px}
  /* the Ask xMap bar's hint stays on one line */
  .ai-bar textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* switches, tick boxes and round choices in xMap's colour, with a white knob in both themes (audit, 2026-10-18) */
.tgl span::after{background:#fff}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent-strong)}
/* one sheet at the foot of the editor at a time: while a run's panel is open the Ask xMap bar and chat step aside
   (audit, 2026-10-18); Explain and fix closes the panel and brings the chat back */
body:has(.drawer.open) .ai-wrap{opacity:0;pointer-events:none;transition:opacity .15s}
@media (max-width:760px){
  /* the phone editor keeps the 16 px gutter of every other page (audit, 2026-10-18): steps, Add block, the buttons, Ask xMap */
  .steps:not([hidden]){padding-left:16px;padding-right:16px}
  .add-fab{left:16px}
  .zoom{right:16px}
  .ai-wrap{left:16px;right:16px}
}
/* a page with no tab row (Support, What's new) starts its title on the same line as the pages with one (audit, 2026-10-18);
   pages reached by clicking into something keep their back link there */
.main:not(.has-sub) .page:not(:has(.back-link)){padding-top:72px}
@media (max-width:640px){.main:not(.has-sub) .page:not(:has(.back-link)){padding-top:64px}}
@media (max-width:640px){
  /* one rule for a page's buttons on phones (audit, 2026-10-18): the main (blue) one fills the row, the others keep their size */
  .page-head>.btn:not(.primary),.page-head>a.btn:not(.primary){align-self:flex-start;width:auto}
  .page-head>.btn.primary{align-self:stretch}
}
/* one number tile everywhere (audit, 2026-10-18): the admin overview's figures, Insights, Usage, Monitor and dashboard numbers
   share the tile's padding, label and figure size; card and widget titles share one weight */
.kpi{padding:18px}
.kpi .l{font-size:12.5px}
.kpi .v{font-size:26px;letter-spacing:-.01em;margin-top:4px}
.w-num{font-size:26px}
.w-head h3{font-weight:600}
.bill-lab{font:500 12.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
/* the run panel's notes are inset boxes with the one curve, like its other messages (audit, 2026-10-18) */
.drawer .preview-note{margin:10px 16px 0;border:0;border-radius:var(--r)}
/* the map's zoom buttons follow the app's buttons: the one curve, its colours, no grey frame */
.leaflet-bar{border:1px solid var(--line)!important;border-radius:var(--r)!important;overflow:hidden;box-shadow:var(--shadow)!important}
.leaflet-bar a{border-radius:0!important;background:var(--surface);color:var(--ink);border-bottom-color:var(--line)!important}
/* Ask xMap's box: the field, the microphone and Send are one height */
.ax-in textarea{min-height:var(--ctl-h)}
.ax-in .mic,.ax-in .ax-send{height:var(--ctl-h);width:var(--ctl-h);padding:0;flex:none}
/* the results board's columns are the same soft track as the switches, so in dark mode they sit in the glass like the rest */
.bd-col{background:var(--track)}
/* admin, sign-up and pricing: the invite codes section keeps air above it, and the plans editor shows it opens */
.inv-head{margin-top:24px}
.pr-ed summary{position:relative;padding-right:28px}
.pr-ed summary::after{content:"";position:absolute;right:4px;top:6px;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.pr-ed[open] summary::after{transform:rotate(225deg);top:10px}
@media (min-width:901px){
  /* Help is a place in the menu, right after Settings, with its word and a lifebuoy (owner, 2026-10-19: "a more clear icon") */
  .side-help #helpBtn{order:5;width:auto;height:40px;padding:0 14px;gap:8px;color:var(--ink-2);font:500 13.5px var(--sans)}
  .side-help #helpBtn>span{display:inline}
  .mk-nav .mk-help{display:grid;place-items:center;width:36px;height:34px;border:0;border-radius:var(--r);background:none;color:var(--ink-2);cursor:pointer;padding:0}
  .mk-nav .mk-help svg{width:17px;height:17px}
  .mk-nav .mk-help:hover{background:var(--lg-in)}
}
@media (min-width:901px) and (max-width:1300px){ .side-help #helpBtn{width:42px;padding:0;justify-content:center}.side-help #helpBtn>span{display:none} }
/* the editor bar's icons open into their name, like the slim block list (owner, 2026-10-19): the same label, the button's
   own height, opening right from an icon on the left half of the screen and left from one on the right half */
.lib-tip.grow{height:var(--gh,38px);padding:0 14px 0 0;gap:8px}
.lib-tip.grow .gt-ico{display:grid;place-items:center;width:var(--gh,38px);height:100%;flex:none;color:var(--accent);font:500 15px var(--sans)}
.lib-tip.grow .gt-ico svg{width:17px;height:17px}
.lib-tip.grow{clip-path:inset(0 calc(100% - var(--gh,38px)) 0 0 round var(--r))}
.lib-tip.grow.rt{padding:0 0 0 14px;clip-path:inset(0 0 0 calc(100% - var(--gh,38px)) round var(--r))}
.lib-tip.grow.on{clip-path:inset(0 0 0 0 round var(--r))}
/* Ask xMap's draft on the canvas while it is tested (owner, 2026-10-19: "dropping the blocks on canvas one by one while
   creating"): new blocks drop in one after another, their links draw after them; the draft cannot be edited until the
   answer comes */
.world.ai-drafting .node{pointer-events:none}
.node.n-drop{animation:nDrop .46s cubic-bezier(.2,1.1,.3,1) both}
@keyframes nDrop{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
.edges path.e-drop{animation:eDrop .4s ease-out both}
@keyframes eDrop{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.node.n-drop,.edges path.e-drop{animation:none}}
.steps .step.n-drop{animation:nDrop .46s cubic-bezier(.2,1.1,.3,1) both}
@media (prefers-reduced-motion:reduce){.steps .step.n-drop{animation:none}}
/* blocks written before their links glide into the laid-out flow (owner, 2026-10-19: "block by block ... while writing") */
.node.n-glide{transition:transform .45s cubic-bezier(.3,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.node.n-glide{transition:none}}
.world.view-glide{transition:transform .5s cubic-bezier(.3,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.world.view-glide{transition:none}}
/* the empty canvas's "Start building" (owner, 2026-10-19: its alignment with the Ask xMap box "feels strange"): hidden while
   the chat is open, which invites the same first step; on the Ask xMap bar's centre line when it is closed */
.cv:has(> .ai-wrap.big) .cv-empty{visibility:hidden}
@media (min-width:901px){
  .shell .ed-body:not(.simple) .cv-empty{left:calc((100% - var(--side-w) - 16px) / 2)}
}
/* a run you watch (2026-10-20): each block that finished carries how many items it passed on, the same number sits on the
   link it leaves by (until the next edit), an AI block shows the first reason it wrote, a sending block's tick pops */
.n-cnt{position:absolute;right:8px;top:-11px;z-index:2;display:inline-flex;align-items:baseline;gap:3px;padding:3px 8px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);font:500 11px/1.1 var(--sans);color:var(--muted);white-space:nowrap;pointer-events:none;animation:cntIn .35s cubic-bezier(.2,1.2,.3,1) both}
.n-cnt b{font:600 12px/1.1 var(--sans);color:var(--cc,var(--accent));font-variant-numeric:tabular-nums}
.n-cnt i{font-style:normal}
.node.err .n-cnt,.node.skip .n-cnt{display:none}
@keyframes cntIn{from{opacity:0;transform:translateY(4px) scale(.9)}}
.e-cnt{position:absolute;z-index:1;transform:translate(-50%,-50%);padding:2px 7px;border-radius:var(--r);background:var(--lg-solid);border:1px solid color-mix(in srgb,var(--ok) 35%,var(--lg-bd));box-shadow:var(--lg-sh);font:600 11px/1.2 var(--sans);color:var(--ok);font-variant-numeric:tabular-nums;pointer-events:none;animation:cntIn .35s ease-out both}
.n-doing{position:absolute;left:0;top:calc(100% + 8px);z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);font:500 11.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap;pointer-events:none;animation:dgIn .3s ease-out both}
.n-doing i{font-style:normal;transition:opacity .22s ease}.n-doing i.out{opacity:0}
@keyframes dgIn{from{opacity:0}}
.n-doing::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cc,var(--accent));animation:doPulse 1.1s ease-in-out infinite}
@keyframes doPulse{50%{opacity:.25;transform:scale(.7)}}
.steps .step .n-doing{display:none}
.n-why{position:absolute;left:0;top:calc(100% + 8px);z-index:3;width:max(100%,220px);max-width:260px;padding:7px 10px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);font:italic 11.5px/1.4 var(--sans);color:var(--ink);white-space:normal;display:block;pointer-events:none;animation:cntIn .35s ease-out both}
.n-why .nw-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.node.n-sent .chk{animation:sentPop .6s cubic-bezier(.2,1.6,.3,1) both}
.node.n-sent{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent),var(--shadow)}
@keyframes sentPop{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.steps .step .n-cnt{position:static;margin-top:5px;justify-self:start;box-shadow:none;animation:none}
.steps .step .n-why{position:static;display:block;margin-top:5px;width:auto;max-width:none;box-shadow:none;animation:none}
.steps .step.n-sent .chk{animation:sentPop .6s cubic-bezier(.2,1.6,.3,1) both}
/* live counts while you edit (UX upgrade 4): an estimate from sample data, quieter than a run's count, with a dashed edge */
.n-est{position:absolute;left:8px;top:-11px;z-index:2;display:inline-flex;align-items:baseline;gap:5px;max-width:250px;padding:3px 8px;border-radius:var(--r);background:var(--lg-solid);border:1px dashed color-mix(in srgb,var(--cc,var(--accent)) 45%,var(--lg-bd));box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);font:500 11px/1.1 var(--sans);color:var(--ink);white-space:nowrap;pointer-events:auto;cursor:help;font-variant-numeric:tabular-nums;animation:cntIn .3s ease-out both}
.n-est>span{overflow:hidden;text-overflow:ellipsis}
.n-est i{font-style:normal;font-size:10px;color:var(--muted)}
.n-est.zero{border-color:var(--warn-line);color:var(--warn-ink)}
.n-est.bump{animation:estBump .35s ease-out}
@keyframes estBump{40%{transform:scale(1.06)}}
.node.err .n-est,.node.skip .n-est,.node.running .n-est{display:none}
.steps .step .n-est{position:static;margin-top:5px;justify-self:start;box-shadow:none;animation:none;cursor:default}
@media (prefers-reduced-motion:reduce){.n-doing,.n-doing::before,.n-doing i,.n-cnt,.e-cnt,.n-why,.n-est,.node.n-sent .chk,.steps .step.n-sent .chk{animation:none}}

/* ---------- AI employees (owner, 2026-10-20; option A approved on mock-ups 2026-10-21): each flow card on Flows is an
   employee, its picture a circle in its main block's family colour with that block's icon and a small second icon; what
   needs a decision is one slim row on Flows.
   Glass for the cards (--lg tokens), boxes inside glass with --lg-in, the one corner curve, the one control height. */
:root[data-theme="dark"] .emp-face>i{color:var(--eb)}
.td-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r);background:var(--bad);color:#fff;font:600 12px var(--sans)}
.td-ico{flex:none;width:24px;height:24px;border-radius:var(--r);display:grid;place-items:center}.td-ico svg{width:14px;height:14px}
.td-ico.t-acc{background:var(--accent-soft);color:var(--accent)}.td-ico.t-bad{background:var(--bad-bg);color:var(--bad)}.td-ico.t-ok{background:var(--ok-bg);color:var(--ok-ink)}
.emp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:empPulse 1.6s infinite}
@keyframes empPulse{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 6px transparent}}
/* one employee: a panel on the right on computers, a bottom sheet on phones (the windows' own phone layout) */
.emp-p{position:relative}.emp-load{display:flex;gap:10px;align-items:center;color:var(--muted);padding:20px 0}
.emp-x{position:absolute;top:-6px;right:-6px}
.emp-ph{display:flex;gap:16px;align-items:center;margin:0 34px 16px 0}.emp-ph h2{font:600 22px var(--sans);margin:0}.emp-ph p{margin:2px 0 8px}
.emp-p h5{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.emp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.emp-two p{margin:0;font-size:13.5px;line-height:1.55}.emp-two svg{width:14px;height:14px;vertical-align:-2px;color:var(--muted)}
.emp-chips{display:flex;flex-wrap:wrap;gap:6px}.emp-chip{padding:6px 10px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd);font:500 12.5px var(--sans);color:var(--ink-2)}
.emp-wk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.emp-wk b{display:block;font:600 20px var(--sans);font-variant-numeric:tabular-nums}.emp-wk small{color:var(--muted);font-size:12px}
.emp-tl{list-style:none;margin:0;padding:0}.emp-tl li{display:flex;gap:9px;align-items:baseline;font-size:13px;color:var(--ink-2);padding:3px 0}.emp-tl li b{color:var(--ink);font-weight:600}
.emp-tl i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);transform:translateY(-1px)}.emp-tl i.bad{background:var(--bad)}.emp-tl i.wait{background:var(--warn)}
@media (min-width:901px){
  .emp-back{justify-content:flex-end;align-items:stretch}
  .modal.emp-side{max-width:440px;max-height:none;height:calc(100vh - 28px);margin:14px 16px 14px auto;background:var(--lg-solid);border-color:var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
}
.hire-h{display:flex;gap:16px;align-items:center;margin-bottom:6px}.hire-h h2{font:600 22px var(--sans);margin:0}.hire-h p.muted{margin:2px 0 0}.hire-h .td-kick{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.hire-q small{display:block;margin-top:4px;font-size:12px}
.hire-will{padding:12px 14px;margin:16px 0 10px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2)}.hire-will h5{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.hire-will ul{margin:0;padding:0;list-style:none}.hire-will li{display:flex;gap:9px;align-items:flex-start;padding:3px 0;font-size:13.5px}.hire-will svg{flex:none;width:14px;height:14px;margin-top:3px;color:var(--accent)}
.hire-note{font-size:13px;margin:6px 0 0}
/* Make it yours in the Hire window (owner, 2026-10-21): one sentence fills the questions */
.hire-yours{margin:14px 0 4px}.hire-yours .lab{display:block;margin-bottom:6px}
.hy-box{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 10px;border-radius:var(--r);background:var(--lg-in,var(--surface));border:1px solid var(--lg-in-bd,var(--line))}
.hy-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hy-box .inp{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;height:auto;padding:6px 0}.hy-box .inp:focus{box-shadow:none;outline:0}
.hy-ic{display:grid;place-items:center;color:var(--accent)}.hy-ic svg{width:18px;height:18px}
.hy-said{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.hy-chip{display:inline-flex;gap:6px;align-items:center;padding:4px 9px;border-radius:var(--r);background:var(--accent-soft);color:var(--ink);font-size:12.5px}.hy-chip em{font-style:normal;color:var(--muted)}
.hire-q .inp.hy-flash{animation:hyFlash 1.4s ease}
@keyframes hyFlash{0%{box-shadow:0 0 0 4px var(--accent-soft);border-color:var(--accent)}100%{box-shadow:none}}
@media (max-width:900px){.hy-box{flex-wrap:wrap}.hy-box .inp{flex-basis:100%;font-size:16px}.hy-box .btn{width:100%;justify-content:center}.hy-ic{display:none}}
@media (prefers-reduced-motion:reduce){.hire-q .inp.hy-flash{animation:none}}
.modal.hire-win{max-width:560px}
@media (max-width:900px){ .emp-two{grid-template-columns:1fr} .ny{flex-direction:column;align-items:stretch} .ny-l{flex-direction:column} }
@media (prefers-reduced-motion:reduce){.emp-dot{animation:none}}
.emp-face{--fs:44px;--ea:#2F56D8;--eb:#5B82FF;position:relative;flex:none;width:var(--fs);height:var(--fs);border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(120% 120% at 20% 10%,var(--eb) 0%,var(--ea) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px var(--ea)}
.emp-face>svg{width:calc(var(--fs) * .46);height:calc(var(--fs) * .46)}
.emp-face>i{position:absolute;right:-3px;bottom:-3px;width:calc(var(--fs) * .46);height:calc(var(--fs) * .46);border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ea);box-shadow:0 0 0 2px var(--surface),0 2px 5px rgba(0,0,0,.18)}
.emp-face>i svg,.emp-face>i img{width:58%;height:58%;object-fit:contain}
.emp-face.h-place{--ea:#2F56D8;--eb:#5B82FF}.emp-face.h-brand{--ea:#7A3FD1;--eb:#A774FF}.emp-face.h-jobs{--ea:#0E8A7E;--eb:#2CC0A8}.emp-face.h-road{--ea:#C9620E;--eb:#F29A3A}.emp-face.h-sea{--ea:#0B7EA8;--eb:#2FC1E8}.emp-face.h-chat{--ea:#3B47B8;--eb:#6D7BFF}
.emp-st{display:inline-flex;align-items:center;gap:6px}.emp-st.s-needs{background:var(--accent-soft);color:var(--accent)}.emp-st.s-failed{background:var(--bad-bg);color:var(--bad)}.emp-st.s-on{background:var(--ok-bg);color:var(--ok-ink)}.emp-st.s-idle,.emp-st.s-done{background:var(--surface-2);color:var(--ink-2)}
.emp-learn{display:flex;gap:12px;padding:12px 14px;margin:0 0 16px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd)}.emp-learn p{margin:2px 0 0;font-size:12.5px}
.emp-li{flex:none;width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;background:var(--warn-bg);color:var(--warn-ink)}
/* what an employee learned (UX upgrade 8): each lesson with why, and Remove */
.emp-learn>div{min-width:0;flex:1}
.emp-lessons{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.emp-lessons li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd)}
.emp-lessons li>div{min-width:0}.emp-lessons li span{display:block;font:500 13.5px/1.3 var(--sans);color:var(--ink)}.emp-lessons li small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.emp-lessons li.off span{color:var(--muted);text-decoration:line-through}
.emp-lessons .btn{flex:none}
.ec-learned{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:12.5px;line-height:1.35;color:var(--ink-2)}.ec-learned .ico,.ec-learned svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--warn-ink)}
@media (max-width:600px){.emp-lessons li{flex-wrap:wrap}.emp-lessons .btn{margin-left:auto}}
.emp-foot{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 8px}.emp-note{font-size:12px;margin:0}
.emp-sec{margin:0 0 16px}.emp-sec p{margin:0;color:var(--ink-2);font-size:13.5px}
/* the Flows page's cards as employees (option A, 2026-10-21) */
.wf-card.emp-card{gap:9px}
.ec-h{display:flex;align-items:center;gap:12px;padding-right:76px;min-width:0}
.ec-face{flex:none;border-radius:50%;cursor:pointer;transition:transform .15s}.ec-face:hover,.ec-face:focus-visible{transform:scale(1.06);outline:none}.ec-face:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.ec-t{min-width:0}.ec-t b{display:block;font:600 15.5px/1.25 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ec-t span{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-card .wf-top{padding-right:0}.emp-card .wf-top h3{display:flex;align-items:center;gap:5px;font:500 12.5px var(--sans);color:var(--muted)}.emp-card .wf-top h3 svg{flex:none;width:12px;height:12px}
.ec-st{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ec-works{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}.ec-works svg{width:13px;height:13px}
.wf-cell.hired .wf-card{box-shadow:0 0 0 2px var(--accent),var(--lg-sh)}
.ny{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;margin:0 0 18px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh)}
.ny-h{display:flex;align-items:center;gap:6px;font:600 14px var(--sans);white-space:nowrap;margin-right:4px}
.ny-l{flex:1;display:flex;gap:8px;min-width:0}
.ny-i{flex:1 1 0;min-width:0;position:relative;display:flex}
.ny-a{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:8px 34px 8px 10px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd);color:var(--ink);text-decoration:none}.ny-a:hover{border-color:var(--accent)}
.ny-a>svg{flex:none;width:14px;height:14px;color:var(--muted)}
.ny-w{flex:1;min-width:0}.ny-w b{display:block;font:500 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ny-w small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ny-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:var(--r);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}.ny-x:hover{background:var(--accent-soft);color:var(--accent)}.ny-x svg{width:12px;height:12px}
/* xMap's X where the AI is (style D, 2026-10-21; ui.js xaiIcon): the X in xMap's blue-to-cyan with a light sweeping across
   it at rest; on white-on-blue buttons the X stays white and the light is cyan; while Ask xMap works its arms light up in
   turn. Nothing moves for people who turn motion off. */
.xai{overflow:visible;flex:none}
.xai .xt{opacity:.95}
.btn.primary .xai .xt,.ax-fab .xai .xt,.primary .xai .xt,.ai-go .xai .xt{opacity:0}
.btn.primary .xai,.ax-fab .xai,.primary .xai,.ai-go .xai{--xai-shine:#8FE9FF}
:root[data-theme="dark"] .xai .xt{opacity:.9}
.xai-busy .xai g>path,.ai-bar.busy .xai g>path,.ax-typing .xai g>path,.name-ai.busy .xai g>path{animation:xaiArm 1.4s ease-in-out infinite}
.xai-busy .xai g>path:nth-child(2),.ai-bar.busy .xai g>path:nth-child(2),.ax-typing .xai g>path:nth-child(2),.name-ai.busy .xai g>path:nth-child(2){animation-delay:.35s}
.xai-busy .xai g>path:nth-child(3),.ai-bar.busy .xai g>path:nth-child(3),.ax-typing .xai g>path:nth-child(3),.name-ai.busy .xai g>path:nth-child(3){animation-delay:.7s}
.xai-busy .xai g>path:nth-child(4),.ai-bar.busy .xai g>path:nth-child(4),.ax-typing .xai g>path:nth-child(4),.name-ai.busy .xai g>path:nth-child(4){animation-delay:1.05s}
.xai-busy .xai .xs,.ai-bar.busy .xai .xs,.ax-typing .xai .xs,.name-ai.busy .xai .xs{display:none}
.xai .xs{animation:xaiShine 3.6s linear infinite}
@keyframes xaiShine{0%,50%{transform:translateX(0)}100%{transform:translateX(1100px)}}
/* in the flow editor the light waits for the pointer on the Ask xMap bar: a light always moving there took frames from
   the teammates' live cursors on slower computers (GitHub's machines, t72); its arms still light up while it works */
.ed .xai .xs{animation:none;opacity:0}.ed .ai-bar:hover .xai .xs,.ed .ai-bar:focus-within .xai .xs{animation:xaiShine 3.6s linear infinite;opacity:1}
@keyframes xaiArm{0%,100%{opacity:.3}30%{opacity:1}}
.ax-typing.ax-think{gap:8px;color:var(--ink-2);font-size:13px}.ax-typing.ax-think .xai{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.xai .xs{display:none;animation:none!important}.xai g>path{animation:none!important}}
/* ---------- drawing on the canvas (app/draw.js; owner, 2026-10-21, approved on mock-ups): the brush first in the bar
   opens a strip of tools as wide as the settings panel; what is drawn sits in the canvas (sections under the blocks,
   the rest over them, under notes); a drawing picked shows handles, a small style bar and its settings in the panel */
.dw{position:absolute;z-index:2;box-sizing:border-box;pointer-events:none}
.dw.dw-back{z-index:0}
.dw .dw-g{position:absolute;left:0;top:0;overflow:visible}
.dw .dw-g *{pointer-events:visiblePainted}
.dw .dw-g .dw-hit{pointer-events:stroke}
.dw-section .dw-g *:not(.dw-hit){pointer-events:none}
.dw .dw-t,.dw .dw-st,.dw-stamp .dw-g{pointer-events:auto}
.dw:not(.dw-lock) .dw-g *,.dw:not(.dw-lock) .dw-t,.dw:not(.dw-lock) .dw-st{cursor:move}
.dw-t{position:absolute;inset:6px 10px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);font-family:var(--sans);line-height:1.3;white-space:pre-wrap;word-break:break-word;overflow:hidden}
.dw-t.ta-left{justify-content:flex-start;text-align:left}.dw-t.ta-right{justify-content:flex-end;text-align:right}
.dw-text .dw-t{inset:0;align-items:flex-start;padding:2px 4px;overflow:visible}
.dw-st{position:absolute;left:14px;top:10px;max-width:calc(100% - 28px);font-family:var(--sans);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-t.editing,.dw-st.editing{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r);cursor:text;overflow:visible;white-space:pre-wrap}
.dw-t:empty::before{content:'Type here';color:var(--muted)}
.world.dw-hidden .dw{display:none}
.cv.dw-drawing,.cv.dw-drawing .node,.cv.dw-drawing .dw *{cursor:crosshair}
.cv[data-dw-tool="eraser"],.cv[data-dw-tool="eraser"] .dw *{cursor:cell}
.dw-sel{position:absolute;z-index:6;border:1.5px solid var(--accent);pointer-events:none;box-sizing:border-box}
.dw-sel.is-line{border:0}
.dw-sel.locked{border-style:dashed}
.dw-h{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r);pointer-events:auto;box-sizing:border-box;transform:scale(var(--iz,1))}
.dw-h.h-nw{left:0;top:0;cursor:nwse-resize}.dw-h.h-n{left:50%;top:0;cursor:ns-resize}.dw-h.h-ne{left:100%;top:0;cursor:nesw-resize}.dw-h.h-e{left:100%;top:50%;cursor:ew-resize}
.dw-h.h-se{left:100%;top:100%;cursor:nwse-resize}.dw-h.h-s{left:50%;top:100%;cursor:ns-resize}.dw-h.h-sw{left:0;top:100%;cursor:nesw-resize}.dw-h.h-w{left:0;top:50%;cursor:ew-resize}
.dw-sel.is-line .dw-h{border-radius:50%;cursor:move}
.dw-mini{position:absolute;z-index:9;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);font:500 12px var(--sans);white-space:nowrap}
.dw-mini button{border:0;background:none;font:inherit;color:var(--ink-2);padding:5px 8px;border-radius:var(--r);cursor:pointer}
.dw-mini button:hover{background:var(--accent-soft);color:var(--accent)}
.dw-mini i{width:1px;height:18px;background:var(--line)}
.dw-mini .dw-del{color:var(--bad,#C43D3D)}
.dw-sw{border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;flex:none}
.dw-sw.on{outline:2px solid var(--accent);outline-offset:2px}
.dw-mini .dw-sw,.dw-o .dw-sw{width:18px;height:18px;padding:0;border-radius:50%}
.dw-sw.none{background:linear-gradient(135deg,transparent 44%,#E24D4D 44% 56%,transparent 56%),var(--surface)}
.dw-sw.custom{display:inline-block;background:conic-gradient(#E24D4D,#E7C41E,#2E9E6A,#1AA3B8,#3D63D9,#7B5BD6,#E24D4D);position:relative;overflow:hidden}
.dw-sw.custom input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.dw-strip{position:absolute;z-index:7;right:16px;bottom:calc(16px + var(--zoom-h,46px) + 10px);width:var(--side-w,320px);box-sizing:border-box;padding:8px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh)}
.dw-g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.dw-tool{all:unset;box-sizing:border-box;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r);cursor:pointer;color:var(--ink-2);font:500 11px var(--sans)}
.dw-tool:hover{background:var(--accent-soft);color:var(--accent)}
.dw-tool.on{background:var(--on-bg,var(--surface));box-shadow:var(--on-sh,0 1px 2px rgba(15,27,45,.12)),0 0 0 1px var(--line);color:var(--accent)}
.dw-tool:focus-visible,.dw-label:focus-visible,.dw-hide:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dw-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 2px 0;border-top:1px solid var(--line-2)}
.dw-o{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.dw-o .dw-sws{display:flex;gap:7px;align-items:center}
.dw-th,.dw-shapes{display:flex;gap:2px;background:var(--track);border-radius:var(--r);padding:2px}
.dw-th button,.dw-shp{all:unset;box-sizing:border-box;width:26px;height:24px;display:grid;place-items:center;border-radius:var(--r);cursor:pointer;color:var(--ink-2)}
.dw-shp{width:28px}
.dw-th button.on,.dw-shp.on{background:var(--on-bg,var(--surface));box-shadow:var(--on-sh,0 1px 2px rgba(15,27,45,.12));color:var(--accent)}
.dw-th i{border-radius:50%;background:var(--ink-2)}
.dw-stp{all:unset;cursor:pointer;border-radius:50%;line-height:0;padding:1px}
.dw-stp svg{width:24px;height:24px}
.dw-stp.on{outline:2px solid var(--accent);outline-offset:1px}
.dw-o-stamps{gap:5px}
.dw-hint{font-size:12px;color:var(--muted);line-height:1.35}
.dw-hide{all:unset;display:inline-flex;align-items:center;gap:4px;font:500 12px var(--sans);color:var(--ink-2);cursor:pointer;padding:4px 6px;border-radius:var(--r);flex:none}
.dw-hide:hover{background:var(--accent-soft);color:var(--accent)}
.dw-label{all:unset;box-sizing:border-box;width:100%;margin-top:8px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:7px 10px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd,var(--line));cursor:pointer;font:500 13px var(--sans);color:var(--ink)}
.dw-label svg{grid-row:span 2;color:var(--accent);width:17px;height:17px}
.dw-label small{font-size:11.5px;color:var(--muted);font-weight:400}
.dw-label:hover{border-color:var(--accent)}
.cv.dw-open .panel{bottom:calc(16px + var(--zoom-h,46px) + 10px + var(--dw-h,220px) + 10px)}
.zoom .z-draw.on{background:var(--accent-soft);color:var(--accent)}
.dw-back-to{all:unset;display:flex;align-items:center;gap:6px;padding:12px 16px 0;color:var(--accent);font:500 13px var(--sans);cursor:pointer}
.dw-back-to svg{width:14px;height:14px}
.dw-ico{display:grid;place-items:center;background:var(--accent-soft)}
.dw-name{font:500 15px var(--sans);color:var(--ink)}
.dw-pb h4{font:600 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.dw-pb .dw-sws{display:flex;flex-wrap:wrap;gap:9px}
.dw-pb .dw-sw{width:24px;height:24px;border-radius:50%;padding:0}
.dw-trk{display:flex;background:var(--track);border-radius:var(--r);padding:3px;gap:2px;margin-top:6px}
.dw-trk button{all:unset;flex:1;text-align:center;padding:6px 8px;border-radius:var(--r);font:500 12.5px var(--sans);color:var(--ink-2);cursor:pointer}
.dw-trk button.on{background:var(--on-bg,var(--surface));box-shadow:var(--on-sh,0 1px 2px rgba(15,27,45,.12));color:var(--ink)}
.dw-rng{width:100%;accent-color:var(--accent)}
.dw-two{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px}.dw-two span{font-size:12.5px;color:var(--muted)}.dw-two .dw-trk{margin:0}
.dw-txt{width:100%;resize:vertical;box-sizing:border-box;min-height:var(--ctl-h,38px);height:auto;padding:8px 10px}
.dw-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dw-look{all:unset;box-sizing:border-box;height:34px;border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;font:500 11.5px var(--sans);cursor:pointer;color:var(--ink)}
.dw-look:hover{outline:2px solid var(--accent-soft)}
.dw-arr{display:flex;flex-wrap:wrap;gap:6px}
.dw-by{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.dw-stamps{display:flex;gap:8px;flex-wrap:wrap}
.dw-stamps .dw-stp svg{width:28px;height:28px}
.dw-more summary{cursor:pointer;margin-top:16px;font:500 13px var(--sans);color:var(--ink-2)}
.dw-xy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dw-xy label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.as-list .zoom [data-z="draw"],.as-list .dw-strip,.as-list .dw-mini{display:none}
@media (max-width:900px){.zoom .z-draw,.dw-strip,.dw-mini,.dw-sel{display:none}}
/* the glass rests while the canvas moves under it (app/editor.js still()): no blur to work out again on every frame */
.glass-still .panel,.glass-still .zoom,.glass-still .dw-strip,.glass-still .dw-mini,.glass-still .ai-bar,.glass-still .sentence,.glass-still .lib,.glass-still .ed-top,.glass-still .try-card,.glass-still .node{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.dw-live,.dw-ahead{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
/* animations that never ended kept the graphics card busy on a page at rest (measured 2026-10-21: the home card's glow and
   ring held Chrome's graphics process at 43% of a core, 1% without them; the X's light about 9% on Flows): each now plays
   a few times and rests, and plays again on hover */
.try-card,.try-card::before{animation-iteration-count:3}
.try-card:hover,.try-card:hover::before{animation-iteration-count:infinite}
.xai .xs{animation-iteration-count:2}
:hover>.xai .xs,.xai:hover .xs,.btn:hover .xai .xs{animation-iteration-count:infinite}
/* the other ways to start, one quiet row under the Flows page's box (owner's pick A, 2026-10-21) */
.ask-starts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.ask-starts .ask-or{color:var(--muted);font-size:13.5px;margin-right:2px}
.ask-starts label.btn{cursor:pointer}
@media (max-width:900px){.ask-starts .ask-or{flex:1 1 100%}.ask-starts .btn{flex:1 1 auto;justify-content:center}}
/* the home page's card never covers a block's settings, at any computer width (owner's report, 2026-10-22: the earlier
   fix covered only windows up to 1,300 px; wider, the centred card ran under the open panel) */
@media (min-width:901px){
  .home-ed .cv:has(> .panel.open) .try-card{left:16px;transform:none;right:calc(var(--side-w,320px) + 32px);width:auto;max-width:760px}
  .home-ed .cv:has(> .panel.open) .try-pill{left:16px;transform:none}
}
@media (min-width:901px) and (max-width:1199px){ .home-ed .cv:has(> .panel.open) .try-card{display:none} }   /* too narrow beside the settings: it comes back when they close */

/* AI employees' weekly report card (2026-10-22): a slim line on each employee's card on Flows, six figures in its panel */
.ec-card{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);margin-top:6px}
.ec-card:empty{display:none}
.ec-card .ec-k{font-weight:600;color:var(--ink-2,var(--ink));font-size:11px;letter-spacing:.02em;text-transform:uppercase;align-self:center}
.ec-card b{font-weight:600;color:var(--ink)}
.ec-card em,.emp-wk em{font-style:normal;margin-left:3px;color:var(--muted)}
.ec-card em.up,.emp-wk em.up{color:var(--ok,#16653F)}
.emp-wk.emp-card6{grid-template-columns:repeat(3,1fr)}
.emp-wk .bad{color:var(--bad,#B42318)}
/* the spending guard (server/budget.js): the month's budget as a bar on an AI employee's card and in its panel */
.ec-bud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.ec-bud .ec-bud-t{display:inline-flex;align-items:center;gap:4px}.ec-bud .ec-bud-t svg{width:13px;height:13px}
.ec-bud b{font-weight:600;color:var(--ink)}
.ec-bud-bar{flex:1 1 120px;min-width:80px;height:6px;border-radius:var(--r);background:var(--track,var(--line));overflow:hidden;display:block}
.ec-bud-bar>i{display:block;height:100%;border-radius:var(--r);background:var(--accent-strong,var(--accent));transition:width .4s ease}
.ec-bud.warn .ec-bud-bar>i{background:var(--warn,#B54708)}
.ec-bud.over .ec-bud-bar>i{background:var(--bad,#B42318)}
.ec-bud.over .ec-bud-t{color:var(--bad,#B42318)}
.ec-bud-up{color:var(--accent);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:2px 0}
.emp-bud-set{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.emp-bud-set .inp{width:130px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.ec-bud-bar>i{transition:none}}
/* Comments pinned to blocks (owner, 2026-10-22, UX upgrade 2; app/pins.js): a pin on a block's top right corner or at a
   spot of the canvas (kept the same size at any zoom, --iz), the thread in a glass window beside it, pin mode with a hint
   at the top of the canvas; the Comments and History panel floats as glass like a block's settings */
.cm-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:7}
.cm-pin{position:absolute;display:inline-flex;align-items:center;gap:4px;height:28px;padding:2px 8px 2px 2px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);color:var(--ink);font:600 12px var(--sans);cursor:pointer;transform:translate(0,-100%) scale(var(--iz,1));transform-origin:0 100%;animation:cm-in .22s cubic-bezier(.2,.8,.2,1);z-index:7}
.cm-pin .avatar.sm{width:22px;height:22px;font-size:10px;flex:0 0 auto}
.cm-pin svg{color:var(--accent)}
.cm-pin:hover,.cm-pin:focus-visible{box-shadow:var(--lg-sh),0 0 0 2px var(--accent);outline:none}
.cm-pin.on-node{left:auto;right:calc(-10px + var(--k,0) * -34px);top:-6px;transform:translate(0,-100%) scale(var(--iz,1));transform-origin:100% 100%}
@keyframes cm-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.cv.cm-mode,.cv.cm-mode .node,.cv.cm-mode .world{cursor:copy}
.cv.cm-mode .node:hover{box-shadow:0 0 0 2px var(--accent)}
.cm-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);font-size:13px;color:var(--ink);z-index:30;white-space:nowrap;max-width:calc(100% - 32px)}
.cm-hint span{overflow:hidden;text-overflow:ellipsis}.cm-hint svg{color:var(--accent);flex:0 0 auto}
.cm-pop{position:fixed;width:320px;max-height:min(480px,calc(100vh - 24px));display:flex;flex-direction:column;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);z-index:90;color:var(--ink);animation:cm-in .18s ease}
.cm-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-height:80vh;border-radius:var(--r) var(--r) 0 0;padding-bottom:env(safe-area-inset-bottom)}
.cm-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--lg-in-bd)}
.cm-head .x{margin-left:4px}
.cm-where{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cm-where svg{color:var(--accent);flex:0 0 auto}
.cm-res svg{width:14px;height:14px}
.cm-body{flex:1;overflow:auto;padding:4px 14px}
.cm-foot{padding:10px 14px 12px;border-top:1px solid var(--lg-in-bd)}
.cm-foot .inp,.side-panel .sf .inp{width:100%;resize:vertical;min-height:60px;background:var(--lg-in);border-color:var(--lg-in-bd)}
.cm-acts{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.cm-msg{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--lg-in-bd)}.cm-msg:last-child{border-bottom:0}
.cm-msg>div{flex:1;min-width:0}
.cm-who{display:flex;align-items:center;gap:6px}.cm-who b{font-size:13px;font-weight:600}.cm-who time{font-size:11px;color:var(--muted)}
.cm-msg p{margin:3px 0 0;white-space:pre-wrap;word-wrap:break-word;font-size:13px;color:var(--ink-2)}
.cm-del{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:var(--r);display:inline-flex}.cm-del:hover{color:var(--bad);background:var(--lg-in)}
.cm-del svg{width:14px;height:14px}
.cm-resolved{display:flex;align-items:center;gap:6px;margin:10px 0 2px;font-size:12px;color:var(--ok)}.cm-resolved svg{width:14px;height:14px}
.cm-tools{display:flex;align-items:center;gap:8px;padding:10px 16px 0}
.cm-tools .seg{flex:1}.cm-tools .seg button{flex:1}
.cm-thread{padding:6px 12px;margin:0 0 10px;border:1px solid var(--lg-in-bd);border-radius:var(--r);background:var(--lg-in)}
.cm-thread.res{opacity:.85}
.cm-thread.flash{box-shadow:0 0 0 2px var(--accent)}
.cm-at{display:flex;align-items:center;gap:6px;margin:6px 0 0;padding:0;border:0;background:none;color:var(--accent);font:500 12px var(--sans);cursor:pointer;max-width:100%}
.cm-at span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-row{display:flex;align-items:center;gap:6px;padding:4px 0 6px}.cm-row small{display:inline-flex;align-items:center;gap:4px}.cm-row small svg{width:13px;height:13px}
.cm-reply{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;font-size:12px;color:var(--muted)}.cm-reply[hidden]{display:none}
@media (min-width:901px){
  .ed .side-panel{top:14px;right:16px;bottom:16px;width:360px;border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);transform:translateX(calc(100% + 32px));overflow:hidden;z-index:12}
  .ed .side-panel.open{transform:none}
  .ed .side-panel .sh,.ed .side-panel .sf{border-color:var(--lg-in-bd)}
}
@media (max-width:640px){.cm-pin{height:32px}.cm-del{padding:10px}}
@media (prefers-reduced-motion:reduce){.cm-pin,.cm-pop{animation:none}}
/* What changed between versions (owner, 2026-10-22, UX upgrade 3; app/verdiff.js): the flow drawn small and read-only with
   each change marked, and the changes in words beside it */
.modal.wide.vd-modal{max-width:1080px}
.vd-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin:4px 0 12px}
.vd-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;height:min(460px,58vh)}
.vd-cv{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--ground,var(--surface-2));background-image:radial-gradient(var(--grid,rgba(35,63,153,.12)) 1px,transparent 1px);background-size:18px 18px}
.vd-world{position:absolute;left:0;top:0;transform-origin:0 0}
.vd-edges{position:absolute;left:0;top:0;overflow:visible}
.vd-e{fill:none;stroke:var(--line);stroke-width:2}
.vd-e.add{stroke:var(--ok);stroke-width:3}.vd-e.del{stroke:var(--bad);stroke-dasharray:6 5;stroke-width:2.5}
.vd-n{position:absolute;width:140px;height:80px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);transition:box-shadow .15s,opacity .15s}
.vd-h{display:flex;align-items:center;gap:6px;font:600 10px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.vd-i{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--cc,var(--accent)) 14%,transparent);color:var(--cc,var(--accent));flex:0 0 auto}
.vd-i svg,.vd-i img{width:12px;height:12px}
.vd-t{margin-top:8px;font:500 13px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-n.same{opacity:.55}
.vd-n.add{border:2px solid var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
.vd-n.del{border:2px dashed var(--bad);opacity:.8;background:var(--bad-bg)}
.vd-n.del .vd-t{text-decoration:line-through}
.vd-n.chg{border:2px solid var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 18%,transparent)}
.vd-n.mov{border:2px solid var(--accent)}
.vd-n.ghost{border:1.5px dashed var(--accent);background:transparent;box-shadow:none;opacity:.45}
.vd-n.ghost .vd-h,.vd-n.ghost .vd-t{visibility:hidden}
.vd-n.hl{box-shadow:0 0 0 4px var(--accent);opacity:1;z-index:2}
.vd-empty{padding:20px}
.vd-list{overflow:auto;padding-right:4px}
.vd-count{margin:2px 0 8px;font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.vd-w{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;margin:0 0 6px;border-radius:var(--r);background:var(--surface-2);font-size:13px;color:var(--ink);line-height:1.4}
.vd-w[data-id]{cursor:default}.vd-w[data-id]:hover,.vd-w[data-id]:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.vd-k{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--accent)}
.vd-w.add .vd-k{background:var(--ok)}.vd-w.del .vd-k{background:var(--bad)}.vd-w.chg .vd-k{background:var(--warn)}
@media (max-width:760px){.vd-body{grid-template-columns:1fr;grid-template-rows:240px auto;height:auto}.vd-list{max-height:none}.vd-bar .seg{width:100%}.vd-bar .seg button{flex:1;padding:0 8px}}
/* What xMap remembers about the company (owner, 2026-10-22, UX upgrade 4): Settings' card, the Hire window's note */
.hire-mine{display:flex;gap:6px;align-items:center}.hire-mine svg{width:14px;height:14px;flex:0 0 auto;color:var(--accent)}
.mem-rows{display:grid;gap:10px;margin-top:10px}
.mem-row{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;gap:4px 10px;align-items:center}
.mem-rows .err:empty{display:none}
.mem-row>b,.mem-row>.mem-l{font-weight:500;font-size:13px;color:var(--ink)}
.mem-row .inp{width:100%}
.mem-row .mem-clear{white-space:nowrap}
@media (max-width:640px){.mem-row{grid-template-columns:minmax(0,1fr) 64px}.mem-row>b,.mem-row>.mem-l{grid-column:1/-1}.mem-row small{grid-column:1/-1!important}}
/* A block's own film inside the editor (owner, 2026-10-22, UX upgrade 5; app/blockfilm.js, blocks/film.html): Watch how it
   works under the block's description, a play button on the blocks of the list (on hover, not in the slim list), and the
   film in a glass window over the editor (a sheet filling the screen on phones) */
.p-film{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:0 12px 0 8px;height:30px;border:1px solid var(--lg-in-bd,var(--line));border-radius:var(--r);background:var(--lg-in,var(--surface-2));color:var(--accent);font:500 12.5px var(--sans);cursor:pointer}
.p-film svg{width:14px;height:14px;padding:3px;border-radius:50%;background:var(--accent-strong);color:#fff;box-sizing:content-box}
.p-film em{font-style:normal;color:var(--muted);font-weight:400}
.p-film:hover{border-color:var(--accent)}
.li-film{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--accent-strong);color:#fff;cursor:pointer;opacity:0;transition:opacity .15s}
.li-film svg{width:11px;height:11px;margin-left:1px}
.lib-item:hover .li-film,.lib-item:focus-within .li-film,.li-film:focus-visible{opacity:1}
.lib-item:has(.li-film) .li-badge{margin-left:auto}.lib-item:has(.li-film) .li-badge+.li-film{margin-left:4px}
.lib-slim .li-film{display:none}
@media (hover:none){.li-film{opacity:1;width:28px;height:28px}}
.bf-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(15,27,45,.38);animation:cm-in .18s ease}
.bf-win{position:relative;width:min(880px,100%);height:min(calc(min(880px,100vw - 32px) * 9 / 16 + 168px),calc(100vh - 32px));border:1px solid var(--lg-bd);border-radius:var(--r);background:var(--lg-solid);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-sh);overflow:hidden}
.bf-win iframe{display:block;width:100%;height:100%;border:0;background:transparent}
.bf-x{position:absolute;top:8px;right:8px;width:34px;height:34px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
@media (max-width:700px){.bf-back{padding:0;place-items:stretch}.bf-win{width:100%;height:100%;border-radius:0;border:0}}
@media (prefers-reduced-motion:reduce){.bf-back{animation:none}}

/* the My data block's own upload (2026-10-22) */
.mdup{margin-top:8px}.mdup .f-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mdsheet{display:flex;gap:8px;margin-top:8px}.mdsheet .inp{flex:1;min-width:0}

/* client views on the Shared links page (owner, 2026-10-22) */
.cv-card{margin-bottom:18px}
.cv-card h3{margin:0 0 4px}
.cv-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.cv-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.cv-main small{color:var(--muted)}
.cv-show,.cv-flows{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.cv-flows{max-height:220px;overflow:auto;flex-direction:column;flex-wrap:nowrap}
.cv-show .golive-skip,.cv-flows .golive-skip{color:var(--ink);font-size:14px}
@media (max-width:700px){.cv-row{flex-direction:column;align-items:stretch}}
.fl-l{display:block;margin-top:14px;font-weight:500;font-size:13px}
.fl-l .inp{margin-top:6px;font-weight:400}
.warn-text{color:var(--warn)}
/* the template marketplace (owner, 2026-10-22): stars, the maker's profile, rating */
.mk-st{position:relative;display:inline-block;color:var(--line);letter-spacing:1px}
.mk-st::before{content:'\2605\2605\2605\2605\2605';position:absolute;inset:0;width:var(--p);overflow:hidden;color:var(--warn);white-space:nowrap}
.mk-about{margin:8px 0 0;font-size:13px;color:var(--muted)}
.mk-rate{display:flex;align-items:center;gap:2px;margin-top:10px;flex-wrap:wrap}
.mk-rate .muted{font-size:12.5px;margin-right:6px}
.mk-star{border:0;background:none;font-size:20px;line-height:1;color:var(--line);cursor:pointer;padding:2px;min-width:28px;min-height:28px}
.mk-star.on,.mk-rate:hover .mk-star{color:var(--warn)}
.mk-rate .mk-star:hover~.mk-star{color:var(--line)}
@media (max-width:900px){.mk-star{min-width:40px;min-height:40px}}
/* proof the AI is right (owner, 2026-10-22): on the employee's card and in its panel */
.ec-proof{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;color:var(--ok)}
.ec-proof.soon{color:var(--muted)}
.ec-proof svg{flex:none;width:14px;height:14px;margin-top:2px}
.emp-pf{display:grid;grid-template-columns:minmax(0,150px) 1fr 44px;gap:10px;align-items:center;margin:6px 0;font-size:13px}
.emp-pf-bar{display:block;height:10px;border-radius:var(--r);background:var(--track);overflow:hidden}
.emp-pf-bar i{display:block;height:100%;border-radius:var(--r)}
.emp-pf-bar i.top{background:var(--ok)}
.emp-pf-bar i.rest{background:var(--muted)}
.emp-pf b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.fe-ok{margin-top:14px;padding:12px;border-radius:var(--r);background:var(--ok-bg)}
.fe-ok .lab{margin-top:10px}
/* ---------- notices that pop up while the app is open (owner, 2026-10-23, mock-ups dev/notify_mock/v2.html and v3.html,
   app/notify.js): a glass card per new notice, a coloured tile with a small badge of the app or block, a soft glow of the
   notice's colour (smaller than the mock-up, owner: "reduce the color shadow around the icons a bit"), the time left as a
   ring around the x, "Paused" while the mouse is on it. At most 3 under the menu bar; phones one at a time at the top. */
.np-stack{position:fixed;z-index:58;top:88px;right:16px;width:360px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:10px;pointer-events:none}
.np-stack>*{pointer-events:auto}
.np-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1);text-align:left}
.np-card.held{transform:translateY(-2px)}
.np-glow{position:absolute;left:-34px;top:-34px;width:104px;height:104px;border-radius:50%;filter:blur(26px);opacity:.16;pointer-events:none}
:root[data-theme="dark"] .np-glow{opacity:.2}
.np-glow.t-warn{background:#F2B34A}.np-glow.t-bad{background:#F07A7A}.np-glow.t-ok{background:#4CC88A}.np-glow.t-acc{background:#5D82F0}.np-glow.t-cy{background:#5AD8E8}
.np-av{position:relative;width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:#fff;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 7px -5px rgba(15,27,45,.28)}
:root[data-theme="dark"] .np-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 7px -5px rgba(0,0,0,.45)}
.np-av svg{width:19px;height:19px}
.np-av b{font:600 14px var(--sans);letter-spacing:.02em}
.np-av.t-warn{background:linear-gradient(160deg,#F2B34A,#C27B12)}.np-av.t-bad{background:linear-gradient(160deg,#F07A7A,#C93838)}.np-av.t-ok{background:linear-gradient(160deg,#4CC88A,#187A47)}.np-av.t-acc{background:linear-gradient(160deg,#5D82F0,#233F99)}.np-av.t-cy{background:linear-gradient(160deg,#5AD8E8,#1A8FA3)}
.np-av.has-ph{background:none;box-shadow:none}
.np-av .np-ph{width:40px;height:40px;border-radius:50%;object-fit:cover}
.np-src{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:var(--r);background:#fff;color:#233F99;display:grid;place-items:center;box-shadow:0 1px 4px rgba(15,27,45,.22)}
:root[data-theme="dark"] .np-src{background:rgba(255,255,255,.94)}
.np-src img{width:13px;height:13px;object-fit:contain}.np-src svg{width:12px;height:12px}
.np-tx{min-width:0}
.np-hd{display:flex;align-items:center;gap:6px;font:600 11.5px/1.3 var(--sans);color:var(--muted);padding-right:26px;min-width:0;white-space:nowrap}
.np-who{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.np-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6;flex:none}
.np-pause{display:none;align-items:center;gap:5px;color:var(--accent)}.np-pause svg{width:10px;height:10px}
.np-card.held .np-pause{display:inline-flex}
.np-t{font:600 14px/1.32 var(--sans);color:var(--ink);margin-top:3px;padding-right:8px}
.np-s{font-size:13px;line-height:1.42;color:var(--ink-2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.np-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.np-chip{font:600 11.5px/1.5 var(--sans);padding:1px 8px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--lg-in-bd);color:var(--ink-2)}
.np-chip.g{color:var(--ok)}
.np-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.np-acts .btn:not(.primary):not(.np-ok){background:var(--lg-in);border-color:var(--line)}
.np-acts .btn svg{width:15px;height:15px}
.np-acts .np-ok{background:var(--ok);border-color:transparent;color:#fff}
.np-out{margin-top:10px;font:500 13px/1.4 var(--sans)}.np-out.ok{color:var(--ok)}.np-out.bad{color:var(--bad)}
.np-x{position:absolute;top:9px;right:9px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.np-x:hover,.np-x:focus-visible{color:var(--ink);background:var(--lg-in)}
.np-x>svg:first-child{position:absolute;inset:0;width:26px;height:26px}
.np-x>svg:last-child{width:12px;height:12px}
.np-r0{fill:none;stroke:var(--line);stroke-width:2}
.np-r1{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:12px 12px}
.np-more{align-self:flex-end;font:500 12px var(--sans);color:var(--ink-2);padding:4px 10px;border-radius:var(--r);background:var(--lg-solid);border:1px solid var(--lg-bd);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);cursor:pointer}
.np-in{animation:npIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes npIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.np-gone{animation:npOut .36s ease both}
@keyframes npOut{to{opacity:0;transform:translateX(28px);margin-bottom:calc(-1 * var(--h,120px) - 10px)}}
.np-up{animation:npUp .3s ease both}
@keyframes npUp{to{opacity:0;transform:translateY(-70px)}}
.np-stack.np-phone{top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;width:auto;max-width:none;z-index:95}
.np-phone .np-card{touch-action:none}
@media (prefers-reduced-motion:reduce){.np-card,.np-in,.np-gone,.np-up{animation:none!important;transition:none!important}}
/* in a flow's editor the cards sit at the top of the right column, exactly as wide as a block's settings, and push the
   settings down until they go (owner, 2026-10-23, mock-up v3); the drawing strip and the canvas's buttons stay */
@media (min-width:901px){
  .np-stack.np-ed{position:absolute;z-index:8;top:14px;right:16px;width:var(--side-w,320px);max-width:none}
  .np-ed .np-card{grid-template-columns:36px minmax(0,1fr);gap:11px;padding:12px}
  .np-ed .np-av,.np-ed .np-av .np-ph{width:36px;height:36px}
  .np-ed .np-t{font-size:13.5px}.np-ed .np-s{font-size:12.5px}
  .shell .cv .panel{transition:transform .3s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
  .shell .cv.np-push .panel{top:calc(14px + var(--np-h,0px))}
}
/* the notification centre (owner, 2026-10-23, mock-up v3): the bell opens it in a flow's editor in the right column in the
   block settings' place (the same width and glass; the settings come back exactly as they were), on the other pages as a
   panel of the same width on the right, full screen on phones; tabs All, Needs you, Mentions; each notice with its buttons */
.nc{display:flex;flex-direction:column;box-sizing:border-box;background:var(--lg-solid);border:1px solid var(--lg-bd);border-radius:var(--r);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);overflow:hidden;color:var(--ink);animation:ncIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes ncIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.nc-page{position:fixed;z-index:57;top:88px;right:16px;bottom:16px;width:320px}
.nc-ed{position:absolute;z-index:7;top:14px;right:16px;bottom:calc(16px + var(--zoom-h,46px) + 10px);width:var(--side-w,320px)}
.cv.dw-open .nc-ed{bottom:calc(16px + var(--zoom-h,46px) + 10px + var(--dw-h,220px) + 10px)}
.cv.nc-on .panel{visibility:hidden}
.nc-phone{position:fixed;inset:0;z-index:96;border:0;border-radius:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:var(--bg)}
.nc-h{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.nc-ic{width:36px;height:36px;flex:none;border-radius:var(--r);background:var(--lg-in);display:grid;place-items:center;color:var(--accent)}
.nc-ic svg{width:18px;height:18px}
.nc-tt{min-width:0}.nc-tt small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.nc-tt b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.nc-all{margin-left:auto;border:0;background:none;padding:4px 2px;font:500 12.5px var(--sans);color:var(--accent);cursor:pointer;white-space:nowrap}
.nc-all+.nc-x{margin-left:4px}
.nc-x{margin-left:auto;width:32px;height:32px;flex:none;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--lg-in);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.nc-x:hover,.nc-x:focus-visible{color:var(--ink);border-color:var(--accent)}
.nc-x svg{width:14px;height:14px}
.nc-back{display:flex;align-items:center;gap:6px;margin:10px 14px 0;padding:0;border:0;background:none;font:500 12.5px var(--sans);color:var(--accent);cursor:pointer;text-align:left}
.nc-back svg{width:14px;height:14px;flex:none}
.nc-tabs{display:flex;gap:4px;padding:10px 14px 2px;overflow-x:auto}
.nc-tabs button{height:28px;padding:0 10px;border:0;border-radius:var(--r);background:none;font:500 12.5px var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.nc-tabs button.on{background:var(--on-bg);box-shadow:var(--on-sh);color:var(--ink)}
.nc-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 0 10px}
.nc-g{margin:12px 14px 6px;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nc-empty{margin:18px 14px;font-size:13px;color:var(--muted)}
.nc-it{margin:0 10px 8px;padding:10px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--line);cursor:pointer;text-align:left}
.nc-it:hover,.nc-it:focus-visible{border-color:var(--accent);outline:0}
.nc-it.un{border-color:rgba(61,99,217,.42)}
:root[data-theme="dark"] .nc-it.un{border-color:rgba(143,168,255,.45)}
.nc-it .np-av,.nc-it .np-av .np-ph{width:30px;height:30px}
.nc-it .np-av svg{width:15px;height:15px}.nc-it .np-av b{font-size:11.5px}
.nc-it .np-src{width:15px;height:15px;right:-4px;bottom:-4px}.nc-it .np-src img{width:10px;height:10px}.nc-it .np-src svg{width:9px;height:9px}
.nc-t{font:600 13px/1.3 var(--sans);color:var(--ink)}
.nc-it:not(.un) .nc-t{font-weight:500}
.nc-s{margin-top:2px;font-size:12px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nc-f{margin-top:3px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-it .np-acts{margin-top:8px;gap:6px}
.nc-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:12px}
.nc-foot a{color:var(--accent)}
.bell.on{background:var(--lg-in);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.nc{animation:none}}
/* Your market (2026-10-24): a menu name of two words stays on one line in the glass bar */
.side .nav a > span{white-space:nowrap}
@media (min-width:1301px){.side .nav a.nv{padding:0 10px}}   /* five places in the bar (Your market, 2026-10-24): a little less room around each name, so the picture stays inside */
@media (min-width:1301px){ .side-help #helpBtn{width:42px;padding:0;justify-content:center}.side-help #helpBtn>span{display:none} }   /* Help as its lifebuoy (its name on hover) where the five places need the room */
/* the Team inbox's unread notes on its place in the menu (2026-10-24) */
.nav a .nv-n,.tabbar a .nv-n,.mk-nav a .nv-n{font-style:normal;background:var(--accent-strong);color:#fff;border-radius:var(--r);font-size:10.5px;font-weight:600;line-height:16px;min-width:16px;padding:0 5px;text-align:center}
.tabbar a,.mk-nav a{position:relative}.tabbar a .nv-n{position:absolute;top:2px;left:calc(50% + 4px)}.mk-nav a .nv-n{position:absolute;top:-2px;right:-4px}
@media (min-width:1301px){ .side .side-find{width:44px;flex:0 0 44px;min-width:44px;padding:0;justify-content:center}.side .side-find span,.side .side-find kbd{display:none} .call-side{width:40px;padding:0;justify-content:center}.call-side>span{display:none} }   /* six places in the bar (Team inbox, 2026-10-24): Search and Book a call as their icons (names on hover) */
/* how much an AI employee does alone (enhancement 3, 2026-10-24): its card's pill and the three choices in its panel */
.ec-auto.a-ask{background:var(--warn-bg);color:var(--warn-ink,#9A5B0B)}.ec-auto.a-tell{background:var(--accent-soft);color:var(--accent)}.ec-auto.a-own{background:var(--ok-bg);color:var(--ok-ink,var(--ok))}
.emp-auto{display:grid;gap:6px}
.emp-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:var(--r);background:var(--lg-in);border:1px solid var(--line);font:inherit;color:var(--ink);cursor:pointer}
.emp-opt:disabled{cursor:default;opacity:.8}
.emp-opt i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;margin-top:1px}
.emp-opt.on{background:var(--on-bg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.emp-opt.on i{border:5px solid var(--accent-strong)}
.emp-opt b{display:block;font-weight:600;font-size:13.5px}.emp-opt small{color:var(--muted);font-size:12.5px}
.golive-auto{grid-column:1/-1}
.golive-auto .seg{display:flex;width:100%;margin-top:6px}.golive-auto .seg button{flex:1}
.golive-auto p{margin:6px 0 0;font-size:12.5px;color:var(--ink-2)}
/* an instant site report (enhancement 7, app/sitereport.js) */
.sr-pop{display:grid;gap:6px;max-width:240px;font:13px var(--sans)}.sr-pop b{font-weight:600}.sr-pop .muted{font-size:12.5px}
.sr-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0}
.sr-tile{background:var(--surface-2);border-radius:var(--r);padding:10px}.sr-tile b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}.sr-tile small{color:var(--muted);font-size:12px}
.sr-words p{margin:0 0 8px}.sr-near{list-style:none;padding:0;margin:0;display:grid;gap:4px}.sr-near li{display:flex;gap:10px;justify-content:space-between;font-size:13.5px}.sr-near span{color:var(--muted)}
@media (max-width:700px){.sr-tiles{grid-template-columns:1fr 1fr}}
/* the value an AI employee brings (enhancement 8): on its card, in its panel, on Overview */
.ec-value{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;color:var(--accent)}.ec-value svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}.ec-value.soon{color:var(--muted)}
.home-value{margin:0 0 18px}.hv-v{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);background:var(--lg-solid,var(--surface));border:1px solid var(--line)}.hv-v b{display:block;font-weight:600}.hv-v small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}.hv-v svg{width:18px;height:18px;color:var(--accent);margin-top:2px}
/* a visit's photo in a result's history (field check-ins, app/visits.js) */
.tl-photo{display:block;margin:6px 0 2px}.tl-photo img{display:block;max-width:220px;max-height:160px;border-radius:var(--r);border:1px solid var(--line)}
/* a chart from a question (enhancement 10, app/pinchart.js) */
.ra-chart{margin:10px 0 4px}.ra-chart .w-map{height:320px;border-radius:var(--r);overflow:hidden}.ra-chart .w-num{font-size:30px}
.ra-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ax-chart{margin:8px 0 4px}.ax-chart .w-map{height:220px;border-radius:var(--r);overflow:hidden}.ax-chart .chart-sc{overflow-x:auto}
.crm-said{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--ok-ink)}.crm-said svg{width:14px;height:14px}
.crm-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 10px}.crm-row .lab{flex-basis:100%;margin:0}.crm-row select{flex:1 1 260px;max-width:420px}
.crm-stages{display:grid;gap:6px;margin:6px 0 4px;max-width:680px}.crm-sh,.crm-st{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:center}.crm-sh{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.crm-st{padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
@media (max-width:600px){.crm-sh{display:none}.crm-st{grid-template-columns:1fr}}
.nl-row{margin:6px 0 14px}.nl-row > b{display:block;font-weight:500;margin-bottom:8px}.nl-seg{display:inline-flex;flex-wrap:wrap;max-width:100%}.nl-row .note{margin-top:8px}
@media (max-width:600px){.nl-seg{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:6px;padding:4px}.nl-seg button{min-height:38px}}
.nc-held{display:inline-block;padding:0 6px;border-radius:var(--r);background:var(--track,var(--surface-2));color:var(--ink-2)}
.nc-it.held{opacity:.86}
.fm-alt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}.fm-alt svg{width:15px;height:15px;color:var(--accent)}
.fm-iv{border:0;background:none;padding:0;font:500 13.5px var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* For you, at the top of the notification centre (owner, 2026-10-26: nothing between Flows' Build it bar and the flows;
   "any thing like notification like that need to go in the notification center"): the morning briefing, the weekly
   review, Needs you, flow ideas, the checklist and the phone tip, made to fit the centre's column */
.nc-for{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.nc-for[hidden]{display:none}
.nc-has-for .nc-empty{display:none}
.nc-fyb{display:flex;flex-direction:column;gap:8px}
.nc-fyb > div:empty,.nc-fyb > [hidden]{display:none}
.nc-fyb .mb,.nc-fyb .rv-offer,.nc-fyb .ny,.nc-fyb .checklist,.nc-fyb .tip-row,.nc-fyb .home-ideas > *{margin:0;padding:12px;border-radius:var(--r);background:var(--lg-in,var(--surface));border:1px solid var(--line);box-shadow:none}
.nc-fyb .mb-row,.nc-fyb .rv-offer,.nc-fyb .tip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.nc-fyb .mb-t,.nc-fyb .rv-ot{flex:1 1 150px;min-width:0}
.nc-fyb .mb-btns,.nc-fyb .rv-offer > :last-child{flex:1 1 100%;display:flex;gap:8px;justify-content:flex-end}
.nc-fyb .mb-ico,.nc-fyb .rv-ico{width:32px;height:32px;flex:none}
.nc-fyb .ny{display:flex;flex-direction:column;gap:6px}
.nc-fyb .ny-l{display:flex;flex-direction:column;gap:6px}
.nc-fyb .checklist .ck-steps,.nc-fyb .checklist [class*="grid"]{grid-template-columns:1fr !important}
.nc-fyb .tip-row span{flex:1 1 100%}
/* the bell's dot while For you has something and nothing is unread */
.for-you .bell:not(:has(b))::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Flows' filter row on one line (owner, 2026-10-26: "all in 1 line not two lines"): the tabs first, then search,
   folder, order, and Folders and Select as icons (their names on hover); phones keep the tabs as their own row */
.fl-bar #flTabs{margin:0}
.fl-bar #flTabs.has-need{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
@media (min-width:901px){
  .fl-bar{flex-wrap:nowrap}
  .fl-bar #flTabs{flex:0 0 auto;max-width:230px;min-width:150px}
  .fl-bar .fl-find{flex:1 1 150px;min-width:130px}
  .fl-bar select.inp:not(#flTabs){flex:0 1 auto;max-width:150px;min-width:96px}
  .fl-bar .fl-bt{display:none}
  .fl-bar #flFolders,.fl-bar #flSelect{width:var(--ctl-h);padding:0;justify-content:center;flex:none}
}
.nc-fyb{margin:0 10px}
.nc-fyb > div > *{max-width:100%;box-sizing:border-box}
.nc-fyb .ny{align-items:stretch;text-align:left}
.nc-fyb .ny-h{justify-content:flex-start}
.nc-fyb .ny-i{flex:1 1 auto}
.nc-fyb .ny-l > *{margin:0}
/* a place or tab that just appeared (it shows once it has something to show, 2026-10-26) carries a dot until opened */
[data-nav][data-new]{position:relative}
[data-nav][data-new]::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
/* a result card shows two actions; the others wait in "..." (2026-10-26) */
.rc-more{position:relative}
.rc-more>summary{list-style:none;cursor:pointer;padding:0 9px}
.rc-more>summary::-webkit-details-marker{display:none}
.rc-more[open]>summary{border-color:var(--accent);color:var(--accent)}
.rc-menu{position:absolute;z-index:20;left:0;bottom:calc(100% + 6px);min-width:170px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg,0 10px 30px rgba(15,25,60,.18))}
.rc-menu .rc-act{border-color:transparent;justify-content:flex-start;width:100%;background:transparent}
.rc-menu .rc-act:hover{background:var(--accent-soft)}
.rc-more.down>summary{padding:0 12px}
.rc-more.down .rc-menu{top:calc(100% + 6px);bottom:auto;right:0;left:auto}
/* Results: one search box and a Filters button; the choices open under them (2026-10-26) */
.f-more{display:flex;flex-wrap:wrap;gap:10px;flex-basis:100%}
.f-more[hidden]{display:none}
.f-more>.inp{flex:1 1 160px;min-width:0}
#fToggle.on{border-color:var(--accent);color:var(--accent)}
.f-count{font-style:normal;font:600 11px var(--sans);min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;background:var(--accent);color:#fff;margin-left:6px;padding:0 5px}
.filters:has(> .f-more){flex-wrap:wrap}
.filters > .f-more{flex:0 0 100%}
.rc:has(.rc-more[open]){position:relative;z-index:30}
/* the menu bar on computers (2026-10-26): Help and What's new are in the account menu under the picture, not icons of their own */
@media (min-width:901px){ .shell .side .side-help{display:none} .shell .side #bellSide{margin-left:auto} }
.fl-or{display:block;margin:12px 2px 0;color:var(--muted);font-size:14px;line-height:1.6}.fl-or a,.fl-or .linkbtn{display:inline;margin:0;padding:0;color:var(--accent)}
.fl-links{display:inline-flex;gap:14px;margin-left:14px}.fl-links a{color:var(--accent);text-decoration:none}.fl-links a:hover{text-decoration:underline}
.rc-more:not([open]) > .rc-menu{display:none}
.rc-more[open]{z-index:40}
.page-head:has(.rc-more[open]){position:relative;z-index:50}   /* the page head rises in (a transform), so its open menu is lifted over the filters under it */
/* an AI employee's status, a word beside Deploy or Pause (2026-10-27) */
.wf-card .foot .ec-stat{visibility:visible;display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:500 12px var(--sans);color:var(--muted);white-space:nowrap}
.ec-stat i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.ec-stat.s-live{color:var(--ok)}.ec-stat.s-live i{background:var(--ok);animation:empPulse 1.6s infinite}
.ec-stat.s-bad{color:var(--bad)}.ec-stat.s-bad i{background:var(--bad)}
.wf-cell:has(.wf-onoff) .wf-card .foot>span.ec-stat:last-child{visibility:visible;margin-right:94px}
.wf-cell:has(.wf-onoff.live) .wf-card .foot>span.ec-stat:last-child{margin-right:84px}
@media (prefers-reduced-motion:reduce){.ec-stat.s-live i{animation:none}}
@media (max-width:900px){ .fl-bar #flTabs{grid-column:1/-1} }
/* the ask box on one line (owner, 2026-10-27): no heading, a plain microphone, Go, and More ways with its small menu */
.ask-box .ask-mic{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted)}
.ask-box .ask-mic:hover{color:var(--ink);background:var(--lg-in,var(--bg))}
.ask-more{position:relative;align-self:flex-end}
#askMore{gap:6px;white-space:nowrap}#askMore svg{width:14px;height:14px;transition:transform .15s}
#askMore[aria-expanded="true"] svg{transform:rotate(180deg)}
.ask-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:6px;border-radius:var(--r);background:var(--lg-solid,var(--surface));border:1px solid var(--lg-bd,var(--line));box-shadow:var(--lg-sh,0 12px 32px -12px rgba(15,27,45,.25));display:flex;flex-direction:column}
.ask-menu[hidden]{display:none}
.ask-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);font:500 14px var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.ask-mi:hover,.ask-mi:focus-visible{background:var(--lg-in,var(--bg));outline:0}
.ask-mi svg{width:16px;height:16px;color:var(--muted)}
#hireBtn.ask-mi{color:var(--accent)}#hireBtn.ask-mi svg{color:var(--accent)}
@media (max-width:640px){.ask-box .ask-mic{flex:0 0 40px}.ask-more{flex:0 0 auto}}
.ask-hero.ask-flows{position:relative;z-index:6}   /* the More ways menu opens over the flows below */
#askMore{height:42px}
@media (max-width:640px){#askMore{height:46px}}
.ask-menu{background:var(--surface)}
/* Flows' search row (2026-10-27): the runs button with All runs and Monitor, and Cards / Chart at its right end */
.fl-bar .fl-view{margin-left:auto;flex:none;height:var(--ctl-h);box-sizing:border-box}
.fl-bar .fl-runs{flex:none}
.fl-bar .fl-runs>summary.btn{width:var(--ctl-h);padding:0;justify-content:center}
.tc-tools .fl-bar .fl-view{margin-left:8px}
@media (max-width:900px){ .fl-bar .fl-view{grid-column:2;justify-self:end} .fl-bar .fl-runs{grid-column:1;justify-self:start} }
/* a private Slack channel made from xMap Flows (app/slackchan.js, 2026-10-29) */
.sc-name{position:relative}.sc-name svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}.sc-name .inp{padding-left:31px;width:100%}
.sc-people{margin-top:2px}.sc-people .chip{cursor:pointer}.sc-people .chip.on:first-child{cursor:default}
.tc-new{display:block;margin-top:8px}
.choice label.off{opacity:.62;cursor:default}

/* Run another flow: one click gives the other flow a way in (RA-026) */
.sf-in{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px}
.sf-in .note{margin:0}
/* an xMap Academy assignment's clock (owner, 2026-10-31): while it runs, Ask xMap gives hints only */
.task-pill{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r);background:var(--lg,var(--surface));-webkit-backdrop-filter:var(--lg-blur,none);backdrop-filter:var(--lg-blur,none);border:1px solid var(--lg-bd,var(--line));box-shadow:var(--lg-sh,0 8px 24px rgba(0,0,0,.12));color:var(--ink);text-decoration:none;font:500 13px/1.25 var(--sans)}
.task-pill svg{width:18px;height:18px;color:var(--accent);flex:none}
.task-pill b{display:block;font-weight:600}
.task-pill small{display:block;color:var(--muted);font-size:12px}
.task-pill.late svg,.task-pill.late b{color:var(--bad,#C0392B)}
@media (max-width:900px){.task-pill{bottom:calc(74px + env(safe-area-inset-bottom,0px));left:10px}}
/* the admin console's Academy tab: a learner's progress on a level */
.ac-prog{min-width:170px}
.ac-prog small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px}
.ac-pbar{display:block;height:6px;border-radius:var(--r);background:var(--track,var(--line));overflow:hidden}
.ac-pbar i{display:block;height:100%;background:var(--accent);border-radius:var(--r)}
.ok-t{color:var(--ok,#1E9E62);font-weight:600}
.warn-t{color:var(--warn,#B7791F)!important}
#acaTbl td small,#acaRep td small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px}

/* the Team page's Academy tab (app/teamacademy.js): one table, and on phones each person a card with labelled lines */
.ta-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.ta-btns{display:flex;gap:8px;flex-wrap:wrap}
.ta-sum{margin:16px 0 10px;color:var(--ink-2);font-size:13px}.ta-sum b{font-weight:600;color:var(--warn-ink)}
.ta-tbl td small{display:block;color:var(--muted);font-size:11.5px}.ta-tbl td small.muted{display:inline}
.ta-tbl .ta-act{text-align:right;white-space:nowrap}
@media (max-width:760px){
  .ta-wrap{overflow:visible}.tbl-wrap>.ta-tbl{min-width:0}.ta-tbl thead{display:none}
  .ta-tbl,.ta-tbl tbody,.ta-tbl tr,.ta-tbl td{display:block;width:100%}
  .ta-tbl tr{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;background:var(--surface)}
  .ta-tbl td,.tbl-wrap .ta-tbl td.nm{min-width:0;border:0;padding:4px 0;display:flex;justify-content:space-between;gap:10px;text-align:right}
  .ta-tbl td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:12px;text-align:left;flex:none}
  .ta-tbl td.nm,.tbl-wrap .ta-tbl td.nm{justify-content:flex-start;text-align:left;padding-bottom:8px}.ta-tbl td.nm::before{display:none}
  .ta-tbl .ta-act{justify-content:flex-end}.ta-btns .btn{flex:1}
}

/* the bell pulses while something urgent waits (owner, 2026-11-01: no pop-up over the page for a failed flow; "have the
   Notification Center flashing in and out"); still for people who turn motion off */
.bell.urgent{color:var(--bad,#c0392b)}
.bell.urgent::before{content:'';position:absolute;inset:2px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--bad,#c0392b) 55%,transparent);animation:bellPulse 1.8s ease-out infinite;pointer-events:none}
.bell.urgent svg{animation:bellRing 3.6s ease-in-out infinite;transform-origin:50% 10%}
@keyframes bellPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad,#c0392b) 55%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes bellRing{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(12deg)}88%{transform:rotate(-10deg)}91%{transform:rotate(7deg)}94%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.bell.urgent::before,.bell.urgent svg{animation:none}}

/* customer stories (app/casestudy.js): the card in For you, the draft's window, Settings' list */
.cs-fy{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--lg-in,var(--surface))}
.cs-fy-t{display:flex;align-items:center;gap:8px;color:var(--accent)}
.cs-fy-t b{font-weight:600;color:var(--ink);font-size:14px}
.cs-fy p{margin:0;font-size:13.5px;color:var(--ink-2)}
.cs-fy .muted{font-size:12.5px;color:var(--muted)}
.cs-fy-b{display:flex;gap:8px;margin-top:4px}
.cs-ftiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0 14px}
.cs-ftiles>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r);background:var(--accent-soft)}
.cs-ftiles b{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cs-ftiles span{font-size:12px;color:var(--muted)}
.cs-read{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface);max-height:46vh;overflow:auto}
.cs-read h3{margin:0 0 6px;font-size:18px}
.cs-read h4{margin:14px 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.cs-read p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.cs-read .cs-lede{font-size:15px;color:var(--ink)}
.cs-edit textarea.inp{height:auto;min-height:60px;resize:vertical;line-height:1.45;padding-top:8px}
.cs-who{margin-top:10px}
.cs-foot-b{flex-wrap:wrap}
.cs-rows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.cs-row>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.cs-row b{font-weight:500;color:var(--ink)}
.cs-row .muted{font-size:12.5px}
.cs-row-b{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:900px){.cs-foot-b .spacer{display:none}.cs-foot-b .btn{flex:1 1 100%}}

/* the admin console's Monthly email (adminMonthly in extras.js) */
.mo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.mo-form .lab{margin-top:14px}
.mo-form small{display:block;margin-top:4px}
.mo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mo-news{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font-size:13.5px}
.mo-news label{display:flex;gap:8px;align-items:baseline}
.mo-subj{font-size:13px;margin:10px 0 8px;color:var(--ink-2)}
.mo-frame{width:100%;height:760px;border:1px solid var(--line);border-radius:var(--r);background:#EEF2F7}
@media (max-width:1100px){.mo-grid{grid-template-columns:1fr}.mo-frame{height:640px}}
/* Feature switches (admin console, Sign-up and pricing) */
.fs-group{margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sw-row b .pill{margin-left:6px;vertical-align:1px}