/* ===== DayWired design version 2 (Oct 21 2026) =====
   Loaded after style.css. Changes only how things look: every id, class, data attribute and layout hook that
   app.js, chat.js, crm.js, inbox.js and voice.js rely on is untouched. Version 1 is kept in versions/v1-classic.
   Rule of thumb: colours, radii and type are unconditional; SPACING lives inside @media (min-width:761px) so the
   phone, touch and safe-area rules in style.css keep winning on small screens. */

:root{
  --bg:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF; --ink:#17191E; --muted:#6B7078; --soft:#9CA1A8; --line:#E9EAEC;
  --accent:#5B5FC7; --accent-soft:#ECECFA; --pink:#E25C8A; --pink-soft:#FDE8EE;
  --red:#D23B3B; --red-soft:#FFF1F1; --amber:#B45309; --amber-soft:#FFF7E8;
  --green:#15803D; --green-soft:#EDFBF2; --teal:#1F8F84; --teal-soft:#E3F3F1;
  --col:transparent; --col-aff:transparent; --col-trybe:transparent;
  --side:#F8F9FA; --lime:#E3FF66; --shadow:0 1px 2px rgba(20,20,30,.05); --shadow-lg:0 14px 34px rgba(20,20,30,.12);
  --r:14px; --r-lg:18px;
}
/* one white canvas; each section keeps its own colour on the icon, eyebrow and tab underline only */
html[data-route="board"],html[data-route="bullet"],html[data-route="products"],html[data-route="crm"],html[data-route="inbox"],html[data-route="calendar"],html[data-route="archive"],html[data-route="trybe"]{--bg:#FFFFFF}
body{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13.5px;line-height:1.45;color:var(--ink)}
@media (min-width:1800px){body{font-size:15px}}
/* style.css clips sideways overflow with overflow-x:hidden, which turns html into a scroll container and makes
   every position:sticky bar inert; clip keeps the clipping without that side effect (hidden stays as the fallback) */
html,body{overflow-x:hidden;overflow-x:clip}
/* headings were a serif in version 1; version 2 is one typeface */
.serif,.logo,.stat .num,.mhead h3,.dh textarea.h2,.chead2 b,.wk b,.vstate,.crm .cstats b,.crm .ckpis b,.drawer .cstats b,.sugh,.page-h h1,.crm .crmhead h1{font-family:Inter,system-ui,-apple-system,sans-serif!important}

/* ---------- shell: sidebar on wide screens, the old top bar everywhere else ---------- */
.shell{display:flex;align-items:flex-start;min-height:100vh}
.mainwrap{flex:1;min-width:0}
.side{display:none}
.toplogo{display:inline-flex}
.crumb{display:none;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb b{color:var(--ink);font-weight:600}
@media (min-width:1101px){
  body.authed .side{display:flex;flex-direction:column;width:236px;flex:none;position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);padding:18px 12px calc(14px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-y:auto}
  body.authed .toplogo{display:none}
  body.authed .crumb{display:block}
  .side .logo{padding:4px 8px 16px}
  .top{gap:12px;padding:12px max(24px,env(safe-area-inset-right)) 12px 24px;padding-top:max(12px,env(safe-area-inset-top))}
}
@media (min-width:1800px){body.authed .side{width:256px}}
body:not(.authed) .side,body.signedout .side{display:none}
.logo{display:inline-flex;align-items:center;gap:0;font:700 19px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.logo::before{content:"";width:28px;height:28px;margin-right:9px;border-radius:9px;background:linear-gradient(135deg,#5B5FC7 0%,#8B8EE0 55%,#E3FF66 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);flex:none}
.logo span{color:var(--accent)}
.signin .logo.big{font-size:30px;justify-content:center}
.signin .logo.big::before{width:40px;height:40px;margin-right:11px;border-radius:12px}
nav.main{display:flex;flex-direction:column;gap:2px}
nav.main a{padding:9px 10px;border-radius:10px;color:var(--ink);font-weight:500;font-size:13.5px;gap:10px;display:flex;align-items:center}
nav.main a .nl{display:inline}
nav.main a svg{color:#7A7E86;width:18px;height:18px}
nav.main a:hover{background:#EFF1F3}
nav.main a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,20,30,.06),0 0 0 1px var(--line);padding:9px 10px}
nav.main a.on svg{color:var(--tab)}
nav.main a .badge{margin-left:auto}
.ngrp{color:var(--soft);font-size:11.5px;font-weight:500;padding:14px 10px 6px;letter-spacing:.01em}
.ngrp:first-child{padding-top:2px}
.sidefoot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sidefoot:has(.sf-org:empty){display:none}
.sf-org::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:1px}

.top{background:var(--panel);border-bottom:1px solid var(--line)}
.top .btn{border-radius:11px}
.top .claudebtn{background:#15171B;border-color:#15171B;color:#fff;border-radius:999px;padding:7px 14px 7px 10px}
.top .claudebtn:hover{background:#2A2D34;border-color:#2A2D34}
.top .claudebtn .cdot{background:#B8BCC4}
.top .claudebtn.busy .cdot{background:var(--lime)}
.top .bellbtn{border-radius:11px}
.top .bellbtn.has svg{color:var(--accent)}
.top .orgbtn .ls{background:var(--ink)}
.badge{background:var(--red);border-radius:8px;padding:1px 7px;font-weight:600}
.badge.red{background:var(--red)}

/* ---------- buttons, inputs, chips ---------- */
.btn{border:1px solid var(--line);background:var(--card);border-radius:11px;font-weight:500;box-shadow:var(--shadow);transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{border-color:#D5D7DB;background:#FAFBFC}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#2A2D34;border-color:#2A2D34}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.affb{background:var(--teal-soft);border-color:#BFE0DB;color:var(--teal);box-shadow:none}
.btn.sm{border-radius:9px}
.btn.danger{color:var(--red)}
.calbtn{background:var(--accent-soft);border-color:#CFD0F3;color:var(--accent)}
.bnav.seg .btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.in,.search,.crm .in{border-radius:10px;background:#fff}
.in:focus,.search:focus,.crm .in:focus,.cform textarea:focus,.mleft textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,25,30,.06);outline:none}
.search{border-radius:12px;padding-left:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA1A8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center/15px 15px}
.pill{border-radius:999px;background:#fff;box-shadow:var(--shadow)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
select.pill{border-radius:999px}
.seg{background:#F1F2F4;border-radius:12px;padding:3px;gap:2px}
.seg button{border-radius:9px;color:var(--ink);font-weight:500}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,20,30,.08)}
/* chips keep version 1's exact size (2px 7px, weight 600); colour edges are drawn inside so nothing grows */
.chip{border-radius:999px;background:#F3F4F6;color:var(--muted)}
.chip.red,.chip.red.imp{background:var(--red-soft);color:#B42318;box-shadow:inset 0 0 0 1px #FFD6D6}
.chip.amber{background:var(--amber-soft);color:#B45309;box-shadow:inset 0 0 0 1px #FDE4B8}
.chip.green{background:var(--green-soft);color:#15803D;box-shadow:inset 0 0 0 1px #CDEEDB}
.chip.pink{background:var(--pink-soft);color:#B0466A;box-shadow:inset 0 0 0 1px #F6CBD9}
.chip.teal{background:var(--teal-soft);color:var(--teal);box-shadow:inset 0 0 0 1px #BFE0DB}
.chip.trybe{background:var(--trybe-soft);color:var(--trybe-ink);box-shadow:inset 0 0 0 1px #E3CCE5}
.chip.kw{background:var(--ink);color:#fff;border-radius:7px;letter-spacing:.3px}
.chip.rate{background:var(--lime);color:var(--ink);padding:3px 9px;border-radius:8px;font-size:12.5px;font-weight:600}
.chip.rate b{font-weight:600}
.chip.part{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px #D8D8F5}
.rating{border-radius:8px}
.prog{background:#EEF0F2;border-radius:4px}
.lk span,.plat span{border-radius:6px}
.lk span.na{background:#F3F4F6;color:#B3B5BA}

/* ---------- the strip of widgets above the board ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(20,20,30,.05)}
.box h3{font:600 14px Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:10px}
.stat .num{font:600 26px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.stat .sub{font-size:12px;color:var(--muted);margin-top:4px}
.due li b{font-weight:600}
.retpill{border-radius:12px;box-shadow:var(--shadow)}

/* ---------- board ---------- */
.lane-h{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.lane-h .dot{border-radius:4px}
.lane-h small{color:var(--muted)}
.board{scrollbar-width:thin;scrollbar-color:#C9CCD2 transparent}
.board::-webkit-scrollbar{height:8px}
.board::-webkit-scrollbar-thumb{background:#C9CCD2;border-radius:4px}
.board::-webkit-scrollbar-track{background:transparent}
.col,.board.aff .col,.board.trybe .col{background:transparent;border-radius:14px}
.board.aff .col[data-stage="need_links"]{background:#F3F1FB}
.col.drop{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-2px}
.board.aff .col.drop{background:#D3EAE5;outline-color:var(--teal)}
.board.trybe .col.drop{background:#E6D3E8;outline-color:var(--trybe)}
.col-h{font-size:14px;gap:8px}
.col-h .dot{border-radius:3px;width:9px;height:9px}
.col-h .n{background:#F3F4F6;border-radius:8px;padding:1px 8px;font-size:12px;font-weight:600;color:var(--ink);margin-left:2px}
.empty{border:1.5px dashed #DDDFE3;border-radius:14px;background:#F8F9FA}
.hint{border-radius:14px;background:#F3FAF8;border-color:#C8DFDA}
.addc{border-radius:10px;font-weight:500;color:var(--muted)}
.addc:hover{background:#F8F9FA;color:var(--ink)}
.card{border-radius:14px;border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,20,30,.05);transition:border-color .12s,box-shadow .12s,transform .12s}
.card:hover{border-top-color:#D5D7DB;border-right-color:#D5D7DB;border-bottom-color:#D5D7DB;box-shadow:0 8px 20px rgba(20,20,30,.08)}
.card .brand{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.card .title{font-weight:600;letter-spacing:-.005em;line-height:1.3}
.card .agency{color:var(--muted)}
.card .next{border-top:1px solid var(--line);color:var(--ink)}
.card .next::before{color:var(--soft)}
.card.lift{box-shadow:var(--shadow-lg),0 4px 10px rgba(20,20,30,.08);transform:rotate(-2deg) scale(1.03);background:#fff;border-color:#D5D7DB}
.card.lift.over{background:#ECECFA;border-color:var(--accent)}
.card.lift.affc{background:#fff}
.card.ghost{opacity:.3}
.star,.lnk,.scr{border-radius:9px}
.star:hover{background:#FFF7E8}
.lnk:hover,.lnk.on{background:var(--accent-soft)}
.thumb{border-radius:10px;border-color:var(--line)}
.thumb.xl{border-radius:14px}

/* ---------- drawer (one card) ---------- */
.scrim{background:rgba(20,20,30,.28);backdrop-filter:blur(2px)}
.drawer{background:#fff;border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(20,20,30,.14)}
.drawer:not(.sugpanel){width:580px}
.dbar{background:#fff}
.dbar .dbt{letter-spacing:.4px}
.dbar .x,.dbar .trashbtn{border-radius:10px}
.dbar .x:hover{background:#F3F4F6}
.dh .brand{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--muted)}
.dh textarea.h2{font:600 22px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.015em;border-radius:10px}
select.stage{border-radius:999px;background:var(--ink);color:#fff;padding:5px 14px;font-weight:600}
select.stage.t{background:var(--teal);color:#fff}
.nextbox{background:var(--amber-soft);border:1px solid #FDE4B8;border-radius:14px}
.nextbox .lbl{color:#B45309}
.nextbox .lbl input{border-color:#FDE4B8;border-radius:8px}
.drawer .tabs{background:#fff}
.tabs button{font-weight:500}
.tabs button.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.sec h4{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.fields label{color:var(--muted)}
.rowcard,.kit,.notesbox,.retbox,.jobbox,.scriptcard,.pushbox,.sugdraft,details.mail,.emptybox{border-radius:14px}
.rowcard{box-shadow:var(--shadow)}
.kit .r .l{text-transform:none;letter-spacing:0}
.check input,.ptable .pr input[type=checkbox],.task>input[type=checkbox],.crm .ctask input[type=checkbox],.task input[type=checkbox]{accent-color:var(--ink)}
.platpick label{border-radius:999px}
.tl li .s{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}
.x2{border-radius:8px}
.cstats>div{border-radius:12px}
.drawer .cstats>div{background:#F3F4F6}

/* ---------- modals, menus, sheets ---------- */
.modal{background:rgba(20,20,30,.34)}
.modal.pop{background:rgba(20,20,30,.12)}
.mbox{border-radius:20px;box-shadow:0 30px 80px rgba(20,20,30,.28);background:#fff}
.modal.pop .mbox{border-radius:18px;box-shadow:var(--shadow-lg),0 0 0 1px var(--line)}
.mhead h3{font:600 18px Inter,system-ui,sans-serif;letter-spacing:-.01em}
.mhead .x{border-radius:10px}
.mleft{background:#F8F9FA}
.mleft textarea{border-radius:12px}
.mitem{border-radius:12px}
.mitem:hover,.mitem.on{background:#F3F4F6;color:var(--ink)}
.mi{border-radius:11px}
.mi.deal{background:var(--accent-soft);color:var(--accent)}
.mi.paste{background:var(--amber-soft);color:#B45309}
.toast{border-radius:14px;background:var(--ink);box-shadow:0 14px 40px rgba(20,20,30,.28)}
.toast button{color:var(--lime)}

/* ---------- pages: Inbox, Calendar, Archive, Products, Bullet ---------- */
.page-h h1{font:600 26px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.page-h p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:5px}
.eyebrow{font-weight:600;letter-spacing:.06em;color:var(--tab)}
.sug{border-radius:16px;box-shadow:var(--shadow)}
.sug .snip{background:#F8F9FA;border-radius:8px;border-left-color:#D5D7DB}
.prop{border-radius:14px;background:#F6F6FD;border-color:#E1E1F6}
.prop .k{text-transform:none;letter-spacing:0;font-size:12px}
.grp{background:#F8F9FA;border:1px solid var(--line);border-radius:14px}
.grp .it{border-top-color:var(--line)}
.cal{border-radius:14px}
.cal .dow{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;background:#F8F9FA}
.cal .day.out{background:#F8F9FA;color:#B5B9BF}
.cal .day.today,.dayv.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal .ev,.dayv .ev,.agenda .ev{border-radius:7px}
.dayv{border-radius:14px}
.calstat{background:#F3F4F6;color:var(--ink);border-radius:12px}
table.t{border-radius:14px;box-shadow:var(--shadow)}
table.t th{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;background:#F8F9FA}
.ptile{border-radius:14px;box-shadow:var(--shadow)}
.ptile:hover{border-top-color:#D5D7DB;border-right-color:#D5D7DB;border-bottom-color:#D5D7DB;box-shadow:0 8px 20px rgba(20,20,30,.07)}
.pt-title{font-weight:600}
.notesbox{color:var(--ink)}
.wk{border-radius:12px;box-shadow:var(--shadow)}
.wk b{font-family:Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.wk.today{border-color:var(--ink)}
.wk.on{background:var(--ink);border-color:var(--ink);color:#C9CCD2}
.wk.on b,.wk.on i{color:#fff}
.bh{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.bpick.drop .bh::after{text-transform:none}
.tt{border-radius:8px}
.tblock input,.tblock select,.task .asg{border-radius:8px}
.task .tmeta .chip.part{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.trange{color:var(--accent)}
.pgroup{border-radius:12px}
.pgroup summary{font-weight:500}
.padd{color:var(--accent)}
.sched .hr span{background:var(--card)}
.blk{border-radius:8px;box-shadow:var(--shadow)}
.tray{border-radius:12px;border-color:#DDDFE3}
.tchip{border-radius:8px}
.pmore{color:var(--muted)}

/* ---------- CRM ---------- */
.crm .crmnav a.on,.crm .ctabs a.on{color:var(--ink);border-color:var(--ink)}
.crm .ctable{border-radius:16px;box-shadow:var(--shadow)}
.crm .crow.head{text-transform:none;letter-spacing:0;font-size:12px;background:#F8F9FA}
.crm a.crow:hover{background:#F8F9FA}
.crm .cav{border-radius:10px}
.crm .crmhead{border-radius:18px;box-shadow:var(--shadow)}
.crm .crmhead h1{font-size:26px;letter-spacing:-.02em}
.crm .cstats>div{background:#F8F9FA;border-radius:12px}
.crm .ckpis>div{border-radius:14px;box-shadow:var(--shadow)}
.crm .cstats b,.crm .ckpis b,.drawer .cstats b{font:600 22px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.crm .cfacts{border-radius:12px}
.crm .cfacts b{text-transform:none;letter-spacing:0;font-size:12px}
.crm .cbox{border-radius:16px;box-shadow:var(--shadow)}
.crm .cbox h3{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.crm .ctabs .n,.crm .cbox h3 .n{background:#F3F4F6;border-radius:999px;padding:0 7px}
.crm .ctl .i{border-radius:7px}
.crm .ct th{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
.crm .cwork,.crm .cnote,.crm .ctile{border-radius:14px}
.crm .ctile{box-shadow:var(--shadow)}
.crm .cimg{border-radius:10px}
.crm .cimg.lg{border-radius:16px}
.crm .cbar{background:var(--accent)}

/* ---------- Pug: the chat window, the bubble, the pill ---------- */
.chatfab{background:#FFF7EC;border:2px solid var(--ink);box-shadow:0 10px 30px rgba(20,20,30,.18)}
.chatfab.ping::after{background:var(--red)}
.chat{box-shadow:0 24px 60px rgba(20,20,30,.24);background:#fff}
.chead2{background:#fff}
.chead2 b{font:600 16px Inter,system-ui,sans-serif;letter-spacing:-.01em}
.cbody{background:#F8F9FA}
.cm .cb{border-radius:14px}
.cm.me .cb{background:var(--ink);color:#fff}
.cm.ai .cb{background:#fff;border-color:var(--line)}
.cact{border-radius:12px}
.cfoot{background:#fff}
.ccats button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ccats button,.cprompts button,.ccprompts button{background:#fff}
.cprompts button:hover,.ccprompts button:hover{border-color:var(--ink)}
.cform textarea{border-radius:12px}
.cform .btn{border-radius:12px}
.cdots i{background:var(--ink)}
.cclip{border-radius:12px}
.cclip:hover{color:var(--ink);border-color:var(--ink)}
.chatpill{border-color:var(--ink);background:#fff;box-shadow:0 10px 30px rgba(20,20,30,.18)}
.chatpill .pugav{background:#FFF7EC}
.chatpill.ping::after{background:var(--red)}
.voice.listening .vring{border-color:var(--ink)}
.hrow .hopen:hover{background:#F3F4F6}
.hrow .hopen{border-radius:10px}

/* ---------- notifications, attention chips, team ---------- */
.achip{box-shadow:var(--shadow)}
.note.new{background:#F6F6FD}
.nday{text-transform:none;letter-spacing:0;font-size:12px}
.tm-row{border-radius:12px}
.av{background:#F2C9B3;color:#7A3E1F}
.asgchip{background:var(--accent-soft);color:var(--accent)}

/* ---------- sign in ---------- */
.signin{border-radius:20px;box-shadow:0 20px 60px rgba(20,20,30,.08);margin-top:10vh}
.signin .btn{border-radius:12px}
.signin .gbtn{box-shadow:var(--shadow)}

/* ---------- spacing for iPad landscape and desktop only; phones keep every style.css phone rule ---------- */
@media (min-width:761px){
  .btn{padding:8px 13px;font-size:13px}
  .btn.sm{padding:5px 10px;font-size:12px}
  .search{padding:9px 12px 9px 34px}
  .pill{padding:6px 12px}
  .seg button{padding:6px 13px}
  .box{padding:16px 18px}
  .strip{gap:12px;padding:22px 24px 6px;grid-template-columns:1.8fr repeat(3,1fr)}
  .filters{padding:16px 24px 10px}
  .lane-h{padding:8px 24px 6px}
  .board{gap:14px;padding:4px 24px 28px}
  .col,.board.aff .col,.board.trybe .col{padding:0 1px 6px}
  .board.aff .col[data-stage="need_links"]{padding:0 6px 6px}
  .col-h{padding:4px 4px 12px}
  .empty{padding:18px}
  .addc{padding:8px 10px}
  .card{padding:14px;margin-bottom:12px}
  .card .brand{font-size:12px}
  .card .title{font-size:14.5px;margin:3px 0 0}
  .card .agency{font-size:12.5px;margin-top:2px}
  .card .row{margin-top:10px;gap:6px}
  .card .next{margin-top:11px;padding-top:10px;font-size:13px}
  .col.declined .card{padding:11px 14px}
  .dbar{padding:6px 10px 6px 22px;padding-top:calc(6px + env(safe-area-inset-top))}
  .drawer .tabs{top:calc(53px + env(safe-area-inset-top))}
  .dbar .dbt{font-size:11px}
  .kit .r{padding:10px 12px}
  .mhead{padding:16px 22px}
  .page{padding-top:24px}
  .page-h{margin-bottom:18px}
  .pgrid{gap:14px}
  .week{gap:8px}
  .wk b{font-size:18px}
  .chat{border-radius:20px}
}
/* between the sidebar appearing (1101) and roomy laptops: keep the board filters on one row */
/* with the sidebar, Due this week gets a bigger share of the strip so its lines keep version 1's length */
@media (min-width:1101px){.strip{grid-template-columns:2.2fr repeat(3,minmax(0,1fr))}.strip:has(#trybe-target){grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}}
@media (min-width:1101px) and (max-width:1500px){
  .filters .search{flex:0 1 190px}
  .seg button{padding:6px 11px}
  .achip>a,.achip>button:not(.ax){padding:5px 4px 5px 10px}
}
/* phones: the same chrome as version 1, white finish; small wordmark so the top bar fits at 375px */
@media (max-width:1100px){
  .mtabs{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .mtabs a.on{background:#F3F4F6;color:var(--ink)}
  .mtabs a.on svg{stroke:var(--tab)}
}
@media (max-width:760px){
  .top{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .logo{font-size:17px}
  .logo::before{width:24px;height:24px;margin-right:7px;border-radius:7px}
  .top .claudebtn{padding:6px 10px 6px 8px}
  .box{border-radius:14px}
  .card{border-radius:12px}
  .seg{border-radius:11px}
  .mbox{border-radius:18px 18px 0 0}
  .mhead,.mfoot{background:#fff}
  .ptile .pt-top .chip{box-shadow:none}
  /* stat widgets keep version 1's compact phone type */
  .box h3{font-size:12.5px;margin-bottom:6px}
  .stat h3{font-size:11px;margin-bottom:3px;line-height:1.2}
  .stat .num{font-size:20px;margin-top:auto}
  .stat .sub{font-size:11.5px}
  .chat{border-radius:0;box-shadow:none}
}
@media (pointer:coarse){
  .tabs button{padding:11px 12px}
}