/* ui2-holo.css - holo_a (v80): Redesign 2 phase 1, the Holo look (decisions/redesign2/00-DECISION.md).
   Applies ONLY under html[data-ui="2"]; html[data-theme="light"|"dark"] comes from app.js BP_LOOK (default light).
   Rollback: remove the link to this file in index.html and bump the version. */
html[data-ui="2"]{
  --ho-bg:#F8F7F5;   /* w6_calm: the calm desk. No pink wash; colour only where there is something to press or a status */
  --ho-wash:radial-gradient(120% 50% at 100% 0%,#EEEBF7 0%,rgba(248,247,245,0) 70%);
  --ho-surface:#FFFFFF; --ho-hair:#E6E6EA; --ho-ctl:#7D8290;
  --ho-txt:#1A1D26; --ho-mut:#4A4F5C;
  --ho-good:#0B6B4A; --ho-good-t:#E3F5EC; --ho-ongood:#FFFFFF;
  --ho-warn:#8A5300; --ho-warn-t:#FFF1DB;
  --ho-bad:#B3261E; --ho-bad-t:#FDE7E5;
  --ho-info:#1F4FD1; --ho-info-t:#E6EDFF;
  --ho-softno:#EFEFF2; --ho-onsoftno:#1A1D26; --ho-user:#EFEFF2;
  --ho-track:#ECECEF; --ho-focus:#1F4FD1;
  --ho-chip:#F1F1F5; --ho-badge:#1A1D26; --ho-onbadge:#FFFFFF;
  --ho-ink:#1A1D26; --ho-onink:#FFFFFF; --ho-press:rgba(26,29,38,.06);
  --ho-sh2:0 8px 24px rgba(20,20,30,.06); --ho-sh3:0 8px 28px rgba(20,20,30,.10);
  --ho-fh:"Lexend","Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ho-fb:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the old colour names: every existing screen follows the theme */
  --bg:var(--ho-bg); --panel:var(--ho-surface); --panel2:var(--ho-surface); --raised:var(--ho-surface); --card:var(--ho-surface);
  --line:var(--ho-hair); --txt:var(--ho-txt); --dim:var(--ho-mut); --cyan:var(--ho-mut); --cyan2:var(--ho-info); --glow:transparent;
  --grad:var(--ho-ink); --on-acc:var(--ho-onink); --g1:#C8336F; --g2:#C8336F; --g3:#7A4BD6;
  --green:var(--ho-good); --amber:var(--ho-warn); --red:var(--ho-bad);
  --good-txt:var(--ho-good); --warn-txt:var(--ho-warn); --bad-txt:var(--ho-bad);
  color-scheme:light;
}
html[data-ui="2"][data-theme="dark"]{
  --ho-bg:#14161D;
  --ho-wash:radial-gradient(120% 50% at 100% 0%,rgba(122,75,214,.10) 0%,rgba(20,22,29,0) 70%);
  --ho-surface:#1D2029; --ho-hair:#2C3040; --ho-ctl:#7B8090;
  --ho-txt:#E8E6DF; --ho-mut:#B4B7C2;
  --ho-good:#4ADE9B; --ho-good-t:rgba(74,222,155,.14); --ho-ongood:#14161D;
  --ho-warn:#F5C26B; --ho-warn-t:rgba(245,194,107,.14);
  --ho-bad:#FF8A95; --ho-bad-t:rgba(255,138,149,.14);
  --ho-info:#8FB0FF; --ho-info-t:rgba(143,176,255,.14);
  --ho-softno:rgba(232,230,223,.10); --ho-onsoftno:#E8E6DF; --ho-user:#262A35;
  --ho-track:#2C3040; --ho-focus:#8FB0FF;
  --ho-chip:#262A35; --ho-badge:#E8E6DF; --ho-onbadge:#14161D;
  --ho-ink:#E8E6DF; --ho-onink:#14161D; --ho-press:rgba(255,255,255,.08);
  --ho-sh2:0 8px 24px rgba(0,0,0,.30); --ho-sh3:0 8px 28px rgba(0,0,0,.40);
  color-scheme:dark;
}

/* ---- page, type ---- */
html[data-ui="2"],html[data-ui="2"] body{background:var(--ho-wash) fixed no-repeat,var(--ho-bg)!important;color:var(--ho-txt)!important;font-family:var(--ho-fb)!important}
html[data-ui="2"] body{font-size:17px;line-height:1.6}
html[data-ui="2"] body *{font-family:inherit!important;letter-spacing:0!important}
html[data-ui="2"] :is(.u2ttl,.fttl,.ho-h,.ho-tt,.hmh,.ho-kn,.kpi .n){font-family:var(--ho-fh)!important}
html[data-ui="2"] :is(.fhd,.mchd,.dh,.clbl,.sustep,.kprovh,.hmtag,.cnav button,header .status,#pill){text-transform:none!important}
html[data-ui="2"] :is(.h3one,.hmh,.fn,.fd){white-space:normal!important;text-overflow:clip!important;overflow:visible!important}
html[data-ui="2"] :focus-visible{outline:3px solid var(--ho-focus)!important;outline-offset:2px!important}
html[data-ui="2"] ::selection{background:var(--ho-info-t)}

/* ---- header: cog, title, speaker, bell ---- */
html[data-ui="2"] header{background:transparent}
html[data-ui="2"] .u2ttl{font-size:26px;line-height:1.3;font-weight:700;color:var(--ho-txt)}
html[data-ui="2"] .hbell{color:var(--ho-txt);transition:transform .24s var(--spring)}
html[data-ui="2"] .hbell:active{background:var(--ho-press);transform:scale(.94)}
html[data-ui="2"] #u2cog[aria-current="page"]{background:var(--ho-ink);color:var(--ho-onink)}
html[data-ui="2"] .belln{background:var(--ho-badge)!important;color:var(--ho-onbadge)!important}

/* ---- the bar: white pill, brand-gradient Biz mic in the middle ---- */
html[data-ui="2"] #nav2{background:var(--ho-surface)!important;border:1px solid var(--ho-hair)!important;box-shadow:var(--ho-sh3)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-ui="2"] #nav2 button{color:var(--ho-mut);font-weight:400;font-size:16px;line-height:1.25;transition:transform .24s var(--spring)}
html[data-ui="2"] #nav2 button:active{transform:scale(.97)}
html[data-ui="2"] #nav2 button[aria-current="page"]{color:var(--ho-txt);font-weight:700}
html[data-ui="2"] #nav2 button[aria-current="page"]::after{background:var(--ho-txt);width:22px}
html[data-ui="2"] #nav2 .u2plus{width:56px;height:56px;margin:-24px auto 2px;background:var(--ho-brand);box-shadow:0 6px 16px rgba(60,40,80,.22)}
html[data-ui="2"][data-theme="dark"] #nav2 .u2plus{box-shadow:0 6px 16px rgba(0,0,0,.45)}
html[data-ui="2"] #nav2 .u2plus svg{stroke:#FFFFFF}
html[data-ui="2"] #nav2 .u2addb:active .u2plus{background:var(--ho-brand)}
html[data-ui="2"] #nav2 .u2biz .u2lab{color:inherit}   /* w2_r1: only the current place is bold */
html[data-ui="2"] #nav2 .u2biz.on .u2plus{background:var(--ho-good);box-shadow:0 0 0 4px var(--ho-good-t)}
html[data-ui="2"] #nav2 .u2biz.on .u2plus svg{stroke:var(--ho-ongood)}

/* ---- cards, rows, buttons, sheets: just enough to sit in the theme ---- */
html[data-ui="2"] :is(.fcard,.mccard,.acc,.day,.stat3 .s,.hmcard,.biztile,.kpi){background:var(--ho-surface)!important;border:1px solid var(--ho-hair)!important;border-radius:16px!important;box-shadow:none!important}
html[data-ui="2"] .frow{border-bottom-color:var(--ho-hair)}
html[data-ui="2"] .frow .fic svg{stroke:var(--ho-txt)}
html[data-ui="2"] .frow:active,html[data-ui="2"] .u2row:active{background:var(--ho-press)}
html[data-ui="2"] .fhd{color:var(--ho-txt);font-weight:700;font-size:17px}
html[data-ui="2"] .vstate{font-weight:700}
html[data-ui="2"] .fsheet{background:var(--ho-wash) fixed no-repeat,var(--ho-bg)!important;color:var(--ho-txt)}
html[data-ui="2"] .ffoot{background:var(--ho-bg)!important;border-top:1px solid var(--ho-hair)}
html[data-ui="2"] .fbar{border-bottom-color:var(--ho-hair)}
html[data-ui="2"] .fttl{font-size:20px;font-weight:700;color:var(--ho-txt)}
html[data-ui="2"] .fback{border-radius:9999px;background:var(--ho-surface);border-color:var(--ho-hair);color:var(--ho-txt);width:48px;height:48px}
html[data-ui="2"] :is(.sbtn,.hmhb,.hmb,.fbtn.no,.fbtn.ghost,.stchip,.actchip,.hmhear){background:var(--ho-surface);border:1px solid var(--ho-ctl);color:var(--ho-txt);box-shadow:none}
html[data-ui="2"] :is(.sbtn.on,.stchip[aria-pressed="true"],.hbtn,.bigbtn.primary,.actchip.hear,.cnav button.on){background:var(--ho-ink);color:var(--ho-onink);border-color:transparent}
html[data-ui="2"] .fbtn.yes{background:var(--ho-good);color:var(--ho-ongood);box-shadow:none}
html[data-ui="2"] .fbtn.yes svg{stroke:var(--ho-ongood)}
html[data-ui="2"] .fbtn.no{background:var(--ho-softno);color:var(--ho-onsoftno);border-color:transparent}
html[data-ui="2"] .hmb.yes{box-shadow:none}
html[data-ui="2"] .hmhb[aria-pressed="true"]{background:var(--ho-ink);color:var(--ho-onink);border-color:transparent}
html[data-ui="2"] .cinput,html[data-ui="2"] input,html[data-ui="2"] textarea,html[data-ui="2"] select{background:var(--ho-surface);color:var(--ho-txt);border-color:var(--ho-ctl)}
html[data-ui="2"] :is(.hmbub,.vbub){background:var(--ho-surface);color:var(--ho-txt);border-color:var(--ho-hair)}
/* old hard-coded colours that sat on the old gradient or the old dark page */
html[data-ui="2"] :is(.actchip.hear,.hbtn,.bigbtn.primary,.cnav button.on,.controls .send,.vrow.sel .pick,.keyform .save,.fchip.on,.fhearbtn,nav button .b){background:var(--ho-ink)!important;color:var(--ho-onink)!important;border-color:transparent!important;box-shadow:none!important}
html[data-ui="2"] [style*="color:#fbbf24"],html[data-ui="2"] :is(.kpi .n.warn,.fr .fd.warn){color:var(--ho-warn)!important}
html[data-ui="2"] [style*="color:#fb7185"],html[data-ui="2"] :is(.kpi .n.bad,.fr .fd.crit){color:var(--ho-bad)!important}
html[data-ui="2"] :is(.kpi .n.ok,.fr .fd.success){color:var(--ho-good)!important}
html[data-ui="2"] .cnav{background:var(--ho-bg)!important}
html[data-ui="2"] #pill{color:var(--ho-txt)!important;background:var(--ho-surface)!important;border-color:var(--ho-ctl)!important;box-shadow:none!important;backdrop-filter:none!important}
html[data-ui="2"] #pill .pip{box-shadow:none}
html[data-ui="2"] .toast{background:var(--ho-ink)!important;color:var(--ho-onink)!important;border:0!important;box-shadow:var(--ho-sh3)!important}

/* ================= Home (ui 2) ================= */
html[data-ui="2"] .hm.ho{gap:16px;padding-top:8px}
html[data-ui="2"] .ho-strip+.ho-today{margin-top:-8px}
.ho-strip{display:flex;align-items:center;gap:8px}
.ho-biz{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 12px 0 16px;border-radius:9999px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation;flex:0 1 auto;min-width:0;transition:transform .24s var(--spring)}
.ho-biz span{overflow-wrap:anywhere;text-align:left;line-height:1.25}
.ho-dot{display:block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--ho-ink)}
.ho-biz svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ho-know{flex:1 1 0;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;min-height:48px;padding:4px 12px;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);text-align:left;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-kl{font-size:16px;color:var(--ho-mut);line-height:1.4;white-space:nowrap}
.ho-kn{font-size:16px;font-weight:700;line-height:1.4;white-space:nowrap}
.ho-bar{grid-column:1 / -1;display:block;height:8px;margin:4px 0 2px;border-radius:9999px;background:var(--ho-track);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ho-ctl)}
.ho-bar i{display:block;height:100%;border-radius:9999px;background:var(--ho-brand)}
.ho-today{margin:0;font-size:17px;line-height:1.6;color:var(--ho-txt);max-width:60ch}
.ho-h{margin:0;font-size:20px;line-height:1.6;font-weight:700;color:var(--ho-txt)}
.ho-hp{margin:0;font-size:16px;line-height:1.6;color:var(--ho-mut)}
.ho-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.ho-card{background:var(--ho-surface);border:1px solid var(--ho-hair);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.ho-start .ho-hp{margin-top:-8px}
.ho-row{display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:8px 16px 8px 8px;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);text-align:left;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-row.done{background:var(--ho-good-t);border-color:transparent}
.ho-rart{width:40px;height:40px;flex:none}
.ho-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.ho-rn{font-size:17px;font-weight:700;line-height:1.4}
.ho-rd{font-size:16px;line-height:1.4;color:var(--ho-mut)}
.ho-row.done .ho-rd{color:var(--ho-txt)}
.ho-tick{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--ho-good);font-size:16px;font-weight:700}
.ho-tick svg,.ho-go svg,.ho-arw svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ho-go{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ho-track);color:var(--ho-txt)}
/* the Now card: hero tile, picture on the right, gradient Yes, soft Later */
html[data-ui="2"] .ho .hmcard{padding:24px;gap:8px;box-shadow:var(--ho-sh2)!important}
html[data-ui="2"] .ho .ho-nart{position:absolute;top:16px;right:16px;width:64px;height:64px;pointer-events:none}
html[data-ui="2"] .ho .hmcard .h3k{justify-content:flex-start;gap:8px;padding-right:64px;font-weight:400;color:var(--ho-mut)}
html[data-ui="2"] .ho .hmcard .h3k b{font-weight:700;color:var(--ho-txt)}
html[data-ui="2"] .ho .hmcard .hmh{font-size:20px;font-weight:700;line-height:1.4;padding-right:56px}
html[data-ui="2"] .ho .hmcard .h3one{color:var(--ho-mut)}
html[data-ui="2"] .ho .hmyn{gap:8px;margin-top:0}
html[data-ui="2"] .ho .hmb{min-height:56px;font-weight:700}
html[data-ui="2"] .ho .hmb[data-nowlater]{background:var(--ho-track);border-color:transparent}
html[data-ui="2"] .ho .hmb.yes,html[data-ui="2"] .ho .hmb.yes.hmdo{background:var(--ho-brand);color:#FFFFFF;border:0}
html[data-ui="2"] .ho .hmb.yes svg{stroke:#FFFFFF}
html[data-ui="2"] .ho .h3sw{background:var(--ho-ink);color:var(--ho-onink)}
html[data-ui="2"] .ho .okdot{background:var(--ho-good)}
/* 4 picture tiles, 2 by 2 */
.ho-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ho-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:0;padding:16px;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);text-align:left;cursor:pointer;touch-action:manipulation;min-width:0;transition:transform .24s var(--spring)}
.ho-tart{width:56px;height:56px;margin:-8px 0 0 -4px}
.ho-arw{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ho-track);color:var(--ho-txt)}
.ho-tt{font-size:20px;font-weight:700;line-height:1.3}
.ho-td{font-size:16px;line-height:1.4;color:var(--ho-mut);overflow-wrap:anywhere}
/* Quick chips: may scroll sideways inside the row, the page never does */
.ho-chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:0 calc(-1 * var(--sp,16px));padding:2px var(--sp,16px) 8px;scrollbar-width:none}
.ho-chips::-webkit-scrollbar{display:none}
.ho-chip{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:56px;padding:0 16px 0 8px;border-radius:9999px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;line-height:1.25;text-decoration:none;white-space:nowrap;cursor:pointer;scroll-snap-align:start;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-chip[disabled]{opacity:.8}
.ho-cth{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-style:normal;color:var(--ho-txt)}
.ho-cth svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ho-cth.pk{background:var(--ho-softno)}.ho-cth.pe{background:var(--ho-warn-t)}.ho-cth.sk{background:var(--ho-info-t)}.ho-cth.mi{background:var(--ho-good-t)}.ho-cth.li{background:var(--ho-user)}.ho-cth.wa{background:var(--ho-warn-t)}
/* Recent photos */
.ho-pics{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--sp,16px));padding:2px var(--sp,16px) 8px;scrollbar-width:none}
.ho-pics::-webkit-scrollbar{display:none}
.ho-pic{flex:none;width:88px;height:88px;padding:0;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-track);overflow:hidden;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* press = scale .97 on pointer-down, spring back */
:is(.ho-biz,.ho-know,.ho-row,.ho-tile,.ho-chip,.ho-pic,.ho-seg button):active{transform:scale(.97)}
:is(.ho-biz,.ho-know,.ho-row,.ho-tile,.ho-chip,.ho-pic):focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}

/* ================= w4_home: Home rebuild (Here, Problem, Waiting on you, Next job, Places, Pick up, Start here) ================= */
html[data-ui="2"] .hm.ho{gap:16px}
html[data-ui="2"] .ho .ho-today{font-size:17px;line-height:1.6}
.ho-prob{display:grid;grid-template-columns:40px 1fr;gap:8px 16px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--ho-warn);background:var(--ho-warn-t);color:var(--ho-txt)}
.ho-prob .ho-pt{margin:0;font-size:16px;line-height:1.6}
.ho-prob .ho-ob{grid-column:1 / -1;justify-self:stretch}
.ho-wait{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-surface);box-shadow:0 8px 24px rgba(20,20,30,.06)}
html[data-theme="dark"] .ho-wait{box-shadow:0 8px 24px rgba(0,0,0,.30)}
.ho-wh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ho-wt{margin:0;font-family:var(--ho-fh)!important;font-size:20px;line-height:1.6;font-weight:600;color:var(--ho-txt)}
.ho-wn{font-size:16px;line-height:1.6;font-weight:700;color:var(--ho-txt)}
.ho-wi{display:flex;align-items:flex-start;gap:16px}
.ho-wty{font-size:16px;line-height:1.6;font-weight:700;color:var(--ho-mut)}
.ho-wti{font-family:var(--ho-fh)!important;font-size:20px;line-height:1.4;font-weight:600;color:var(--ho-txt);overflow-wrap:anywhere}
.ho-wp{margin:0;font-size:16px;line-height:1.6;color:var(--ho-mut)}
.ho-wait0 .ho-wp{font-size:17px;color:var(--ho-txt)}
html[data-ui="2"] .ho .ho-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 24px;border-radius:9999px;font-size:17px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-open .ic{width:20px;height:20px}
.ho-job{gap:8px}
.ho-jt{margin:0;font-family:var(--ho-fh)!important;font-size:20px;line-height:1.4;font-weight:600;color:var(--ho-txt);overflow-wrap:anywhere}
.ho-obs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ho-obs .ho-ob{flex:1 1 auto;padding:0 12px}
.ho-ob span{white-space:nowrap}
.ho-ob{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:9999px;border:1px solid var(--ho-ctl);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;line-height:1.25;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-ob .ic{width:20px;height:20px;flex:none}
.ho-places{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--ho-hair);background:var(--ho-surface);overflow:hidden}
.ho-pl{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:12px 16px;border:0;border-top:1px solid var(--ho-hair);border-radius:0;background:transparent;color:var(--ho-txt);text-align:left;font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-places>.ho-pl:first-child{border-top:0}
.ho-pl .ho-rn{font-size:17px;font-weight:700;line-height:1.4}
.ho-pl .ho-rd{font-size:16px;line-height:1.5;color:var(--ho-mut);overflow-wrap:anywhere}
.ho-plnr{cursor:default}
.ho-plnr .ho-ob{flex:none}
.ho-chev{display:grid;place-items:center;flex:none;width:24px;height:24px;color:var(--ho-mut)}
.ho-chev .ic{width:20px;height:20px}
.ho-plart{flex:none}
.hochip.warn{background:var(--ho-warn-t)!important;color:var(--ho-warn)!important}
.ho-hl{outline:3px solid var(--ho-focus);outline-offset:2px;border-radius:12px}
:is(.ho-pl:not(.ho-plnr),.ho-ob,.ho-open):active{transform:scale(.97)}
.ho-pl:not(.ho-plnr):active{background:var(--ho-press)}
:is(.ho-pl,.ho-ob,.ho-open):focus-visible{outline:3px solid var(--ho-focus);outline-offset:-3px}
.cecalls{margin-top:16px}
.cecalls .cctimes{margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--ho-mut)}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] :is(.ho-pl,.ho-ob,.ho-open){transition:opacity .12s linear!important}
  html[data-ui="2"] :is(.ho-pl,.ho-ob,.ho-open):active{transform:none!important;opacity:.8}
}

/* ---- Look switch (cog page) ---- */
.ho-look{padding:16px}
.ho-look .fp{margin:0 0 8px}
.ho-seg{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.ho-seg button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:0 8px;border-radius:9999px;border:1px solid var(--ho-ctl);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
.ho-seg button[aria-checked="true"]{background:var(--ho-ink);color:var(--ho-onink);border-color:transparent}
.ho-seg svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- reduced motion: no transforms, opacity only ---- */
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] :is(.ho-biz,.ho-know,.ho-row,.ho-tile,.ho-chip,.ho-pic,.ho-seg button,#nav2 button,.hbell){transition:opacity .12s linear!important}
  html[data-ui="2"] :is(.ho-biz,.ho-know,.ho-row,.ho-tile,.ho-chip,.ho-pic,.ho-seg button,#nav2 button,.hbell):active{transform:none!important;opacity:.8}
}

/* ================= noticed_a (v81): Biz noticed cards (ui 2 only) ================= */
html[data-ui="2"]{--bn-on:#FFFFFF}
html[data-ui="2"][data-theme="dark"]{--bn-on:#14161D}
html[data-ui="2"] .bn-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 4px;padding:4px 4px 10px;margin:-4px -4px -6px;scrollbar-width:none}
html[data-ui="2"] .bn-home .bn-row{margin:-4px calc(-1 * var(--sp,16px)) -6px;padding:4px var(--sp,16px) 10px;scroll-padding:0 var(--sp,16px)}
html[data-ui="2"] .bn-row::-webkit-scrollbar{display:none}
html[data-ui="2"] .bn-c{--bn-k:var(--ho-info);--bn-t:var(--ho-info-t);flex:0 0 85%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--ho-surface);border:1px solid var(--ho-hair);color:var(--ho-txt);transition:transform .24s cubic-bezier(.34,1.56,.64,1),opacity .2s linear}
html[data-ui="2"] .bn-row.one .bn-c{flex-basis:100%}
html[data-ui="2"] .bn-c.am{--bn-k:var(--ho-warn);--bn-t:var(--ho-warn-t)}
html[data-ui="2"] .bn-c.gr{--bn-k:var(--ho-good);--bn-t:var(--ho-good-t)}
html[data-ui="2"] .bn-c.pk{--bn-k:var(--ho-onsoftno);--bn-t:var(--ho-softno)}
html[data-ui="2"] .bn-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-ui="2"] .bn-tag{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 8px;border-radius:9999px;background:var(--bn-t);color:var(--bn-k);font-size:16px;font-weight:700;line-height:1.2}
html[data-ui="2"] .bn-tag svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .bn-biz{font-size:16px;color:var(--ho-mut);line-height:1.2}
html[data-ui="2"] .bn-t{margin:0;font-size:17px;font-weight:700;line-height:1.45;color:var(--ho-txt);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[data-ui="2"] .bn-cw{min-height:64px;display:flex;align-items:center}
html[data-ui="2"] .bn-ch{display:block;max-width:100%;height:auto;overflow:visible}
html[data-ui="2"] .bn-ch text{font-size:13px;font-weight:700;fill:var(--ho-txt)}
html[data-ui="2"] .bn-ch text.m{font-weight:400;fill:var(--ho-mut)}
html[data-ui="2"] .bn-ch text.kt{fill:var(--bn-k)}
html[data-ui="2"] .bn-ch text.on{fill:var(--bn-on)}
html[data-ui="2"] .bn-ch text.big{font-size:22px}
html[data-ui="2"] .bn-ch .k{fill:var(--bn-k)}
html[data-ui="2"] .bn-ch .t{fill:var(--bn-t)}
html[data-ui="2"] .bn-ch .tr{fill:var(--ho-track)}
html[data-ui="2"] .bn-ch .o{fill:var(--ho-surface);stroke:var(--bn-k);stroke-width:2}
html[data-ui="2"] .bn-ch .ln{fill:none;stroke:var(--bn-k);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .bn-ch .ar{fill:var(--bn-k);opacity:.16}
html[data-ui="2"] .bn-err{margin:0;padding:8px 12px;border-radius:12px;background:var(--ho-bad-t);color:var(--ho-bad);font-size:16px;line-height:1.5}
html[data-ui="2"] .bn-err[hidden]{display:none}
html[data-ui="2"] .bn-yn{margin-top:auto;display:grid;grid-template-columns:1fr 1.35fr;gap:8px}
html[data-ui="2"] .bn-yn button{min-height:52px;padding:6px 12px;border-radius:9999px;border:0;font-size:16px;font-weight:700;line-height:1.25;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
html[data-ui="2"] .bn-yes{background:var(--ho-brand);color:#FFFFFF}
html[data-ui="2"] .bn-no{background:var(--ho-softno);color:var(--ho-onsoftno)}
html[data-ui="2"] .bn-yn button:active{transform:scale(.97)}
html[data-ui="2"] .bn-yn button:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .bn-yn button[disabled]{cursor:default}
html[data-ui="2"] .bn-c.bn-go{opacity:0;transform:translateY(-12px) scale(.94)}
html[data-ui="2"] .bn-empty{flex-direction:row;align-items:center;gap:12px}
html[data-ui="2"] .bn-empty p{margin:0;font-size:17px;line-height:1.5;color:var(--ho-txt)}
html[data-ui="2"] .bn-okart{width:48px;height:48px;flex:none}
html[data-ui="2"] .bn-okart .t{fill:var(--ho-good-t)}
html[data-ui="2"] .bn-okart .k{fill:var(--ho-good)}
html[data-ui="2"] .bn-okart .w{fill:none;stroke:var(--ho-ongood);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .bn-wait{margin:0 0 4px}
html[data-ui="2"] .bn-wait .bn-h{margin-bottom:4px}
html[data-ui="2"] .bn-h .pgn{background:var(--ho-track);color:var(--ho-txt)}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] :is(.bn-c,.bn-yn button){transition:none!important}
  html[data-ui="2"] .bn-yn button:active{transform:none!important;opacity:.8}
  html[data-ui="2"] .bn-c.bn-go{transform:none!important}
}

/* ================= finish_v82: polish (finish plan v82 items 4-7; 03 patch as amended) ================= */
/* one radius scale (.stpost joins the 16px group: thumbnails are not pills) */
html[data-ui="2"] :is(.fcard,.mccard,.acc,.day,.stat3 .s,.kpi,.bizc,.biztile,.sucard,.phbig,.h3day,.hmstrip,.hmcard,.bzread,.pcard,.ssel,.cinput,.glast,.sunr,.kprov,.kok,.kfail,.wzwait,.aiconfirm,.watext,.phthumbs img,.rcin,.rcdone,.derr,.stic,.stth,.stpost,.conn.cgo,.tts-active,.hmbub,.mc,.alogo,.bn-err){border-radius:16px!important}
html[data-ui="2"] header .status.stfix{border-radius:9999px!important}
/* headings 700 (home.css has no 800/900 left); no inherit rule, buttons keep their own weights */
html[data-ui="2"] :is(b,strong,h1,h2,h3,.fhd,.fttl,.hmh,.ho-h,.ho-tt){font-weight:700!important}
/* old fills */
html[data-ui="2"] :is(.tts-active,.kprov,.rcdone,.stic,.stth,.glast,.sunr){background:var(--ho-track)!important;border-color:var(--ho-hair)!important}
html[data-ui="2"] :is(.wzwait,.aiconfirm){background:var(--ho-info-t)!important;border-color:transparent!important}
html[data-ui="2"] .derr{background:var(--ho-bad-t)!important;border-color:transparent!important;color:var(--ho-bad)}
/* one gutter */
html[data-ui="2"] .fsheet,html[data-ui="2"] main,html[data-ui="2"] .page{--sp:16px}
/* Read it to me / Explain: one quiet row */
html[data-ui="2"] :is(.hmhb,.hmhear){min-height:48px;font-size:16px;white-space:nowrap;border-color:var(--ho-hair)}
/* ONE gradient primary: Biz noticed Yes becomes good-green */
html[data-ui="2"] .bn-yes{background:var(--ho-good);color:var(--ho-ongood)}
html[data-ui="2"] .bn-yes svg{stroke:var(--ho-ongood)}
html[data-ui="2"] .bn-row{gap:8px;padding:4px 4px 8px}
html[data-ui="2"] .bn-c{gap:8px}
html[data-ui="2"] .bn-tag{gap:8px;padding:0 16px 0 8px}
html[data-ui="2"] .bn-err{padding:8px 16px}
html[data-ui="2"] .bn-yn button{padding:8px 16px}
/* big primary on sheets: Waiting "Yes to all" (.mdyes), Refresh app; never a bright slab in dark */
html[data-ui="2"] :is(.hmb.yes,.bigbtn.primary,.fbtn.yes,.mdyes){background:var(--ho-brand)!important;color:#fff!important;border:0!important}
html[data-ui="2"] :is(.hmb.yes,.bigbtn.primary,.fbtn.yes,.mdyes) svg{stroke:#fff}
html[data-ui="2"] .bigacts .bigbtn.primary{background:var(--ho-brand)!important;color:#fff!important;border:0!important}
html[data-ui="2"][data-theme="dark"] .keyform .save{background:var(--ho-track)!important;color:var(--ho-txt)!important;border:1px solid var(--ho-ctl)!important}
/* tiles: titles fit (ui 2 only) */
html[data-ui="2"] .ho-tt{font-size:17px}
/* orb: no endless motion under ui 2; spinners stop for reduced motion */
html[data-ui="2"] :is(.biz .fr,.biz .glow,.gpulse){animation:none!important}
@media (prefers-reduced-motion:reduce){.kspin{animation:none}.hf .dot,.hf .dot::after,.sw,.sw .dot{transition:none}}
/* 02 #7: header buttons 8px apart (no sideways pull on the bell) */
html[data-ui="2"] .hbell{margin:-11px 0}
/* 02 #9: Home has a focus ring */
html[data-ui="2"] #feed:focus-visible{outline:3px solid var(--ho-focus)!important;outline-offset:-3px!important}
/* 02 #11: Home rows and tiles get a visible edge */
html[data-ui="2"] :is(.ho-row:not(.done),.ho-tile,.ho-biz,.ho-know){border-color:var(--ho-ctl)}
/* 06 #7: chart labels at the 16px floor */
html[data-ui="2"] .bn-ch text{font-size:16px}
/* Start here folded / Hide; Biz noticed See all */
html[data-ui="2"] .ho-sth{display:flex;align-items:center;justify-content:space-between;gap:8px}
html[data-ui="2"] .ho-shide{min-height:44px;min-width:64px;padding:0 16px;border-radius:9999px;border:1px solid var(--ho-ctl);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .24s var(--spring)}
html[data-ui="2"] .ho-shide:active,html[data-ui="2"] .ho-startc .ho-row:active{transform:scale(.97)}
html[data-ui="2"] .bn-all{align-self:flex-start;min-height:48px;padding:0 20px;border-radius:9999px;font-size:16px;font-weight:700;transition:transform .24s var(--spring)}
html[data-ui="2"] .bn-all:active{transform:scale(.97)}
html[data-ui="2"] .dtwarn{margin:8px 0 0;color:var(--ho-warn);font-weight:700}
/* Money stats (both layouts): pence made "£14,777.84" too wide for 3-across, so one full-width row each, label then amount */
:is(.fsheet[data-kind="money"],#money) .kpis{display:grid!important;grid-template-columns:1fr;gap:8px}
:is(.fsheet[data-kind="money"],#money) .kpi{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 16px;text-align:left}
:is(.fsheet[data-kind="money"],#money) .kpi .n{order:2;font-size:22px;line-height:1.3;text-align:right;overflow-wrap:anywhere}
:is(.fsheet[data-kind="money"],#money) .kpi .l{order:1;margin-top:0;white-space:normal;text-transform:none;letter-spacing:0;line-height:1.4}
/* Chase all overdue: a real tap-pill (design-system: pill for anything you tap) */
html[data-ui="2"] .bigbtn[data-chaseall]{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:9999px!important;background:var(--ho-surface)!important;border:1px solid var(--ho-ctl)!important;color:var(--ho-txt)!important;font-weight:700;box-shadow:none!important;transition:transform .24s var(--spring)}
html[data-ui="2"] .bigbtn[data-chaseall]:active{transform:scale(.97);background:var(--ho-press)!important}
/* dark: no bright slabs (Back to old layout, Talk send) */
html[data-ui="2"][data-theme="dark"] :is(.u2laybtn,.controls .send){background:var(--ho-track)!important;color:var(--ho-txt)!important;border:1px solid var(--ho-ctl)!important}
html[data-ui="2"][data-theme="dark"] .controls .send svg{stroke:var(--ho-txt)}
/* words only a screen reader or the crawl reads */
.bp-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* Log out armed: the label changes and it gets a ring (not colour alone) */
.bigbtn.danger.arm{outline:3px solid currentColor;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] :is(.ho-shide,.bn-all,.bigbtn[data-chaseall]){transition:none!important}
  html[data-ui="2"] :is(.ho-shide,.bn-all,.ho-startc .ho-row,.bigbtn[data-chaseall]):active{transform:none!important}
}

/* ================= finish_v83: Menu (ui 2). The bell goes; the cog carries the count ================= */
html[data-ui="2"] #bell{display:none!important}
html[data-ui="2"] #u2cog .belln{top:-2px;right:-6px}
html[data-ui="2"] .mnswt{background:var(--ho-track,var(--ho-hair));box-shadow:inset 0 0 0 1px var(--ho-ctl)}
html[data-ui="2"] .mnswb[aria-checked="true"] .mnswt{background:var(--ho-good);box-shadow:none}
html[data-ui="2"] .mnswb{color:var(--ho-txt)}
html[data-ui="2"] :is(.mnprob,.mnlook){border-bottom-color:var(--ho-hair)}
html[data-ui="2"] .mnprob .fd{color:var(--ho-mut)}
html[data-ui="2"] .mnprob .fic svg{stroke:var(--ho-txt)}
html[data-ui="2"] .mnbiz .fd b{color:var(--ho-txt)}
html[data-ui="2"] .mnbiz .fd b svg{stroke:var(--ho-txt)}
html[data-ui="2"] .mflat .conn>.sw{box-shadow:inset 0 0 0 1px var(--ho-ctl)}
html[data-ui="2"] .mnlo.arm .fn{color:var(--ho-bad-t,var(--ho-bad))}
html[data-ui="2"] .mnlook .ho-seg{margin:0}

/* ================= finish_v84: 40px Menu pictures, business tabs and rows, switcher (ui 2) ================= */
html[data-ui="2"] .frow .fic:has(>.mnart){width:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center}
html[data-ui="2"] .frow .fic svg.mnart{width:40px;height:40px;stroke:none;fill:none}
html[data-ui="2"] #moreview .frow>.fic,html[data-ui="2"] #moreview .mnprob>.fic{width:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center}
html[data-ui="2"] .frow .fic.mnini{width:40px;height:40px;flex:0 0 40px;font-size:18px}
html[data-ui="2"] .mnbar{background:var(--ho-track);box-shadow:inset 0 0 0 1px var(--ho-ctl)}
html[data-ui="2"] .mnbar i{background:var(--ho-brand)}
html[data-ui="2"] :is(.frow .fic.mnini.bpall,.bprow .mnini.bpall){background:var(--ho-track);color:var(--ho-txt);box-shadow:inset 0 0 0 1px var(--ho-ctl)}
html[data-ui="2"] .fsheet[data-kind="start"] .subar{background:var(--ho-track);box-shadow:inset 0 0 0 1px var(--ho-ctl)}
html[data-ui="2"] .fsheet[data-kind="start"] .subar i{background:var(--ho-brand)}
html[data-ui="2"] .bprow{border-bottom-color:var(--ho-hair)}
html[data-ui="2"] .bprow .fd{color:var(--ho-mut)}
html[data-ui="2"] .bprow[aria-checked="true"] .apdot{background:var(--ho-good);border-color:var(--ho-good)}
html[data-ui="2"] .bprow[aria-checked="true"] .apdot svg{stroke:var(--ho-ongood)}
html[data-ui="2"] .ho-dot.all{background:none;box-shadow:inset 0 0 0 3px var(--ho-ctl)}
html[data-ui="2"] .batabs button{border-color:var(--ho-ctl);background:var(--ho-surface);color:var(--ho-txt)}
html[data-ui="2"] .batabs button[aria-selected="true"]{background:var(--ho-ink);color:var(--ho-onink)}
html[data-ui="2"] .baphi{border-color:var(--ho-hair);background:var(--ho-track)}
html[data-ui="2"] .apseg{grid-template-columns:1fr 1fr}
html[data-ui="2"] .su5list .ho-row{margin:0}
@media (prefers-reduced-motion:reduce){html[data-ui="2"] .batabs button{transition:opacity .12s linear!important}}
/* ================= finish_v85: the Waiting deck, the working pill, Biz noticed stacked ================= */
html[data-ui="2"] .dk{gap:8px;margin:8px 0 0;outline:none;transition:opacity .2s linear,transform .32s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .dk:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .dk.dk-out{opacity:0;transform:translateX(-24px) scale(.97)}
html[data-ui="2"] .dk-top{display:flex;align-items:center;gap:8px;min-height:32px}
html[data-ui="2"] .dk-pos{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:9999px;background:var(--ho-track);color:var(--ho-txt);font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}
html[data-ui="2"] .dk-biz{font-size:16px;line-height:1.3;color:var(--ho-mut);min-width:0;overflow-wrap:anywhere}
html[data-ui="2"] .dk-top .dk-art{width:64px;height:64px;flex:none;margin:-8px 0 -8px auto}
html[data-ui="2"] .dk-pic{display:block;width:100%;height:144px;object-fit:cover;border-radius:16px;background:var(--ho-track)}
html[data-ui="2"] .dk-h{margin:0;font-family:var(--ho-fh)!important;font-size:20px;font-weight:700;line-height:1.35;color:var(--ho-txt);overflow-wrap:anywhere}
html[data-ui="2"] .dk-d{margin:0;font-size:17px;line-height:1.5;color:var(--ho-mut);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[data-ui="2"] .dk-q{margin:0;font-size:18px;font-weight:700;line-height:1.4;color:var(--ho-txt)}
html[data-ui="2"] .dk-yn{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;margin-top:4px}
html[data-ui="2"] .dk-yn>*{min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:9999px;border:0;font-size:17px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .dk-later{background:var(--ho-softno);color:var(--ho-onsoftno)}
html[data-ui="2"] .dk-yes{background:var(--ho-good)!important;color:var(--ho-ongood)!important}
html[data-ui="2"] .dk-yes svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .dk-yn>*:active{transform:scale(.97)}
html[data-ui="2"] .dk-yn>*:focus-visible,html[data-ui="2"] .dk-list:focus-visible,html[data-ui="2"] .dk-again:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .dk-yn>*[aria-busy="true"]{opacity:.8}
html[data-ui="2"] .dk-small{margin:0;font-size:16px;line-height:1.5;color:var(--ho-mut)}
html[data-ui="2"] .dk-done{align-items:center;text-align:center;padding:24px 16px}
html[data-ui="2"] .dk-done .dk-art{width:88px;height:88px;flex:none}
html[data-ui="2"] .dk-list{display:flex;width:100%;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.25}
html[data-ui="2"] .dk-again{min-height:48px;padding:0 20px;font-size:16px;font-weight:700}
html[data-ui="2"] .bn-wait{margin-top:16px}
/* Biz noticed: the cards stack, full width (no sideways row) */
html[data-ui="2"] .bn-row,html[data-ui="2"] .bn-home .bn-row{flex-direction:column;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
html[data-ui="2"] .bn-c,html[data-ui="2"] .bn-row.one .bn-c{flex:0 0 auto;width:100%}
/* "Biz is working on": a pill just above the bar, in the page flow (it never covers anything) */
.wkbar{display:flex;justify-content:center;padding:0 16px 8px}
.wkbar[hidden],html:not([data-ui="2"]) .wkbar{display:none!important}
html[data-ui="2"] .wkpill{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:44px;padding:0 12px;border-radius:9999px;border:1px solid var(--ho-hair);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;font-weight:700;line-height:1.2;box-shadow:var(--ho-sh2);cursor:pointer;touch-action:manipulation;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .wkpill:active{transform:scale(.97)}
html[data-ui="2"] .wkpill:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .wkt{min-width:0;overflow-wrap:anywhere}
html[data-ui="2"] .wkspin{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;border:3px solid var(--ho-track);border-top-color:var(--ho-info);animation:wkspin .9s linear infinite}
html[data-ui="2"] .wkok{display:none;width:24px;height:24px;flex:none;border-radius:50%;background:var(--ho-good);place-items:center}
html[data-ui="2"] .wkok svg,html[data-ui="2"] .wkic svg{width:16px;height:16px;fill:none;stroke:var(--ho-ongood);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .wkbar.ok .wkspin{display:none}
html[data-ui="2"] .wkbar.ok .wkok{display:grid}
html[data-ui="2"] .wkbar.ok .wkpill{border-color:var(--ho-good);color:var(--ho-good)}
html[data-ui="2"] .wkgo{display:inline-flex}
html[data-ui="2"] .wkgo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes wkspin{to{transform:rotate(360deg)}}
html[data-ui="2"] .wkcard{padding:0 16px}
html[data-ui="2"] .wkrow{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--ho-hair);color:var(--ho-txt);text-align:left;cursor:pointer;touch-action:manipulation}
html[data-ui="2"] .wkrow:last-child{border-bottom:0}
html[data-ui="2"] .wkrow:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .wkic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%}
html[data-ui="2"] .wkrow.done .wkic{background:var(--ho-good)}
html[data-ui="2"] .wkrow.fail .wkic{background:var(--ho-bad-t)}
html[data-ui="2"] .wkrow.fail .wkic svg{stroke:var(--ho-bad)}
html[data-ui="2"] .wkrt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html[data-ui="2"] .wkrn{font-size:17px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
html[data-ui="2"] .wkrd{font-size:16px;line-height:1.4;color:var(--ho-mut)}
html[data-ui="2"] .wkrow.done .wkrd{color:var(--ho-good)}
html[data-ui="2"] .wkrow.fail .wkrd{color:var(--ho-bad)}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] .wkspin{animation:none;border-color:var(--ho-info) var(--ho-track) var(--ho-track) var(--ho-info)}
  html[data-ui="2"] :is(.dk,.dk-yn>*,.wkpill){transition:opacity .12s linear!important}
  html[data-ui="2"] .dk.dk-out{transform:none!important}
  html[data-ui="2"] :is(.dk-yn>*,.wkpill):active{transform:none!important;opacity:.8}
}
/* ================= finish_v86: Diary, Money, Social; 16px gutters on every sheet ================= */
html[data-ui="2"] .fsheet .fin{padding-left:16px;padding-right:16px}
html[data-ui="2"] .fsheet .fhearrow{padding-left:16px;padding-right:16px}
/* Diary */
html[data-ui="2"] #calbody>.vstate{margin:0 0 12px}
html[data-ui="2"] .dcform{margin-top:8px}
html[data-ui="2"] .dcform .clbl:first-child{margin-top:16px}
html[data-ui="2"] .dcform #dcother{margin-top:8px}
html[data-ui="2"] .dcbook{margin-top:16px}
html[data-ui="2"] .dcbook svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .dcnote{margin:12px 0 0;font-size:16px;line-height:1.45;color:var(--ho-mut)}
html[data-ui="2"] .dccalls .fok{margin:0}
html[data-ui="2"] .dccall .ci svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-ui="2"] .dccall .pick{min-height:44px;min-width:44px;padding:0 16px;font-size:16px}
html[data-ui="2"] .dccall .pick.arm{outline:3px solid currentColor;outline-offset:2px}
html[data-ui="2"] .dcempty{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:17px;line-height:1.4;color:var(--ho-txt)}
html[data-ui="2"] .dcart,html[data-ui="2"] .mnart,html[data-ui="2"] .stdart{width:56px;height:56px;flex:none}
html[data-ui="2"] .fsheet .fcard.dcerr{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--ho-warn-t)!important;border-color:transparent!important}
html[data-ui="2"] .dcerr p{margin:0;font-size:17px;line-height:1.5;color:var(--ho-txt)}
html[data-ui="2"] .dcsync{margin:8px 0 16px;font-size:16px;line-height:1.45;color:var(--ho-mut);text-align:center}
/* Money */
html[data-ui="2"] .mnhero{display:flex;align-items:center;gap:16px;padding:16px;border-radius:16px;background:var(--ho-surface);border:1px solid var(--ho-hair);margin:0 0 12px}
html[data-ui="2"] .mnhero .mnart{width:72px;height:72px}
html[data-ui="2"] .mnh{min-width:0;display:flex;flex-direction:column;gap:4px}
html[data-ui="2"] .mnh p{margin:0}
html[data-ui="2"] .mnh-n{font-family:var(--ho-fh)!important;font-size:28px;font-weight:700;line-height:1.2;color:var(--ho-txt);overflow-wrap:anywhere}
html[data-ui="2"] .mnh-n span{font-size:18px;color:var(--ho-mut)}
html[data-ui="2"] .mnh-d{font-size:17px;line-height:1.4;color:var(--ho-txt)}
html[data-ui="2"] .mnh-s{font-size:16px;line-height:1.4;color:var(--ho-mut)}
html[data-ui="2"] .mnall{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:52px;margin:12px 0 0;padding:0 20px;border-radius:9999px;border:1px solid var(--ho-ctl);background:transparent;color:var(--ho-txt);font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .mnall:active{transform:scale(.97);background:var(--ho-press)}
html[data-ui="2"] .mnchev{font-size:24px;line-height:1;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .mnall[aria-expanded="true"] .mnchev{transform:rotate(90deg)}
html[data-ui="2"] .mnlist{margin-top:12px}
html[data-ui="2"] .mnlate{color:var(--ho-warn);font-weight:700}
html[data-ui="2"] .mnempty,html[data-ui="2"] .stempty{display:flex;align-items:center;gap:12px}
html[data-ui="2"] .mnempty p{margin:0;font-size:17px;line-height:1.4}
html[data-ui="2"] .stempty .fok{margin:0}
/* Social top card */
html[data-ui="2"] #stdeckw:empty{display:none}
html[data-ui="2"] .stdeck{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:12px 0;padding:12px 16px;border-radius:16px;border:1px solid var(--ho-ctl);background:var(--ho-surface);color:var(--ho-txt);font:inherit;text-align:left;cursor:pointer;transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
html[data-ui="2"] .stdeck:active{transform:scale(.97);background:var(--ho-press)}
html[data-ui="2"] .stdt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
html[data-ui="2"] .stdt b{font-family:var(--ho-fh)!important;font-size:19px;font-weight:700;line-height:1.3}
html[data-ui="2"] .stdt span{font-size:16px;line-height:1.4;color:var(--ho-mut)}
html[data-ui="2"] .stdgo{font-size:28px;line-height:1;color:var(--ho-mut)}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] :is(.mnall,.mnchev,.stdeck){transition:none!important}
  html[data-ui="2"] :is(.mnall,.stdeck):active{transform:none!important}
}
/* ================= finish_v87: Talk at 667; the header speaker on Talk ================= */
html[data-ui="2"][data-u2at="talk"] #hmread{display:inline-flex!important}
/* chat bubbles follow Light and Dark (Biz's reply was dark slate with dark text in Light) */
html[data-ui="2"] .msg.jarvis{background:var(--ho-surface)!important;color:var(--ho-txt)!important;border:1px solid var(--ho-hair)!important;box-shadow:none!important}
html[data-ui="2"] .msg.you{background:var(--ho-user)!important;color:var(--ho-txt)!important;border:1px solid var(--ho-hair)!important;box-shadow:none!important}
html[data-ui="2"] .msg.hint{color:var(--ho-mut)!important}
html[data-ui="2"] .msg :is(strong,b){color:inherit!important}
html[data-ui="2"] .msg a{color:var(--ho-focus)!important}
@media (max-height:740px){
  html[data-ui="2"] #talk .orbtop{flex-direction:row;justify-content:center;align-items:center;gap:12px;padding:4px 16px}
  html[data-ui="2"] #talk .orbtop .biz{--s:72px}
  html[data-ui="2"] #talk #pill{margin-top:0}
  html[data-ui="2"] #talk .tkhelp{padding:0 16px 4px;gap:4px}
  html[data-ui="2"] #talk .transcript{padding-top:8px}
}
/* ================= beta_v88: stacked rows get room; the Talk chip strip shows there is more ================= */
html[data-ui="2"] .frow+.frow{margin-top:8px}
html[data-ui="2"] .ho-chips{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);padding-right:48px}
/* ================= v96 (decisions/ui/01-v96-ui-plan.md) ================= */
/* 12: fonts ship with the app (sw.js precaches them) */
@font-face{font-family:"Lexend";font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/lexend.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/atkinson-next.woff2) format("woff2")}
/* 9: the Home gutter matches the other screens */
html[data-ui="2"] #feed{padding-left:0;padding-right:0}
/* 10: header icons get words */
html[data-ui="2"] #u2cog,html[data-ui="2"] #hmread{width:auto;min-width:48px;padding:0 12px 0 8px;gap:6px}
html[data-ui="2"] #u2cog svg,html[data-ui="2"] #hmread svg{flex:none}
html[data-ui="2"] header{flex-wrap:wrap!important;gap:8px}   /* v97_social: a fault line (stfix) gets its own row again; nowrap made the header 471px wide */
html[data-ui="2"] header .u2ttl{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
html[data-ui="2"] header>div{flex:none}
/* 11: bold only for titles and buttons */
html[data-ui="2"] .vstate{font-weight:400!important;font-size:16px!important;color:var(--ho-mut)}
html[data-ui="2"] :is(.fhd,.pgh,.dh,.sect,.mchd){font:700 20px/1.4 var(--ho-fh)!important;letter-spacing:0!important;color:var(--ho-txt)!important}
html[data-ui="2"] :is(.fhd,.pgh) :is(.fhd-r,.pgn,small,a){font-family:var(--ho-fb);font-size:16px;font-weight:400}
html[data-ui="2"] .flbl{font:700 16px/1.4 var(--ho-fb)!important;letter-spacing:0!important;color:var(--ho-txt)!important}
/* 13: one button shape */
html[data-ui="2"] .bigbtn{border-radius:9999px;background:var(--ho-surface);border:1px solid var(--ho-ctl);color:var(--ho-txt);min-height:48px}
html[data-ui="2"] .bigbtn.primary{background:var(--ho-brand);color:#fff;border-color:transparent}
html[data-ui="2"] .bigbtn.danger{background:var(--ho-bad-t);color:var(--ho-bad);border:1px solid var(--ho-bad)}
/* 14: chips look tappable */
html[data-ui="2"] :is(.cchip,.rcchip,.h3add,.mdadd,.mdhome,.stdeck,.actchip,.sbtn,.hmhb){border:1px solid var(--ho-ctl)!important}
/* 15: headings line up with cards */
html[data-ui="2"] :is(.fhd,.pgh){margin:24px 0 8px!important}
/* 16: five text sizes */
html[data-ui="2"] .rcsave{font-size:17px!important}
html[data-ui="2"] .stdt b{font-size:20px!important}
html[data-ui="2"] .mnh-n{font-size:26px!important}
/* 17: taps feel quick: 120 ms spring, scale .97 */
html[data-ui="2"] :is(.hmb,.fbtn,.sbtn,.actchip,.ho-chip,.ho-tile,.dk-yes,.dk-later,.ho-live,.hmhb,.tundob):active{transform:scale(.97)}
/* 18: no forced capitals */
:is(#pill,.mchd,.dh,.sect,.fhd,.flbl,.hmtag,.clbl,.sustep,.kprovh,.stat3 .s .lab,.kpi .l){text-transform:none!important;letter-spacing:0!important}
/* a11y F12 line height, F13 row gap, F14 Quick chips wrap (none hidden off-screen) */
.fh2{line-height:1.4!important}
.arow .cnote{line-height:1.45}
.hmb.smsapp{line-height:1.4}
.culist{display:flex;flex-direction:column;gap:8px}
html[data-ui="2"] .ho-chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin:0;padding:2px 0 8px}
/* 35: the failed-load card, pull to retry */
.h3down .hmh{display:block}
.h3down .hmh small{display:block;margin-top:4px;font-size:16px!important;font-weight:400!important;font-family:var(--ho-fb,inherit)!important;font-weight:400;color:var(--ho-mut,var(--dim))}
.hmretry,[data-hmretry],[data-moneyretry]{min-height:44px}
/* 34: the message on the card, Read the rest */
.h3msg{white-space:pre-wrap;overflow-wrap:anywhere}
.h3more,.dk-more{min-height:44px;margin:4px 0}
/* 36: Undo toast, two-tap delete */
.toast.tundo{display:flex;align-items:center;gap:12px}
.tundob{min-height:44px;min-width:64px;border-radius:9999px;border:1px solid currentColor;background:transparent;color:inherit;font:700 16px var(--ho-fb,inherit);cursor:pointer;transition:transform .12s var(--spring)}
.fx.arm,#frm.arm{color:var(--ho-bad,#fb7185)!important;border-color:var(--ho-bad,#fb7185)!important;outline:2px solid var(--ho-bad,#fb7185)}
/* 3: the live chat strip on Home; question rows */
.ho-live{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0 0 16px;padding:12px 16px;border-radius:16px;border:1px solid var(--ho-bad,#fb7185);background:var(--ho-bad-t,rgba(251,113,133,.12));color:var(--ho-txt,var(--txt));text-align:left;font:16px/1.4 var(--ho-fb,inherit);cursor:pointer;transition:transform .12s var(--spring)}
.ho-livedot{width:12px;height:12px;border-radius:50%;background:var(--ho-bad,#fb7185);flex:none}
.ho-livet{flex:1;min-width:0}.ho-livet b{display:block}
.ho-livego svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.tqbtns{display:flex;gap:8px;flex:none}
.rrow.tq{flex-direction:column;align-items:stretch;gap:8px}
.rrow.tq .rt small{font-weight:400}
.tqbtns{justify-content:flex-end}
/* 7: Menu footer */
.mnver{margin:24px 0 8px;text-align:center;color:var(--ho-mut,var(--dim));font-size:16px}
@media (prefers-reduced-motion:reduce){html[data-ui="2"] :is(.hmb,.fbtn,.sbtn,.actchip,.ho-chip,.ho-tile,.dk-yes,.dk-later,.ho-live,.hmhb,.tundob):active{transform:none}.ho-live,.tundob{transition:none}}
/* ================= v96 end ================= */

/* ================= w1_icons: one Lucide set. Icons are aria-hidden; the word beside them is what gets read. ================= */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.hochip{display:inline-flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;min-width:40px;border-radius:50%;background:var(--ho-chip,#F1F1F5);color:var(--ho-ink,#1A1D26);flex:none}
html[data-theme="dark"] .hochip{background:var(--ho-chip,#262A35);color:var(--ho-ink,#E8E6DF)}
.hochip .ic{width:24px;height:24px}
html[data-ui="2"] .dk-top .dk-art.hochip,.ho-tart.hochip{margin:0}
.controls .iconbtn,.controls .send{width:auto;min-width:64px;height:64px;padding:4px 6px;border-radius:16px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;flex:0 0 auto}
.controls .iconbtn .ic,.controls .send .ic{width:22px;height:22px}
.controls{flex-wrap:wrap}   /* the box and Send share row 1; Sound on and Attach get row 2, so 16px words fit at 375px */
.controls #text{order:-2;flex:1 1 200px}
.controls .send{order:-1}
.controls .iconbtn{flex:1 1 40%}
#chatform .send{width:auto;padding:0 16px;border-radius:9999px;gap:6px;font-size:16px;font-weight:700}
#chatback,#voiceprev{width:auto;min-width:44px;min-height:44px;padding:0 14px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:16px;font-weight:700}
.lock-key-delete{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:16px}
.gmark .ic{width:20px;height:20px}
.ni .ic,.ci .ic{width:22px;height:22px}
#u2cog,#hmread{width:auto;min-width:44px;gap:6px;padding:0 10px}
.hblab{font-size:16px;font-weight:700;line-height:1;white-space:nowrap}
html[data-ui="2"] .hblab{font-family:var(--ho-fb)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ================= w2_bar: bar of 4 (Home / Waiting on you / Biz / Menu), plain header (Back-or-title + Read) ================= */
html[data-ui="2"] #nav2{display:grid!important;grid-template-columns:1fr 1fr 1fr 1fr 1fr;   /* w10_settings: five equal slots, the mic dead centre */align-items:stretch;gap:0;margin:0!important;border:0!important;border-top:1px solid var(--ho-hair)!important;border-radius:0!important;padding:0 4px env(safe-area-inset-bottom,0px)!important;min-height:64px}
html[data-ui="2"] #nav2 button{position:relative;min-width:48px;min-height:64px;padding:4px 2px 6px;gap:2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:none;color:var(--ho-mut);font-weight:400}
html[data-ui="2"] #nav2 button>.ic{width:24px;height:24px;flex:none;margin:8px 0}   /* the same 40px row as the Biz circle, so all four words line up */
html[data-ui="2"] #nav2 .u2lab{display:block;font-size:16px;line-height:20px;font-weight:inherit;text-align:center;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%}
html[data-ui="2"] #nav2 button[aria-current="page"]{color:var(--ho-txt);font-weight:700}
html[data-ui="2"] #nav2 button[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:24px;height:3px;border-radius:2px;background:var(--ho-ink);transform:translateX(-50%)}
html[data-ui="2"] #nav2 button.u2biz .u2plus{width:58px;height:58px;margin:-26px auto 0;border-radius:50%;background:var(--ho-brand);box-shadow:0 6px 16px rgba(60,40,80,.25);display:grid;place-items:center}
html[data-ui="2"][data-theme="dark"] #nav2 button.u2biz .u2plus{box-shadow:0 6px 16px rgba(0,0,0,.5)}
html[data-ui="2"] main>.view,html[data-ui="2"] .fsheet.u2tab .fin{padding-bottom:44px}   /* room under the last row for the raised mic */
html[data-ui="2"] #nav2 button.u2biz .u2plus .ic{width:28px;height:28px;stroke:#FFFFFF}
html[data-ui="2"] #nav2 .u2biz .u2lab{color:inherit}   /* w2_r1 */
html[data-ui="2"] #nav2 .u2biz.on .u2plus{background:var(--ho-good);box-shadow:inset 0 0 0 3px var(--ho-good-t)}
html[data-ui="2"] #nav2 .u2biz.on .u2plus .ic{stroke:var(--ho-ongood)}
html[data-ui="2"] #nav2 .b{position:absolute;top:0;left:calc(50% + 6px);right:auto;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--ho-badge)!important;color:var(--ho-onbadge)!important;font-size:16px;line-height:26px;font-weight:700;text-align:center;display:block}   /* w3_r2: 16px digit */
html[data-ui="2"] #nav2 .u2prob{position:absolute;top:-12px;left:50%;transform:translateX(-50%);height:22px;padding:0 8px;border-radius:11px;background:var(--ho-bad);color:#FFFFFF;font-size:13px;line-height:22px;font-weight:700;white-space:nowrap}
html[data-ui="2"] #nav2 :is(.b,.u2prob)[hidden]{display:none!important}
/* w2_r2: a sheet drawn under the header (Money, Diary, Social) has the header Read, which reads the same script. One Read, not two. */
html[data-ui="2"] #fsheet.u2tab [data-read]{display:none!important}
/* header: Back (Home sheets only) or the title, and Read */
html[data-ui="2"] header{flex-wrap:wrap!important;align-items:center}
html[data-ui="2"] #u2back,html[data-ui="2"] #hmread{width:auto;min-width:48px;min-height:48px;margin:0;padding:0 14px 0 8px;gap:4px;border:1px solid var(--ho-hair);border-radius:9999px;background:var(--ho-surface);color:var(--ho-txt);flex:none}
html[data-ui="2"] #u2back .ic,html[data-ui="2"] #hmread .ic{width:22px;height:22px;flex:none}
html[data-ui="2"] #u2back[hidden]{display:none!important}
html[data-ui="2"] #u2back:not([hidden])~#u2ttl{order:3;flex:1 1 100%;font-size:24px}
html[data-ui="2"] #u2back:not([hidden])~#hmread{margin-left:auto}
@media (prefers-reduced-motion:reduce){html[data-ui="2"] #nav2 button,html[data-ui="2"] #u2back{transition:none!important}html[data-ui="2"] #nav2 button:active,html[data-ui="2"] #u2back:active{transform:none!important}}
/* w2_r1: the offline / sign-in line, full width under the title (W4 moves it under the Here line). Words, not colour, carry it. */
html[data-ui="2"] header #status{order:9;flex:1 0 100%;max-width:none;margin:6px 0 0;padding:10px 14px;min-height:48px;display:flex!important;align-items:center;border-radius:16px;border:1px solid var(--ho-bad);background:var(--ho-surface);color:var(--ho-txt);font-size:16px;line-height:1.4;font-weight:600;text-align:left;white-space:normal}
html[data-ui="2"] header #status[hidden]{display:none!important}
html[data-ui="2"] header #status.stfix{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* w2_r1: a long Yes label (a long name) wraps inside the button: 28px corners keep a one-line pill round and stop the words hitting the curve */
html[data-ui="2"] .ho .hmyn .hmb{border-radius:28px;padding:8px 16px;line-height:1.3;text-align:center}
/* ---- w3_inbox: Waiting on you is the one inbox. The Here line, 3 pills (icon, number, word), then only the picked list ---- */
html[data-ui="2"] .ibhere{margin-bottom:12px}
html[data-ui="2"] .ibseg{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0 0 16px;padding:4px;border-radius:16px;background:var(--ho-track)}   /* w3_r1: one column, the full words on one line */
html[data-ui="2"] .ibpill{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:56px;margin:0;padding:8px 16px;border:0;border-radius:16px;background:transparent;color:var(--ho-txt);font-family:var(--ho-fb);font-size:16px;line-height:20px;font-weight:600;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
html[data-ui="2"] .ibpill[aria-pressed="true"]{background:var(--ho-ink);color:var(--ho-onink)}
html[data-ui="2"] .ibpill:focus-visible{outline:2px solid var(--ho-focus);outline-offset:2px}
html[data-ui="2"] .ibpill:active{transform:scale(.97)}
html[data-ui="2"] .ibtop{display:inline-flex;align-items:center;gap:6px}
html[data-ui="2"] .ibtop .ic{width:20px;height:20px}
html[data-ui="2"] .ibn{font-weight:700}
html[data-ui="2"] .ibw{flex:1 1 auto;min-width:0;text-align:left;overflow-wrap:anywhere}
html[data-ui="2"] .ibpill>.ic{width:20px;height:20px;flex:none}
html[data-ui="2"] .ibpill .ibn{flex:none;min-width:32px;text-align:right}
/* w3_r1: toasts sit just above the bar, never over the header, the Read button or the Here line */
html[data-ui="2"] body > .toast{top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;transform:translateY(12px)}
html[data-ui="2"] body > .toast.show{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){html[data-ui="2"] body > .toast,html[data-ui="2"] body > .toast.show{transform:none}}
html[data-ui="2"] .ibpart>:first-child{margin-top:0}
html[data-ui="2"] .ibpart .stwide{margin-top:12px}
/* For info rows: the whole line, never cut. A tap opens the row inline with Ring back / Open it, Archive and Delete */
html[data-ui="2"] #progressview .alrow .fd.alone{white-space:normal;overflow:visible;text-overflow:clip}
html[data-ui="2"] #progressview .alfront{flex-wrap:wrap;padding-right:14px}
html[data-ui="2"] #progressview .alexp{flex:0 0 100%;padding:0 10px 16px 0}
html[data-ui="2"] #progressview .alexp[hidden]{display:none}
html[data-ui="2"] .alacts{display:flex;flex-wrap:wrap;gap:8px}
html[data-ui="2"] .alacts .sbtn{min-height:44px;font-size:16px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
/* the one gradient button on this screen is the card's Yes. Anything else that was gradient here is ink */
html[data-ui="2"] #progressview .dk .dk-yes{background:var(--ho-brand)!important;color:#fff!important;border:0!important}
html[data-ui="2"] #progressview .dk .dk-yes svg{stroke:#fff}
html[data-ui="2"] #progressview :is(.hmb.yes,.fbtn.yes,.mdyes,.bigbtn.primary){background:var(--ho-ink)!important;color:var(--ho-onink)!important}
html[data-ui="2"] #progressview :is(.hmb.yes,.fbtn.yes,.mdyes,.bigbtn.primary) svg{stroke:var(--ho-onink)}
@media (prefers-reduced-motion:reduce){html[data-ui="2"] .ibpill{transition:none}html[data-ui="2"] .ibpill:active{transform:none}}
/* w3_r2: New sits on its own line above the alert title, so line 2 starts flush with line 1 */
.alrow .alnewtag.alnewline{display:flex;width:max-content;margin:0 0 4px;vertical-align:baseline}
/* w4_r2: buttons never fall back to the browser's 13px; the job title wraps evenly */
html[data-ui="2"] :is(#hmread,#u2cog,.ho-know){font-size:16px}
.ho-jt{text-wrap:balance}

/* ================= w6_calm: Calm desk re-skin and the Here line everywhere ================= */
/* The brand gradient lives on 3 things only: the Biz mic, the one primary button per screen, the progress fill.
   It is defined ONLY on these selectors, so var(--ho-brand) anywhere else draws nothing. */
html[data-ui="2"] :is(#nav2 .u2plus,.bigbtn.primary,.hmb.yes,.fbtn.yes,.mdyes,.bn-yes,.dk-yes,.ho-bar i,.mnbar i,.subar i){--ho-brand:linear-gradient(135deg,#C8336F,#7A4BD6)}
/* Later and Not now: neutral, with a real edge (no pink) */
html[data-ui="2"] :is(.fbtn.no,.bn-no,.dk-later){background:var(--ho-softno)!important;color:var(--ho-onsoftno)!important;border:1px solid var(--ho-ctl)!important}
/* initials: neutral ink letters in the 40px icon circle (no colour per name) */
html[data-ui="2"] :is(.frow .fic.mnini,.bprow .mnini,.cuini){background:var(--ho-chip)!important;color:var(--ho-ink)!important;box-shadow:none}
/* Live: a dot icon and the word, on a good tint */
html[data-ui="2"] .pill.livep{display:inline-flex;align-items:center;gap:4px;background:var(--ho-good-t)!important;color:var(--ho-good)!important;border:1px solid var(--ho-good)!important}
html[data-ui="2"] .pill.livep .ic{width:16px;height:16px}
/* the Here line: the first words under the header on every screen. Plain, 17px, ink, never a box */
html[data-ui="2"] .here{margin:0 0 16px!important;font-size:17px!important;line-height:1.6!important;font-weight:400!important;color:var(--ho-txt)!important;max-width:60ch;overflow-wrap:anywhere}
html[data-ui="2"] .hm.ho>.here{margin:0!important}
html[data-ui="2"] .fsheet>.fhere{padding:8px 16px 0}
html[data-ui="2"] .fsheet>.fhere[hidden]{display:none}
html[data-ui="2"] .fsheet>.fhere>.here{margin:0 0 8px!important}
html[data-ui="2"] #talk>.tkhere{margin:8px 16px 0!important;text-align:left}   /* w6_r1: left, like every other Here line */
html[data-ui="2"] #talk .bz-talk{align-self:flex-start;margin:8px 16px 0}
html[data-ui="2"] #mcstrip{flex-wrap:wrap;overflow:visible}   /* w6_r1: every chip shows in full, no hidden sideways swipe */
html[data-ui="2"] #mcstrip .chip{min-height:44px;max-width:100%}
html[data-ui="2"] #mcstrip .chip:not(#yeschip):not(#workchip):not(:has(.d.down)){display:none}   /* w6_r1: all-good status chips step aside so the type box stays on screen; a problem chip still shows */
/* row icons sit in a 40px neutral circle (spec icon_system); initials use the same circle */
html[data-ui="2"] .frow>.fic:has(>svg.ic){width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:50%;background:var(--ho-chip);color:var(--ho-ink)}
html[data-ui="2"] .frow>.fic:has(>svg.ic)>svg.ic{width:20px;height:20px;stroke:currentColor}
/* one radius (16 + pill) and no 'transition: all' on the lock screen */
html[data-ui="2"] .lock-card{border-radius:16px}
html[data-ui="2"] .lock-key{transition:transform .12s cubic-bezier(.34,1.56,.64,1),background-color .12s linear}
/* w11_step1: one Read control. The body Read buttons on Menu and Waiting on you are hidden; the top-right Read does the job. */
html[data-ui="2"] #mnwrap [data-read],html[data-ui="2"] #progressview [data-read]{display:none!important}
/* w11_step1: About Kris form. 16px text so the phone does not zoom in. */
.abl{display:grid;gap:6px;margin:12px 0}
.abt{font-weight:600;font-size:16px}
.abta{width:100%;box-sizing:border-box;min-height:96px;font-size:16px;line-height:1.4;padding:10px 12px;border-radius:12px;resize:vertical;font-family:inherit;color:inherit;background:transparent;border:1px solid var(--ho-hair,#ccc)}
#abSave{margin-top:4px}