/* Productivity Dashboard: app-only rules. Everything else comes from captivate-kit.css (Captivate One kit v0.3),
   loaded first. Palette, type scale, controls, tables, strip, popover and print all live in the kit; this file
   only adds what the dashboard needs on top. Restyled to the Captivate One look 2026-10-07 (ROLLOUT-PLAN.md §1).
   Brand wave logo in the app bar and on the gate panel 2026-10-07 (kit v0.3; assets in this folder). */

/* JS toggles this class on the gate, the app and the three views */
.hidden{display:none!important}

/* ---- Sign-in / not-authorized gate: one small centered panel on the surface */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--sp-6) var(--pad)}
.gatecard{max-width:440px;width:100%;margin:0;padding:28px 28px 24px}
.gatecard .brand{display:flex;align-items:center;margin-bottom:20px;color:var(--text)}
/* the Captivate wave logo on the gate, 56px tall; the kit's .capbar .brand .logo rules do not reach here, so the
   same two-image theme switch is restated for the gate (dark file by default, light file in Light / Match system) */
.gatecard .brand .logo{display:block;height:56px;width:auto;flex:none}
.gatecard .brand .logo.onlight{display:none}
:root[data-theme="light"] .gatecard .brand .logo.ondark{display:none}
:root[data-theme="light"] .gatecard .brand .logo.onlight{display:block}
@media (prefers-color-scheme: light){
  :root[data-theme="system"] .gatecard .brand .logo.ondark{display:none}
  :root[data-theme="system"] .gatecard .brand .logo.onlight{display:block}
}
.gatecard h2{font-size:var(--fs-xl);margin:0 0 6px}
.gatecard p{color:var(--muted);font-size:var(--fs-sm);margin:0 0 18px}
.gatecard .callout{margin-top:16px;font-size:var(--fs-sm)}

/* ---- App bar: tabs sit in the bar; the active underline lands on the bar's bottom hairline */
.capbar .appnav{margin:0 0 0 var(--sp-3);border-bottom:0;align-self:stretch;gap:0 26px;overflow:visible}
.capbar .appnav button{height:100%;padding:0;margin:0;border-bottom:2px solid transparent}
.capbar .appnav button.on{border-bottom-color:var(--accent)}
.capbar .title{display:flex;align-items:center;gap:10px;min-width:0}
.capbar .title .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct{position:relative}
.avatar{width:var(--ctl-sm);height:var(--ctl-sm);border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
  background:var(--surface-2);color:var(--accent-soft-ink);border:1px solid var(--accent-line);
  font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em}
.avatar:hover,.avatar[aria-expanded="true"]{background:var(--selected)}
.acct .pop{min-width:320px}
.pop .who{display:flex;flex-direction:column;gap:2px;padding:8px 16px 10px;overflow-wrap:anywhere}
.pop .seg{margin:2px 16px 10px;display:flex}
.pop .seg button{flex:1;white-space:nowrap;padding:0 10px}

/* ---- Filters: one row of inline-labelled controls that apply on change */
.filters{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.filters .f{flex-direction:row;align-items:center;gap:8px}
.filters .input{width:auto}
.filters input[type=date].input{min-width:150px}

/* ---- Tables */
.tbl td.person{font-weight:500}
.tbl th .sort{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.tbl th .sort:hover{color:var(--text)}
.tbl th .arr{font-size:inherit;line-height:1;opacity:0;transform:translateY(-1px) scale(.8)}
.tbl th[aria-sort] .arr{opacity:1}
@media (any-pointer:coarse){.tbl th .sort{min-height:44px;margin:-10px 0 -9px}}   /* 44px hit area on iPad and phone without a taller header row */
/* folded Activity column (phones, letter-width print): the header carries the order of the three counts beneath each total */
.tbl th.act .sort{flex-wrap:wrap;justify-content:flex-end;row-gap:0}
.tbl th.act .sort .sub{flex-basis:100%;font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.3}
.br{font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:var(--label-case);color:var(--muted);white-space:nowrap}
.stale{color:var(--warn);font-weight:500}
.foot{color:var(--muted);font-size:var(--fs-sm);margin:var(--sp-4) 0 0}
.pager{display:flex;align-items:center;gap:var(--sp-2)}
.tbl .act{display:none}

/* ---- Weekly activity chart: fixed-pixel SVG (no viewBox scaling), real 13px condensed labels, scrolls sideways if needed */
.chart{padding:var(--sp-4) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart svg{display:block;max-width:none}   /* the kit's svg{max-width:100%} would clip the last bars; the container scrolls instead */
.chart text{font-family:var(--cond);font-size:13px;fill:var(--muted)}
.chart text.v{fill:var(--text)}
.chart rect{fill:var(--chart-1)}
.chart rect:hover{fill:var(--accent-hi)}
.chart line{stroke:var(--border)}

/* ---- Tablets and phones */
@media (max-width:980px){
  .capbar .title .beta{display:none}  /* the access level stays in the account menu ("Leadership access") */
}
@media (max-width:760px){
  .capbar .hs{display:none}            /* HubSpot link stays in the account menu */
  .tbl .fold{display:none}             /* Calls / Emails / Meetings fold into one Activity column */
  .tbl .act{display:table-cell}
  #rec-table td.person{min-width:220px} /* record name + residence line keep their width inside the sideways-scrolling table */
}
@media (max-width:640px){
  /* phones: brand and account on the first row, the two tabs on their own full-width row beneath (no page overflow) */
  .capbar{flex-wrap:wrap;row-gap:0}
  .capbar .title{display:none}        /* the kit hides it here too; restated because .title is display:flex above */
  .capbar .brand,.capbar .right{min-height:var(--bar)}
  .capbar .appnav{order:3;flex:1 1 100%;margin:0;gap:0 22px;align-self:auto;overflow-x:auto;min-height:44px}
  .capbar .appnav button{height:44px}
  .sh{flex-wrap:wrap}                                   /* section note drops under the heading instead of squeezing it */
  .sh h2{white-space:nowrap}
  .sh .r{flex-basis:100%;margin-left:0}
  .tbl td:not(.person),#lb td.person{white-space:nowrap}  /* names stay on one line inside the sideways-scrolling table */
  .filters .f{flex:1 1 40%}
  .filters .f .input,.filters select.input{flex:1;min-width:0;width:100%}
  .filters select.input{flex:1 1 40%}
  .filters .btn{flex:1 1 100%}
}

/* ---- Print: light paper comes from the kit; hide the controls, keep every figure */
@media print{
  .filters,.pager,.foot .btn,.appnav,.ph .actions{display:none!important}   /* .ph .actions: the person view's Back / Open HubSpot buttons */
  .chart{overflow:visible}
  .gatecard .brand .logo.ondark{display:none!important} .gatecard .brand .logo.onlight{display:block!important}   /* black wordmark on paper, like the kit's app-bar rule */
}