/* ============ Design tokens ============ */
:root{
  --paper:#F2F6F5;
  --surface:#FFFFFF;
  --surface-2:#E8EFED;
  --surface-3:#DCE6E3;
  --border:#D6E1DE;
  --border-strong:#BBCAC6;
  --ink:#132422;
  --ink-2:#54655F;
  --ink-3:#889592;

  /* CR-teal + STARS-navy, the practice's own brand pair */
  --brand:#0F766A;
  --brand-strong:#0B5A51;
  --brand-ink:#0A3E38;
  --brand-tint:#E1F0EC;

  --navy:#1F3B63;
  --navy-strong:#16294A;
  --navy-ink:#12203A;
  --navy-tint:#E7ECF4;

  --gold:#D79B2A;
  --gold-tint:#FBF0DA;

  --aba:#A87F12;      --aba-tint:#F6EDD4;      --aba-ink:#4F3B0A;
  --speech:#C4577A;   --speech-tint:#F8E7ED;   --speech-ink:#6B2A3D;
  --ot:#6E5AA8;        --ot-tint:#ECE7F5;       --ot-ink:#3A2E5C;
  --pt:#1F3B63;         --pt-tint:#E7ECF4;       --pt-ink:#16294A;
  --psychology:#BF6A2E; --psychology-tint:#F7E9DC; --psychology-ink:#5C3013;

  --success:#2F8F5D; --success-tint:#E2F3E8;
  --warning:#C2622B; --warning-tint:#F8E3D5;
  --critical:#C1473F; --critical-tint:#FAEAE8;

  --shadow-sm: 0 1px 2px rgba(19,36,34,.07);
  --shadow-md: 0 6px 20px -6px rgba(19,36,34,.18);
  --shadow-lg: 0 20px 48px -12px rgba(19,36,34,.28);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-display:'Manrope', 'Segoe UI', -apple-system, sans-serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1716;
    --surface:#17201F;
    --surface-2:#1D2827;
    --surface-3:#24312F;
    --border:#2E3B39;
    --border-strong:#3C4B48;
    --ink:#E8F0EE;
    --ink-2:#9DB0AC;
    --ink-3:#6C7E7A;

    --brand:#4FC2B0;
    --brand-strong:#7ADCC9;
    --brand-ink:#CDEFE9;
    --brand-tint:#173430;

    --navy:#87A6D2;
    --navy-strong:#AFC7E7;
    --navy-ink:#D6E3F4;
    --navy-tint:#1C2A3D;

    --gold:#E3B457;
    --gold-tint:#332910;

    --aba:#D8AE4E;      --aba-tint:#332810;      --aba-ink:#F3DBA8;
    --speech:#E58BA6;   --speech-tint:#37232A;   --speech-ink:#F5C7D5;
    --ot:#AC9BDA;        --ot-tint:#2A2440;       --ot-ink:#D9CFF2;
    --pt:#87A6D2;         --pt-tint:#1C2A3D;       --pt-ink:#D6E3F4;
    --psychology:#E0985E; --psychology-tint:#3A2A1C; --psychology-ink:#F5D9BE;

    --success:#6FCB93; --success-tint:#173420;
    --warning:#E08A56; --warning-tint:#3A2415;
    --critical:#E2837B; --critical-tint:#3A1E1B;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px -6px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1716; --surface:#17201F; --surface-2:#1D2827; --surface-3:#24312F;
  --border:#2E3B39; --border-strong:#3C4B48;
  --ink:#E8F0EE; --ink-2:#9DB0AC; --ink-3:#6C7E7A;
  --brand:#4FC2B0; --brand-strong:#7ADCC9; --brand-ink:#CDEFE9; --brand-tint:#173430;
  --navy:#87A6D2; --navy-strong:#AFC7E7; --navy-ink:#D6E3F4; --navy-tint:#1C2A3D;
  --gold:#E3B457; --gold-tint:#332910;
  --aba:#D8AE4E; --aba-tint:#332810; --aba-ink:#F3DBA8;
  --speech:#E58BA6; --speech-tint:#37232A; --speech-ink:#F5C7D5;
  --ot:#AC9BDA; --ot-tint:#2A2440; --ot-ink:#D9CFF2;
  --pt:#87A6D2; --pt-tint:#1C2A3D; --pt-ink:#D6E3F4;
  --psychology:#E0985E; --psychology-tint:#3A2A1C; --psychology-ink:#F5D9BE;
  --success:#6FCB93; --success-tint:#173420;
  --warning:#E08A56; --warning-tint:#3A2415;
  --critical:#E2837B; --critical-tint:#3A1E1B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--font-display); text-wrap:balance; margin:0; color:var(--ink); font-weight:600;}
p{margin:0;}
a{color:var(--brand-strong);}
button{font-family:var(--font-body);}
::selection{background:var(--brand-tint); color:var(--brand-ink);}
.tabular{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ============ App shell ============ */
#app{display:flex; min-height:100vh;}

.sidebar{
  width:216px; flex:0 0 216px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:26px 18px 20px;
  border-bottom:1px solid var(--border);
}
.brand-mark{
  width:64px; height:64px; border-radius:16px;
  background:linear-gradient(155deg, var(--brand), var(--navy));
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex:none;
}
.brand-mark svg{width:34px; height:34px;}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1.25; color:var(--ink);}
.brand-sub{font-size:10px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; margin-top:2px;}

.nav{padding:12px 10px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--ink-2); font-size:13.5px; font-weight:500;
  cursor:pointer; border:none; background:none; text-align:left; width:100%;
  transition:background .12s, color .12s;
}
.nav-item svg{width:17px; height:17px; flex:none; opacity:.85;}
.nav-item:hover{background:var(--surface-2); color:var(--ink);}
.nav-item.active{background:var(--brand-tint); color:var(--brand-ink); font-weight:600;}
.nav-item.active svg{opacity:1;}
.nav-item .count{
  margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-3);
  background:var(--surface-2); border-radius:20px; padding:1px 7px;
}
.nav-item.active .count{background:var(--surface); color:var(--brand-ink);}
.nav-divider{height:1px; background:var(--border); margin:8px 12px;}
.nav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); padding:10px 12px 4px;}

.sidebar-foot{
  padding:14px 18px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--ink-3);
}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--border);
  background:var(--paper); position:sticky; top:0; z-index:5;
}
.topbar-title{display:flex; flex-direction:column; gap:2px;}
.topbar-title h1{font-size:22px;}
.topbar-meta{font-size:12.5px; color:var(--ink-2);}
.topbar-actions{display:flex; gap:10px; align-items:center;}

.content{padding:24px 28px 56px; flex:1;}
.content-narrow{max-width:1180px;}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  transition:background .12s, border-color .12s, transform .08s;
  white-space:nowrap;
}
.btn svg{width:14px; height:14px;}
.btn:hover{background:var(--surface-2);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible, a:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-strong); border-color:var(--brand-strong);}
.btn-ghost{border-color:transparent; background:transparent;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{border-color:var(--critical); color:var(--critical); background:transparent;}
.btn-danger:hover{background:var(--critical-tint);}
.btn-sm{padding:5px 10px; font-size:12px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ============ Cards & KPIs ============ */
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{padding:20px;}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.card-head h3{font-size:15.5px;}
.card-head-sub{font-size:12px; color:var(--ink-2); margin-top:2px;}

.kpi-card{
  padding:18px 20px; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--surface); position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.kpi-stripe{position:absolute; left:0; top:0; bottom:0; width:4px;}
.kpi-label{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);}
.kpi-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.kpi-value{font-family:var(--font-display); font-size:32px; font-weight:600; margin-top:8px; line-height:1;}
.kpi-row{display:flex; align-items:baseline; gap:8px; margin-top:10px; font-size:12px; color:var(--ink-2);}
.kpi-row b{color:var(--ink); font-weight:700;}

/* ============ Badges / Chips ============ */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600;
  white-space:nowrap;
}
.chip-aba{background:var(--aba-tint); color:var(--aba-ink);}
.chip-speech{background:var(--speech-tint); color:var(--speech-ink);}
.chip-ot{background:var(--ot-tint); color:var(--ot-ink);}
.chip-pt{background:var(--pt-tint); color:var(--pt-ink);}
.chip-psychology{background:var(--psychology-tint); color:var(--psychology-ink);}
.chip-neutral{background:var(--surface-2); color:var(--ink-2);}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700;
}
.badge-success{background:var(--success-tint); color:var(--success);}
.badge-warning{background:var(--warning-tint); color:var(--warning);}
.badge-critical{background:var(--critical-tint); color:var(--critical);}
.badge-neutral{background:var(--surface-2); color:var(--ink-2);}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}

/* ============ Tables ============ */
.table-wrap{overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface);}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
thead th{
  text-align:left; padding:11px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
  position:sticky; top:0;
}
tbody td{padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.clickable{cursor:pointer; transition:background .1s;}
tbody tr.clickable:hover{background:var(--surface-2);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
.cell-name{font-weight:600; color:var(--ink);}
.cell-sub{font-size:11.5px; color:var(--ink-3); margin-top:1px;}
.empty-row td{text-align:center; padding:38px 16px; color:var(--ink-3);}

/* ============ Tabs ============ */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); padding:0 4px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tab{
  white-space:nowrap; flex:none;
  padding:10px 14px; font-size:13px; font-weight:600; color:var(--ink-2);
  border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
  margin-bottom:-1px;
}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--brand-strong); border-bottom-color:var(--brand);}

/* ============ Forms ============ */
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; font-weight:600; color:var(--ink-2);}
.field .hint{font-size:11px; color:var(--ink-3);}
input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=tel], select, textarea{
  font-family:var(--font-body); font-size:13.5px; padding:8px 10px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); width:100%;
}
textarea{resize:vertical; min-height:64px; font-family:var(--font-body);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border);}
.checkline{display:flex; align-items:center; gap:8px; font-size:13px;}
.checkline input{width:auto;}
fieldset{border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin:0;}
legend{font-size:12px; font-weight:700; color:var(--ink-2); padding:0 6px; text-transform:uppercase; letter-spacing:.04em;}

/* ============ Modal ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,24,22,.44); backdrop-filter:blur(1px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 20px; z-index:50; overflow-y:auto;
}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:640px; border:1px solid var(--border);
}
.modal.modal-wide{max-width:820px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:17px;}
.modal-body{padding:22px; max-height:70vh; overflow-y:auto;}
.modal-close{background:none; border:none; cursor:pointer; color:var(--ink-3); padding:4px; border-radius:6px;}
.modal-close:hover{background:var(--surface-2); color:var(--ink);}

/* ============ Detail header ============ */
.detail-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  margin-bottom:16px;
}
.detail-avatar{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff;
  background:linear-gradient(155deg, var(--brand), var(--navy));
}
.detail-title{display:flex; align-items:center; gap:14px;}
.detail-name h2{font-size:20px;}
.detail-name .meta{font-size:12.5px; color:var(--ink-2); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); cursor:pointer; margin-bottom:12px; font-weight:600;}
.back-link:hover{color:var(--brand-strong);}
.back-link svg{width:13px; height:13px;}

.stat-strip{display:flex; gap:26px; margin-top:2px;}
.stat-strip .stat{display:flex; flex-direction:column;}
.stat-strip .stat b{font-family:var(--font-display); font-size:19px;}
.stat-strip .stat span{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em;}

/* ============ Info list ============ */
.info-list{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;}
.info-item span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-bottom:3px;}
.info-item b{font-size:13.5px; font-weight:600; color:var(--ink);}
.info-item{min-width:0;}
.info-item b{overflow-wrap:anywhere;}
.info-item select, .info-item input:not([type=checkbox]){max-width:100%;}

/* ============ Calendar ============ */
.cal-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap;}
.cal-nav{display:flex; align-items:center; gap:8px;}
.cal-legend{display:flex; gap:12px; flex-wrap:wrap;}
.cal-legend .item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2);}
.cal-legend .sw{width:9px; height:9px; border-radius:3px;}

.cal-grid{
  display:grid; grid-template-columns:56px repeat(7,1fr);
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden;
}
.cal-corner{border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2);}
.cal-daycol-head{
  padding:10px 8px; text-align:center; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.cal-daycol-head:last-child{border-right:none;}
.cal-daycol-head .dow{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);}
.cal-daycol-head .dnum{font-family:var(--font-display); font-size:17px; font-weight:600; margin-top:1px;}
.cal-daycol-head.today .dnum{color:var(--brand-strong);}
.cal-hour-label{
  padding:6px 8px 0 0; text-align:right; font-size:10.5px; color:var(--ink-3);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cal-cell{border-right:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; min-height:52px; padding:3px;}
.cal-cell:last-child{border-right:none;}
.cal-visit{
  border-radius:6px; padding:4px 7px; font-size:11px; margin-bottom:3px; cursor:pointer;
  border-left:3px solid; line-height:1.35;
}
.cal-visit b{display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-visit .t{display:block; opacity:.8; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ============ Calendar: month view ============ */
.cal-month-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden;
}
.cal-month-dow{padding:8px 6px; text-align:center; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--border);}
.cal-month-cell{
  min-height:84px; padding:5px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  cursor:pointer;
}
.cal-month-cell:nth-child(7n){border-right:none;}
.cal-month-cell.out{background:var(--surface-2); opacity:.55;}
.cal-month-cell.today .cal-month-daynum{color:var(--brand-strong); font-weight:700;}
.cal-month-daynum{font-family:var(--font-display); font-size:12.5px; margin-bottom:4px;}
.cal-month-chip{
  border-radius:5px; padding:2px 5px; font-size:10px; margin-bottom:2px; cursor:pointer; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-month-more{font-size:10px; color:var(--ink-3); padding-left:2px;}
.cal-visit svg, td svg{width:11px; height:11px; vertical-align:-2px; flex:none;}

/* ============ Progress chart ============ */
.chart-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px;}
.chart-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
.chart-svg text{font-family:var(--font-body); fill:var(--ink-2);}
.chart-svg .axis-line{stroke:var(--border-strong); stroke-width:1;}
.chart-svg .gridline{stroke:var(--border); stroke-width:1;}
.chart-svg .mastery-line{stroke:var(--success); stroke-width:1.5; stroke-dasharray:5 4;}
.chart-svg .phase-line{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3;}
.chart-svg .data-line{stroke:var(--brand); stroke-width:2; fill:none;}
.chart-svg .data-dot{fill:var(--brand); stroke:var(--surface); stroke-width:1.5;}
.chart-svg .phase-tag{font-size:10px; fill:var(--ink-3); text-transform:uppercase; letter-spacing:.04em;}

/* ============ Goal / note blocks ============ */
.goal-card{border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; background:var(--surface);}
.goal-card + .goal-card{margin-top:10px;}
.goal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.goal-head h4{font-size:14px; font-weight:700;}
.goal-sub{font-size:12px; color:var(--ink-2); margin-top:3px;}
.goal-progress-bar{height:6px; border-radius:4px; background:var(--surface-2); margin-top:10px; overflow:hidden;}
.goal-progress-fill{height:100%; background:var(--brand); border-radius:4px;}

.note-card{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.note-card + .note-card{margin-top:10px;}
.note-card-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface-2); cursor:pointer;}
.note-card-body{padding:16px; display:none; border-top:1px solid var(--border);}
.note-card-body.open{display:block;}
.note-section{margin-bottom:14px;}
.note-section:last-child{margin-bottom:0;}
.note-section h5{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:6px;}
.note-section p{font-size:13.5px; line-height:1.6;}

/* ============ Misc ============ */
.section-title{display:flex; align-items:center; justify-content:space-between; margin:28px 0 12px;}
.section-title h3{font-size:15.5px;}
.section-title:first-child{margin-top:0;}
.muted{color:var(--ink-2);}
.small{font-size:12px;}
.searchbox{position:relative;}
.searchbox svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-3);}
.searchbox input{padding-left:30px; width:220px;}
.toast{
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:var(--paper);
  padding:11px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg); z-index:100; opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateY(0);}
.pill-group{display:flex; gap:6px; flex-wrap:wrap;}
.select-pill{
  padding:5px 12px; border-radius:20px; border:1px solid var(--border-strong); background:var(--surface);
  font-size:12px; font-weight:600; cursor:pointer; color:var(--ink-2);
}
.select-pill.active{background:var(--brand); border-color:var(--brand); color:#fff;}
.disc-dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none;}
.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start;}
@media (max-width:980px){.two-col{grid-template-columns:minmax(0,1fr);} .info-list{grid-template-columns:1fr;}}
hr.rule{border:none; border-top:1px solid var(--border); margin:18px 0;}
.icon-btn{background:none; border:1px solid var(--border-strong); border-radius:8px; padding:7px; cursor:pointer; color:var(--ink-2); display:inline-flex;}
.icon-btn:hover{background:var(--surface-2);}
.icon-btn svg{width:15px; height:15px;}
.empty-state{padding:44px 20px; text-align:center; color:var(--ink-3);}
.empty-state svg{width:34px; height:34px; margin-bottom:10px; opacity:.6;}

/* ============ EMR ============ */
.emr-block{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.emr-block + .emr-block{margin-top:14px;}
.emr-block-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface-2);}
.emr-block-head h4{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-2);}
.emr-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-top:1px solid var(--border);}
.emr-row:first-of-type{border-top:none;}
.emr-row-main b{display:block; font-size:13.5px;}
.emr-row-main span{font-size:12px; color:var(--ink-2);}
.severity-mild{color:var(--warning);}
.severity-severe{color:var(--critical);}
.doc-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-top:1px solid var(--border);}
.doc-row:first-of-type{border-top:none;}
.doc-icon{width:34px; height:34px; border-radius:8px; background:var(--brand-tint); color:var(--brand-strong); display:flex; align-items:center; justify-content:center; flex:none;}
.doc-icon svg{width:16px; height:16px;}
.doc-meta{flex:1; min-width:0;}
.doc-meta b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.doc-meta span{font-size:11.5px; color:var(--ink-3);}

/* ============ Recurrence controls ============ */
.dow-picker{display:flex; gap:6px;}
.dow-chip{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink-2); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.dow-chip.active{background:var(--brand); border-color:var(--brand); color:#fff;}
.scope-picker{display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--surface-2); border-radius:var(--radius-md); border:1px solid var(--border);}
.scope-option{display:flex; align-items:flex-start; gap:9px; font-size:13px; cursor:pointer;}
.scope-option input{margin-top:3px;}
.scope-option .lbl{font-weight:600;}
.scope-option .sub{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400;}
.series-tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--brand-strong); font-weight:600; background:var(--brand-tint); padding:2px 9px; border-radius:20px;}
.series-tag svg{width:11px; height:11px;}

/* ============ Intake / signature ============ */
.consent-box{border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; background:var(--surface-2); font-size:12.5px; line-height:1.55; color:var(--ink-2); max-height:110px; overflow-y:auto; margin-bottom:8px;}
.sig-wrap{border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--surface); position:relative;}
.sig-wrap canvas{display:block; width:100%; height:140px; cursor:crosshair; touch-action:none;}
.sig-baseline{position:absolute; left:16px; right:16px; bottom:28px; border-bottom:1px solid var(--border-strong); pointer-events:none;}
.notice-bar{display:flex; gap:10px; align-items:flex-start; background:var(--gold-tint); border:1px solid var(--gold); border-radius:var(--radius-md); padding:10px 14px; font-size:12.5px; color:var(--ink-2); margin-bottom:16px;}
.notice-bar svg{width:16px; height:16px; flex:none; color:var(--gold); margin-top:1px;}

/* ============ Messages ============ */
.msg-thread{display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; padding:4px 2px 10px;}
.msg-bubble{max-width:78%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5;}
.msg-bubble .who{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; opacity:.75;}
.msg-bubble .when{font-size:10.5px; opacity:.6; margin-top:4px;}
.msg-staff{align-self:flex-start; background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px;}
.msg-guardian{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px;}
.msg-compose{display:flex; gap:8px; margin-top:12px;}
.msg-compose textarea{flex:1; min-height:44px; resize:none;}

/* ============ Portal preview ============ */
.portal-topbar{display:flex; align-items:center; gap:10px; padding:14px 18px; background:linear-gradient(155deg, var(--brand), var(--navy)); color:#fff; border-radius:var(--radius-lg) var(--radius-lg) 0 0; margin:-22px -22px 18px;}
.portal-topbar .badge-live{background:rgba(255,255,255,.18); color:#fff; font-size:10.5px; padding:2px 9px; border-radius:20px; font-weight:700; margin-left:auto;}
.portal-section{margin-bottom:22px;}
.portal-section h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:10px;}
.invoice-total{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--surface-2); border-radius:var(--radius-md); margin-bottom:10px;}
.invoice-total b{font-family:var(--font-display); font-size:22px;}

/* ============ Company branding & locations (added) ============ */
.brand-mark.has-logo{background:#fff; border:1px solid var(--border); padding:6px;}
.brand-mark.has-logo img{width:100%; height:100%; object-fit:contain; display:block; border-radius:6px;}
.brand-name.long{font-size:12px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.logo-preview{width:96px; height:96px; border-radius:18px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; color:#fff;}
.logo-preview img{width:100%; height:100%; object-fit:contain; padding:8px;}
.logo-preview.default{background:linear-gradient(155deg, var(--brand), var(--navy)); border:0;}
.logo-preview.default svg{width:42px; height:42px;}
.place-note{padding:9px 12px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:12.5px; color:var(--ink-2); min-height:38px; display:flex; align-items:center;}
.cal-visit .place{display:block; opacity:.8; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.loc-row-off{opacity:.55;}

/* ============ Mobile / tablet layout ============ */
.nav-toggle{display:none;}
.nav-backdrop{display:none;}
@media (max-width: 860px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); cursor:pointer; flex:none; margin-right:10px; padding:0;
  }
  .nav-toggle svg{width:19px; height:19px;}
  .topbar{padding:12px 14px; justify-content:flex-start;}
  .topbar-title{flex:1; min-width:0;}
  .topbar-title h1{font-size:17px;}
  .topbar-meta{display:none;}
  .topbar-actions{display:none;}
  .content{padding:14px 14px 40px;}

  #app{display:block;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:250px; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar.nav-open{transform:translateX(0);}
  .nav-backdrop{position:fixed; inset:0; background:rgba(20,24,22,.42); z-index:55;}
  .nav-backdrop.nav-open{display:block;}
  .main{width:100%;}

  .two-col{grid-template-columns:minmax(0,1fr);}
  .two-col > *{min-width:0;}
  .main, .content{min-width:0;}
  .stat-strip{flex-wrap:wrap; row-gap:10px;}
  .detail-head{flex-direction:column; align-items:stretch; gap:14px;}
  .detail-head > div:last-child{align-items:flex-start;}
  .cal-toolbar{flex-wrap:wrap; gap:10px;}
  /* Day view (the mobile default) fills the width fine at 1 column; Week view's columns have a floor
     width (set via minmax() where the grid is built) so it scrolls sideways at a readable size instead
     of squeezing 7 days into a phone screen. */
  .cal-grid{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
  .cal-month-cell{min-height:56px;}
  .cal-month-chip{padding:1px 3px;}

  .modal-backdrop{padding:0; align-items:stretch;}
  .modal, .modal.modal-wide{max-width:100%; width:100%; min-height:100%; border-radius:0; border:0;}
  .modal-body{max-height:calc(100vh - 118px);}
}
/* Phones and small tablets in portrait: not enough width for 2-column forms/grids even with the nav
   off-canvas (a tablet in portrait — e.g. iPad at 768–860px — keeps them; see the rule above). */
@media (max-width: 640px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  .form-grid, .form-grid.cols-3{grid-template-columns:1fr;}
}

/* ============ Session runner ============ */
.runner-timer{font-family:var(--font-display); font-size:44px; font-weight:700; text-align:center; letter-spacing:.02em; margin:6px 0 2px;}
.runner-status{text-align:center; font-size:12.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px;}
.runner-start-btn{width:100%; padding:20px; font-size:17px; border-radius:16px;}
.runner-goal{
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px; background:var(--surface);
}
.runner-goal.logged{border-color:var(--brand);}
.runner-goal.expanded{background:var(--surface-2);}
.runner-goal-row{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;}
.runner-goal-name{font-size:13.5px; font-weight:600;}
.runner-goal-last{font-size:11.5px; color:var(--ink-3); margin-top:1px;}
.runner-goal-form{margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
.runner-tally{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px;
}
.runner-tally-count{font-family:var(--font-display); font-size:20px; min-width:28px; text-align:center;}
.runner-tally-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); font-size:18px; font-weight:700; cursor:pointer; color:var(--ink);}
.runner-loc{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); padding:9px 12px; background:var(--surface-2); border-radius:var(--radius-sm); margin-bottom:14px;}
.runner-loc svg{width:14px; height:14px; flex:none;}
.runner-loc.warn{color:#8a6100;}
.day-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  margin-bottom:10px;
}
.day-card-info b{display:block; font-size:14.5px;}
.day-card-info span{font-size:12px; color:var(--ink-3);}

/* Larger checkboxes so they're easy to tap on phones and tablets */
.checkline input[type=checkbox], .modal input[type=checkbox]{width:18px; height:18px; flex:none; margin-top:1px;}
.checkline{min-height:28px; align-items:center;}

/* Rich-text editor for mass emails (Communications → Compose) */
.rte-toolbar{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; border:1px solid var(--border); border-bottom:0; border-radius:8px 8px 0 0; background:var(--surface-2);}
.rte-toolbar button, .rte-toolbar select, .rte-toolbar .rte-color{height:30px; min-width:30px; padding:0 8px; border:1px solid var(--border); border-radius:6px; background:#fff; font-size:13px; cursor:pointer; width:auto;}
.rte-toolbar button:hover{background:var(--surface-2);}
.rte-toolbar .rte-color{display:inline-flex; align-items:center; gap:4px; font-weight:700;}
.rte-toolbar .rte-color input{width:20px; height:20px; padding:0; border:0; background:none;}
.rte-sep{width:1px; height:20px; background:var(--border); margin:0 2px;}
.rte{min-height:220px; max-height:480px; overflow:auto; padding:12px 14px; border:1px solid var(--border); border-radius:0 0 8px 8px; background:#fff; line-height:1.5; font-size:15px;}
.rte:focus{outline:2px solid var(--brand); outline-offset:-1px;}
.rte:empty:before{content:attr(data-placeholder); color:var(--ink-3, #999); pointer-events:none;}
.rte h2{font-size:20px; margin:.6em 0 .3em;} .rte h3{font-size:17px; margin:.6em 0 .3em;}
.rte a{color:var(--brand); text-decoration:underline;}
.rte ul, .rte ol{padding-left:22px;}
@media (max-width:600px){ .rte-toolbar{gap:3px;} .rte-toolbar button, .rte-toolbar select{height:36px;} }

/* ---------- Template designer (drag and drop) + forms built from templates ---------- */
.tf-heading{font-family:var(--font-display); font-size:16px; margin:14px 0 4px;}
.tf-req{color:var(--critical); font-weight:700;}
.tf-section{display:flex; flex-direction:column; gap:12px;}
body.fb-open{overflow:hidden;}
.fb-overlay{position:fixed; inset:0; z-index:60; background:var(--bg, #faf9f5); display:flex; flex-direction:column;}
.fb-head{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--surface);}
.fb-title{display:flex; gap:8px; flex:1; min-width:260px; flex-wrap:wrap;}
.fb-title input{flex:1; min-width:180px;}
.fb-title #fb-name{font-weight:600; font-size:16px;}
.fb-actions{display:flex; gap:8px;}
.fb-cols{flex:1; min-height:0; display:grid; grid-template-columns:230px minmax(0,1fr) 300px;}
.fb-palette, .fb-props{overflow:auto; padding:14px; background:var(--surface);}
.fb-palette{border-right:1px solid var(--border);}
.fb-props{border-left:1px solid var(--border);}
.fb-canvas{overflow:auto; padding:16px; display:flex; flex-direction:column; gap:14px;}
.fb-h{font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin-bottom:8px;}
.fb-group{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin:12px 0 6px;}
.fb-tile{display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px; border:1px solid var(--border-strong); border-radius:8px; background:#fff; cursor:grab; font-size:13px; user-select:none;}
.fb-tile:hover, .fb-tile:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 2px var(--brand-tint, rgba(15,118,106,.15));}
.fb-ico{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:var(--surface-2); font-size:13px; flex:none;}
.fb-section{border:1px solid var(--border-strong); border-radius:12px; background:#fff;}
.fb-section.selected{border-color:var(--brand);}
.fb-section.drop-sec{outline:2px dashed var(--brand);}
.fb-section-head{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); background:var(--surface-2); border-radius:12px 12px 0 0;}
.fb-section-title{flex:1; font-weight:600; border:1px solid transparent; background:transparent; padding:4px 6px;}
.fb-section-title:focus{border-color:var(--border-strong); background:#fff;}
.fb-grip{cursor:grab; color:var(--ink-2); user-select:none; letter-spacing:-2px;}
.fb-drop{padding:10px; display:flex; flex-direction:column; gap:8px; min-height:52px;}
.fb-drop.drop-end{outline:2px dashed var(--brand); outline-offset:-4px; border-radius:0 0 12px 12px;}
.fb-empty{border:2px dashed var(--border-strong); border-radius:8px; padding:16px; text-align:center; color:var(--ink-2); font-size:13px;}
.fb-card{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; position:relative;}
.fb-card:hover{border-color:var(--border-strong);}
.fb-card.selected{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-tint, rgba(15,118,106,.15));}
.fb-card.dragging{opacity:.4;}
.fb-card.drop-before:before, .fb-card.drop-after:after{content:''; position:absolute; left:0; right:0; height:3px; background:var(--brand); border-radius:2px;}
.fb-card.drop-before:before{top:-6px;} .fb-card.drop-after:after{bottom:-6px;}
.fb-card-main{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.fb-card-btns{display:flex; gap:2px; flex:none;}
.fb-card-btns .icon-btn{width:26px; height:26px; font-size:12px;}
@media (max-width: 900px){
  .fb-cols{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto;}
  .fb-palette{display:flex; gap:8px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); padding:8px;}
  .fb-palette .fb-h, .fb-palette .fb-group, .fb-palette > .small{display:none;}
  .fb-tile{flex:none; margin:0; white-space:nowrap;}
  .fb-props{border-left:0; border-top:1px solid var(--border); max-height:36vh;}
}

/* ---------- Template catalog + one-link intake packets ---------- */
.tpl-cat td{background:var(--surface-2); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); padding:6px 14px;}
.ik-head{margin:14px 0 8px;}
.ik-bar{height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:6px;}
.ik-bar span{display:block; height:100%; background:var(--brand); border-radius:6px; transition:width .3s;}
.ik-steps{display:flex; gap:6px; overflow-x:auto; padding:4px 0 8px; margin:0 -4px; -webkit-overflow-scrolling:touch;}
.ik-step{flex:none; display:flex; align-items:center; gap:8px; max-width:210px; padding:6px 12px 6px 6px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; cursor:pointer; font:inherit; font-size:12.5px; text-align:left;}
.ik-step i{flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:12px;}
.ik-step span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ik-step.on{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-tint, rgba(15,118,106,.15));}
.ik-step.on i{background:var(--brand); color:#fff;}
.ik-step.done i{background:var(--success); color:#fff;}
.ik-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
@media (max-width:600px){ .ik-step span{max-width:120px;} .ik-nav .btn{flex:1 1 auto;} }

/* ---- typed signatures, tick-any choices, people lists ---- */
.sig-styles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;}
.sig-style{display:flex; flex-direction:column; gap:2px; border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:8px 12px; cursor:pointer; background:var(--surface); position:relative; min-width:0;}
.sig-style input{position:absolute; opacity:0; pointer-events:none;}
.sig-style:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 2px rgba(15,118,106,.22);}
.sig-style:has(input:focus-visible){outline:2px solid var(--brand); outline-offset:2px;}
.sig-sample{font-size:30px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.sig-style-name{font-size:11px; color:var(--ink-3, #666);}
.sig-typed{line-height:1.3; color:var(--ink);}
.tf-chip{padding:6px 14px; border:1px solid var(--border-strong); border-radius:20px;}
.tf-person{border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; margin-bottom:10px; background:var(--surface-2);}
.tf-onfile-row{align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:6px; background:var(--surface);}
.tf-onfile-row:has(input:not(:checked)){opacity:.6;}
.tf-onfile-row:has(input:not(:checked)) b{text-decoration:line-through;}

/* ---- the family's own page (/family.html) ---- */
.family-page{max-width:900px; margin:0 auto; padding:12px 14px 60px;}
.family-head{display:flex; align-items:center; gap:12px; padding:10px 4px 14px;}
.family-head .brand-mark{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#0F766A,#1F3B63); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.family-head .brand-mark svg{width:24px; height:24px;}
.family-org{font:700 18px/1.2 var(--font-display, 'Manrope', sans-serif);}
.family-sub{font-size:12px; color:var(--ink-3, #66665f);}
body.family-mode .content{padding:0;}

/* ---- task and behavior counters, session time and billable units ---- */
.tf-counter{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); margin-bottom:6px;}
.tf-counter-name{flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere;}
.tf-counter-ctl{display:flex; align-items:center; gap:6px; flex:none;}
.tf-cbtn{flex:none; min-width:46px; width:46px; height:46px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface-2); font-size:24px; line-height:1; cursor:pointer; touch-action:manipulation; color:var(--ink);}
.tf-cbtn:active{background:var(--brand); border-color:var(--brand); color:#fff;}
.tf-cbtn:disabled{opacity:.5; cursor:default;}
.tf-count{width:74px; height:46px; text-align:center; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; padding:0 6px;}
.tf-counter-goal{font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3, #66665f); margin:14px 0 6px;}
.tf-counter-add{display:flex; gap:8px; margin-top:8px;}
.tf-counter-add input{flex:1; min-width:0;}
.tf-time{width:auto; min-width:130px;}
.units-strip{margin:12px 0; padding:10px 14px; border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius-md); background:var(--surface-2); font-size:14px;}
.units-strip.warn{border-left-color:#b3261e;}
.units-strip .hint{margin-top:2px;}
@media (max-width:520px){ .tf-counter{flex-direction:column; align-items:stretch;} .tf-counter-ctl{justify-content:flex-end;} }

/* ---------- Messages inbox ---------- */
.msg-inbox { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
.msg-inbox-rows { max-height: 68vh; overflow: auto; }
.msg-row { padding: 10px 16px; border-top: 1px solid var(--border); cursor: pointer; }
.msg-row:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.msg-row.active { background: var(--brand-soft, rgba(0,100,90,.08)); box-shadow: inset 3px 0 0 var(--brand); }
.msg-row-top, .msg-row-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.msg-row-sub span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) { .msg-inbox { grid-template-columns: 1fr; } .msg-inbox-rows { max-height: 32vh; } }
.msg-inbox > * { min-width: 0; }
.mi-compose textarea { width: 100%; box-sizing: border-box; }
.msg-inbox .msg-thread { overflow-wrap: anywhere; }

/* ---------- Check-in kiosk (lobby tablet) ---------- */
body.kiosk-mode .sidebar, body.kiosk-mode .topbar, body.kiosk-mode .mobile-nav-toggle, body.kiosk-mode #viewas-banner { display: none !important; }
body.kiosk-mode .main { margin: 0; max-width: none; width: 100%; }
body.kiosk-mode .content { padding: 0; max-width: none; }
.kiosk { position: fixed; inset: 0; z-index: 50; background: linear-gradient(135deg, #0f766a 0%, #1f3b63 100%); color: #fff; display: flex; flex-direction: column; overflow: auto; font-size: 20px; -webkit-user-select: none; user-select: none; }
.kiosk h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; margin: 6px 0 14px; font-weight: 600; }
.kiosk h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 12px; font-weight: 600; }
.k-small { letter-spacing: .12em; font-size: 16px; opacity: .85; }
.k-sub { font-size: clamp(18px, 2.2vw, 24px); opacity: .95; margin: 8px 0; }
.k-main { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding: 28px 5vw 12px; min-height: 0; }
.k-welcome { text-align: center; }
.k-dots { display: flex; gap: 16px; justify-content: center; margin: 22px 0 10px; }
.k-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.k-dot.on { background: #fff; }
.k-error { min-height: 26px; color: #ffd9d4; font-size: 18px; margin: 6px 0; text-align: center; }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: min(460px, calc((100vh - 330px) * 0.78)); min-width: 260px; justify-self: center; width: 100%; }
.k-key { aspect-ratio: 1; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #132422; font-size: clamp(30px, 4vw, 46px); font-weight: 500; cursor: pointer; touch-action: manipulation; }
.k-key:active { background: #cfe9e5; transform: scale(.96); }
.k-back { background: transparent; color: #fff; font-size: 34px; }
.k-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 5vw 18px; background: rgba(0,0,0,.18); }
.k-foot-text { display: flex; flex-direction: column; gap: 4px; font-size: 18px; max-width: 520px; }
.k-foot-text span { opacity: .85; font-size: 16px; }
.k-qr { background: #fff; padding: 6px; border-radius: 8px; width: clamp(100px, 12vw, 140px); line-height: 0; }
.k-qr svg { width: 100%; height: auto; display: block; }
.k-card { margin: auto; width: min(760px, 94vw); padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.k-center { align-items: center; text-align: center; }
.k-link, .k-secondary { align-self: flex-start; background: transparent; border: 0; color: #fff; font-size: 20px; padding: 6px 0; cursor: pointer; opacity: .9; }
.k-secondary { border: 2px solid rgba(255,255,255,.7); border-radius: 12px; padding: 10px 20px; }
.k-who { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.k-chip, .k-choice { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; padding: 10px 22px; font-size: 20px; cursor: pointer; }
.k-chip.on, .k-choice.on { background: #fff; color: #0f766a; font-weight: 600; }
.k-kids { display: flex; flex-direction: column; gap: 12px; }
.k-kid { display: flex; align-items: center; gap: 16px; text-align: left; width: 100%; padding: 14px 18px; border-radius: 16px; border: 3px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; }
.k-kid.on { background: #fff; color: #132422; border-color: #fff; }
.k-kid.off { opacity: .55; cursor: default; }
.k-av { width: 56px; height: 56px; border-radius: 50%; border: 3px solid currentColor; display: grid; place-items: center; font-weight: 600; font-size: 20px; flex: none; }
.k-kid-name { display: flex; flex-direction: column; flex: 1; }
.k-kid-name span { font-size: 16px; opacity: .8; }
.k-kid-state { font-size: 16px; opacity: .85; }
.k-q { background: rgba(255,255,255,.1); border-radius: 16px; padding: 14px 18px; }
.k-q-label { font-size: 22px; margin-bottom: 10px; }
.k-req { color: #ffd9d4; }
.k-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.k-choices .k-choice { padding: 14px 34px; font-size: 22px; }
.k-input { width: 100%; box-sizing: border-box; border-radius: 12px; border: 0; padding: 12px; font-size: 20px; color: #132422; background: #fff; }
.k-sign { position: relative; background: #fff; border-radius: 16px; height: 220px; }
.k-sign canvas { width: 100%; height: 100%; display: block; border-radius: 16px; }
.k-sign-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #8a9a97; font-size: 28px; pointer-events: none; }
.k-go { background: #fff; color: #0f766a; border: 0; border-radius: 16px; padding: 18px; font-size: 26px; font-weight: 700; cursor: pointer; margin-top: 8px; min-width: 260px; }
.k-go:disabled { opacity: .45; }
.k-big-check { width: 110px; height: 110px; border-radius: 50%; background: #fff; color: #0f766a; display: grid; place-items: center; font-size: 64px; font-weight: 700; }
.k-alert { background: rgba(255,255,255,.95); color: #8a1c10; border-radius: 16px; padding: 14px 22px; }
.kiosk-exit { position: absolute; top: 12px; left: 14px; background: rgba(0,0,0,.25); color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; font-size: 16px; cursor: pointer; z-index: 2; }
@media (max-width: 800px) { .k-main { grid-template-columns: 1fr; flex: none; min-height: auto; } .kiosk { font-size: 18px; } .k-pad { margin: 0 auto 12px; } }
.k-hint { font-size: 17px; opacity: .85; margin-top: 4px; }

/* ---------- Kiosk & phone simulator (computer) ---------- */
.kiosk.sim { position: relative; inset: auto; width: 100%; height: 100%; z-index: 0; border-radius: 12px; font-size: 14px; }
.kiosk.sim h1 { font-size: 26px; margin: 4px 0 8px; }
.kiosk.sim h2 { font-size: 22px; }
.kiosk.sim .k-main { padding: 12px 20px 6px; gap: 12px; }
.kiosk.sim .k-sub { font-size: 15px; }
.kiosk.sim .k-pad { max-width: 270px; min-width: 0; gap: 9px; }
.kiosk.sim .k-key { font-size: 24px; }
.kiosk.sim .k-foot { padding: 8px 20px; }
.kiosk.sim .k-foot-text { font-size: 13px; } .kiosk.sim .k-foot-text span { font-size: 12px; }
.kiosk.sim .k-qr { width: 84px; }
.kiosk.sim .k-card { padding: 14px 18px; width: 100%; gap: 8px; }
.kiosk.sim .k-kid { font-size: 16px; padding: 8px 12px; } .kiosk.sim .k-av { width: 40px; height: 40px; font-size: 15px; }
.kiosk.sim .k-q-label { font-size: 15px; } .kiosk.sim .k-choice, .kiosk.sim .k-chip { font-size: 15px; padding: 7px 16px; }
.kiosk.sim .k-sign { height: 130px; } .kiosk.sim .k-go { font-size: 19px; padding: 11px; }
.kiosk.sim .k-big-check { width: 70px; height: 70px; font-size: 40px; }
.ksim { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ksim-tablet { background: #1b1f1f; border-radius: 22px; padding: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.ksim-tablet .screen { height: 540px; border-radius: 12px; overflow: hidden; position: relative; }
.ksim-phone { background: #1b1f1f; border-radius: 38px; padding: 12px; width: 340px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.ksim-phone .screen { height: 620px; border-radius: 28px; overflow: auto; background: var(--bg, #faf9f5); color: #141413; position: relative; }
.ksim-phone .bar { background: #0F766A; color: #fff; padding: 12px 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; }
.ksim-phone .body { padding: 12px; }
.ksim-phone .card { background:#fff; border:1px solid #e4e2da; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.ksim-phone .muted { color:#66665f; } .ksim-phone .small { font-size:13px; }
.ksim-phone h2 { font-size:18px; margin:0 0 8px; }
.ksim-phone button.primary { background:#0F766A; color:#fff; border:0; border-radius:8px; padding:9px 16px; cursor:pointer; font:inherit; }
.ksim-phone button.primary:disabled { opacity:.5; }
.ksim-phone input, .ksim-phone textarea { font:inherit; border:1px solid #e4e2da; border-radius:8px; padding:8px; width:100%; }
.ksim-phone .badge { display:inline-block; border-radius:999px; padding:1px 9px; font-size:12px; background:#eee; } .ksim-phone .ok { background:#dff3e8; color:#14643a; }
.ksim-phone .row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; } .ksim-phone .row > div { flex:1; min-width:110px; }
.ksim-phone .kidbtn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; padding:10px 12px; margin:6px 0; border:2px solid #e4e2da; border-radius:12px; background:#fff; font:inherit; cursor:pointer; }
.ksim-phone .kidbtn.on { border-color:#0F766A; background:#e8f5f2; } .ksim-phone .kidbtn:disabled { opacity:.55; cursor:default; }
.ksim-phone .qbox { background:#f7f6f1; border-radius:10px; padding:8px 10px; margin:8px 0; } .ksim-phone .qbox b { display:block; font-weight:600; margin-bottom:6px; }
.ksim-phone .chips { display:flex; gap:8px; flex-wrap:wrap; } .ksim-phone .chip { border:2px solid #e4e2da; background:#fff; border-radius:999px; padding:7px 16px; font:inherit; cursor:pointer; }
.ksim-phone .chip.on { background:#0F766A; border-color:#0F766A; color:#fff; }
.ksim-phone .linkbtn { background:none; border:0; color:#0F766A; font:inherit; cursor:pointer; padding:0 0 6px; }
.ksim-phone .bigcheck { width:70px; height:70px; border-radius:50%; background:#dff3e8; color:#14643a; display:grid; place-items:center; font-size:40px; font-weight:700; margin:4px auto 8px; }
.ksim-phone .alertbox { background:#fdecea; color:#8a1c10; border-radius:10px; padding:8px 12px; margin-top:8px; }
@media (max-width: 1100px) { .ksim { grid-template-columns: 1fr; } .ksim-phone { margin: 0 auto; } .ksim-tablet .screen { height: 520px; } }