/* Owner Clarity, shared design system (refresh, 7 Aug 2026)
   Palette locked: navy #303B58, butter #F3CF8F, cream #F0EDE4
   Type locked: Georgia serif headings, Inter body */

/* Stage 256c (Kelsey's mark: Evening headings): Cormorant Garamond, the face in the Home by Six logo, sized up so it reads like the old Georgia */
@font-face{font-family:"HB Serif"; font-style:normal; font-weight:400 700; font-display:swap; size-adjust:116%;
  src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  /* Stage 256 (Kelsey 5 Oct 2026): Evening with stone, soft butter buttons, no gold anywhere. Old values in _backup/2026-10-05-stage256/hub/hub.css */
  --navy:#31394F; --navy-deep:#262C3D; --navy2:#414A63;
  --butter:#F4CD92; --buttersoft:#FAE6C4;
  --canvas:#F6F2EC; --cream:#F6F2EC; /* stone, never green */
  --card:#FFFDF9; --card-alt:#FAF6F0;
  --line:#E6DED2; --border:#E6DED2;
  --ink:#2B3247; --ink-muted:#6B7186; --ink-faint:#9CA1B2;
  /* "Good" was a leaf green and green is off brand. It is now deep navy on butter,
     so a settled state reads as calm and finished in our own colours. One change
     here retires green from every page at once. Kelsey, 28 Aug. */
  --good:#303B58; --good-bg:#F8E3BC;
  --warnc:#9A5B24; --warn-bg:#F7E9D6;
  --urgentc:#963D46; --urgent-bg:#F4E2E2;
  --gold:#F4CD92; --label-ink:#5E6577; --hfont:"HB Serif",Georgia,serif; --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--cream); font-family:Inter,system-ui,sans-serif; color:var(--ink); line-height:1.5; font-size:14px; -webkit-font-smoothing:antialiased;}
a{color:var(--navy);}
h1,h2,h3{font-family:var(--hfont); font-weight:500;}

/* ============ SHELL + SIDEBAR ============ */
.shell{display:flex; min-height:100vh;}
aside{width:236px; min-width:236px; background:var(--navy); color:#E9E6DC; display:flex; flex-direction:column; padding:26px 16px 22px;}
.brand{padding:0 12px 20px;}
.brand .mark{font-family:var(--hfont); font-size:21px; color:#fff; letter-spacing:.2px;}
.brand .sub{font-size:10.5px; color:#A8B0C6; letter-spacing:.12em; text-transform:uppercase; margin-top:3px;}
/* Stage 202 (1 Oct 2026): the clinic's own logo at the top of the sidebar, the app name small at the bottom */
.brand.haslogo{padding:0 12px 16px;}
.brand .brandlogo{display:block; max-width:176px; max-height:64px; width:auto; height:auto;}
.brand .logopanel{display:inline-block; background:#F8F5EE; border-radius:10px; padding:8px 10px;}
.kbsig{font-family:var(--hfont); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#8A93AC; padding:12px 12px 0; text-align:left;}
.kbsig::after{content:""; display:block; width:22px; height:1px; background:#F4CD92; margin-top:6px;}
/* legacy brand bits, kept harmless */
.kbmark{width:38px; height:38px; min-width:38px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--hfont); font-weight:700;}
.brand b{font-family:var(--hfont); font-weight:400; font-size:21px; color:#fff;}
.brand i{font-family:var(--hfont); color:#fff; font-style:normal; font-size:21px;}
.brand small{display:block; letter-spacing:.12em; font-size:10.5px; color:#A8B0C6; margin-top:3px; text-transform:uppercase;}

.ws{display:flex; gap:4px; background:rgba(255,255,255,.09); border-radius:10px; padding:4px; margin:0 8px 14px;}
.ws a{flex:1; text-align:center; font-size:12px; padding:6px 4px; border-radius:7px; color:#C6CCDB; text-decoration:none; font-weight:600;}
.ws a.on{background:var(--butter); color:var(--navy);}

aside nav{display:flex; flex-direction:column; gap:2px;}
aside nav a{display:flex; align-items:center; gap:11px; color:#FFFFFF; text-decoration:none; font-size:13.5px; padding:10px 12px; border-radius:10px;}
aside nav a .dot{width:7px; height:7px; border-radius:50%; background:#5A6683; flex-shrink:0;}
aside nav a.on{background:rgba(241,237,231,.15); color:#F1EDE7; font-weight:600; box-shadow:inset 3px 0 0 var(--butter);}   /* Stage 256c, Kelsey marked Evening: a soft cream tint, not a solid butter block */
aside nav a.on .dot{box-shadow:0 0 0 2px rgba(241,237,231,.35);}
aside nav a:hover{background:var(--navy2);}
aside nav a.on:hover{background:rgba(241,237,231,.2);}
aside nav a .count{margin-left:auto; background:rgba(255,255,255,.14); color:#fff; border-radius:99px; font-size:11px; padding:1px 8px; font-weight:600;}
aside nav a.on .count{background:var(--butter); color:var(--navy);}
aside .navlabel{letter-spacing:.14em; font-size:10.5px; color:#8A93AC; text-transform:uppercase; margin:16px 12px 6px;}
aside nav.tools a{font-size:12.5px; color:#F2F4F9; padding:7px 12px;}
aside nav.tools a.on{background:var(--butter); color:var(--navy);} /* the active pill must be navy on butter, readable */
aside nav.tools a .dot{display:none;}
.asidefoot{margin-top:auto; padding:12px 12px 0; display:flex; gap:10px; align-items:center; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px;}
.kbav{width:32px; height:32px; min-width:32px; border-radius:50%; background:var(--butter); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.asidefoot .who{font-size:12.5px; color:#fff;}
.asidefoot .rolelbl{font-size:11px; color:#8A93AC;}

/* ============ MAIN ============ */
main{flex:1; min-width:0;}
.topbanner{background:var(--card-alt); color:#5E6577; text-align:center; letter-spacing:.13em; font-size:10px; font-weight:700; text-transform:uppercase; padding:6px 10px; border-bottom:1px solid var(--line);}
.wrap{max-width:1180px; margin:0 auto; padding:30px 36px 70px;}
.eyebrow{letter-spacing:.14em; font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; margin-bottom:6px;}
h1.pagetitle{font-family:var(--hfont); font-weight:400; font-size:30px; color:var(--navy); letter-spacing:.2px; margin-bottom:2px;}
.pagesub{color:var(--ink-muted); font-size:13px; margin:4px 0 22px; max-width:80ch;}
.topline{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.topline h1{font-size:30px; color:var(--navy); letter-spacing:.2px;}
.topline .date{font-size:13px; color:var(--ink-muted); margin-top:6px;}
.topline .actions{display:flex; gap:10px; flex-wrap:wrap;}

/* buttons */
.btn{font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:600; border-radius:10px; padding:10px 16px; border:1px solid var(--line); background:var(--card); color:var(--navy); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:0 0 auto;}
.btn.primary,.btn.next{background:var(--butter); border-color:#F4CD92; color:var(--navy);}
.btn.small{padding:6px 12px; font-size:12px; border-radius:8px;}
.primary{padding:11px 22px; background:var(--butter); color:var(--navy); border:1px solid #F4CD92; border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;}
.primary[disabled]{opacity:.55;}
.mini{padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:8px; font-size:12px; font-weight:600; color:var(--navy); cursor:pointer;}
.mini.next{background:var(--butter); border-color:#F4CD92; color:var(--navy);}
.mini.gold{background:var(--butter); border-color:#F4CD92; color:var(--navy);}
/* Gold frame for the top cards on Team, Socials and Owner HQ, per Kelsey (24 Aug) */
.tiles.goldtop .tile{border:1.5px solid #F4CD92;}
.card.goldtop{border:1.5px solid #F4CD92;}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-bottom:22px;}
.tiles.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 16px; text-decoration:none; color:var(--ink); display:block;}
.tile .label{font-size:12px; color:var(--ink-muted); letter-spacing:.02em;}
.tile .value{font-family:var(--hfont); font-size:33px; color:var(--navy); line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums;}
.tile .note{font-size:12px; margin-top:6px; color:var(--ink-muted);}
.tile .note.good{color:var(--good);}
.tile .note.warn{color:var(--warnc);}
.tile .note.urgent{color:var(--urgentc);}
.tile.accent{background:var(--navy); border-color:var(--navy);}
.tile.accent .label{color:#B9C0D4;}
.tile.accent .value{color:var(--butter);}
.tile.accent .note{color:#C9CFDF;}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; min-width:0; overflow-wrap:break-word;}
.card > *{min-width:0;}
.card h2{font-family:var(--hfont); font-size:18px; font-weight:400; color:var(--navy); margin-bottom:2px;}
.card .sub{color:var(--ink-muted); font-size:12px; margin-bottom:12px;}
.chead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.chead h2{margin-bottom:0;}
.chead .hint{font-size:12px; color:var(--ink-muted);}
.chead + .sub{margin-top:2px;}

/* chips */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; border-radius:99px; padding:2.5px 9px; white-space:nowrap;}
.chip.navy{background:var(--hubtint, #E3E6EF); color:var(--navy);}   /* Stage 256b: each hub's pills take its own colour */
.chip.butter{background:var(--buttersoft); color:#31394F;}
.chip.good{background:var(--good-bg); color:var(--good);}
.chip.warn{background:var(--warn-bg); color:var(--warnc);}
.chip.urgent{background:var(--urgent-bg); color:var(--urgentc);}
.chip.line{background:transparent; border:1px solid var(--line); color:var(--ink-muted); font-weight:500;}

/* rows */
.row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #EAE5D8; flex-wrap:wrap;}
.row:first-of-type{border-top:none;}
.row .who{min-width:0; flex:1;}
.row .who .name{font-weight:600; font-size:13.5px; color:var(--ink);}
.row .who .meta{font-size:12px; color:var(--ink-muted); margin-top:1px;}
.row .end{margin-left:auto; display:flex; align-items:center; gap:7px; flex-shrink:0; flex-wrap:wrap;}
.avatar{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; background:#E3E6EF; color:var(--navy); flex-shrink:0;}
.avatar.b{background:var(--buttersoft); color:#31394F;}
.avatar.g{background:var(--good-bg); color:var(--good);}

/* forms */
label{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5E6577; margin:12px 0 6px;}
input[type=text],input[type=date],input[type=month],input[type=time],input[type=email],input[type=search],input[type=number],select,textarea{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13px; background:#fff; min-width:0; max-width:100%;}
.gate{max-width:480px; margin:70px auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:38px 28px;}
.gate h2{font-family:var(--hfont); color:var(--navy); margin-bottom:8px; font-weight:400;}
.hide{display:none !important;}
.pill{display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#5E6577; padding:8px 6px; border-bottom:1px solid var(--line); text-align:left;}
td{padding:9px 6px; border-bottom:1px solid #efeadd; vertical-align:top; overflow-wrap:anywhere;}
.muted{color:var(--ink-muted);}
.ok{color:var(--good);}
.warn{color:var(--urgentc);}
.footnote{margin-top:22px; font-size:12px; color:var(--ink-faint); text-align:center;}
div[class]{min-width:0;}
img,canvas,svg,iframe{max-width:100%;}

/* the sidebar is now the whole menu, so it scrolls on its own and stays put */
aside{position:sticky; top:0; height:100vh; overflow-y:auto;}

/* ---- phone menu: one button top left, the sidebar slides in over the page ---- */
#kbNavBtn{display:none; position:fixed; top:10px; left:10px; z-index:1002; width:42px; height:42px; border-radius:12px; background:var(--navy); border:none; cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between;}
#kbNavBtn span{display:block; height:2px; background:var(--butter); border-radius:2px;}
#kbNavScrim{display:none; position:fixed; inset:0; z-index:1000; background:rgba(28,34,52,.45);}

@media(max-width:880px){
  aside{position:fixed; top:0; left:0; z-index:1001; width:250px; min-width:250px; height:100vh; transform:translateX(-100%); transition:transform .22s ease; padding:64px 16px 22px;}
  .shell.navopen aside{transform:translateX(0);}
  .shell.navopen #kbNavScrim{display:block;}
  #kbNavBtn{display:flex;}
  .topbanner{padding-left:60px; padding-right:14px;}
  .wrap{padding:20px 14px 70px;}
  .topline{align-items:flex-start; flex-direction:column;}
}

/* Meeting notes card, KB's branded meeting-minutes look, shared by ownerhq/meetings, My page and Staff page */
.kbmeet{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
.kbmeet-letter{font-size:10px; letter-spacing:.18em; color:var(--navy); text-transform:uppercase; font-weight:700;}
.kbmeet-title{font-family:var(--hfont); font-size:19px; color:var(--navy); margin-top:4px;}
.kbmeet-meta{font-size:11.5px; color:#8b8d93; font-style:italic; margin-top:2px;}
.kbmeet-rule{height:1px; background:var(--line); margin:12px 0;}
.kbmeet-h{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); font-weight:700; margin:10px 0 4px;}
.kbmeet-h:first-of-type{margin-top:0;}
.kbmeet-b{font-size:13.5px; color:var(--ink); padding:2px 0; line-height:1.5;}
.kbmeet-b.star{color:#31394F; font-weight:600;}
.kbmeet-person{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8b8d93; font-weight:700; margin:8px 0 2px;}
.kbmeet-task{font-size:13.5px; padding:2px 0;}
.kbmeet-task.done{color:#a9a89f; text-decoration:line-through;}
.kbmeet-list-row{padding:10px 0; border-top:1px solid #EAE5D8; cursor:pointer;}
.kbmeet-list-row:first-of-type{border-top:none;}
.kbmeet-list-row .d{font-family:var(--hfont); font-size:14.5px; color:var(--navy);}
.kbmeet-list-row .s{font-size:12px; color:#8b8d93; margin-top:1px;}

/* Team calendar, month grid combining rota shifts and leave (approved + pending) */
.kbcal{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.kbcal-head{display:grid; grid-template-columns:repeat(7,1fr); background:var(--card-alt); border-bottom:1px solid var(--line);}
.kbcal-head div{padding:6px 8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#5E6577; font-weight:700; text-align:center;}
.kbcal-grid{display:grid; grid-template-columns:repeat(7,1fr); background:var(--line); gap:1px;}
.kbcal-day{background:#fff; min-height:88px; padding:6px; display:flex; flex-direction:column; gap:3px;}
.kbcal-day.out{background:var(--card-alt);}
.kbcal-day.today{background:var(--buttersoft);}
.kbcal-num{font-size:11.5px; font-weight:700; color:var(--navy);}
.kbcal-day.out .kbcal-num{color:#c7c2b2;}
.kbcal-items{display:flex; flex-direction:column; gap:2px;}
.kbcal-chip{font-size:10.5px; line-height:1.3; padding:1px 5px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kbcal-chip.shift{background:#E3E6EF; color:var(--navy);}
.kbcal-chip.holiday{background:var(--good-bg); color:var(--good);}
.kbcal-chip.leave-approved{background:var(--good-bg); color:var(--good);}
.kbcal-chip.leave-pending{background:var(--warn-bg); color:var(--warnc); border:1px dashed var(--warnc);}
/* holiday/leave read as one continuous block across the days they cover, edge to edge in the cell, like the rota export */
.kbcal-chip.block{margin:0 -6px; padding:4px 6px; border-radius:0; font-weight:700; color:#fff; text-align:center; text-overflow:clip; white-space:normal;}
.kbcal-chip.block.holiday{background:var(--good); color:#fff;}
.kbcal-chip.block.leave-approved{background:var(--good); color:#fff;}
.kbcal-chip.block.leave-pending{background:var(--warnc); color:#fff; border:none;}
.kbcal-legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--ink-muted);}
.kbcal-legend .sw{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:middle;}
@media(max-width:700px){.kbcal-day{min-height:60px;} .kbcal-chip{font-size:9.5px;}}

/* Calmer red for overdue Priority cards, one place to change it */
:root{--calmred:#B5737D; --calmred-deep:#9d5f68;}

/* ============ SHARED TASK FURNITURE (26 Aug) ============
   Every board shows the same strip under a task: what state it is in, when it
   last moved, who moved it. Same size everywhere, Team, Owner HQ and Socials. */
.tkstatus{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:7px;}
/* Quiet by design. These sit under every task on every board, so they whisper
   the state rather than shouting it (26 Aug, they looked out of place). */
.tkstate{font-size:10.5px; font-weight:600; border-radius:99px; padding:1.5px 9px; white-space:nowrap; letter-spacing:.01em; border:1px solid transparent;}
.tkstate.doing{background:#FBF3E2; border-color:#EEDCB6; color:#8A6B2A;}
.tkstate.open{background:transparent; border-color:#E4E1D6; color:#9DA1AC;}
.tkstate.done{background:var(--good-bg); border-color:var(--line); color:var(--good);}
.tkstate.stale{background:transparent; border-color:#E6C9CC; color:#A9636C;}
/* waiting is a sentence, not a badge: a quiet aside with a hairline beside it */
.tkstate.waiting{background:transparent; border:none; border-left:2px solid #E4CDA4; border-radius:0;
  padding:1px 0 1px 9px; color:#8A6B2A; font-weight:500; font-style:italic; font-size:11.5px;
  white-space:normal; flex-basis:100%; line-height:1.5;}
.tklast{font-size:10.5px; color:#a1a4ad;}
.tkexact{color:#c2c4cb;}
.tkwho{font-size:11px; font-weight:700; background:var(--butter); color:var(--navy); border-radius:99px; padding:2px 9px;}

/* notes thread on a task */
.tknew{background:#FBF6EA; border-left:3px solid #F4CD92; border-radius:8px; padding:6px 10px; margin:7px 0 2px;}
.tknew b{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#5E6577; font-weight:700;}
.tknew .w{font-size:10.5px; color:#a1937a; margin-left:6px;}
.tknew .b{font-size:12.5px; line-height:1.5; color:#3D4358; margin-top:2px;}
.tknotes{margin-top:8px; border-top:1px dashed #E4DFD0; padding-top:8px;}
.tknote{font-size:12.5px; line-height:1.5; padding:5px 0; border-top:1px solid #F0ECE1;}
.tknote:first-child{border-top:none;}
.tknote b{color:var(--navy); font-weight:600;}
.tknote .tkwhen{font-size:10.5px; color:#a1a4ad; margin-left:5px;}
.tknoteadd{display:flex; gap:6px; margin-top:7px;}
.tknoteadd input{flex:1; font-size:12.5px; padding:6px 9px; border-radius:8px;}
.act.hasnotes{background:var(--buttersoft); border-color:#e3c9a5; color:#31394F; font-weight:700;}

/* Sent by me panel */
.sentpanel{background:#FBFAF6; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px;}
.sentrow{padding:9px 0; border-top:1px solid #EFEADD;}
.sentrow:first-child{border-top:none;}
.sentrow.done{opacity:.55;}
.sentrow.stale .s-t{color:var(--urgentc);}
.sentrow .s-t{font-size:13px; line-height:1.45;}
.sentrow .s-m{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:4px;}
.sentrow .s-m .tkstatus{margin-top:0;}
.sentrow .act{margin-top:6px;}

/* Action pills on task cards. Defined once so Team, Owner HQ and Socials cards are
   the same size everywhere (R-Marni's were twice the height, 26 Aug). */
.act{border:1px solid var(--line); background:#fff; border-radius:14px; padding:2px 9px; font-size:11.5px; color:#41484E; cursor:pointer; font-family:inherit;}
.act:disabled{opacity:.5;}
.act.done{background:var(--navy); border-color:var(--navy); color:#F3CF8F; font-weight:700;}

/* Waitlist + failed membership payments, one card with two pills */
.segs{display:inline-flex; gap:4px; background:#EFEBE0; border-radius:99px; padding:4px;}
.seg{border:none; background:none; border-radius:99px; padding:6px 15px; font-family:var(--hfont); font-size:14.5px; color:#7a7d88; cursor:pointer;}
.seg.on{background:var(--butter); color:var(--navy); font-weight:600;}
.wlform{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; align-items:end; margin-top:10px;}
.wlform label{margin:0 0 4px;}
.wlform input{font-size:13px;}
.wlrow{padding:10px 0; border-top:1px solid #EFEADD;}
.wlrow:first-child{border-top:none;}
.wlrow .s-t{font-size:13.5px;}
.wlrow .s-m{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:4px;}
.wlrow .act{margin-right:4px;}

/* ============ HOW LAYOUTS COLLAPSE ============
   Replaced 27 Aug, was the squeeze band of 26 Aug. The old rule keyed on WINDOW width and flattened eight layouts to a
   single column with !important across the whole 881px to 1240px band. That killed two
   column working on an iPad in landscape everywhere in the app, and it overrode the
   sensible breakpoint each page had already set for itself.

   The real problem was never the window, it was that the sidebar eats 236px of it, so a
   page never knew how much room it actually had. These container queries measure the
   CONTENT box instead, so every layout collapses exactly when it runs out of room and
   not a pixel before. Page level breakpoints stay as the fallback for any browser that
   does not do container queries. */
.wrap{container-type:inline-size; container-name:kbwrap;}

/* Four across needs roughly 940px of real content width, two across roughly 460px. */
@container kbwrap (max-width:940px){
  .wrap .board, .wrap .oboard, .wrap .approvals{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container kbwrap (max-width:460px){
  .wrap .board, .wrap .oboard, .wrap .approvals{ grid-template-columns:minmax(0,1fr); }
}
/* A main column beside a sidebar column needs roughly 760px before it starts crushing. */
@container kbwrap (max-width:760px){
  .wrap .layout, .wrap .cols2, .wrap .plmain, .wrap .cols, .wrap .layout2{
    grid-template-columns:minmax(0,1fr);
  }
  .wrap .wlcol{position:static;}
}
@media(max-width:1240px){ .wrap{padding-left:22px; padding-right:22px;} }
/* Nothing in a grid or flex row may push its track wider than its share. */
.layout > *, .cols2 > *, .plmain > *, .cols > *, .layout2 > *,
.board > *, .oboard > *, .tiles > *, .approvals > *{min-width:0; max-width:100%;}
/* Stage 130 (Kelsey: "1 word should stay on 1 line"): this was overflow-wrap:anywhere, which lets a tight column
   break a word letter by letter (Equipmen / t). break-word only ever splits a word that cannot fit a whole line. */
.tk, .tcard, .mcard, .pcard, .apcard, .tile, .card{overflow-wrap:break-word; word-break:normal; hyphens:none;}
/* Long rows of small controls wrap instead of forcing the card wider. */
.actrow, .t-actions, .lapsedit, .wlform, .hoquick, .quicktally, .subaddgrid, .fgrid{flex-wrap:wrap;}

/* Has the patient opened her plan? Used on Team Today and on her thread. */
.opchip{display:inline-block; border-radius:999px; padding:1px 8px; font-size:10.5px; font-weight:700;
  vertical-align:middle; background:#e6efe4; color:#4f6b45;}
.opchip.no{background:#f6e3dd; color:#9c4536;}


/* ============ STAGE FOLDS ============
   One heading per stage of the work, with the count and what is outstanding.
   Used by Team Today and Patients & Plans so the two pages read the same.
   Kelsey, 31 Aug. */
/* Every stage folds. Kelsey, 28 Aug: the column was one long scroll with no way to
   put a finished stage away. Titles say the stage and what is outstanding. */
.stagefold{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none;
  border:0; border-bottom:1px solid var(--line); padding:10px 4px 7px; margin:12px 0 4px; cursor:pointer; min-height:44px;}
.stagefold:hover .sfname{color:var(--navy);}
.stagefold .sfcar{font-size:11px; color:#9c8b5e; width:12px; flex:0 0 12px; transition:transform .15s;}
.stagefold.shut .sfcar{transform:rotate(-90deg);}
.stagefold .sfname{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9c8b5e;}
.stagefold .sfdo{font-size:11.5px; color:#8a8e95; font-weight:400; letter-spacing:0; text-transform:none;}
.stagefold .sfn{margin-left:auto; font-size:11px; font-weight:700; color:var(--navy);
  background:var(--butter); border:1px solid var(--line); border-radius:999px; padding:2px 9px;}
/* Stage 139 (Kelsey 21 Sept): the follow-up header is a red card, the whole thing, so the messages to send stand out. */
.stagefold.urgent{background:var(--urgent-bg); border:1px solid var(--urgentc); border-radius:12px; padding:12px 14px; margin:12px 0 6px;}
.stagefold.urgent .sfname{color:var(--urgentc);}
.stagefold.urgent .sfdo{color:#9a5b61;}
.stagefold.urgent .sfcar{color:var(--urgentc);}
.stagefold.urgent .sfn{background:var(--urgentc); color:#fff; border-color:var(--urgentc);}
.stagefold.urgent:hover .sfname{color:var(--urgentc);}

/* Stage 24 (8 Sept 2026, Kelsey): "check layouts fit on any device". Found on her phone: the petty
   cash date box ran across its neighbour. iOS Safari gives a date input a fixed natural width and
   ignores width:100% until appearance is switched off, and a grid cell will not shrink below its
   content unless told. Three safety nets, for every page at once. */
input[type=date],input[type=time],input[type=month]{-webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; min-height:44px; text-align:left;}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value{text-align:left;}
/* every grid the app draws: no cell wider than its track */
.actiongrid > *,.addgrid > *,.addrow > *,.addrow2 > *,.bcgrid > *,.bucketrow > *,.campgrid > *,.clgrid > *,.countgrid > *,.dgrid > *,.drow > *,.dygrid > *,.dymonths > *,.feerow > *,.fgrid > *,.gallery > *,.goalgrid > *,.goalrow > *,.guide > *,.handylinks > *,.ideagrid > *,.itemrow > *,.lanes > *,.lapsgrid > *,.leadrow > *,.lists > *,.mcards > *,.pcform > *,.pchips > *,.pgrid > *,.prow > *,.res > *,.shelves > *,.socboard > *,.socgrid > *,.stack > *,.steppers > *,.steps3 > *,.streamrow > *,.subaddgrid > *,.two > *,.wlform > *,.wlgrid2 > *,
.wrap [style*="display:grid"] > *,.wrap [style*="display: grid"] > *{min-width:0; max-width:100%;}
/* long links and words in messages wrap instead of pushing the page sideways */
.wrap{overflow-wrap:break-word;}
.wrap img,.wrap svg,.wrap video,.wrap iframe{max-width:100%;}
/* a wide table scrolls inside its card on a phone, the page itself never scrolls sideways */
@media(max-width:700px){
  .wrap table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .wrap pre{white-space:pre-wrap;}
}

/* ============ Stage 118 (20 Sept 2026, Kelsey): the shared shapes for the four owner pages ============
   The rules from the layout chat: one sentence under the title, three or four tiles, every row the
   same shape (initials, name, one line, one chip, one button), every card a door to its own page,
   nothing overhangs on any device. These add to what is above, nothing above is changed.
   Green: Kelsey allowed a muted sage for "up, good" only (20 Sept). Everything else stays navy, butter, rose. */
:root{ --up:#4E6B4A; --up-bg:#E6EDE3; --rose:#9C4A33; --rose-bg:#F3DED6; }
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1100px){.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:860px){.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.tiles.four,.tiles.three{grid-template-columns:minmax(0,1fr);}}
.tile{position:relative;}
.tile .k{font-family:var(--hfont); font-size:16px; color:var(--navy); margin-bottom:6px;}
/* the door: a small "→ where" in the top right corner of a tile or card, the whole thing is the link */
.door{position:absolute; top:12px; right:14px; font-size:12px; color:var(--ink-muted); text-decoration:none; white-space:nowrap;}
.tile.accent .door{color:var(--butter);}
/* Stage 129 (Kelsey): navy tiles had navy headings and black rows, unreadable. Every word on a navy tile is light. */
.tile.accent .k, .tile.accent .line b, .tiles.rows .tile.accent .line .t b{color:#F6F1E4;}
.tile.accent .line span, .tiles.rows .tile.accent .line .t span, .tiles.rows .tile.accent .why, .tile.accent .muted{color:#C9CFDF;}
.tile.accent .line{border-color:rgba(255,255,255,.14);}
.tile.accent .av{background:rgba(255,255,255,.14); color:#F3CF8F;}
.tile.accent .chip{background:#F6F1E4; color:var(--navy); border-color:#F6F1E4;}
.card{position:relative;}
.card > h2{padding-right:96px;}
@media(max-width:560px){.card > h2{padding-right:0;} .card > .door{position:static; display:block; margin-bottom:6px;}}
/* the row, one shape everywhere: initials circle, name and one line, chip, one button */
.row .ini{width:30px; height:30px; border-radius:50%; background:var(--card-alt); color:var(--navy); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--line);}
.row .ini.navy{background:var(--navy); color:var(--butter); border-color:var(--navy);}
.row .who .name,.row .who .meta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* a bar line: label, bar, number. Used for buckets, year at a glance, the team in the month */
.bar{display:grid; grid-template-columns:96px minmax(0,1fr) 84px; gap:10px; align-items:center; font-size:13px; padding:5px 0;}
.bar .t{height:9px; background:var(--card-alt); border:1px solid var(--line); border-radius:99px; overflow:hidden;}
.bar .t i{display:block; height:100%; background:var(--navy); border-radius:99px;}
.bar .t i.butter{background:var(--butter);} .bar .t i.rose{background:#C89A8B;} .bar .t i.up{background:#8FA98A;}
.bar .n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
@media(max-width:560px){.bar{grid-template-columns:72px minmax(0,1fr) 72px;}}
/* up or down against last month, never just a number */
.up{color:var(--up); font-weight:700;} .down{color:var(--rose); font-weight:700;} .flat{color:var(--ink-muted); font-weight:600;}
.chip.up{background:var(--up-bg); color:var(--up);} .chip.rose{background:var(--rose-bg); color:var(--rose);}
/* a folded strip for something discreet at the bottom of a page, like Comply's sent to the team */
details.fold{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 18px; margin-bottom:16px;}
details.fold summary{cursor:pointer; font-size:13px; color:var(--ink-muted); list-style:none;}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary::before{content:"▸ "; color:var(--navy);} details.fold[open] summary::before{content:"▾ ";}
/* nothing overhangs: any two or three column band stacks on a phone */
.cols3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px;}
.cols3 > .card{margin-bottom:0;}
@media(max-width:1100px){.cols3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.cols3{grid-template-columns:minmax(0,1fr);}}
/* Stage 119b: the back link at the top of every hub page */
#kbBack{display:inline-block; font-size:12.5px; color:var(--ink-muted); text-decoration:none; margin:0 0 10px; padding:4px 0;}
#kbBack:hover{color:var(--navy); text-decoration:underline;}

/* Stage 119d: a card with a door is a door. */
.card:has(> .door[href]), .card:has(> .chead .door[href]){cursor:pointer;}
.card:has(> .door[href]):hover, .card:has(> .chead .door[href]):hover{border-color:#C9BFAE;}

/* Stage 126: Trello-style task tiles. The face is small; open the tile for everything else. */
.tk.tk2{cursor:pointer; padding:10px 12px; transition:box-shadow .15s;}
.tk.tk2:hover{box-shadow:0 2px 10px rgba(49,57,79,.08);}
.tk.tk2 > b{font-size:13px; font-weight:500; line-height:1.35;}
.tk.tk2 .meta{margin-top:5px; font-size:11px;}
.tk.tk2 .tkstatus{margin-top:5px;}
.tk.tk2 .tkstatus .tkstate{font-size:9.5px; padding:1px 7px;}
.tk.tk2:not(.open) .tkstatus .tklast{display:none;}
.tk.tk2 .tknew{padding:4px 8px; margin:5px 0 0; font-size:11px;}
.tk.tk2 .tknew b{font-size:10px;} .tk.tk2:not(.open) .tknew .b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tk.tk2:not(.open) .actrow{margin-top:6px;}
.tk.tk2:not(.open) .actrow .act:not(.face){display:none;}
.tk.tk2:not(.open) .tedit, .tk.tk2:not(.open) .tknotes{display:none !important;}
.tk.tk2 .actrow .act.face{background:var(--navy); color:var(--butter); border-color:var(--navy); font-weight:600;}
/* Stage 129e (Kelsey): one title font on every tile, PRIORITY stays as the thin bar along the bottom (the page's own
   .tk.prio::after), and "open ›" is a real element the decorator adds, so the two never fight. */
.tk.tk2 > b, .tk.tk2.prio > b{font-family:inherit; font-size:13.5px; font-weight:500; color:#2f3548; line-height:1.4;}
.tk.tk2 .tkopen{float:right; font-size:10.5px; color:var(--ink-muted); margin-top:-16px; font-family:inherit; font-weight:400; letter-spacing:0;}
.tk.tk2.open .tkopen{display:none;}
.tk.tk2 .meta .whopill, .tk.tk2 .meta .duepill, .tk.tk2 .meta .from, .tk.tk2 .meta .due{font-family:inherit; font-size:11px;}
/* Stage 129d: latest note on one line when the tile is closed, so tiles stay short */
.tk.tk2:not(.open) .tknew{display:flex; gap:6px; align-items:baseline; padding:3px 8px; margin:5px 0 0; white-space:nowrap; overflow:hidden;}
.tk.tk2:not(.open) .tknew b{flex:none;} .tk.tk2:not(.open) .tknew .w{flex:none; margin-left:0;} .tk.tk2:not(.open) .tknew .b{margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px;}
.tk.tk2:not(.open) .meta .from{display:none;}
/* Stage 129d: quick note pop-up, same screen, brand fonts */
#kbQnFab{position:fixed; right:18px; bottom:18px; z-index:900; width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--butter); border:0; font-size:26px; line-height:48px; text-align:center; cursor:pointer; box-shadow:0 4px 16px rgba(49,57,79,.25); font-family:var(--hfont);}
#kbQnWrap{position:fixed; inset:0; z-index:950; background:rgba(49,57,79,.35); display:flex; align-items:flex-end; justify-content:center; padding:16px;}
#kbQn{background:#FBFAF6; border-radius:16px; width:min(560px,100%); padding:18px 18px 14px; box-shadow:0 12px 40px rgba(0,0,0,.25); font-family:inherit;}
#kbQn h3{font-family:var(--hfont); font-weight:400; font-size:19px; color:var(--navy); margin:0 0 4px;}
#kbQn .sub{font-size:12.5px; color:var(--ink-muted); margin-bottom:10px;}
#kbQn textarea{width:100%; min-height:88px; font:inherit; font-size:14px; padding:10px 12px; border:1px solid #DFD9C9; border-radius:10px; background:#fff; resize:vertical;}
#kbQn .where{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0;}
#kbQn .where button{border:1px solid #DFD9C9; background:#fff; border-radius:20px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--navy);}
#kbQn .where button.on{background:var(--navy); color:var(--butter); border-color:var(--navy);}
#kbQn select{font:inherit; font-size:13px; padding:6px 10px; border:1px solid #DFD9C9; border-radius:10px; background:#fff;}
#kbQn .row{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; flex-wrap:wrap;}
#kbQn .msg{flex:1; font-size:12.5px; color:var(--ink-muted);}
@media (min-width:700px){ #kbQnWrap{align-items:center;} }
.tk.tk2.open{box-shadow:0 3px 14px rgba(49,57,79,.12); border-color:#C9BFAE;}

/* Stage 127: the meeting notes strip */
#kbMeetingBanner{display:block; background:var(--butter); color:#5C4512; border-radius:12px; padding:10px 14px; margin:0 0 12px; font-size:13.5px; text-decoration:none;}
#kbMeetingBanner b{color:var(--navy);}

/* Stage 122a: the one top-tile shape, shared by HQ and Team. A title, rows of the one row shape, a why line. */
.tiles.rows{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
#teamTiles.tiles.rows{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1180px){ #teamTiles.tiles.rows{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tiles.rows .tile{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); padding:11px 12px; min-width:0; overflow:hidden; min-height:150px; position:relative;}
.tiles.rows .tile .k{font-family:var(--hfont); font-size:14.5px; color:var(--navy); margin-bottom:4px; padding-right:52px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tiles.rows .tile .door{font-size:11px; top:11px; right:12px; position:absolute;}
/* Stage 129k: the navy tile's title was navy on navy, the rule above outranked the accent one. Cream on navy, everywhere. */
.tiles.rows .tile.accent .k, .tiles .tile.accent .k{color:#F6F1E4;}
.tiles.rows .tile.accent .line .t b{color:#F6F1E4;} .tiles.rows .tile.accent .line .t span, .tiles.rows .tile.accent .why{color:#C9CFDF;}
.tiles.rows .tile.accent .line{border-color:rgba(255,255,255,.14);} .tiles.rows .tile.accent .why{border-color:rgba(255,255,255,.2);}
.tiles.rows .rows{flex:1;}
.tiles.rows .line{display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--line); min-height:34px;}
.tiles.rows .line:first-of-type{border-top:0;}
.tiles.rows .av{width:26px; height:26px; border-radius:50%; background:var(--oat,#EFE9DE); color:var(--navy); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.tiles.rows .av.up{background:var(--up-bg); color:var(--up);} .tiles.rows .av.down{background:var(--rose-bg); color:var(--rose);} .tiles.rows .av.flat{color:var(--ink-muted);} .tiles.rows .av.hot{background:var(--butter); color:#5C4512;}
.tiles.rows .line .t{flex:1; min-width:0;}
.tiles.rows .line .t b{display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.tiles.rows .line .t span{display:block; font-size:11px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tiles.rows .chip{margin-left:auto; font-size:10.5px; padding:2px 7px; white-space:nowrap;}
.tiles.rows .chip.q{background:#F6F1E8; color:var(--ink-muted);} .tiles.rows .chip.due{background:#FBEFD6; color:#8A6A1F;}
.tiles.rows .why{font-size:11px; color:var(--ink-muted); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); line-height:1.35;}
@media (max-width:1180px){ .tiles.rows{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .tiles.rows{grid-template-columns:1fr;} }

/* ===== Stage 130: the one month grid (H.renderBandCalendar). Socials calendar look, bands across days. ===== */
.kc{--kc-gap:4px;}
.kc-head{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--kc-gap); margin-bottom:4px;}
.kc-head div{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#8b8d93; text-align:center; font-weight:600;}
.kc-week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); column-gap:var(--kc-gap); margin-bottom:var(--kc-gap); min-height:98px;}
.kc-cell{background:#fff; border:1px solid #EEE8D8; border-radius:10px; cursor:pointer; min-width:0;}
.kc-cell.out{background:transparent; border-color:transparent; cursor:default;}
.kc-cell.past{background:#FCFBF8;}
.kc-cell.awayday{background:#FDF8EA; border-color:#EBD9A6;}
.kc-cell.today{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);}
.kc-cell.sel{border-color:#F4CD92; box-shadow:inset 0 0 0 1.5px #F4CD92; background:#FFFDF6;}
.kc-cell:hover:not(.out){border-color:#CFC8B5;}
.kc-cell:focus-visible{outline:2px solid var(--navy); outline-offset:1px;}
.kc-num, .kc-band, .kc-items{pointer-events:none; min-width:0;}
.kc-num{font-size:11.5px; color:#8b8d93; padding:5px 8px 0; font-weight:600;}
.kc-cell.today + .kc-num{color:var(--navy); font-weight:800;}
.kc-band{align-self:center; height:18px; line-height:18px; font-size:11px; font-weight:700; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0; border-radius:0; position:relative; z-index:1;}
.kc-band span{display:block; overflow:hidden; text-overflow:ellipsis;}
.kc-band.s{margin-left:4px; border-top-left-radius:9px; border-bottom-left-radius:9px;}
.kc-band.e{margin-right:4px; border-top-right-radius:9px; border-bottom-right-radius:9px;}
.kc-band.away{background:var(--butter,#F3CF8F); color:var(--navy);}
.kc-band.leave{background:#DDE6DD; color:#34523F;}
.kc-band.pending{background:#fff; color:#5E6577; box-shadow:inset 0 0 0 1.5px #D9C48F; font-weight:600;}
.kc-band.film, .kc-band.filmme{background:#fff; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy);}
.kc-band.filmme{background:var(--navy); color:var(--butter,#F3CF8F);}
.kc-band.team{background:#E6E8F0; color:var(--navy);}
.kc-items{padding:2px 6px 6px; display:flex; flex-direction:column; gap:2px; overflow:hidden;}
.kc-it{font-size:11px; line-height:1.3; color:#4d5162; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kc-it i{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:1px; background:#B9B4A6;}
.kc-it.mine i{background:var(--navy);} .kc-it.post i{background:#F4CD92;} .kc-it.comply i{background:#B9836A;} .kc-it.google i{background:#fff; box-shadow:inset 0 0 0 1.5px #8b8d93;} .kc-it.team i{background:#8C93A8;}
.kc-it.more{color:#8b8d93; font-style:italic;}
.kc-on{display:flex; flex-wrap:wrap; gap:3px; margin-top:1px;}
.kc-on b{font-size:9.5px; font-weight:700; letter-spacing:.02em; background:var(--oat,#F3EEE6); color:var(--navy); border-radius:5px; padding:1px 4px;}
.kc-on b.me{background:#FFF6DC; box-shadow:inset 0 0 0 1px #F4CD92; color:#31394F;}
.kc-on b.ph{background:var(--navy); color:var(--butter,#F3CF8F);}
.kc-legend{display:flex; gap:6px 16px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:#6b6f80; align-items:center;}
.kc-legend span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.kc-legend i{display:inline-block; width:18px; height:10px; border-radius:5px; background:#EFEBE0;}
.kc-legend i.away{background:var(--butter,#F3CF8F);} .kc-legend i.leave{background:#DDE6DD;} .kc-legend i.pending{background:#fff; box-shadow:inset 0 0 0 1.5px #D9C48F;}
.kc-legend i.film{background:#fff; box-shadow:inset 0 0 0 1.5px var(--navy);} .kc-legend i.team{background:#E6E8F0;} .kc-legend i.on{background:var(--oat,#F3EEE6);} .kc-legend i.phone{background:var(--navy);}
.kc-legend i.post, .kc-legend i.comply, .kc-legend i.mine, .kc-legend i.google{width:8px; height:8px; border-radius:50%;}
.kc-legend i.post{background:#F4CD92;} .kc-legend i.comply{background:#B9836A;} .kc-legend i.mine{background:var(--navy);} .kc-legend i.google{background:#fff; box-shadow:inset 0 0 0 1.5px #8b8d93;}
.kc-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.kc-nav b{font-family:var(--hfont); font-weight:400; font-size:19px; color:var(--navy); min-width:170px;}
.kc-nav .rnd{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:15px; color:var(--navy);}
@media(max-width:700px){
  .kc{--kc-gap:2px;} .kc-week{min-height:70px;} .kc-num{padding:3px 4px 0; font-size:10.5px;} .kc-items{padding:1px 3px 4px;}
  .kc-it{font-size:9.5px;} .kc-band{font-size:9.5px; padding:0 4px; height:16px; line-height:16px;} .kc-on b{font-size:8.5px; padding:0 3px;} .kc-cell{border-radius:7px;}
}

/* Stage 130: the rose notice (needs you, or a feed has failed). One shape everywhere. */
.rosenote{background:#FBECEC; color:#7a2e2e; border:1px solid #EBC9C4; border-radius:12px; padding:10px 14px; font-size:13px; line-height:1.45; margin:0 0 10px;}
.rosenote a{color:inherit; font-weight:700;}
.rosenote.rowish{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.rosenote.rowish .btn{background:#fff; border-color:#E0B9AE; color:#7a2e2e; text-decoration:none; white-space:nowrap; flex:none;}


/* ===== Stage 130: the top tile, restyled with fresh eyes. One shape on HQ, Team, Comply, Socials and Patients. =====
   A calm card: a Georgia title, a quiet door word top right, up to three rows (round badge, one bold line, one
   quiet line that may wrap to two), and a one-line reason along the bottom. Nothing truncates to three letters. */
.tiles.rows{gap:14px; margin-bottom:20px;}
.tiles.rows .tile{padding:16px 18px 14px; border-radius:16px; min-height:188px; box-shadow:0 1px 0 rgba(48,59,88,.04); transition:border-color .15s, box-shadow .15s, transform .15s;}
a.tile:hover, .tiles.rows a.tile:hover{border-color:#C9BE9E; box-shadow:0 6px 18px rgba(48,59,88,.08); transform:translateY(-1px);}
.tiles.rows .tile .k{font-size:16.5px; margin-bottom:8px; padding-right:74px; line-height:1.25;}
.tiles.rows .tile .door{top:17px; right:18px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#5E6577;}
.tiles.rows .line{gap:10px; padding:7px 0; min-height:42px; align-items:flex-start;}
.tiles.rows .av{width:28px; height:28px; font-size:10.5px; margin-top:1px;}
.tiles.rows .line .t b{font-size:13px;}
.tiles.rows .line .t span{font-size:11.5px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35;}
.tiles.rows .chip{font-size:10.5px; padding:3px 8px; margin-top:2px; flex:none;}
.tiles.rows .why{font-size:11.5px; margin-top:auto; padding-top:8px;}
.tiles.rows .rows{flex:0 1 auto; margin-bottom:8px;}
.tiles.rows .tile .big{font-family:var(--hfont); font-size:30px; color:var(--navy); line-height:1.1; font-variant-numeric:tabular-nums;}
.tiles.rows .tile.accent .big{color:var(--butter);}
.tiles.rows .tile .bigsub{font-size:12px; color:var(--ink-muted); margin-top:3px;}
.tiles.rows .tile.accent .bigsub{color:#C9CFDF;}
.tiles.rows .tile.butter{background:var(--buttersoft,#FBF3DD); border-color:#E9D9A8;}
/* five tiles: never five squeezed across a laptop. Three then two, five only on a wide screen. */
#teamTiles.tiles.rows{grid-template-columns:repeat(6,minmax(0,1fr));}
#teamTiles.tiles.rows > .tile{grid-column:span 2;}
#teamTiles.tiles.rows > .tile:nth-child(n+4){grid-column:span 3;}
@media (min-width:1640px){ #teamTiles.tiles.rows{grid-template-columns:repeat(5,minmax(0,1fr));} #teamTiles.tiles.rows > .tile, #teamTiles.tiles.rows > .tile:nth-child(n+4){grid-column:span 1;} }
@media (max-width:900px){ #teamTiles.tiles.rows{grid-template-columns:repeat(2,minmax(0,1fr));} #teamTiles.tiles.rows > .tile, #teamTiles.tiles.rows > .tile:nth-child(n+4){grid-column:span 1;} }
@media (max-width:560px){ #teamTiles.tiles.rows{grid-template-columns:minmax(0,1fr);} }
.rosenote.uc{padding:12px 14px 6px;}
.rosenote .uch{margin-bottom:4px;}
.rosenote .ucrow{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:7px 0; border-top:1px solid #F0D5D1; font-size:13px;}
.rosenote .ucrow .btn{background:#fff; border-color:#E0B9AE; color:#7a2e2e; text-decoration:none; white-space:nowrap; flex:none;}
.rosenote details summary{cursor:pointer; font-size:12.5px; padding:7px 0; border-top:1px solid #F0D5D1;}
.tiles.rows .line .t b{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3;}
/* Stage 130: the fold header never squeezes. The name gets the line, the "what to do" words sit under it. */
.stagefold{flex-wrap:wrap; row-gap:1px;}
.stagefold .sfname{flex:1 1 auto; min-width:0;}
.stagefold .sfdo{order:3; flex:1 0 100%; padding-left:20px;}
.stagefold .sfn{order:2; flex:none;}

/* Stage 130: one pop-up shape (the filming heads-up on Team Today) */
.kbpop{position:fixed; inset:0; background:rgba(34,41,62,.45); z-index:1200; display:flex; align-items:center; justify-content:center; padding:18px;}
.kbpop-box{background:var(--card,#FBFAF6); border-radius:18px; border:1px solid var(--line); max-width:460px; width:100%; max-height:86vh; overflow:auto; padding:22px 22px 18px; box-shadow:0 18px 50px rgba(20,26,45,.3);}
.kbpop-eye{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#5E6577;}
.kbpop-box h2{font-family:var(--hfont); font-weight:500; font-size:22px; color:var(--navy); margin:4px 0 12px;}
.kbpop-row{border-top:1px solid var(--line); padding:10px 0; font-size:13.5px;}
.kbpop-row b{display:block; color:var(--navy);} .kbpop-row span{display:block; font-size:12.5px; color:var(--ink-muted); margin-top:2px;} .kbpop-row i{font-style:normal; font-weight:600; color:var(--ink);}
.kbpop-row a{display:inline-block; margin-top:4px; font-size:12.5px; color:var(--navy); font-weight:700;}
.kbpop-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.kbpop-foot{font-size:11.5px; color:var(--ink-muted); margin-top:10px;}
.tiles.rows .tile .k{white-space:normal; overflow:visible; text-overflow:clip;}

/* Stage 136: nudges and little messages, on every page */
/* Stage 139: a labelled pill so the nudge is plainly on every page, not a bare icon. */
#kbMsgFab{position:fixed; right:18px; bottom:76px; z-index:900; height:46px; padding:0 16px 0 13px; border-radius:99px; background:var(--butter); color:var(--navy); border:0; cursor:pointer; box-shadow:0 4px 16px rgba(49,57,79,.22); display:flex; align-items:center; gap:8px; font:inherit; font-size:13.5px; font-weight:700;}
#kbMsgFab .lbl{white-space:nowrap;}
#kbMsgFab.solo{bottom:18px;}
@media (max-width:520px){ #kbMsgFab{padding:0 14px 0 12px; font-size:13px;} }
/* the one-tap Hurry up Kels row at the top of the composer */
#kbMsg .qsend{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 4px;}
#kbMsg .qsend button{border:0; border-radius:99px; padding:11px 18px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; background:var(--urgentc); color:#fff;}
#kbMsg .qsend button:disabled{opacity:.6; cursor:default;}
#kbMsg .qsend span{font-size:12px; color:var(--ink-muted);}
/* centred confirm after a one-tap Hurry up Kels */
.kbHurryOk{position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(38,45,66,.55); animation:kbNudgeIn .2s ease-out;}
.kbHurryOk .hbx{background:#FBF6E9; border:3px solid var(--butter); border-radius:20px; padding:28px 34px; text-align:center; max-width:380px; box-shadow:0 24px 70px rgba(0,0,0,.35);}
.kbHurryOk .tick{width:54px; height:54px; margin:0 auto 10px; border-radius:50%; background:var(--navy); color:var(--butter); font-size:28px; display:flex; align-items:center; justify-content:center;}
.kbHurryOk .t{font-family:var(--hfont); font-size:26px; color:var(--navy);}
.kbHurryOk .s{font-size:13px; color:var(--ink-muted); margin-top:6px;}
#kbMsgWrap{position:fixed; inset:0; z-index:960; background:rgba(49,57,79,.35); display:flex; align-items:flex-end; justify-content:center; padding:16px;}
@media (min-width:700px){ #kbMsgWrap{align-items:center;} }
#kbMsg{background:#fff; border-radius:16px; padding:18px 20px; width:100%; max-width:520px; box-shadow:0 18px 50px rgba(49,57,79,.3);}
#kbMsg h3{font-family:var(--hfont); font-weight:400; font-size:20px; color:var(--navy); margin:0;}
#kbMsg .sub{font-size:12.5px; color:var(--ink-muted); margin:4px 0 10px;}
#kbMsg .lab{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5E6577; font-weight:700; margin:10px 0 6px;}
#kbMsg .where{display:flex; gap:6px; flex-wrap:wrap;}
#kbMsg .where button{border:1px solid var(--line); background:#fff; border-radius:99px; padding:7px 13px; font:inherit; font-size:12.5px; color:var(--navy); cursor:pointer;}
#kbMsg .where button.on{background:var(--navy); color:var(--butter); border-color:var(--navy); font-weight:600;}
#kbMsg .where.quick button{background:#FBF6E9; border-color:#EBDDB6;}
#kbMsg textarea{width:100%; min-height:64px; margin-top:8px; font:inherit; font-size:14px; padding:10px 12px; border:1px solid #DFD9C9; border-radius:10px; resize:vertical;}
#kbMsg label.tog{display:flex; gap:9px; align-items:flex-start; margin:10px 0 0; font-size:12.5px; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:400; cursor:pointer;}
#kbMsg label.tog input{width:17px; height:17px; margin-top:1px; flex:none;} #kbMsg label.tog b{color:var(--navy);}
#kbMsg .row{display:flex; gap:8px; align-items:center; margin-top:14px;} #kbMsg .row .msg{margin-right:auto; font-size:12.5px; min-width:0;} #kbMsg .row .btn{flex:0 0 auto; white-space:nowrap;} /* Stage 164: never "SEN / D" on a phone */
.kbNudgeBig{position:fixed; inset:0; z-index:2000; background:rgba(38,45,66,.93); display:flex; align-items:center; justify-content:center; padding:24px; animation:kbNudgeIn .25s ease-out;}
.kbNudgeBig .nbx{background:#FBF6E9; border:3px solid var(--butter); border-radius:22px; padding:34px 38px; max-width:760px; width:100%; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.4);}
.kbNudgeBig .k{letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:#5E6577; font-weight:700;}
.kbNudgeBig .t{font-family:var(--hfont); font-size:clamp(28px,5vw,52px); line-height:1.15; color:var(--navy); margin:14px 0 8px;}
.kbNudgeBig .w{font-size:13px; color:var(--ink-muted);}
.kbNudgeBig .b{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.kbNudgeBig .b button{border:0; border-radius:99px; padding:13px 26px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; background:var(--navy); color:var(--butter);}
.kbNudgeBig .b button.rep{background:#fff; color:var(--navy); border:1px solid var(--line);}
@keyframes kbNudgeIn{ from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;} }
#kbMsgTray{position:fixed; top:14px; right:14px; z-index:1500; display:flex; flex-direction:column; gap:8px; width:min(340px, calc(100vw - 28px));}
.kbMsgCard{background:#fff; border:1px solid #EBDDB6; border-left:5px solid var(--butter); border-radius:13px; padding:12px 14px; box-shadow:0 10px 30px rgba(49,57,79,.2); animation:kbNudgeIn .25s ease-out;}
.kbMsgCard .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5E6577; font-weight:700;} .kbMsgCard .k span{color:#b3b5bc; font-weight:400; letter-spacing:0;}
.kbMsgCard .t{font-family:var(--hfont); font-size:17px; color:var(--navy); margin:4px 0 8px; line-height:1.3;}
.kbMsgCard .b{display:flex; gap:6px;} .kbMsgCard .b button{border:1px solid var(--line); background:#fff; border-radius:99px; padding:5px 12px; font:inherit; font-size:12px; font-weight:600; color:var(--navy); cursor:pointer;}
.kbMsgCard .b button.got{background:var(--navy); color:var(--butter); border-color:var(--navy);}

/* Stage 164: a card lit for a moment, the next in line after an action */
.kbFlash{box-shadow:0 0 0 3px #F4CD92 !important; background:#FFF6DC !important; transition:box-shadow .3s, background .3s;}

/* Stage 168: the sidebar search */
.kbsearch{position:relative; padding:0 12px 14px;}
.kbsearch input{width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; border-radius:10px; padding:8px 11px; font-size:13px; font-family:inherit;}
.kbsearch input::placeholder{color:rgba(233,230,220,.55);}
.kbsearch input:focus{outline:none; border-color:#F3CF8F; background:rgba(255,255,255,.12);}
.kbsres{position:absolute; left:12px; right:12px; top:calc(100% - 8px); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(20,26,44,.22); z-index:60; max-height:60vh; overflow:auto; padding:6px 0;}
.kbsres .kbsg{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8b8d93; padding:8px 12px 3px;}
.kbsres .kbsi{display:block; padding:7px 12px; text-decoration:none; color:var(--ink); font-size:13px; line-height:1.3;}
.kbsres .kbsi b{color:var(--navy); font-weight:600; display:block;}
.kbsres .kbsi span{font-size:11.5px; color:#8b8d93;}
.kbsres .kbsi:hover, .kbsres .kbsi.on{background:var(--butter, #FBF3DD);}

/* Stage 213 (S4): a tile row that is its own link, so every row goes where it is acted on */
.tiles.rows a.line.golink{text-decoration:none; color:inherit; cursor:pointer; border-radius:6px;}
.tiles.rows a.line.golink:hover{background:rgba(184,151,90,.08);}

/* Stage 219 (Q3, D3): clinic switches set on <body> by shared.js from Settings */
body.noacct .acctOnly{display:none !important}
body:not(.noacct) .noacctOnly{display:none !important}
body.nosplit .splitOnly{display:none !important}

/* Stage 255: Tweak or idea, bottom left on every page, and the once-only "Sorted" card */
#kbTwFab{position:fixed; left:18px; bottom:18px; z-index:890; height:38px; padding:0 14px 0 12px; border-radius:99px; background:#FBFAF6; color:var(--navy); border:1px solid #DFD9C9; border-bottom:2px solid var(--butter); cursor:pointer; box-shadow:0 3px 12px rgba(49,57,79,.14); display:flex; align-items:center; gap:8px; font:inherit; font-size:12.5px; font-weight:600;}
#kbTwFab .dot{width:7px; height:7px; border-radius:50%; background:#F4CD92;}
#kbTwFab:focus-visible{outline:2px solid #F4CD92; outline-offset:2px;}
@media (min-width:881px){ #kbTwFab{left:254px;} }
#kbTwWrap{position:fixed; inset:0; z-index:955; background:rgba(49,57,79,.35); display:flex; align-items:flex-end; justify-content:center; padding:16px;}
@media (min-width:700px){ #kbTwWrap{align-items:center;} }
#kbTw{background:#FBFAF6; border-radius:16px; width:min(560px,100%); padding:18px 18px 14px; box-shadow:0 12px 40px rgba(0,0,0,.25);}
#kbTw h3{font-family:var(--hfont); font-weight:400; font-size:20px; color:var(--navy); margin:0 0 4px;}
#kbTw .sub{font-size:12.5px; color:var(--ink-muted); margin-bottom:10px;}
#kbTw textarea{width:100%; min-height:96px; font:inherit; font-size:14px; padding:10px 12px; border:1px solid #DFD9C9; border-radius:10px; background:#fff; resize:vertical;}
#kbTw .where{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px;}
#kbTw .where button{border:1px solid #DFD9C9; background:#fff; border-radius:20px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--navy);}
#kbTw .where button.on{background:var(--navy); color:var(--butter); border-color:var(--navy);}
#kbTw .row{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; flex-wrap:wrap;}
#kbTw .msg{flex:1; font-size:12.5px; color:var(--ink-muted);}
#kbTwTray{position:fixed; left:18px; bottom:66px; z-index:880; display:flex; flex-direction:column; gap:8px; width:min(320px, calc(100vw - 36px));}
@media (min-width:881px){ #kbTwTray{left:254px;} }
.kbTwDone{background:var(--navy); color:#F1EDE7; border-radius:12px; padding:12px 14px; box-shadow:0 6px 20px rgba(0,0,0,.2); display:flex; flex-direction:column; gap:4px; font-size:13px; border-left:3px solid var(--butter);}
.kbTwDone b{color:var(--butter); font-weight:600;}
.kbTwDone .note{color:#C9C4BA; font-size:12.5px;}
.kbTwDone button{align-self:flex-end; border:0; border-radius:99px; background:var(--butter); color:var(--navy); font:inherit; font-size:12.5px; font-weight:600; padding:5px 12px; cursor:pointer;}

/* Stage 256b: under the logo, a butter line, then the person and role (the footer keeps the avatar and switch buttons) */
aside .brandline{height:2px; background:var(--butter); margin:0 12px 12px; border-radius:2px;}
aside .whotop{padding:0 12px 14px; display:flex; flex-direction:column; gap:1px;}
aside .whotop b{font-family:var(--hfont); font-weight:400; font-size:15px; color:#fff; letter-spacing:.02em;}
aside .whotop span{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#A8B0C6;}
.asidefoot .who, .asidefoot .rolelbl{display:none;}
/* Stage 256b (Kelsey's mark): task cards on the boards open with a spaced serif line */
.tk > b:first-child{font-family:var(--hfont); font-weight:400; letter-spacing:.05em; font-size:14px; color:var(--navy);}

/* Stage 256c: the Home by Six logo top left when a clinic has no logo of its own */
.brand.hb6 .brandlogo{max-width:200px; max-height:none; width:100%; margin:0;}
.brand.hb6 .sub{font-size:10.5px; color:#A8B0C6; letter-spacing:.14em; text-transform:uppercase; margin-top:2px;}