/* The prototype's fonts, served with the app instead of from Google, so no page
   load reaches a third party. These rules stand in for the prototype's Google Fonts
   link and ask for the same families, weights, styles and axes:
     Atkinson Hyperlegible Next, weights 400, 600, 700 and 800
     Atkinson Hyperlegible Mono, weights 500 and 700
     Fraunces, roman and italic, with its opsz, wght (100 to 900), SOFT and WONK axes
     Caveat, weight 600
   The family names are the prototype's own, so its styles apply unchanged. Each
   Atkinson weight is its own face, as in the Google link, so a weight the link does
   not ask for (500 in Next, for example) falls back the same way. The files come from
   the @fontsource packages. */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.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;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.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;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.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;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.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;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./atkinson-hyperlegible-mono-latin-ext-wght-normal-CXgNM06D.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./atkinson-hyperlegible-mono-latin-wght-normal-CoA7y8X5.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;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./atkinson-hyperlegible-mono-latin-ext-wght-normal-CXgNM06D.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./atkinson-hyperlegible-mono-latin-wght-normal-CoA7y8X5.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-vietnamese-full-normal-7BpKI3vF.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-latin-ext-full-normal-YHFkNujK.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-latin-full-normal-CFFu7zhK.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-vietnamese-full-italic-BHALq22K.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-latin-ext-full-italic-B8-t4Nou.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fraunces-latin-full-italic-D2JnYqd-.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;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./caveat-cyrillic-ext-600-normal-DDEJyoof.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./caveat-cyrillic-600-normal-Ba_MyzgW.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./caveat-latin-ext-600-normal-DDJRD6ps.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./caveat-latin-600-normal-zlTlWIYU.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;
}
/* The prototype's styles: color tokens, the page, buttons and the prototype bar. In the prototype's order; do not reorder. */
/* Single light theme on purpose: this mirrors the product's own high-contrast light UI. Every color is painted explicitly. */
:root {
  color-scheme: light;
  --ink: #10201C; --ink2: #3E4C47; --ground: #F4F7F5; --card: #FFFFFF; --line: #D5DEDA; --line2: #B9C6C1; --faint: #EEF2F0; --grid: #E3EAE7;
  --teal: #0E6B61; --tealD: #0A4F48; --tealT: #E3F3EF; --tealW: #F7FBFA;
  --amber: #E9A23B; --amberT: #FFF1D6; --amberD: #5C3A07; --amberW: #FFF8EA;
  --learner: #7A63D0; --learnerT: #EDE8FB;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
kbd { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 0 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .65; line-height: 1.5; }
.grow { flex: 1; }
.muted { color: var(--ink2); }
.help { margin: 0; font-size: 14px; color: var(--ink2); }
.eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.textbtn { border: 0; background: none; padding: 0; color: var(--teal); font-weight: 800; text-decoration: underline; font-size: inherit; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; border-width: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--teal); background: var(--card); color: var(--tealD); font-weight: 800; font-size: 16px; text-align: center; }
.btn.primary { background: var(--teal); color: #FFFFFF; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn.big { width: 100%; min-height: 56px; font-size: 18px; }
.btn:disabled { opacity: .5; }
.ppill { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; }
.ppill[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.ppill.wide { width: 100%; text-align: left; border-radius: 10px; min-height: 42px; }

/* prototype bar */
.pbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ink); color: #FFFFFF; display: flex; align-items: center; gap: 10px 16px; padding: 8px 20px; flex-wrap: wrap; }
.pbar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 700; font-size: 19px; }
.pbar .brand .light { font-family: var(--sans); font-weight: 600; font-size: 14px; color: #BFD0CA; }
.pbar .tag { font-size: 13px; color: #BFD0CA; }
.seg { display: inline-flex; gap: 2px; background: #22342F; border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: #DCE6E2; font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 8px; }
.seg button[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }
.linkbtn { border: 0; background: transparent; color: #DCE6E2; font-size: 14px; font-weight: 700; text-decoration: underline; padding: 6px; }
.tipbar { background: var(--amberT); color: var(--amberD); font-size: 14px; font-weight: 700; padding: 8px 20px; }
/* The prototype's styles: staff task guides and safe target highlighting. In the prototype's order; do not reorder. */
/* Staff guide: safe explanations and exact-control spotlight */

.staff-guide-entry{position:fixed;right:18px;bottom:18px;z-index:70;min-height:44px!important;box-shadow:0 3px 12px #123a2b18}
.staff-guide-panel,.staff-guide-compact{position:fixed;z-index:75;box-sizing:border-box;display:flex;flex-direction:column;width:min(460px,calc(100vw - 36px));max-height:calc(100dvh - 120px);overflow:hidden;background:var(--card,#fffef9);border:1px solid var(--line,#cbd3c5);border-radius:22px;box-shadow:0 18px 60px #15392d26;padding:24px;color:var(--ink,#172f28)}
.staff-guide-is-open .staff-guide-entry{visibility:hidden;pointer-events:none}
.staff-guide-panel{right:18px;top:82px}.staff-guide-panel h2,.staff-guide-compact h2{font-family:var(--serif);font-size:27px;line-height:1.13;margin:4px 0 0}.staff-guide-panel h3,.staff-guide-compact h3{font-family:var(--serif);font-size:28px;line-height:1.15;margin:18px 0 12px}
.staff-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;position:relative;flex:none;z-index:2;background:var(--card,#fffef9);padding:12px 0}.staff-guide-dismiss{display:flex;gap:6px;flex-shrink:0}.staff-guide-head .eyebrow{color:var(--teal,#0e6b61);font-size:11px}.staff-guide-role{display:inline-flex;font-size:12px;font-weight:800;border-radius:20px;padding:4px 9px;background:var(--tealT,#e5f2ee);color:var(--teal,#0e6b61)}
.staff-guide-panel .btn,.staff-guide-compact .btn{min-height:44px;padding:10px 14px;border-radius:12px;white-space:normal;line-height:1.15}.staff-guide-panel .btn.primary,.staff-guide-compact .btn.primary{background:var(--teal,#0e6b61);border-color:var(--teal,#0e6b61);color:white}.staff-guide-panel .btn:focus-visible,.staff-guide-compact .btn:focus-visible,.staff-guide-panel summary:focus-visible{outline:3px solid var(--amberD,#ae5a00);outline-offset:3px}
.staff-guide-intro{font-size:15px;line-height:1.45;color:var(--ink2,#53655e);margin:12px 0 18px}.staff-guide-task-grid{display:grid;gap:10px}.staff-guide-task{width:100%;display:grid;grid-template-columns:1fr auto;gap:7px 12px;text-align:left;padding:16px;background:var(--card,#fffef9);border:1px solid var(--line,#cbd3c5);border-radius:15px;min-height:100px}.staff-guide-task:hover{border-color:var(--teal,#0e6b61);background:var(--tealT,#e5f2ee)}.staff-guide-task b{font-size:17px;line-height:1.22}.staff-guide-task small{grid-column:1/-1;font-size:14px;line-height:1.4;color:var(--ink2,#53655e)}.staff-guide-task .staff-guide-count{font-size:12px;color:var(--ink2,#53655e);font-weight:700}.staff-guide-task .staff-guide-start{font-size:13px;color:var(--teal,#0e6b61);font-weight:800;grid-column:1/-1}.staff-guide-task:first-child{background:var(--tealT,#e5f2ee);border-color:var(--teal,#0e6b61)}
.staff-guide-sectionline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 8px;font-size:13px;color:var(--ink2,#53655e)}.staff-guide-progress{height:6px;width:100%;border:0;border-radius:6px;overflow:hidden;display:block;appearance:none;background:var(--line,#d7dfd5)}.staff-guide-progress::-webkit-progress-bar{background:var(--line,#d7dfd5)}.staff-guide-progress::-webkit-progress-value{background:var(--teal,#0e6b61);border-radius:6px}.staff-guide-progress::-moz-progress-bar{background:var(--teal,#0e6b61);border-radius:6px}
.staff-guide-lead{font-size:17px;line-height:1.5;margin:0 0 16px;overflow-wrap:anywhere}.staff-guide-safety{margin:12px 0;padding:12px;border-radius:12px;background:var(--amberT,#fff3d9);border-left:3px solid var(--amberD,#ae5a00);font-size:14px;line-height:1.4}.staff-guide-notice{margin:12px 0;padding:12px;background:var(--tealT,#e5f2ee);border-radius:12px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.staff-guide-panel details,.staff-guide-compact details{border-top:1px solid var(--line,#cbd3c5);margin-top:14px;padding-top:6px}.staff-guide-panel summary,.staff-guide-compact summary{cursor:pointer;font-size:14px;font-weight:700;padding:12px 0;min-height:44px;color:var(--teal,#0e6b61)}.staff-guide-details p{margin:0 0 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.staff-guide-details b{display:block;margin-bottom:3px}.staff-guide-jump{display:grid;gap:6px;margin-bottom:12px}.staff-guide-jump .btn{text-align:left;justify-content:flex-start}.staff-guide-jump .btn[aria-current=step]{background:var(--tealT,#e5f2ee);border-color:var(--teal,#0e6b61)}
.staff-guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.staff-guide-actions .primary{flex:1}.staff-guide-show{width:100%;margin:2px 0 0}.staff-guide-footer{border-top:1px solid var(--line,#cbd3c5);padding-top:14px;margin-top:18px;font-size:12px;line-height:1.45;color:var(--ink2,#53655e)}.staff-guide-button-list{display:grid;gap:8px;margin-top:12px}.staff-guide-button-list .btn{text-align:left;justify-content:flex-start}
.staff-guide-target{outline:4px solid var(--teal,#0e6b61)!important;outline-offset:5px!important;box-shadow:0 0 0 10px #5ec6ab55!important;scroll-margin:80px!important}
.staff-guide-spotlight{position:fixed;pointer-events:none;z-index:74;border:3px solid var(--teal,#0e6b61);border-radius:12px;box-shadow:0 0 0 5px #5ec6ab55;box-sizing:border-box}.staff-guide-context{font-size:14px;line-height:1.5;margin:10px 0;overflow-wrap:anywhere}.staff-guide-context b{display:block;color:var(--teal,#0e6b61);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.staff-guide-panel[data-staff-guide-positioning],.staff-guide-compact[data-staff-guide-positioning]{visibility:hidden}.staff-guide-panel,.staff-guide-compact,.staff-guide-entry,.staff-guide-spotlight,.staff-guide-connector{animation:none!important;transition:none!important}.staff-guide-compact .staff-guide-head{top:0}.staff-guide-target{animation:none!important;transition:none!important}
.staff-guide-compact{width:min(380px,calc(100vw - 32px));padding:20px;max-height:calc(100dvh - 32px);border:2px solid var(--teal,#0e6b61)}.staff-guide-compact h3{font-size:23px;margin:10px 0}.staff-guide-compact .staff-guide-lead{font-size:15px;margin:0}.staff-guide-compact .staff-guide-actions{margin-top:14px}.staff-guide-compact .staff-guide-head{margin-bottom:10px}.staff-guide-compact .staff-guide-head h2{font-family:var(--sans);font-size:13px;color:var(--teal,#0e6b61)}.staff-guide-connector{position:fixed;z-index:74;pointer-events:none;height:2px;background:var(--teal,#0e6b61);transform-origin:left center}.staff-guide-connector::after{content:'';position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--teal,#0e6b61)}
@media(max-width:600px){.staff-guide-entry{right:12px;bottom:12px}.staff-guide-panel{left:12px;right:12px;top:64px;width:calc(100vw - 24px);max-height:calc(100dvh - 80px);padding:20px}.staff-guide-panel h3{font-size:25px}.staff-guide-head{top:0}.staff-guide-head h2{font-size:23px}.staff-guide-dismiss .btn{padding:10px}.staff-guide-compact{max-width:calc(100vw - 24px)}.staff-guide-task{padding:14px}}
@media(prefers-reduced-motion:reduce){.staff-guide-target{scroll-behavior:auto!important}.staff-guide-panel,.staff-guide-compact{animation:none;transition:none}}


.staff-guide-entry{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(100vw - 24px);border-radius:14px}.staff-guide-entry>.btn{min-height:44px;padding:10px 14px}.staff-guide-search{margin-top:14px}.staff-guide-search input{min-height:44px;width:100%;margin:6px 0 10px}.staff-guide-search-result{display:grid;width:100%;text-align:left;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:14px;min-height:70px;margin:8px 0}.staff-guide-search-result:hover{border-color:var(--teal)}.staff-guide-search-result small{font-size:13px;color:var(--ink2)}.staff-guide-search-result span{font-size:13px;font-weight:800;color:var(--teal)}

.staff-guide-step-nav{position:relative;flex:none;z-index:2;background:var(--card,#fffef9);border-top:1px solid var(--line,#cbd3c5);padding:12px 0;margin-bottom:0}.staff-guide-step-card .staff-guide-head h2{font-family:var(--sans);font-size:13px;color:var(--teal,#0e6b61)}.staff-guide-step-card .staff-guide-head{margin-bottom:0}.staff-guide-step-card .eyebrow{display:none}.staff-guide-utility{margin-top:8px}.staff-guide-utility .btn{min-height:36px;padding:8px 12px;font-size:13px}.staff-guide-target-status{font-size:13px;line-height:1.45;color:var(--ink2,#53655e);margin:10px 0}.staff-guide-sectionline{margin-top:12px}.staff-guide-step-card h3{font-size:25px;margin-top:12px}

.staff-guide-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1 1 auto}.staff-guide-head{padding-top:0;padding-bottom:12px}.staff-guide-step-nav{margin-top:8px;padding-bottom:0}.staff-guide-body>.staff-guide-utility:first-child{margin-top:0}@media(max-width:600px){.staff-guide-panel,.staff-guide-compact{width:calc(100vw - 32px);max-width:calc(100vw - 32px);padding:16px}.staff-guide-panel{left:16px;right:16px}.staff-guide-head{gap:8px}.staff-guide-step-nav{flex-wrap:nowrap}.staff-guide-step-nav .btn{font-size:14px}.staff-guide-head .btn{padding:10px}}

.staff-guide-entry[data-staff-guide-collapsed]>:not([data-staff-guide-entry-help]){display:none}.staff-guide-entry[data-staff-guide-collapsed]>[data-staff-guide-entry-help]{display:inline-flex}
/* The prototype's styles: role practice, exact-control instruction and stable coaching. In the prototype's order; do not reorder. */
/* Staff Academy: required role practice and exact control Inspector */
.staff-academy{--academy-teal:#0e6b61;color:var(--ink,#172f28);font-family:var(--sans,sans-serif)}.academy-entry{position:static;display:inline-flex;align-items:center;flex:0 0 auto;gap:0;margin-inline-start:8px}.academy-entry > button.academy-help-button{min-height:44px;padding:8px 12px;font-size:14px;white-space:nowrap;border-radius:10px;background:var(--card,#fffef9);color:var(--academy-teal,var(--teal,#0e6b61))}.academy-app-header{display:flex;justify-content:flex-end;align-items:center;padding:8px 16px;background:var(--card,#fffef9);border-bottom:1px solid var(--line,#cbd3c5)}.academy-dialog-header{padding:0 0 8px;border:0;background:transparent}.academy-dialog-header .academy-entry{margin-inline-start:auto}.academy-panel{position:fixed;right:16px;top:88px;z-index:90;box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 112px);padding:20px;display:flex;flex-direction:column;background:var(--card,#fffef9);border:2px solid var(--academy-teal);border-radius:22px;box-shadow:0 18px 64px #123a2b30}.academy-panel header{display:flex;gap:12px;align-items:start;justify-content:space-between;flex:none}.academy-panel h2{font:600 26px/1.15 var(--serif,serif);margin:6px 0 14px}.academy-panel small{font-size:11px;letter-spacing:.1em;font-weight:800;color:var(--academy-teal)}.academy-panel .btn{min-height:44px;white-space:normal}.academy-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.academy-body p{font-size:14px;line-height:1.5;overflow-wrap:anywhere}.academy-body p b{display:block;color:var(--academy-teal)}.academy-body .academy-lead{font-size:17px;line-height:1.5}.academy-panel footer{display:flex;gap:8px;flex:none;padding-top:12px;border-top:1px solid var(--line,#cbd3c5)}.academy-panel footer .btn{flex:1}.academy-task-map{display:grid;gap:10px;margin:16px 0}.academy-task-map article{display:grid;grid-template-columns:32px 1fr;gap:4px 10px;padding:12px;border:1px solid var(--line,#cbd3c5);border-radius:14px}.academy-task-map article span{grid-row:1/3;display:grid;place-items:center;align-self:start;height:32px;border-radius:50%;background:#dff2eb;font-weight:800;color:var(--academy-teal)}.academy-task-map article p{margin:0;grid-column:2}.academy-notice{padding:12px;border-radius:12px;background:#fff3d9}.academy-practice-banner{position:fixed;top:0;left:0;right:0;z-index:95;display:flex;gap:16px;justify-content:center;background:#fff0bd;color:#3b3207;padding:10px 16px;font-size:14px}.academy-practice-banner b{letter-spacing:.08em}.academy-target{outline:4px solid #0e6b61!important;outline-offset:5px!important;box-shadow:0 0 0 10px #5ec6ab55!important}.academy-panel progress{width:100%;accent-color:var(--academy-teal)}.academy-progress{font-weight:700;color:var(--academy-teal)}.academy-welcome{left:50%;right:auto;transform:translateX(-50%);width:min(600px,calc(100vw - 32px))}.academy-panel summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--academy-teal);font-weight:700}@media(max-width:600px){.academy-panel{top:70px;max-height:calc(100dvh - 86px);padding:16px}.academy-practice-banner{font-size:12px;display:block;text-align:center}.academy-practice-banner span{display:block}.academy-entry > button.academy-help-button{font-size:13px;padding:8px 10px}.academy-panel h2{font-size:23px}}

body:has(.academy-practice-banner){padding-top:var(--academy-banner-h,48px)}body:has(.academy-practice-banner) .pbar{top:calc(var(--academy-banner-h,48px) + env(safe-area-inset-top,0px))}body:has(.academy-practice-banner) #app:has(> .fmode) > .pbar{top:0}.academy-search-results{display:grid;gap:8px}.academy-panel input[type=search]{width:100%;min-height:44px;margin:8px 0}

.academy-entry,.academy-panel,.academy-target{animation:none!important;transition:none!important}.academy-body{flex:1 1 auto}.academy-panel header{background:var(--card,#fffef9)}.academy-panel footer{background:var(--card,#fffef9)}.academy-panel .academy-progress{margin:0 0 6px}.academy-panel progress{height:6px}.academy-panel [data-academy-target-status]{font-size:13px;color:var(--ink2,#3e4c47)}

.academy-tools{display:flex;gap:8px;flex:none;padding:0 0 10px}.academy-tools>.btn{flex:1;font-size:13px;padding:8px 10px}.academy-panel:has(.academy-tools){padding-top:16px}.academy-panel header h2{margin-bottom:12px}

body:has(.academy-practice-banner) #app :is(button,input,select,textarea,[role="button"]){scroll-margin-top:calc(var(--academy-banner-h,48px) + 110px);scroll-margin-bottom:100px}html:has(.academy-practice-banner){scroll-padding-top:calc(var(--academy-banner-h,48px) + 110px);scroll-padding-bottom:100px}

@media print{.staff-academy,[data-academy-root],.academy-entry,[data-academy-header],[data-academy-header-host],.academy-panel,.academy-practice-banner{display:none!important}body:has(.academy-practice-banner){padding-top:0!important}.academy-target{outline:none!important;box-shadow:none!important}}

@media print{body:has(.academy-practice-banner)>*,html body:has(.academy-practice-banner)>#tpp-view{display:none!important}body:has(.academy-practice-banner)::before{content:"PRACTICE CLINIC. Fictional training records only. This printout contains no clinical or billing records.";display:block!important;padding:12mm;font:700 16pt/1.5 sans-serif;color:#000;background:#fff}}

.academy-viewer-preview{position:fixed;inset:0;overflow:auto;background:var(--ground);z-index:70}
body.tpp-viewing .academy-panel{z-index:1010}body.tpp-viewing .academy-practice-banner{z-index:1015}body.tpp-viewing:has(.academy-practice-banner) #tpp-view{top:var(--academy-banner-h,48px)}
.academy-panel.academy-coach{width:min(320px,calc(100vw - 24px));padding:14px;border-radius:18px;max-height:calc(100dvh - 24px)}.academy-coach header{align-items:center;gap:8px}.academy-coach header h2{font:700 19px/1.2 var(--sans,sans-serif);margin:5px 0 8px}.academy-coach header small{font-size:10px;letter-spacing:.07em}.academy-coach .academy-lead{font-size:15px;line-height:1.5;margin:8px 0 12px}.academy-coach .btn{min-height:40px;padding:7px 10px;font-size:13px}.academy-coach footer{padding-top:8px}.academy-coach .academy-progress{font-size:12px;margin:0}.academy-coach .academy-tools{padding-bottom:6px;flex-wrap:wrap}.academy-coach .academy-notice{padding:8px;font-size:12px;margin:6px 0}.academy-coach .academy-body>details{font-size:13px}.academy-coach .academy-tools button{flex:1 1 40%}.academy-spotlight{position:fixed;z-index:89;pointer-events:none;border:3px solid #42d8b1;border-radius:10px;box-shadow:0 0 0 9999px #08271c66;box-sizing:border-box}.academy-spotlight[data-has-errors]{box-shadow:0 0 0 4px #42d8b133}body.tpp-viewing .academy-spotlight{z-index:1009}.academy-step-line{display:flex;align-items:center;gap:8px}.academy-step-line progress{flex:1;min-width:0;height:5px}.academy-coach [data-academy="more"]{flex:0 0 auto}.academy-screen-tools{display:grid;gap:8px}.academy-coach .academy-body{scrollbar-gutter:auto}.academy-coach header [data-academy="pause"]{align-self:start}.academy-step-result{color:var(--academy-teal);font-size:12px}@media(prefers-reduced-motion:no-preference){.academy-step-result{animation:academy-result .2s ease-out}@keyframes academy-result{from{opacity:.3}to{opacity:1}}}@media print{.academy-spotlight{display:none!important}}

/* Help, redesigned (version 26e): a drawer of walkthroughs and tools, a coach beside one lit control, Explain mode and a finish card */
.staff-academy{--academy-ink:#10201c;--academy-ink2:#3e4c47;--academy-ink3:#66756f;--academy-line:#dce4e0;--academy-faint:#eef2f0;--academy-ground:#f2f5f3;--academy-deep:#0a4f48;--academy-tint:#e3f3ef;--academy-mint:#4fd1b5;--academy-night:linear-gradient(135deg,#062723 0%,#0a3a34 55%,#0d2f3d 100%)}
.academy-entry > button.academy-help-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:5px 16px 5px 5px;border-radius:999px;border:1.5px solid #bfe3d8;background:linear-gradient(180deg,#f5fcf9,#e3f3ef);color:#0e6b61;font-weight:800;font-size:15px}.academy-entry > button.academy-help-button::before{content:"?";display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0e6b61;color:#fff;font:700 18px/1 var(--serif,serif)}.academy-entry > button.academy-help-button:hover{border-color:#0e6b61}.academy-entry > button.academy-help-button[aria-expanded="true"]{border-color:#0e6b61;box-shadow:0 0 0 3px #e3f3ef}
.academy-chimp{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #dce4e0}.academy-chimp-lg{width:64px;height:64px;box-shadow:0 0 0 4px #4fd1b559}.academy-chimp-xl{width:92px;height:92px;box-shadow:0 0 0 6px #4fd1b559}
.academy-ring{flex:none;width:18px;height:18px;transform:rotate(-90deg)}.academy-ring circle{fill:none;stroke:#dce4e0;stroke-width:4}.academy-ring circle.academy-ring-on{stroke:#0e6b61;stroke-linecap:round}
.academy-panel.academy-coach{width:min(320px,calc(100vw - 24px));padding:16px 18px;border:0;border-radius:22px;background:#fff;box-shadow:0 40px 70px -30px #020e0cd9,0 0 0 1px #10201c10}.academy-coach header{display:flex;align-items:center;gap:10px}.academy-coach header>div{flex:1;min-width:0}.academy-coach header small{display:block;font-size:11px;letter-spacing:.08em;color:var(--academy-deep)}.academy-coach header h2{font:600 22px/1.15 var(--serif,serif);margin:2px 0 4px;color:var(--academy-ink)}.academy-coach header [data-academy="pause"]{min-height:34px;padding:4px 12px;border:0;border-radius:999px;background:var(--academy-faint);color:var(--academy-ink2);font-size:13px;font-weight:800}
.academy-coach .academy-progress{display:flex;align-items:center;gap:6px;margin:8px 0 0;font:700 13px/1.3 var(--mono,ui-monospace,monospace);color:var(--academy-ink3)}.academy-coach .academy-progress span:first-of-type{color:var(--academy-deep)}.academy-coach .academy-part{font-weight:500}
.academy-coach .academy-lead{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--academy-ink2)}.academy-turn{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:14px;background:var(--academy-tint);color:var(--academy-deep);font-weight:800;font-size:14px}.academy-turn span{flex:none;width:22px;height:22px;border-radius:50%;background:#0e6b61;box-shadow:inset 0 0 0 7px #0e6b61,inset 0 0 0 11px #fff}
.academy-cheer{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 12px;border-radius:14px;border:1px solid #cdebe1;background:linear-gradient(180deg,#ecfaf5,#fff);color:var(--academy-ink2);font-size:15px}.academy-cheer span{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#0e6b61;color:#fff;font-weight:800;font-size:14px}.academy-cheer b{color:var(--academy-deep)}
.academy-coach footer{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:0;border:0;background:transparent}.academy-coach footer .btn{flex:0 0 auto;min-height:40px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:800}.academy-coach footer [data-academy="continue"],.academy-coach footer [data-academy="screen-next"]{margin-left:auto;order:2;background:#0a4f48;border-color:#0a4f48;color:#fff}.academy-coach footer [data-academy="more"],.academy-coach footer [data-academy="back"]{border:0;background:none;padding:6px 4px;color:var(--academy-ink3)}
.academy-coach .academy-body>.btn{margin-top:12px;min-height:44px;border-radius:999px;font-weight:800}.academy-coach details{margin-top:6px}.academy-coach summary{font-size:14px}
.staff-academy:has(.academy-practice-banner) .academy-panel.academy-drawer{top:var(--academy-banner-h,40px)}.academy-panel.academy-drawer{position:fixed;top:0;right:0;bottom:0;left:auto;transform:none;width:min(460px,100vw);max-height:none;padding:0;border-radius:28px 0 0 28px;background:var(--academy-ground);box-shadow:-30px 0 60px -30px #041e1b99;overflow:hidden}.academy-drawer .academy-hi{position:relative;align-items:center;gap:14px;padding:22px 20px 22px 22px;color:#fff;background:var(--academy-night)}.academy-drawer .academy-hi small{color:var(--academy-mint)}.academy-drawer .academy-hi h2{color:#fff;font-size:30px;margin:2px 0}.academy-drawer .academy-hi p{margin:0;color:#cfe2dc;font-size:14px;line-height:1.45}.academy-drawer .academy-hi [data-academy="pause"]{align-self:start;background:#ffffff1f;color:#fff}
.academy-drawer .academy-body{padding:16px 18px 28px;display:grid;gap:14px;align-content:start;scrollbar-gutter:auto}.academy-ask{position:relative;display:block}.academy-ask-go{position:absolute;right:6px;top:5px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#e3f3ef;cursor:pointer}.academy-ask-go svg{width:20px;height:20px;fill:none;stroke:#0a4f48;stroke-width:2.4;stroke-linecap:round}.academy-drawer footer{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;margin:0;padding:12px 18px 16px;border-top:1px solid var(--academy-line);background:var(--academy-ground)}.academy-drawer footer .academy-small{margin:0}.academy-readiness{display:grid;gap:6px}.academy-ask span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.academy-panel .academy-ask input[type=search]{margin:0;width:100%;min-height:50px;padding:0 54px 0 20px;border-radius:999px;border:1.5px solid var(--academy-line);background:#fff;font:inherit;font-size:16px}.academy-panel .academy-ask input[type=search]:focus{outline:3px solid #4fd1b580;border-color:#0e6b61}
.academy-search-results{display:grid;gap:12px}.academy-search-results h3{margin:6px 4px -4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#0e6b61}.academy-search-results>p{margin:0 4px;color:var(--academy-ink2)}.academy-search-results>.btn{justify-content:flex-start;text-align:left;min-height:48px;padding:10px 16px;border-radius:16px;border:1px solid var(--academy-line);background:#fff;font-weight:700}
.academy-feature{padding:18px 20px;border-radius:22px;background:#fff;border:1px solid var(--academy-line);box-shadow:0 18px 36px -30px #10201c80}.academy-feature small{font-size:11px;letter-spacing:.1em;font-weight:800;color:#0e6b61}.academy-feature h3{margin:4px 0 0;font:600 22px/1.15 var(--serif,serif);letter-spacing:normal;text-transform:none;color:var(--academy-ink)}.academy-feature>p{margin:6px 0 0;font-size:15px;color:var(--academy-ink2)}.academy-feature .btn{margin-top:14px;min-height:46px;padding:8px 22px;border-radius:999px;background:#0a4f48;border-color:#0a4f48;color:#fff;font-weight:800}.academy-feature .academy-note{margin:10px 0 0;font-size:13px;color:var(--academy-ink3)}.academy-feature.academy-here{background:linear-gradient(180deg,#f3faf7,#fff);border-color:#c8e6dd}.academy-feature.academy-here .btn{background:#fff;color:#0a4f48;border:1.5px solid #9fd3c5}
.academy-sec{display:flex;justify-content:space-between;align-items:center;margin:6px 4px -4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#0e6b61}.academy-count{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-size:13px;color:var(--academy-ink3)}
.academy-journey{list-style:none;margin:0;padding:0;display:grid;gap:8px}.academy-journey li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--academy-line)}.academy-journey b{font-size:15px;color:var(--academy-ink)}.academy-journey small{display:block;font-size:12px;font-weight:800;color:#0e6b61}.academy-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--academy-tint);color:#0a4f48;font:700 17px/1 var(--serif,serif)}.academy-journey .academy-done .academy-mark{background:#0e6b61;color:#fff;font-family:var(--sans,sans-serif)}.academy-journey .academy-now{border-color:#0e6b61;box-shadow:0 0 0 3px var(--academy-tint)}
.academy-explain{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:18px;border:1.5px dashed #a9cfc5;background:#f7fbf9;color:var(--academy-ink);cursor:pointer;font:inherit}.academy-explain b{display:block;font-size:15px}.academy-explain small{display:block;font-size:13px;color:var(--academy-ink3)}.academy-qm{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid #0e6b61;color:#0e6b61;font:700 22px/1 var(--serif,serif)}
.academy-small{margin:0;text-align:center;font-size:13px;color:var(--academy-ink3)}.academy-small .btn{min-height:32px;padding:2px 6px;border:0;background:none;color:#0a4f48;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.academy-panel.academy-pill{position:fixed;left:50%;right:auto;top:auto;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:12px;width:min(560px,calc(100vw - 24px));max-height:none;padding:8px 8px 8px 10px;border-radius:999px;background:#0f1f1b;color:#fff}.academy-pill>div{flex:1;min-width:0}.academy-pill h2{margin:0;font:800 12px/1.3 var(--sans,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--academy-mint)}.academy-pill .academy-lead{margin:0;font-size:14px;line-height:1.35;color:#fff}.academy-pill .btn{flex:none;min-height:40px;padding:6px 18px;border:0;border-radius:999px;background:var(--academy-mint);color:#062723;font-weight:800}
.academy-panel.academy-finish{position:fixed;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;border-radius:30px;box-shadow:0 50px 90px -40px #000c,0 0 0 9999px #06141266}.academy-finish header{display:grid;justify-items:center;gap:6px;padding:26px 24px 22px;text-align:center;background:var(--academy-night)}.academy-finish header small{color:var(--academy-mint);letter-spacing:.12em;font-size:12px}.academy-finish header h2{color:#fff;font-size:28px;margin:0}.academy-finish .academy-body{padding:20px 24px 4px}.academy-learned{list-style:none;margin:0;padding:0;display:grid;gap:10px}.academy-learned li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font-size:15px}.academy-learned span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--academy-tint);color:#0a4f48;font-weight:800;font-size:14px}.academy-finish .academy-body p:not(.academy-lead){font-size:13px;color:var(--academy-ink3)}.academy-finish .academy-body>.btn{width:100%;background:#0a4f48;border-color:#0a4f48;color:#fff}.academy-finish footer{justify-content:center;padding:0 24px 18px}
.academy-spotlight{border:3px solid #4fd1b5;border-radius:16px;box-shadow:0 0 0 9999px #06141299}
.academy-confetti{position:fixed;z-index:1020;width:9px;height:14px;border-radius:2px;pointer-events:none;background:var(--academy-c)}
@media(prefers-reduced-motion:no-preference){.academy-spotlight::after{content:"";position:absolute;inset:-7px;border-radius:20px;border:3px solid #4fd1b5;animation:academy-halo 1.8s ease-out infinite}@keyframes academy-halo{from{transform:scale(1);opacity:1}to{transform:scale(1.1);opacity:0}}.academy-turn span{animation:academy-tap 1.4s ease-in-out infinite}@keyframes academy-tap{50%{transform:scale(.8)}}.academy-cheer span,.academy-learned span{animation:academy-pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes academy-pop{from{transform:scale(0) rotate(-40deg)}}.academy-drawer .academy-body>*{animation:academy-rise .4s cubic-bezier(.2,.8,.2,1) both}@keyframes academy-rise{from{opacity:0;transform:translateY(8px)}}.academy-confetti{animation:academy-confetti 1.1s cubic-bezier(.15,.7,.3,1) forwards}@keyframes academy-confetti{to{transform:translate(var(--academy-dx),var(--academy-dy)) rotate(var(--academy-r));opacity:0}}}
@media(prefers-reduced-motion:reduce){.academy-confetti{display:none}}
@media(max-width:640px){.academy-panel.academy-drawer{border-radius:0}.academy-panel.academy-pill{border-radius:22px;bottom:12px}}
@media print{.academy-confetti{display:none!important}}
/* The prototype's styles: the RBT view. In the prototype's order; do not reorder. */
/* RBT view */
.rhead { background: var(--card); display: flex; align-items: center; gap: 12px 18px; padding: 12px 24px; flex-wrap: wrap; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--learnerT); display: grid; place-items: center; flex: none; }
.who { display: flex; flex-direction: column; }
.who b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.who span { font-size: 15px; color: var(--ink2); }
.clock { font-family: var(--mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.saved { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #DDF1E8; color: #0D3D2E; font-size: 14px; font-weight: 700; }
.lbar { height: 5px; background: var(--learner); }
.rgrid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 380px; grid-template-areas: "today cap side"; gap: 20px; padding: 20px 24px 48px; max-width: 1560px; margin: 0 auto; align-items: start; }
.rgrid > .today { grid-area: today; }
.rgrid > .capcard { grid-area: cap; }
.rgrid > .capcol { grid-area: cap; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sfbody { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.sfstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sfstat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sfstat b { font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sfstat > span { font-size: 13px; color: var(--ink2); }
.blockmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.blockmap i { height: 14px; border-radius: 3px; background: var(--card); border: 1px solid var(--line); }
.blockmap i.has { background: #2E8B6A; border-color: #2E8B6A; }
.blockmap i.gap { background: repeating-linear-gradient(45deg, #FFF4E0 0 4px, #F2C98A 4px 6px); border-color: #E9A23B; }
.blockmap i.now { outline: 2px solid var(--ink); outline-offset: 1px; }
.notrun { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chipbtn { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--teal); background: var(--card); color: var(--tealD); font-weight: 800; font-size: 14px; }
.chipbtn:hover { background: var(--tealW); }
.recent ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.recent li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.recent li.beh { color: #5A1F12; font-weight: 700; }
.recent .t { font-family: var(--mono); font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rgrid > .side { grid-area: side; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--session-bar-h, 0px) + 16px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--session-bar-h, 0px) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.rgrid > .side > .card { flex-shrink: 0; }
.plist { display: flex; flex-direction: column; gap: 10px; }
.howcard, .plancard { overflow: hidden; scroll-margin-top: 110px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--faint); }
.cardhead h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.callout { border: 2px solid #B4472F; background: #FFF6F2; color: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.callout .lead { font-weight: 800; color: #5A1F12; }
.callout ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.callout .unsafe { font-size: 14px; color: #5A1F12; }
.callout .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn.small { min-height: 36px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.notegrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 20px 24px 48px; max-width: 1560px; margin: 0 auto; align-items: start; }
.notecard { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.notecard h3 { margin: 4px 0 0; font-size: 18px; }
.notehead { display: flex; flex-direction: column; gap: 4px; }
.timeline { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.timeline svg { min-width: 640px; }
.legendrow { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 4px; height: 16px; border-radius: 2px; display: inline-block; }
.lg i.wide { width: 18px; height: 8px; }
.lg i.band { width: 22px; height: 14px; border-radius: 5px; background: rgba(14, 107, 97, .16); }
.lg .diamond { width: 10px; height: 10px; background: #B4472F; transform: rotate(45deg); display: inline-block; margin: 0 2px; }
.lg .hatch { width: 22px; height: 14px; border-radius: 3px; display: inline-block; background: repeating-linear-gradient(45deg, #FFF4E0 0 4px, #F2C98A 4px 6px); }
.recordcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); }
.verdict { font-size: 20px; font-weight: 800; padding: 10px 12px; border-radius: 12px; border-width: 2px; border-style: solid; }
.verdict.ok { background: var(--tealT); color: var(--tealD); border-color: var(--teal); }
.verdict.gap { background: var(--amberT); color: var(--amberD); border-color: var(--amber); }
.reclist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.today { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.today h2 { margin: 0; font-size: 20px; font-weight: 800; }
.today .sub { margin-top: -6px; font-size: 14px; color: var(--ink2); }
.bip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--amber); background: var(--amberT); color: var(--amberD); text-align: left; font-weight: 800; font-size: 15px; line-height: 1.3; }
.bip.read { border-color: var(--line); background: var(--card); color: var(--ink2); }
.prow { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); }
.prow[aria-current="true"] { border: 2px solid var(--teal); padding: 10px 11px; background: var(--tealW); }
.prow .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.prow .nm { font-size: 17px; font-weight: 800; }
.prow .cnt { font-size: 13px; color: var(--ink2); font-weight: 700; white-space: nowrap; }
.prow .mean { font-size: 14px; }
.capcard { min-width: 0; }
.cap { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.caprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pname { font-size: 16px; font-weight: 700; color: var(--ink2); }
.sd { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; }
.sdsub { margin-top: -8px; font-size: 18px; color: var(--ink2); }
.targets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tgt { min-height: 50px; padding: 5px 16px; border-radius: 12px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.tgt b { font-size: 17px; }
.tgt small { font-size: 12px; font-weight: 700; }
.tgt[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.tgt:disabled { border-style: dashed; border-color: var(--line2); background: var(--faint); color: var(--ink2); }
.psteps { margin: 2px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; }
.hint { font-size: 13px; color: var(--ink2); display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }
.banner { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-width: 2px; }
.banner .lead { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.banner p { font-size: 17px; line-height: 1.35; }
.banner .extra { font-weight: 800; }
.banner.small p { font-size: 15px; }
.answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ans { position: relative; min-height: 96px; border-radius: 14px; border: 2px solid; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 10px; font-size: 18px; font-weight: 800; line-height: 1.15; }
.ans kbd { position: absolute; top: 7px; right: 8px; }
.ans { flex-direction: column; gap: 3px; }
.ans .tech { font-size: 13px; font-weight: 700; opacity: .78; line-height: 1.2; }
.minians span { flex-direction: column; }
.minians small { font-size: 11px; font-weight: 700; opacity: .8; }
.ans:active, .pillbtn:active, .countbtn:active { transform: translateY(1px); }
.flash { animation: flash .4s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 7px rgba(14, 107, 97, .35); } to { box-shadow: 0 0 0 0 rgba(14, 107, 97, 0); } }
.note { border: 2px dashed #C6D2CD; border-radius: 12px; padding: 10px 12px; color: var(--ink2); font-size: 15px; }
.tally { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.dots { display: flex; gap: 4px; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.beh { display: flex; gap: 8px; flex-wrap: wrap; }
.pillbtn { min-height: 48px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.pillbtn .n { min-width: 24px; height: 24px; border-radius: 12px; background: var(--ink); color: #FFFFFF; font-size: 13px; display: grid; place-items: center; padding: 0 6px; }
.pillbtn.plan { border-color: var(--amber); background: var(--amberT); color: var(--amberD); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions .btn { min-height: 52px; }
.actions .undo { flex: 1; min-width: 220px; border-color: var(--ink); color: var(--ink); }
.dur { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--ground); text-align: center; }
.bigtimer { font-family: var(--mono); font-size: 64px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.goal { font-weight: 800; color: #4A2A73; }
.countbtn { width: 100%; min-height: 170px; border-radius: 18px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 18px; }
.bignum { font-family: var(--mono); font-size: 56px; line-height: 1; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stepbtn { width: 100%; min-height: 52px; border-radius: 12px; border: 2px solid; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 14px; font-weight: 800; font-size: 16px; }
.hintline { font-size: 14px; color: var(--ink2); }
.ivbox { display: flex; flex-direction: column; gap: 10px; }
.ivq { font-weight: 800; font-size: 18px; }
.ivbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: transparent; padding: 14px 10px 11px; font-weight: 800; font-size: 15px; color: var(--ink2); border-bottom: 3px solid transparent; display: inline-flex; justify-content: center; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); }
.tabs .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); display: inline-block; }
.tabpanel { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.tabpanel h3 { margin: 0; font-size: 20px; }
.howgrid { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 16px; }
.howgrid dt { font-weight: 800; color: var(--ink2); }
.howgrid dd { margin: 0; }
.howgrid.small { font-size: 14px; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; }
.byline { font-size: 14px; color: var(--ink2); }
.byline.center { text-align: center; }
.planhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.changed { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--amberT); color: var(--amberD); font-weight: 800; font-size: 15px; }
.sect { border-radius: 14px; padding: 10px 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sect .eyebrow { font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sect ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.sect.teach { border: 2px solid var(--teal); }
.sect.teach .eyebrow { color: var(--tealD); }
.sect.unsafe { border: 2px solid #B4472F; background: #F8E6DF; color: #5A1F12; }
.sect.unsafe .eyebrow { color: #5A1F12; }
.newtag { padding: 1px 8px; border-radius: 999px; background: var(--amberT); color: var(--amberD); font-size: 11px; letter-spacing: 0; text-transform: none; border: 1px solid var(--amber); }
/* The prototype's styles: the BCBA view. In the prototype's order; do not reorder. */
/* BCBA view */
.bwrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 90px); }
.bnav { background: var(--card); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 18px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 24px; }
.bnav .logo { font-size: 20px; white-space: nowrap; letter-spacing: -.01em; }
.bnav nav { display: flex; flex-direction: column; gap: 4px; }
.bnav nav button { text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 16px; color: var(--ink2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bnav nav button[aria-current="page"] { background: var(--tealT); color: var(--tealD); }
.bnav .count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--amber); color: var(--ink); font-size: 13px; display: grid; place-items: center; }
.bnav .me { font-size: 14px; color: var(--ink2); }
.bmain { padding: 24px 28px 56px; display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 1420px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crumb { font-size: 14px; color: var(--ink2); }
.h1 { margin: 2px 0 0; font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.15; }
.h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 700; }
.lede { margin-top: 4px; color: var(--ink2); max-width: 68ch; }
.qlist { display: flex; flex-direction: column; gap: 10px; max-width: 920px; }
.qitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 16px; }
.qitem.amber { border: 2px solid var(--amber); background: var(--amberW); }
.qtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qitem h3 { margin: 0; font-size: 18px; }
.qitem p { margin-top: 4px; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subtabs button { border: 0; background: transparent; padding: 10px 14px 9px; font-weight: 800; color: var(--ink2); border-bottom: 3px solid transparent; font-size: 16px; }
.subtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 24px; align-items: start; }
.formcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.form h3 { margin: 0; font-size: 18px; }
.frow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.frow > label, .frow > .lbl { font-weight: 800; color: var(--ink2); font-size: 14px; }
.fcell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inline { padding-top: 0; }
.inp { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--card); font-size: 16px; }
textarea.inp { resize: vertical; line-height: 1.35; }
.tgtrows { display: flex; flex-direction: column; gap: 6px; }
.tgtrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
/* version 25t: a target's own instructions, folded under its row */
.tinst { margin: -2px 0 4px; font-size: 14px; }
.tinst summary { cursor: pointer; font-weight: 800; color: var(--tealD); width: max-content; max-width: 100%; }
.tinst summary .help { font-weight: 400; margin-left: 6px; }
.tinstbox { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 6px; padding: 12px 14px; border-left: 3px solid var(--line2); border-radius: 0 12px 12px 0; background: var(--ground); }
.previewcol { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); max-height: calc(100vh - 90px); overflow: auto; }
.bframe { border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--ground); box-shadow: 0 10px 30px rgba(16, 32, 28, .10); }
.chrome { height: 36px; background: #E4EAE7; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #C3CEC9; display: block; flex: none; }
.chrome .url { flex: 1; min-width: 0; margin-left: 10px; background: var(--card); border-radius: 8px; font-size: 12px; color: var(--ink2); padding: 3px 10px; font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cap.compact { padding: 16px; gap: 12px; background: var(--card); }
.compact .sd { font-size: 26px; }
.sd.long { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 1.3; }
.compact .sd.long { font-size: 18px; }
.compact .ans { min-height: 64px; font-size: 15px; padding: 8px; }
.compact .answers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.compact .banner p { font-size: 15px; }
.compact .tgt { min-height: 42px; }
.compact .bigtimer { font-size: 44px; }
.pvhow { padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.pvplan { background: var(--card); }
.sendrow { display: flex; justify-content: flex-end; }
.dhead { display: flex; flex-direction: column; gap: 4px; }
.dgrid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 20px; align-items: start; }
.dcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dcard { text-align: left; padding: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; }
.dcard[aria-pressed="true"] { border: 2px solid var(--teal); padding: 13px; background: var(--tealW); }
.dcard .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; }
.dcard .tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dcard b { font-size: 17px; }
.dcard .d { font-size: 14px; line-height: 1.35; }
.dcard .r { font-size: 13px; color: var(--ink2); }
.dpanel { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dpanel h3 { margin: 0; font-size: 22px; }
.srows { display: flex; flex-direction: column; gap: 6px; }
.srow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.drow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inuse { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; color: var(--tealD); }
.dfields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wayrow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr) auto; gap: 8px; align-items: center; }
.wayhead { margin-bottom: -4px; }
.tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tierrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 150px); gap: 6px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.tierrow .n2 { font-weight: 800; color: var(--ink2); text-align: center; }
.tierrow > .rowacts, .tierrow > .help { grid-column: 2 / -1; }
.tierrow .rowacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rvlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rvrow { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.rvrow.on { border: 2px solid var(--teal); background: var(--tealW); padding: 7px 9px; }
.rvrow.done b { color: var(--ink2); }
.tnwarn { color: #8A3A1E; font-weight: 700; }
@media (max-width: 640px) { .wayrow, .tierrow { grid-template-columns: minmax(0, 1fr); } .tierrow .n2 { text-align: left; } .tierrow > .rowacts, .tierrow > .help { grid-column: auto; } }
.ggrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.gcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.graph svg { width: 100%; height: auto; display: block; }
.gside { display: flex; flex-direction: column; gap: 12px; }
.flag { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.flag.amber { background: var(--amberW); border: 2px solid var(--amber); }
.flag.done { background: var(--tealT); border: 2px solid var(--teal); }
.flag h3 { margin: 0; font-size: 17px; }
.flag .chip { align-self: flex-start; }
.reasons { display: flex; flex-direction: column; gap: 6px; }
.logcard, .legend { padding: 12px 16px; display: flex; flex-direction: column; }
.logrow { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--grid); font-size: 14px; }
.logrow:first-of-type { margin-top: 6px; }
.logrow span { color: var(--ink2); }
.leg { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 6px; }
.gtable { overflow: hidden; }
.ghead, .grow2 { display: grid; grid-template-columns: 210px minmax(0, 1fr) 160px 170px 190px; gap: 12px; align-items: center; padding: 10px 16px; }
.ghead { background: var(--faint); }
.ghead span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.grow2 { border-top: 1px solid var(--grid); }
.grow2:focus-within { background: var(--tealW); box-shadow: inset 4px 0 0 var(--teal); }
.gname { display: flex; align-items: center; gap: 8px; }
.swatch { width: 18px; height: 18px; border-radius: 6px; border-width: 2px; flex: none; }
.gfoot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.gprev, .ginfo { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.minians { display: flex; gap: 6px; flex-wrap: wrap; }
.minians span { flex: 1 1 90px; min-height: 40px; border-radius: 10px; border: 2px solid; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 6px; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.behcard { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--ground); }
.bipsec { scroll-margin-top: 110px; }
.secnav { display: flex; flex-wrap: wrap; gap: 8px; }
.secnav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.secnav a:hover { border-color: var(--teal); color: var(--tealD); }
.stepsel { display: flex; flex-direction: column; gap: 8px; }
.steprow { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); }
.steprow[aria-checked="true"] { border-color: var(--teal); background: var(--tealT); }
.dotsel { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink2); flex: none; margin-top: 2px; }
.steprow[aria-checked="true"] .dotsel { border-color: var(--teal); background: radial-gradient(circle, var(--teal) 45%, transparent 52%); }
.miniGraph { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.miniGraph > svg { width: 100%; height: auto; display: block; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.gcard2 { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.gcard2:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--tealT); }
.gtop { display: flex; align-items: flex-end; gap: 12px; }
.gtop .frow { flex: 1; }
.gtop .swatch { width: 24px; height: 24px; margin-bottom: 9px; }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.addp { border-style: dashed; border-color: var(--teal); color: var(--tealD); }
.draftmark { margin-left: 6px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--amberT); color: var(--amberD); }
.sect.now { border: 2px solid var(--teal); background: var(--tealT); }
.callout .now { font-size: 15px; }
@media (max-width: 1260px) { .previewcol { max-height: none; overflow: visible; } }
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } .gcards { grid-template-columns: minmax(0, 1fr); } .tgtrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.tp-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.tp-toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); display: flex; flex-direction: column; gap: 2px; }
.tp-toc a { padding: 7px 10px; border-radius: 8px; color: var(--ink2); font-weight: 700; font-size: 14px; text-decoration: none; }
.tp-toc a:hover { background: var(--tealT); color: var(--tealD); }
.tp-sec { scroll-margin-top: 110px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.tp-sec h3 { margin: 0; font-size: 19px; }
.tp-sec .num { color: var(--ink2); font-weight: 700; margin-right: 6px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.tbl td .sub2 { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; }
.tblwrap { overflow-x: auto; }
.bar { height: 8px; border-radius: 4px; background: var(--faint); overflow: hidden; position: relative; min-width: 120px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--teal); border-radius: 4px; }
.bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.papers { display: flex; flex-direction: column; gap: 10px; max-width: 1080px; }
.paper { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 16px 18px; }
.paper h3 { margin: 0; font-size: 17px; }
.paper p { margin-top: 3px; }
.paper .due { font-weight: 800; font-size: 14px; margin-top: 6px; }
.rewardcue { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--faint); font-weight: 800; min-height: 44px; }
.rewardcue.due { background: #DDF1E8; color: #0D3D2E; border: 2px solid #2E8B6A; animation: cue .5s ease-out; }
@keyframes cue { from { transform: scale(1.02); } to { transform: scale(1); } }
.tokens { display: inline-flex; gap: 5px; }
.tokens i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #2E8B6A; display: inline-block; }
.tokens i.on { background: #2E8B6A; }
.lvls { display: flex; flex-direction: column; gap: 8px; }
.lvl { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.lvl .n2 { font-weight: 800; color: var(--ink2); text-align: center; }
.mini { min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--line2); background: var(--card); font-size: 13px; font-weight: 700; color: var(--ink); }
.mini:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .rewardcue.due { animation: none; } }
@media (max-width: 1100px) { .tp-grid { grid-template-columns: minmax(0, 1fr); } .tp-toc { position: static; flex-direction: row; flex-wrap: wrap; } .paper { grid-template-columns: minmax(0, 1fr); } }

.kvgrid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kvgrid dt, .kvgrid dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--grid); font-size: 15px; }
.kvgrid dt { font-weight: 800; color: var(--ink2); background: var(--faint); }
.kvgrid dt:first-of-type, .kvgrid dd:first-of-type { border-top: 0; }
.kvgrid .rec { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--tealT); color: var(--tealD); font-size: 12px; font-weight: 800; white-space: nowrap; }
.notecard h3 { margin: 8px 0 0; font-size: 18px; }
.behlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.lintbox { display: flex; flex-direction: column; gap: 6px; }
.lint { border-left: 4px solid var(--amber); background: var(--amberW); padding: 8px 12px; border-radius: 0 10px 10px 0; font-size: 14px; }
.lint b { color: var(--amberD); }
.sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sig { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sig .who2 { font-weight: 800; }
.locked { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--tealT); color: var(--tealD); font-weight: 800; }
.addenda { display: flex; flex-direction: column; gap: 8px; }
.addendum { border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.addendum .byline { font-size: 13px; }
.auditcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); max-height: calc(100vh - 120px); overflow: auto; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; }
.ck b { font-size: 15px; }
.ck p { margin-top: 2px; }
.ck .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #FFFFFF; }
.ck.ok .ic { background: #2E8B6A; }
.ck.fix { border: 2px solid var(--amber); background: var(--amberW); }
.ck.fix .ic { background: #C9761A; }
.ck.need { border: 2px solid #4A6FA5; background: #F3F7FC; }
.ck.need .ic { background: #4A6FA5; }
.ck.warn .ic { background: #C9761A; }
.ck.info .ic { background: #9AAAA4; }
.ck .src { font-size: 12px; color: var(--ink2); }
.ck .src a { color: var(--tealD); }
.passing summary { cursor: pointer; font-weight: 800; color: var(--ink2); padding: 6px 0; }
@media (max-width: 1260px) { .auditcard { position: static; max-height: none; } }
@media (max-width: 640px) { .kvgrid { grid-template-columns: minmax(0, 1fr); } .kvgrid dt { border-top: 1px solid var(--grid); } }

.rowacts { display: inline-flex; gap: 6px; }
.askrow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--amber); background: var(--amberW); }
.askrow .inp { width: auto; min-width: 240px; flex: 1; }
.past { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.tpast > summary { cursor: pointer; }
.tpast > summary .eyebrow { display: inline; margin: 0; }
.tpast > summary .help { display: block; margin: 2px 0 0 18px; }
.pastrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; }
.pastrow b { font-size: 15px; }
.behhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Behaviors (version 26d): the plan's dark head, one row per behavior, and a side panel to add or change one, with
   the RBT's button as it will look */
.bphero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 16px; padding: 28px 32px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #062723 0%, #0A3A34 48%, #0D2F3D 100%); box-shadow: 0 30px 50px -34px rgba(4,30,27,.95); }
.bphero::before { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; right: -200px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(79,209,181,.22), transparent 65%); }
.bphero .h1 { color: #fff; margin: 8px 0 0; font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.05; }
.bpeye { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A9C4BC; }
.bppill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #CFE5DE; }
.bppill i { width: 8px; height: 8px; border-radius: 50%; background: #1FB58F; box-shadow: 0 0 0 3px rgba(31,181,143,.22); }
.bppill.draft i { background: var(--amber); box-shadow: 0 0 0 3px rgba(233,162,59,.25); }
.bplede { margin-top: 8px; max-width: 640px; font-size: 18px; color: #DCEAE5; }
.bpstats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bpstats span { padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 15px; font-weight: 600; color: #DCEAE5; }
.bpstats b { color: #4FD1B5; }
.bphero .drow { display: grid; gap: 10px; min-width: 230px; margin: 0; }
.bphero .btn { min-height: 52px; border-radius: 999px; font-size: 17px; font-weight: 800; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; }
.bphero .btn.primary { border: 0; background: linear-gradient(180deg, #F8CD82, #F0B252); color: var(--ink); }
.bphero .btn[data-act="addbehgo"] { border: 0; background: linear-gradient(180deg, #7BE3CB, #4FD1B5); color: var(--ink); }
.blist { display: grid; gap: 10px; }
.brow { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; text-align: left; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color .2s, box-shadow .2s, transform .2s; }
.brow:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--line2); box-shadow: 0 14px 24px -20px rgba(16,32,28,.6); }
.brow.bdraftrow { border-color: #4FD1B5; box-shadow: 0 0 0 4px var(--tealT); }
fieldset.ro button.brow { display: grid; }
.bico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--tealT); color: var(--tealD); font-family: var(--mono); font-weight: 700; font-size: 16px; }
.bico.t { background: #E8EFFD; color: #23458F; font-size: 14px; }
.brmain { display: grid; gap: 4px; min-width: 0; }
.bnm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bnm b { font-size: 18px; }
.btag { display: inline-flex; padding: 2px 9px; border-radius: 99px; background: var(--faint); color: var(--ink2); font-size: 12px; font-weight: 800; }
.btag.c { background: var(--tealT); color: var(--tealD); }
.btag.t { background: #E8EFFD; color: #23458F; }
.btag.hi { background: #FBE9E6; color: #8A2A21; }
.btag.med { background: var(--amberT); color: var(--amberD); }
.btag.dr { background: #0F1F1B; color: #4FD1B5; }
.bdef { color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bdef.bmiss { color: var(--amberD); font-weight: 700; }
.bnot { font-size: 14px; color: #66756F; }
.bnot b { color: var(--ink2); }
.bchev { font-size: 22px; color: #66756F; }
.baddrow { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 10px; border: 2px dashed var(--line2); border-radius: 16px; background: var(--tealW); color: var(--tealD); font-weight: 800; font-size: 16px; }
.baddrow:hover { background: var(--tealT); border-color: var(--teal); }
.baddrow i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-style: normal; font-size: 18px; }
.bphone { margin-bottom: 18px; padding: 12px; border-radius: 24px; background: #0F1F1B; box-shadow: 0 30px 50px -34px rgba(4,30,27,.95); }
.bphone > div { display: grid; gap: 8px; padding: 12px; border-radius: 15px; background: #F6FAF8; }
.bphone .eyebrow { margin: 0 0 2px; }
.brbt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 13px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); font-weight: 800; }
.brbt small { display: block; font-size: 12px; font-weight: 600; color: #66756F; }
.brbt .n { font-family: var(--mono); font-size: 20px; color: var(--tealD); }
.brbt.t .n { font-size: 15px; color: #23458F; }
.brbt.fresh { border-color: #4FD1B5; box-shadow: 0 0 0 3px var(--tealT); }
.bscrim { position: fixed; inset: 0; z-index: 60; background: rgba(6,20,18,.45); animation: bfade .2s both; }
@keyframes bfade { from { opacity: 0; } }
.bsheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(600px, 100%); display: flex; flex-direction: column; background: var(--ground); box-shadow: -30px 0 60px -30px rgba(4,30,27,.6); animation: bslide .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bslide { from { transform: translateX(40px); opacity: 0; } }
.bstop { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 16px; color: #fff; background: linear-gradient(135deg, #062723, #0A3A34 60%, #0D2F3D); }
.bstop h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.1; }
.bshx { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 20px; }
.bsbody { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding: 18px 24px 22px; }
.bsbody .frow { margin: 0; }
.bsbody #bnew, .bsbody .bnamein { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.bqlab { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #66756F; }
.bquick { display: flex; flex-wrap: wrap; gap: 8px; }
.bquick button { padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; }
.bquick button:hover { border-color: var(--teal); background: var(--tealT); }
.bmpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bmcard { display: grid; gap: 4px; padding: 12px 14px; text-align: left; border: 2px solid var(--line); border-radius: 16px; background: #fff; }
.bmcard b { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.bmcard b i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tealT); color: var(--tealD); font-style: normal; font-family: var(--mono); font-size: 13px; }
.bmcard.t b i { background: #E8EFFD; color: #23458F; }
.bmcard span { font-size: 14px; color: #66756F; }
.bmcard[aria-checked="true"] { border-color: var(--teal); box-shadow: 0 0 0 4px var(--tealT); }
.bmcard.t[aria-checked="true"] { border-color: #5B8DEF; box-shadow: 0 0 0 4px #E8EFFD; }
.bseg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.bseg button { padding: 7px 15px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: 15px; color: var(--ink2); }
.bseg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.bprev { padding: 12px; border-radius: 18px; background: #0F1F1B; }
.bprev > span { display: block; margin: 0 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #A9C4BC; }
.bkeep { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.bkeep input { width: 20px; height: 20px; }
.bsacts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.bsfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 24px 18px; background: #fff; border-top: 1px solid var(--line); }
.bsfoot p { flex: 1 1 200px; }
.bsfoot .btn { min-height: 50px; border-radius: 999px; padding: 0 22px; font-weight: 800; }
@media (max-width: 900px) { .bphero { grid-template-columns: 1fr; } .bphero .drow { min-width: 0; } }
@media (max-width: 640px) {
  .bphero { padding: 22px 20px; border-radius: 22px; } .bphero .h1 { font-size: 34px; }
  .brow { grid-template-columns: 42px minmax(0, 1fr); padding: 12px; } .bico { width: 42px; height: 42px; border-radius: 12px; } .bchev { display: none; }
  .bmpick { grid-template-columns: 1fr; }
  .bstop, .bsbody, .bsfoot { padding-left: 16px; padding-right: 16px; }
  .bsfoot { display: grid; grid-template-columns: 1fr 1.6fr; } .bsfoot p { grid-column: 1 / -1; }
}
.behempty { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--tealW); }
.behadd { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.behadd > .behaddhead { font-weight: 800; font-size: 15px; }
.behaddrow { display: flex; gap: 8px; }
.behaddrow .inp { flex: 1 1 auto; min-width: 0; }
.behadd .frow { margin: 0; }
.behadd textarea.inp { min-height: 64px; }
.behaddgo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.mpbtn { display: inline-flex; align-items: center; cursor: pointer; }
label.mpbtn:has(input:checked) { border-color: var(--teal); background: var(--tealT); color: var(--tealD); }
label.mpbtn:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.behself { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.behself > span { flex: 1 1 260px; }
.mpick { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mpbtn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line2); background: var(--card); color: var(--ink2); font-weight: 700; font-size: 14px; }
.mpbtn[aria-pressed="true"] { border-color: var(--teal); background: var(--tealT); color: var(--tealD); }
.pillbtn.other { border-style: dashed; }
.pillbtn.add { border-color: var(--teal); color: var(--tealD); }
.pstatus { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pstatus .inp { width: auto; min-width: 180px; }
.tgtrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; }
@media (max-width: 900px) { .rowacts { grid-column: 1 / -1; } }

.asteps { display: flex; flex-direction: column; }
.astep { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding-bottom: 26px; }
.astep:last-child { padding-bottom: 0; }
.astep::before { content: ""; position: absolute; left: 14px; top: 36px; bottom: 8px; width: 2px; background: var(--line); }
.astep:last-child::before { display: none; }
.anum { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-weight: 800; font-size: 15px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.abody { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.abody h4 { margin: 3px 0 0; font-size: 17px; line-height: 1.3; }
.abody > .help { max-width: 64ch; }
.mk { flex: none; display: block; }
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ccard { border: 2px solid; border-radius: 12px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ccard h5 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ccard .inp { background: #FFFFFF; }
.stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.stile { border: 2px solid; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.stile.plan { border-style: dashed; border-color: var(--line2); background: var(--card); color: var(--ink2); }
.stile.plan.next { border-color: var(--teal); background: var(--tealW); color: var(--ink); gap: 6px; }
.stile.new { box-shadow: 0 0 0 3px var(--amberT); }
.snum { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sname { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.srate { font-size: 15px; }
.sbreak { font-size: 12px; color: var(--ink2); }
.addses { display: flex; flex-direction: column; gap: 8px; }
.addses .btn { gap: 6px; }
.alegend { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.alegend .key { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 800; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rbox { border: 2px solid; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rbox b { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rname { font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.cmp { padding: 10px 12px; border-radius: 10px; background: var(--faint); display: flex; flex-direction: column; gap: 4px; }
.cmp p { margin: 0; font-weight: 700; }
.amodal { max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; }
.amtop { display: flex; align-items: center; gap: 10px; }
.ainstr { border: 2px solid; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ainstr p { margin: 3px 0 0; }
.atimer { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.atimer .bigtimer { font-size: 44px; }
.abar { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.abar .track { height: 10px; border-radius: 999px; background: var(--faint); overflow: hidden; }
.abar .track i { display: block; height: 100%; border-radius: 999px; }
.abeh .pillbtn { min-height: 56px; font-size: 18px; padding: 0 18px; }

.importcard { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--teal); }
.importcard h3 { margin: 0; font-size: 19px; }
.impgroup { display: flex; flex-direction: column; gap: 6px; }
.impitem { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.impitem input { margin-top: 3px; width: 18px; height: 18px; }
.impitem p { margin: 0; }
.impitem .src2 { font-size: 13px; color: var(--ink2); }
.missing { font-size: 14px; color: var(--amberD); background: var(--amberW); border-radius: 10px; padding: 8px 12px; }

.notargets .tgtrows, .notargets .past, .notargets .addt { display: none; }
.steprow2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.stepname { font-weight: 800; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.sigmodal { max-width: 660px; }
.sigpadwrap { position: relative; border: 2px dashed var(--line2); border-radius: 12px; background: #FFFFFF; }
.sigpad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: 12px; }
.sigpadwrap .sigline { position: absolute; left: 24px; right: 24px; bottom: 46px; border-bottom: 1.5px solid var(--line2); pointer-events: none; }
.sigpadwrap .sigx { position: absolute; left: 26px; bottom: 52px; font-weight: 800; color: var(--ink2); pointer-events: none; }
.sigpadwrap .sighint { position: absolute; right: 16px; top: 12px; font-size: 13px; color: var(--ink2); pointer-events: none; }
.sigprev { font-family: Caveat, cursive; font-weight: 600; font-size: 42px; line-height: 1.2; min-height: 60px; padding: 4px 8px; border-bottom: 1.5px solid var(--ink2); }
.sigimg { width: 100%; max-width: 300px; height: auto; display: block; border-bottom: 1.5px solid var(--ink2); }
.lsel { display: inline-flex; align-items: center; gap: 8px; color: #DCE6E2; font-size: 14px; font-weight: 700; }
.lsel select { min-height: 34px; border-radius: 8px; border: 1px solid #3A5049; background: #22342F; color: #FFFFFF; font-weight: 700; font-size: 14px; padding: 0 8px; }
.bnav .grp { margin: 12px 12px 2px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.bnav nav button.sub { padding-left: 22px; font-size: 15px; }
.bnav nav button.lname { color: var(--ink); font-weight: 800; }
.lroster { display: flex; flex-direction: column; gap: 10px; }
.lcard { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 14px 18px; }
.lcard h3 { margin: 0; font-size: 18px; }
.lcard .help { margin-top: 2px; }
.lgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lgrid > .card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.lgrid h2 { margin: 0; font-size: 19px; }
.lsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lstep { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.lstep p { margin: 2px 0 0; font-size: 14px; color: var(--ink2); }
.lstep .lnum { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; border: 2px solid var(--line2); color: var(--ink2); background: var(--card); }
.lstep.done { background: var(--ground); }
.lstep.done .lnum { background: #2E8B6A; border-color: #2E8B6A; color: #FFFFFF; }
.lstep.next { border: 2px solid var(--teal); background: var(--tealW); }
.lstep.next .lnum { border-color: var(--teal); color: var(--tealD); }
.intake { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.intake .isec { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.intake .isec h3 { margin: 0; font-size: 18px; display: flex; gap: 10px; align-items: center; }
.intake .isec h3 .num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 14px; display: grid; place-items: center; }
.intake .iside { position: sticky; top: 110px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.missing-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--amberD); font-weight: 700; font-size: 15px; }
.checks3 { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks3 label { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.checks3 input { width: 20px; height: 20px; }
.emptycard { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.emptycard h2, .emptycard h3 { margin: 0; }
.emptywrap { padding: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 1100px) { .lgrid, .intake { grid-template-columns: minmax(0, 1fr); } .intake .iside { position: static; } .lcard { grid-template-columns: minmax(0, 1fr); } }
.bsess { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--teal); }
.bsess h2 { margin: 0; font-size: 20px; }
.bshead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bshead .bigtimer { font-size: 36px; }
.bnlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bncard { text-align: left; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--card); color: var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bncard.on { border: 2px solid var(--teal); background: var(--tealW); }
.bncard .code { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink2); }
.bncard > span:not(.code):not(.chip) { font-size: 14px; color: var(--ink2); }
.askbcba { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--ground); }
.askbcba label.chk { display: inline-flex; gap: 10px; align-items: center; font-weight: 800; }
.askbcba input[type=checkbox] { width: 20px; height: 20px; }
.flaglist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ans { padding: 14px 30px 12px; }
.pillbtn.abc { border-color: #4A6FA5; color: #16324F; }
.abcpanel { border: 2px solid #4A6FA5; background: #F4F7FB; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.abchead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.abchead h3 { margin: 0; font-size: 18px; }
.abcrow { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: start; }
.abclab { font-size: 14px; color: var(--ink2); font-weight: 700; padding-top: 10px; display: flex; align-items: center; gap: 6px; }
.abclab b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #16324F; color: #FFFFFF; flex: none; }
.abcchips { display: flex; flex-wrap: wrap; gap: 8px; }
.abcchip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid #9AAAA4; background: #FFFFFF; color: var(--ink); font-weight: 700; font-size: 15px; }
.abcchip[aria-pressed="true"] { background: #16324F; border-color: #16324F; color: #FFFFFF; }
.abcsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.abcsum .col { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.abcsum h4 { margin: 0 0 4px; font-size: 15px; }
.abcbar { display: grid; grid-template-columns: minmax(0, 1fr) 90px 26px; gap: 8px; align-items: center; font-size: 14px; }
.abcbar .track { height: 10px; border-radius: 5px; background: var(--faint); overflow: hidden; }
.abcbar .track i { display: block; height: 100%; background: #4A6FA5; }
.abcbar b { font-family: var(--mono); font-size: 13px; text-align: right; }
@media (max-width: 700px) { .abcrow { grid-template-columns: minmax(0, 1fr); } .abclab { padding-top: 0; } }
td.mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lwork { display: flex; flex-direction: column; gap: 14px; }
.wshead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.wshead .lede { margin-top: 2px; }
/* version 25u: a mock session's bar, above the RBT's screens while one runs */
.mockbar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 24px; background: #FFF4D6; border-bottom: 1px solid #E8C877; color: #5A4100; }
.mockbar span { flex: 1 1 260px; }
.wstabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.wstabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 800; font-size: 15px; color: var(--ink2); border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.wstabs button[aria-selected="true"] { color: var(--tealD); border-bottom-color: var(--teal); }
.wstabs .count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amber); color: var(--ink); font-size: 12px; display: grid; place-items: center; }
.wsbody { display: flex; flex-direction: column; gap: 18px; }
.wsbody .pagehead .crumb { display: none; }
.wsbody .pagehead .h1 { font-size: 24px; }
.setline { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--tealT); color: var(--tealD); flex-wrap: wrap; }
.setline .textbtn { margin-left: auto; }
.ovsec { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ovsec2 { display: flex; flex-direction: column; gap: 10px; }
.ovhead { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.ovhead h2 { margin: 0; font-size: 19px; }
.ovhead .btn { margin-left: auto; }
.qlist.compact .qitem { padding: 10px 14px; }
.qlist.compact .qitem h3 { font-size: 16px; }
.gwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gtile { text-align: left; border: 1.5px solid var(--line2); border-radius: 14px; background: var(--card); color: var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; font: inherit; }
.gtile:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(16, 32, 28, .08); }
.gtile.on { border: 2px solid var(--teal); }
.gtile .gtop { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.gtile .gtop b { font-size: 16px; line-height: 1.25; }
.gtile .gsub { font-size: 13px; color: var(--ink2); }
.gtile svg { width: 100%; height: auto; display: block; }
.gtile .gfoot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gspark-empty { font-size: 13px; color: var(--ink2); padding: 20px 0; text-align: center; border: 1px dashed var(--line2); border-radius: 10px; }
.dscrim { position: fixed; inset: 0; background: rgba(16, 32, 28, .35); z-index: 35; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1120px, 96vw); background: var(--ground); z-index: 36; box-shadow: -12px 0 40px rgba(16, 32, 28, .25); display: flex; flex-direction: column; }
.drhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 24px 10px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.drhead h2 { margin: 2px 0; font-size: 24px; }
.drhead .pstatus { margin-top: 6px; }
.drawer .subtabs { padding: 0 24px; background: var(--card); }
.drbody { flex: 1; overflow-y: auto; padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
/* A drawer has its own smaller scrollport. Keep its entire preview and Send control reachable in that normal flow. */
.drawer .previewcol { position: static; top: auto; max-height: none; overflow: visible; }
.suptbl td, .suptbl th { white-space: nowrap; }
.wkwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.wk { display: grid; grid-template-columns: 58px repeat(5, minmax(128px, 1fr)); min-width: 720px; }
.wk .wkh { padding: 8px 8px; font-size: 13px; font-weight: 800; color: var(--ink2); border-bottom: 1px solid var(--line); text-align: center; }
.wk .wkh.today { color: var(--tealD); background: var(--tealW); }
.wk .wkt { position: relative; border-right: 1px solid var(--line); }
.wk .wkt span { position: absolute; right: 6px; font-size: 11px; color: var(--ink2); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.wk .wkd { position: relative; border-right: 1px solid var(--grid); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--grid) 47px, var(--grid) 48px); }
.wk .wkd.today { background-color: #FAFDFC; }
.wkb { position: absolute; left: 4px; right: 4px; border-radius: 8px; border: 1.5px solid; padding: 3px 6px; font-size: 12px; line-height: 1.25; overflow: hidden; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.wkb b { display: block; font-size: 12px; }
.wkb.done { opacity: .55; }
.wkb.now { box-shadow: 0 0 0 2px #10201C; }
.wkb.cancelled { opacity: .45; text-decoration: line-through; }
.wkb.ghost { border-style: dashed; background: #FFFFFF !important; }
.wkb.sel { box-shadow: 0 0 0 3px var(--amber); }
.wknow { position: absolute; left: 0; right: 0; border-top: 2px solid #B4472F; z-index: 2; pointer-events: none; }
.schgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.schform { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--teal); }
.schform h3 { margin: 0; font-size: 18px; }
.schform .g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.paces { display: flex; flex-wrap: wrap; gap: 8px; }
.pace { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; background: var(--card); }
.pace b { font-family: var(--mono); font-size: 15px; }
.wklegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink2); }
.wklegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1.5px solid; }
@media (max-width: 1100px) { .schgrid { grid-template-columns: minmax(0, 1fr); } }
.gtile { gap: 8px; padding: 14px 16px; }
.gt-title { font-weight: 800; font-size: 17px; line-height: 1.25; }
.gt-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); min-height: 26px; }
.gt-empty { font-size: 13px; color: var(--ink2); background: var(--ground); border-radius: 10px; padding: 38px 10px; text-align: center; }
.gt-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.gt-foot b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-right: 6px; }
.gt-info { font-size: 13px; color: var(--ink2); }
/* v25f: a tile's chips (draft, waiting for approval, not in the treatment plan), side by side */
.gt-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.sfsec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.sfsec h3 { margin: 0; font-size: 16px; }
.sfsec.focus { border: 2px solid var(--amber); background: var(--amberW); }
div.tally { min-width: 92px; min-height: 44px; border-radius: 10px; border: 2px solid; font-weight: 800; background: #FFFFFF; padding: 8px 14px; }
.chipsel { border-radius: 999px; border: 1.5px solid var(--line2); background: #FFFFFF; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.chipsel[aria-pressed="true"] { border-color: var(--teal); background: var(--tealT); color: var(--tealD); }
.sfsent { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--tealT); color: var(--tealD); font-weight: 700; }
.rhome { max-width: 1180px; margin: 0 auto; padding: 22px 24px 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rhome .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.rhome h2 { margin: 0; font-size: 19px; }
.rhome .wide { grid-column: 1 / -1; }
.apptrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.apptrow.now { border: 2px solid var(--teal); background: var(--tealW); }
.formrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.formrow.unread { border: 2px solid var(--amber); background: var(--amberW); }
@media (max-width: 900px) { .rhome { grid-template-columns: minmax(0, 1fr); padding: 16px; } }
.login { min-height: calc(100vh - 90px); display: grid; place-items: center; padding: 32px 16px; background: var(--ground); }
.login .box { width: min(760px, 100%); display: flex; flex-direction: column; gap: 18px; }
.login .brandrow { display: flex; align-items: center; gap: 12px; }
.login .brandrow b { font-family: var(--serif); font-size: 34px; }
.login h1 { margin: 0; font-size: 28px; }
.login .who2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.login .whocard { text-align: left; border: 2px solid var(--line2); border-radius: 16px; background: var(--card); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; font: inherit; color: var(--ink); }
.login .whocard:hover { border-color: var(--teal); }
.login .whocard b { font-size: 20px; }
.ffwd { border: 2px dashed #8A5A0E; color: #5C3A07; background: #FFF8EA; }
.todayrow { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.todayrow.now { border: 2px solid var(--teal); background: var(--tealW); }
.todayrow .t { font-family: var(--mono); font-size: 13px; color: var(--ink2); }
.wi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wi-row.now { border: 2px solid var(--teal); background: var(--tealW); }
.wi-row .t { font-family: var(--mono); font-size: 13px; color: var(--ink2); }
.wi-row .wi-txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pausedline { margin: 0; padding: 8px 12px; border-radius: 10px; border: 2px dashed var(--amber); background: var(--amberT); color: var(--amberD); font-weight: 800; font-size: 15px; }
.cap.paused [data-act="answer"], .cap.paused [data-act="mtap"], .cap.paused [data-act="timer"], .cap.paused [data-act="latcue"], .cap.paused [data-act="latstop"], .cap.paused [data-act="ivstart"], .cap.paused [data-act="ivhit"], .cap.paused [data-act="ivans"], .cap.paused [data-act="tstep"], .cap.paused [data-act="obs"], .cap.paused [data-act="beh"], .cap.paused [data-act="resp"], .cap.paused [data-act="brk"] { opacity: .5; }
.pillbtn.timing { background: var(--ink); color: #FFFFFF; }
.pillbtn.timing .n { background: #FFFFFF; color: var(--ink); }
.cgpick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.boardwrap { overflow-x: auto; }
.board { display: grid; grid-template-columns: 170px repeat(5, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); min-width: 920px; }
.board > div { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 8px; }
.board .bh { background: var(--faint); font-weight: 800; font-size: 13px; color: var(--ink2); text-align: center; }
.board .bh.today { background: var(--tealW); color: var(--tealD); }
.board .bs { font-weight: 800; background: var(--faint); display: flex; flex-direction: column; gap: 2px; }
.board .bs span { font-weight: 600; font-size: 12px; color: var(--ink2); }
.board .bc { display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.board .bc.today { background: #FAFDFC; }
.bchip { text-align: left; border: 1.5px solid; border-radius: 9px; padding: 5px 7px; font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.bchip b { display: block; font-size: 12.5px; }
.bchip .ov { display: block; color: #6A4BB8; font-weight: 800; }
.bchip.done { opacity: .55; }
.bplus { border: 1.5px dashed var(--line2); border-radius: 9px; background: transparent; color: var(--ink2); font-weight: 800; min-height: 30px; }
.bplus:hover { border-color: var(--teal); color: var(--tealD); }
.adm { padding: 22px 24px 48px; display: flex; flex-direction: column; gap: 16px; max-width: 1560px; margin: 0 auto; }
.admgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.wkrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--grid); }
.wkrow:first-of-type { border-top: 0; }
.wkrow .d { font-weight: 800; color: var(--ink2); font-size: 14px; }
.wkrow .ap { display: flex; flex-direction: column; gap: 2px; }
.visit { color: #6A4BB8; font-weight: 800; font-size: 13px; }
@media (max-width: 1100px) { .admgrid { grid-template-columns: minmax(0, 1fr); } }
.pf { display: flex; flex-direction: column; gap: 14px; }
.pf .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pf h3 { margin: 0; font-size: 16px; font-weight: 800; }
.pf .lab { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.pf .hdrgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pf .brief { border-left: 0; background: var(--amberW); border: 2px solid var(--amber); }
.pf .marks { display: inline-flex; gap: 3px; align-items: center; margin: 0 6px; }
.pf .marks i { width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.pf .marks i.p { background: #DDF1E8; color: #0E6B61; } .pf .marks i.m { background: #FFF1D6; color: #8A5A0E; }
.pf .badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #FFFFFF; border: 1.5px solid var(--amber); color: var(--amberD); }
.pf .finding { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #FFFFFF; display: flex; flex-direction: column; gap: 4px; }
.pf .rs { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.pf .rs.on { border: 2px solid var(--teal); background: var(--tealW); }
.pf .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pf .metric { border-radius: 10px; padding: 10px 12px; background: #0E6B61; color: #FFFFFF; }
.pf .metric p { margin: 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.pf .metric b { font-family: var(--mono); font-size: 22px; display: block; }
.pf .metric span { font-size: 12px; opacity: .9; }
.pf .tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--faint); border-radius: 12px; padding: 4px; }
.pf .tabs2 button { border: 0; border-radius: 9px; padding: 10px; font-weight: 800; background: transparent; color: var(--ink2); }
.pf .tabs2 button[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 28, .12); }
.pf .goal { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pf .goalhead { display: flex; gap: 8px; align-items: center; }
.pf .goalhead .inp { flex: 1; }
.pf .pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf .pad { width: 100%; min-height: 64px; border-radius: 12px; border: 2px solid; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; }
.pf .pad.ag { border-color: #2E8B6A; color: #0D3D2E; } .pf .pad.dg { border-color: #B4472F; color: #5A1F12; }
.pf .pad b { font-family: var(--mono); font-size: 22px; }
.pf .corr { width: 100%; border: 0; background: transparent; color: var(--ink2); font-size: 12px; padding: 4px; }
.pf .ioabar { position: relative; height: 8px; border-radius: 999px; background: var(--faint); overflow: visible; }
.pf .ioabar i { display: block; height: 100%; border-radius: 999px; }
.pf .ioabar em { position: absolute; top: -3px; bottom: -3px; left: 80%; width: 2px; background: var(--ink2); }
.pf .pct { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; color: #FFFFFF; }
.pf .live { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--tealW); }
.pf .live b { font-family: var(--mono); font-size: 26px; }
.pf .ck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grid); }
.pf .ck.focus { background: var(--amberW); margin: 0 -10px; padding: 10px; border-radius: 10px; border-top: 0; }
.pf .ck .flag { display: block; font-size: 12px; color: #8A5A0E; font-weight: 700; }
.pf .ck .note { grid-column: 1 / -1; }
.pf .receipt { border: 1.5px solid rgba(14, 107, 97, .35); background: rgba(14, 107, 97, .04); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pf .receipt p { margin: 0; }
/* The prototype's styles: the supervision form. In the prototype's order; do not reorder. */
/* supervision form, cleaned up */
.pf { gap: 16px; }
.pf .card { padding: 18px 20px; gap: 12px; border-radius: 14px; }
.pf h3 { font-size: 17px; }
.pf .brief { background: var(--amberW); border: 1px solid var(--amber); }
.pf .pfhead { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.pf .pfhead .help { margin-left: auto; }
.pf .pfsmall { font-size: 13px; }
.pf .pfsess { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.pf .pfsess.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--tealW); }
.pf .pfsess-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pf .pfsess-head > b { font-size: 16px; }
.pf .pfsess-meta { color: var(--ink2); font-size: 14px; font-variant-numeric: tabular-nums; }
.pf .pfsess-meta b { color: var(--ink); font-family: var(--mono); }
.pf .pfsess .timeline { border: 0; border-top: 1px solid var(--grid); border-radius: 0; padding-top: 4px; }
.pf .pflive { font-size: 12px; font-weight: 800; color: #FFFFFF; background: var(--teal); padding: 2px 9px; border-radius: 999px; }
.pf .pfgoals { display: flex; flex-direction: column; gap: 12px; }
.pf .pfgoal { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FBFCFB; }
.pf .pfgoal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pf .pfgoal-n { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; min-width: 64px; }
.pf .pfgoal select { font-weight: 700; background: #FFFFFF; }
.pf .pfioa { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pf .pfioa.ok { background: #DDF1E8; color: #0D3D2E; }
.pf .pfioa.low { background: #F8E6DF; color: #5A1F12; }
.pf .pfpads { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px; gap: 8px; }
.pf .pfpad { min-height: 56px; border-radius: 12px; border: 1.5px solid; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 800; font-size: 16px; }
.pf .pfpad b { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; }
.pf .pfpad.ag { border-color: #2E8B6A; color: #0D3D2E; }
.pf .pfpad.dg { border-color: #B4472F; color: #5A1F12; }
.pf .pfpad.ag:not(:disabled):hover { background: #F1FAF6; }
.pf .pfpad.dg:not(:disabled):hover { background: #FDF3EF; }
.pf .pfpad:disabled { opacity: .42; }
.pf .pfminus { border-radius: 10px; border: 1px solid var(--line2); background: #FFFFFF; color: var(--ink2); font-weight: 800; font-size: 13px; }
.pf .pfminus:disabled { opacity: .35; }
.pf .pfbar { position: relative; height: 8px; border-radius: 999px; background: #F3D9D0; }
.pf .pfbar i { display: block; height: 100%; border-radius: 999px; background: #2E8B6A; }
.pf .pfbar em { position: absolute; top: -4px; bottom: -4px; left: 80%; width: 2px; border-radius: 1px; background: var(--ink); }
.pf .pfcomment, .pf .pfnote { min-height: 38px; font-size: 15px; border-color: var(--line); }
.pf .pfck-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pf .pfck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--grid); background: var(--card); }
.pf .pfck:first-child { border-top: 0; }
.pf .pfck.focus { background: var(--amberW); }
.pf .pfck-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf .pfck-body p { margin: 0; font-size: 15px; line-height: 1.4; }
.pf .pftags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf .pftag { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--faint); color: var(--ink2); }
.pf .pftag.amber { background: var(--amberT); color: var(--amberD); }
.pf .pfck-ctrl { display: flex; align-items: center; gap: 10px; }
.pf .pfseg { display: inline-flex; border: 1.5px solid var(--line2); border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.pf .pfseg button { min-width: 54px; height: 38px; border: 0; border-left: 1px solid var(--line2); background: transparent; font-weight: 800; font-size: 14px; color: var(--ink2); }
.pf .pfseg button:first-child { border-left: 0; }
.pf .pfseg button:not(:disabled):hover { background: var(--faint); }
.pf .pfseg button[aria-pressed="true"].y { background: #2E8B6A; color: #FFFFFF; }
.pf .pfseg button[aria-pressed="true"].n { background: #B4472F; color: #FFFFFF; }
.pf .pfseg button[aria-pressed="true"].na { background: #5E6E68; color: #FFFFFF; }
.pf .pfnotebtn { border: 0; background: none; color: var(--teal); font-weight: 800; font-size: 13px; padding: 6px 2px; white-space: nowrap; min-width: 52px; text-align: left; }
.pf .pfnotebtn:hover { text-decoration: underline; }
.pf .pfnoteph { display: inline-block; min-width: 52px; }
.pf .pfck .pfnote { grid-column: 1 / -1; }
@media (max-width: 760px) { .pf .pfck { grid-template-columns: minmax(0, 1fr); } .pf .pfpads { grid-template-columns: minmax(0, 1fr) 46px; } .pf .pfgoal-head { grid-template-columns: minmax(0, 1fr); } }
/* The prototype's styles: the RBT's home. In the prototype's order; do not reorder. */
/* RBT home: the ticket, the week strip */
.rtoday { gap: 14px; }
.rt-top { display: flex; align-items: flex-end; gap: 6px 16px; flex-wrap: wrap; }
.rhome .rt-top h2 { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.05; }
.rt-sum { margin: 0 0 3px auto; color: var(--ink2); font-weight: 700; }
.syncbox { display: flex; flex-direction: column; gap: 8px; }
.syncline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; color: var(--ink2); }
.syncline > span:not(.chip) { flex: 1 1 260px; min-width: 0; }
.syncline .btn { flex: none; }
.syncproto { background: var(--amberW); color: var(--amberD); border-bottom: 2px dashed #8A5A0E; padding: 8px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.syncproto .sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.syncproto .sp-lbl { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-btn { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 2px dashed #8A5A0E; background: var(--amberW); color: var(--amberD); font-weight: 800; font-size: 13px; }
.sp-btn[aria-pressed="true"] { background: var(--amberD); border-style: solid; border-color: var(--amberD); color: #FFFFFF; }
.syncproto label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; max-width: 100%; }
.syncproto select { width: auto; max-width: 100%; min-width: 0; min-height: 34px; padding: 4px 8px; border-radius: 10px; border: 2px dashed #8A5A0E; background: var(--card); color: var(--amberD); font-size: 14px; font-weight: 700; }
.sp-note { margin: 0; border: 2px dashed #8A5A0E; background: var(--amberW); color: var(--amberD); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
@media (max-width: 640px) { .syncproto { padding: 8px 16px; } .syncproto select { width: 100%; } }
.tk { --lh: #7A63D0; display: grid; grid-template-columns: 124px minmax(0, 1fr) 220px; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 32, 28, .05), 0 8px 24px rgba(16, 32, 28, .06); }
.tk.now { border: 2px solid var(--teal); }
.tk.done { box-shadow: none; background: var(--tealW); }
.tk-time { border-radius: 14px; padding: 14px 10px; text-align: center; background: #F3F0FB; background: color-mix(in srgb, var(--lh) 11%, #FFFFFF); }
.tk-time b { display: inline; font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-time span { font-weight: 800; color: var(--ink2); font-size: 15px; margin-left: 3px; }
.tk-time em { display: block; font-style: normal; font-size: 13px; color: var(--ink2); margin-top: 5px; }
.tk-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tk-who { display: flex; align-items: center; gap: 12px; }
.lav { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lh); color: #FFFFFF; font-weight: 800; font-size: 20px; flex: none; }
.tk-who b { display: block; font-size: 21px; line-height: 1.15; }
.tk-who span { color: var(--ink2); font-size: 14px; }
.tk-where { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 14px; }
.tk-track { position: relative; height: 32px; border-radius: 9px; background: #E7F2EF; background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(14, 107, 97, .18) calc(25% - 1px), rgba(14, 107, 97, .18) 25%, transparent 25%, transparent calc(50% - 1px), rgba(14, 107, 97, .18) calc(50% - 1px), rgba(14, 107, 97, .18) 50%, transparent 50%, transparent calc(75% - 1px), rgba(14, 107, 97, .18) calc(75% - 1px), rgba(14, 107, 97, .18) 75%, transparent 75%); }
.tk-visit { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: #6A4BB8; color: #FFFFFF; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 5px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.tk-now { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.tk-ticks { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink2); margin-top: 5px; font-variant-numeric: tabular-nums; }
.tk-ticks .tk-vk { color: #4B2F96; font-weight: 800; }
.tk-act { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.tk-act .btn { min-height: 54px; font-size: 18px; }
.tk-act .chip { align-self: center; }
.rw-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.rw-sum { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.rw-sum span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--faint); color: var(--ink2); }
.rw-sum span.v { background: #F3EEFC; color: #4B2F96; }
.wstrip { display: grid; grid-template-columns: repeat(5, minmax(158px, 1fr)); gap: 10px; overflow-x: auto; padding: 2px 2px 4px; }
.wsd { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #FBFCFB; min-height: 180px; }
.wsd.today { border: 2px solid var(--teal); background: var(--tealW); }
.wsd.past { background: var(--ground); }
.wsd-h { display: flex; align-items: baseline; gap: 7px; }
.wsd-h .dn { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.wsd-h .dd { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1; }
.wsd-h .tc { margin-left: auto; font-size: 11px; font-weight: 800; color: #FFFFFF; background: var(--teal); padding: 2px 8px; border-radius: 999px; }
.wss { --lh: #7A63D0; position: relative; border-radius: 11px; padding: 9px 10px; background: #FFFFFF; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 2px rgba(16, 32, 28, .05); }
.wss .t { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink2); }
.wss b { display: flex; align-items: center; gap: 7px; font-size: 15px; line-height: 1.2; }
.wss b i { width: 10px; height: 10px; border-radius: 50%; background: var(--lh); flex: none; }
.wss .pl { font-size: 12px; color: var(--ink2); }
.wss .vv { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12px; font-weight: 800; color: #4B2F96; background: #F3EEFC; border-radius: 999px; padding: 2px 8px; margin-top: 3px; }
.wss .chg { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--amberD); background: var(--amberT); border-radius: 999px; padding: 1px 8px; margin-top: 3px; }
.wss.done { opacity: .62; box-shadow: none; }
.wss .ck2 { position: absolute; top: 8px; right: 8px; color: #2E8B6A; }
.wsd-none { margin: 0; font-size: 13px; color: var(--ink2); }
.wsd-f { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--ink2); }
.rl-big { display: flex; align-items: center; gap: 14px; }
.rl-big > b { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.rl-big span { display: block; font-weight: 700; }
.rf-h { display: flex; align-items: center; gap: 10px; color: #C9761A; }
.rf-h h2 { color: var(--ink); }
.rf-skill { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.35; }
.rf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rf-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: baseline; }
.rf-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C9761A; }
.rf-date { grid-column: 2; justify-self: start; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--amberT); color: var(--amberD); }
.rsup-top { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.rsup-n { margin-left: auto; color: var(--ink2); }
.rsup-n b { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.rsup-bar { position: relative; height: 12px; border-radius: 999px; background: var(--faint); box-shadow: inset 0 0 0 1px var(--line); margin: 2px 0 16px; }
.rsup-bar i { display: block; height: 100%; border-radius: 999px; background: #2E8B6A; }
.rsup-bar em { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--ink); }
.rsup-bar span { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--ink2); }
@media (max-width: 900px) { .tk { grid-template-columns: minmax(0, 1fr); } .tk-time { display: flex; align-items: baseline; gap: 8px; text-align: left; } .tk-time em { display: inline; margin: 0; } }
/* The prototype's styles: the BST cycle. In the prototype's order; do not reorder. */
/* the BST cycle */
.pf .bst-skill { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pf .bst-skill select { font-weight: 700; }
.pf .bst-steps { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf .bst-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; }
.pf .bst-steps li::before { content: ""; position: absolute; z-index: 0; top: 15px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 3px; border-radius: 2px; background: var(--line); }
.pf .bst-steps li:first-child::before { display: none; }
.pf .bst-steps li.done::before, .pf .bst-steps li.cur::before { background: var(--teal); }
.pf .bst-steps .n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #FFFFFF; border: 2px solid var(--line2); color: var(--ink2); }
.pf .bst-steps li.done .n { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.pf .bst-steps li.cur .n { border-color: var(--teal); color: var(--tealD); box-shadow: 0 0 0 4px rgba(14, 107, 97, .15); }
.pf .bst-steps b { font-size: 13px; }
.pf .bst-steps em { font-style: normal; font-size: 12px; color: var(--ink2); min-height: 16px; font-variant-numeric: tabular-nums; }
.pf .bst-step { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.pf .bst-step.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.pf .bst-step.done { background: #FBFCFB; }
.pf .bst-h { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.pf .bst-h b { font-size: 16px; }
.pf .bst-h .bn { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.pf .bst-step.done .bn { background: var(--teal); }
.pf .bst-f { display: flex; flex-direction: column; gap: 4px; }
.pf .bst-f > span, .pf .bst-sub { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink2); }
.pf .bst-f .inp { font-size: 15px; border-color: var(--line); }
.pf .bst-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf .bst-tap { min-height: 42px; padding: 0 14px; border-radius: 11px; border: 1.5px solid var(--teal); background: #FFFFFF; color: var(--tealD); font-weight: 800; font-size: 15px; }
.pf .bst-tap:hover { background: var(--tealW); }
.pf .bst-done { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #0D3D2E; background: #DDF1E8; border-radius: 999px; padding: 6px 12px; font-variant-numeric: tabular-nums; }
.pf .bst-done.no { color: var(--amberD); background: var(--amberT); }
.pf .bst-ok, .pf .bst-no { min-height: 46px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: 15px; background: #FFFFFF; border: 1.5px solid; }
.pf .bst-ok { border-color: #2E8B6A; color: #0D3D2E; }
.pf .bst-no { border-color: #9AAAA4; color: var(--ink2); }
.pf .bst-ok:not(:disabled):hover { background: #F1FAF6; }
.pf .bst-no:not(:disabled):hover { background: var(--faint); }
.pf .bst-ok:disabled, .pf .bst-no:disabled { opacity: .4; }
.pf .bst-tries { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.pf .bst-tries i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; }
.pf .bst-tries i.ok { background: #2E8B6A; color: #FFFFFF; }
.pf .bst-tries i.no { background: #F3D9D0; color: #5A1F12; }
.pf .bst-met { margin: 0; font-weight: 800; color: #0D3D2E; }
.pf .bst-next { border-top: 1px solid var(--grid); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) { .pf .bst-steps b { font-size: 11px; } .pf .bst-steps em { display: none; } .pf .bst-skill { grid-template-columns: minmax(0, 1fr); } }
.pf .bst-new { border: 1.5px dashed var(--teal); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--tealW); }
.pf .bst-chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.pf .bst-chk input { width: 18px; height: 18px; accent-color: var(--teal); }
/* The prototype's styles: the BCBA's home. In the prototype's order; do not reorder. */
/* BCBA home */
.bh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bh-head .h1 { font-size: 36px; }
.bh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bh-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); color: var(--ink2); }
.bh-chips span.v { background: #F3EEFC; border-color: #D9CCF4; color: #4B2F96; }
.bh-chips span.w { background: var(--amberT); border-color: #F2C98A; color: var(--amberD); }
.rw-top h2 { margin: 0; font-size: 19px; }
.dl { display: flex; flex-direction: column; overflow-x: auto; padding-bottom: 2px; }
.dl-axis, .dl-row { display: grid; grid-template-columns: 110px minmax(680px, 1fr); }
.dl-axis > div { position: relative; height: 24px; margin: 0 10px; }
.dl-axis > div span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 12px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-axis > div span.nowlab { top: 0; font-weight: 800; color: #FFFFFF; background: var(--ink); padding: 1px 7px; border-radius: 999px; z-index: 2; }
.dl-row { border-top: 1px solid var(--grid); }
.dl-name { display: flex; flex-direction: column; justify-content: center; font-weight: 800; font-size: 14px; padding-right: 8px; }
.dl-name em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dl-lane { position: relative; height: 56px; margin: 0 10px; background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / 11)); }
.dl-b { position: absolute; top: 7px; bottom: 7px; min-width: 0; border-radius: 9px; border: 1.5px solid var(--lh); background: #F6F3FC; background: color-mix(in srgb, var(--lh) 13%, #FFFFFF); color: var(--ink); text-align: left; padding: 2px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; font: inherit; }
.dl-b b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-b span { font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-b.me { background: #6A4BB8; border-color: #6A4BB8; color: #FFFFFF; }
.dl-b.me span { color: #EDE8FB; }
.dl-b.live { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 107, 97, .22); }
.dl-b.done { opacity: .55; }
button.dl-b:hover { filter: brightness(.97); }
.dl-now { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; pointer-events: none; }
.bh-grid { display: flex; flex-direction: column; gap: 18px; }
.bs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 6px; }
.bh-sup .bs-list .bs-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.bh-sup { gap: 4px; }
.bs-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--grid); }
.bh-sup .ovhead + .bs-row { border-top: 0; }
.bs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bs-pct { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--amberD); font-variant-numeric: tabular-nums; }
.bs-pct.ok { color: var(--teal); }
.bh-sup .rsup-bar { margin: 2px 0 4px; }
.wss .svc { font-size: 12px; font-weight: 800; }
.lc2 { --lh: #7A63D0; display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(170px, 1fr) minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 14px 18px; }
.lc2 h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc2-hours { display: flex; flex-direction: column; gap: 4px; }
.lab2 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.minibar { height: 8px; border-radius: 999px; background: var(--faint); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.minibar i { display: block; height: 100%; border-radius: 999px; background: var(--lh); }
.lc2-state { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lc2-act { display: flex; align-items: center; gap: 10px; }
.lc2-wait { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--amberT); color: var(--amberD); white-space: nowrap; }
.pflive2 { font-size: 12px; font-weight: 800; color: #FFFFFF; background: var(--teal); padding: 2px 9px; border-radius: 999px; }
@media (max-width: 1100px) { .bh-grid { grid-template-columns: minmax(0, 1fr); } .lc2 { grid-template-columns: auto minmax(0, 1fr); } .lc2-hours, .lc2-state, .lc2-act { grid-column: 2; } }
/* The prototype's styles: scheduling. In the prototype's order; do not reorder. */
/* scheduling, smooth */
.bk { gap: 14px; }
.bk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk-sum { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--tealW); border: 1px solid #CFE3DE; }
.bk-f { display: flex; flex-direction: column; gap: 6px; }
.bk-l { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.bk-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bk-seg button { text-align: left; border: 1.5px solid var(--line2); border-radius: 10px; background: #FFFFFF; padding: 7px 10px; display: flex; flex-direction: column; }
.bk-seg button b { font-size: 14px; }
.bk-seg button span { font-size: 12px; color: var(--ink2); font-family: var(--mono); }
.bk-seg button[aria-pressed="true"] { border-color: var(--teal); background: var(--tealT); box-shadow: inset 0 0 0 1px var(--teal); }
.bk-seg button:disabled { opacity: .45; }
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bk-days button { border: 1.5px solid var(--line2); border-radius: 10px; background: #FFFFFF; padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
.bk-days button b { font-size: 12px; }
.bk-days button span { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.1; }
.bk-days button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.bk-rep { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.bk-rep input { width: 18px; height: 18px; accent-color: var(--teal); }
.bk-len { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-len button { border: 1.5px solid var(--line2); border-radius: 999px; background: #FFFFFF; padding: 5px 12px; font-weight: 800; font-size: 13px; color: var(--ink2); }
.bk-len button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.bk-who { display: flex; flex-direction: column; gap: 6px; }
.bk-who button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--line2); border-radius: 12px; background: #FFFFFF; padding: 8px 10px; }
.bk-who button[aria-pressed="true"] { border-color: var(--teal); background: var(--tealT); box-shadow: inset 0 0 0 1px var(--teal); }
.bk-who button.busy { background: var(--faint); }
.bk-who button.busy[aria-pressed="true"] { border-color: #B4472F; background: #FBEDE8; box-shadow: inset 0 0 0 1px #B4472F; }
.bk-who button:disabled { opacity: .62; cursor: not-allowed; }
.bk-wt { display: flex; flex-direction: column; min-width: 0; }
.bk-wt b { font-size: 15px; }
.bk-wt em { font-style: normal; font-size: 12px; color: var(--ink2); }
.lav.sm { width: 30px; height: 30px; font-size: 13px; background: #5E6E68; }
.bk-prob { border: 1.5px solid #B4472F; background: #FBEDE8; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.bk-prob b { color: #5A1F12; }
.bk-prob p, .bk-warn p { margin: 0; font-size: 14px; }
.bk-warn { border: 1.5px solid var(--amber); background: var(--amberW); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.bk-ok { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #0D3D2E; background: #EAF6F1; border-radius: 10px; padding: 8px 10px; }
.bk-ok svg { flex: none; margin-top: 3px; }
.bk-go { min-height: 50px; font-size: 17px; flex: 1; }
.bk-open { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--grid); padding-top: 10px; }
.bk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bk-slots button { border: 1.5px dashed var(--teal); border-radius: 10px; background: #FFFFFF; padding: 7px 10px; text-align: left; font-weight: 800; font-size: 14px; color: var(--tealD); display: flex; flex-direction: column; }
.bk-slots button span { font-weight: 700; font-size: 12px; color: var(--ink2); }
.bk-slots button:hover { background: var(--tealW); }
.wkd.tapbook { cursor: copy; }
.bchip[draggable="true"] { cursor: grab; }
.bchip.dragging { opacity: .45; }
.board .bc.dropto { background: var(--tealT); box-shadow: inset 0 0 0 2px var(--teal); }
.chg2 { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--amberD); background: var(--amberT); border-radius: 999px; padding: 1px 7px; }
.bs-out { align-self: flex-start; margin-top: 6px; border: 1px solid var(--line2); border-radius: 999px; background: #FFFFFF; padding: 2px 10px; font-size: 12px; font-weight: 800; color: #5A1F12; }
.bs-out:hover { border-color: #B4472F; }
.co { border: 2px solid #B4472F; }
.co-row { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--grid); padding-top: 10px; }
.co-row b { display: block; }
.co-row.done b { color: #0D3D2E; }
.co-opts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.undobar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #FFFFFF; font-weight: 700; }
.undobar button { margin-left: auto; border: 1.5px solid #FFFFFF; border-radius: 999px; background: transparent; color: #FFFFFF; font-weight: 800; padding: 4px 14px; }
.wkghost { position: absolute; left: 3px; right: 3px; z-index: 4; border-radius: 8px; border: 2px dashed var(--teal); background: rgba(14, 107, 97, .14); color: var(--tealD); font-size: 12px; font-weight: 800; padding: 3px 6px; pointer-events: none; overflow: hidden; }
.wkd.tapbook { user-select: none; -webkit-user-select: none; }
.bk-code { display: flex; align-items: center; gap: 10px; }
.bk-code span { font-size: 13px; font-weight: 800; color: var(--ink2); }
.bk-code .inp { flex: 1; font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
/* The prototype's styles: care teams and who you see. In the prototype's order; do not reorder. */
/* care teams and who you see */
.lav.xs { width: 30px; height: 30px; font-size: 13px; }
.bh-view { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: #FFFFFF; border: 1.5px solid var(--teal); color: var(--tealD); }
.bh-view[aria-expanded="true"] { background: var(--tealT); }
.bh-gap { margin: 10px 0 0; font-size: 14px; color: var(--amberD); background: var(--amberW); border: 1px solid #F2C98A; border-radius: 10px; padding: 8px 10px; }
.vw { gap: 10px; }
.vw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.vw-chip { --lh: #7A63D0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--faint); padding: 8px 10px; }
.vw-chip[aria-pressed="true"] { background: #FFFFFF; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.vw-chip b { display: block; font-size: 14px; }
.vw-chip em { font-style: normal; font-size: 12px; color: var(--ink2); }
.vw-chip:not([aria-pressed="true"]) .lav { filter: grayscale(1); opacity: .55; }
.vw-state { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #E3E8E6; color: var(--ink2); }
.vw-chip[aria-pressed="true"] .vw-state { background: var(--teal); color: #FFFFFF; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; }
.tm { --lh: #7A63D0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tm-head { display: flex; align-items: center; gap: 12px; }
.tm-head h3 { margin: 0; font-size: 18px; }
.tm-tag { margin-left: auto; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--faint); color: var(--ink2); }
.tm-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid var(--grid); padding-top: 10px; }
.tm-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); padding-top: 8px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tm-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px; background: #FFFFFF; font-weight: 700; font-size: 14px; }
.tm-chip.primary { border-color: var(--teal); padding-right: 10px; }
.tm-chip em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--tealD); background: var(--tealT); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.tm-x { border: 0; background: var(--faint); color: var(--ink2); width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 800; }
.tm-x:hover { background: #F3D9D0; color: #5A1F12; }
.tm-add { border: 1.5px dashed var(--teal); border-radius: 999px; background: #FFFFFF; color: var(--tealD); font-weight: 800; font-size: 13px; padding: 5px 12px; }
.tm-add[aria-expanded="true"] { background: var(--tealT); border-style: solid; }
.tm-pick { border: 1px solid #CFE3DE; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--tealW); }
.tm-cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tm-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tm-log li { display: flex; gap: 12px; }
.tm-log .t { font-family: var(--mono); font-size: 12px; color: var(--ink2); min-width: 64px; padding-top: 2px; }
.ry-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ry-l { --lh: #7A63D0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #FBFCFB; }
.ry-l b { display: block; }
.ry-l .chg { font-size: 11px; font-weight: 800; color: var(--amberD); background: var(--amberT); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 760px) { .tm-grid { grid-template-columns: minmax(0, 1fr); } }
/* The prototype's styles: sites, rooms, authorizations and the office. In the prototype's order; do not reorder. */
/* sites, rooms, authorizations, the office */
.sc-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.sc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--faint); }
.sc-seg button { border: 0; border-radius: 9px; padding: 8px 12px; font-weight: 800; font-size: 14px; background: transparent; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; }
.sc-seg button span { font-size: 11px; font-weight: 800; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #FFFFFF; color: var(--ink2); }
.sc-seg button[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 28, .12); }
.sc-seg button[aria-selected="true"] span { background: var(--teal); color: #FFFFFF; }
/* 25g: one row of controls: a week (or day) stepper, the view, and a site choice that hides with one site */
.sc-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--faint); }
.sc-step button { border: 0; border-radius: 9px; background: transparent; font-weight: 800; font-size: 18px; width: 38px; height: 36px; color: var(--ink2); }
.sc-step button:hover { background: #FFFFFF; }
.sc-step .at { font-weight: 800; font-size: 14px; padding: 0 10px; white-space: nowrap; color: var(--ink); }
.sc-step .at small { font-weight: 700; color: var(--tealD); margin-left: 6px; }
.sc-site { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--ink2); }
.sc-site select { min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line2); background: #FFFFFF; font: inherit; font-weight: 800; font-size: 14px; padding: 0 10px; color: var(--ink); }
/* 25g: what needs the office, as one line of counts; each opens its list beside the board */
.sc-attn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--amberW); border: 1px solid #F2C98A; }
.sc-attn .lab { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amberD); margin-right: 4px; }
.sc-attn button { border: 1.5px solid #E2B566; background: #FFFFFF; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13.5px; color: var(--amberD); display: inline-flex; gap: 6px; align-items: center; }
.sc-attn button b { font-size: 14px; color: var(--ink); }
.sc-attn button:hover, .sc-attn button[aria-expanded="true"] { border-color: var(--amberD); }
.sc-attn button[aria-expanded="true"] { background: var(--amberT); }
/* 25g: how the hours are counted, on request; a week with nothing booked says so in one line */
.sc-how { font-size: 13px; color: var(--ink2); }
.sc-how summary { cursor: pointer; font-weight: 800; color: var(--tealD); width: max-content; }
.sc-how p { margin: 6px 0 0; max-width: 860px; }
.sc-empty { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.sc-empty span { font-weight: 600; color: var(--ink2); }
/* 25g: + in an empty cell shows on hover and on keyboard focus (always, on a week with nothing booked, or with no hover) */
.board .bplus { opacity: 0; }
.board .bc:hover .bplus, .board .bplus:focus, .board .bplus:focus-visible, .board.empty .bplus { opacity: 1; }
@media (hover: none) { .board .bplus { opacity: 1; } }
.admgrid.wide { grid-template-columns: minmax(0, 1fr); }
.admside { display: flex; flex-direction: column; gap: 14px; }
.sc-cap { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.sc-cap-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.sc-cap-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink2); }
.sc-cap-nums b { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-right: 3px; }
.sc-cap-nums .amber b { color: var(--amberD); }
.sc-cap-nums .red b { color: #9A2E1C; }
.sc-cap-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.sc-cap-bar i { display: block; height: 100%; }
.sc-cap-bar i.d { background: #0E6B61; }
.sc-cap-bar i.b { background: #7DBFB3; }
.sc-cap-bar i.o { background: repeating-linear-gradient(45deg, #FFF1D6 0 5px, #F2C98A 5px 7px); }
.board .bh span { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); }
.bchip { --lh: #7A63D0; }
.bchip .ld { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lh); margin-right: 5px; vertical-align: 1px; }
.bchip .bsite { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.abadge { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF; background: #B4472F; border-radius: 999px; padding: 1px 7px; }
.abadge.pend { background: #C9761A; }
.wkb .abadge { display: block; width: max-content; }
.wkb-site { display: block; font-size: 11px; font-weight: 700; opacity: .85; }
.sc-dl .dl-lane { cursor: copy; }
.dl-b.half span { display: none; }
.dl-b .abadge { position: absolute; top: 3px; right: 4px; margin: 0; }
.bk-auth { border: 1px solid #CFE3DE; border-radius: 12px; padding: 10px 12px; background: var(--tealW); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bk-auth.none { border-color: #E9B4A6; background: #FBEDE8; color: #5A1F12; }
.bk-auth-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bk-auth-h span { font-size: 12px; color: var(--ink2); }
.au-bar { position: relative; display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.au-bar.sm { height: 8px; }
.au-bar i { display: block; height: 100%; }
.au-bar i.u { background: #0E6B61; }
.au-bar i.b { background: #7DBFB3; }
.au-bar i.n { background: #C9761A; }
.au-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.au-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--faint); color: var(--ink2); border: 1px solid var(--line); }
.au-pill b { color: var(--ink); font-family: var(--mono); }
.au-pill.over { background: #FBEDE8; border-color: #E9B4A6; color: #5A1F12; }
.au-pill.under { background: var(--amberW); border-color: #F2C98A; color: var(--amberD); }
.au-pill.ok { background: #EAF6F1; border-color: #BFE0D4; color: #0D3D2E; }
.au-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.au-head { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
.au-head h3 { margin: 0; font-size: 18px; }
.au-head > div { flex: 1; min-width: 220px; }
.au-st { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.au-st.ok { background: #DDF1E8; color: #0D3D2E; }
.au-st.soon { background: var(--amberT); color: var(--amberD); }
.au-st.pend { background: #E6EEF7; color: #1F3A5E; }
.au-line { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; border-top: 1px solid var(--grid); padding-top: 12px; }
.au-code b { display: block; font-family: var(--mono); font-size: 16px; }
.au-code span { font-size: 13px; color: var(--ink2); }
.au-mid { display: flex; flex-direction: column; gap: 6px; }
.au-nums { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.au-nums b { color: var(--ink); }
.au-pace { margin: 0; font-size: 14px; font-weight: 700; }
.au-pace.ok { color: #0D3D2E; }
.au-pace.under { color: var(--amberD); }
.au-pace.over { color: #9A2E1C; }
.au-pace.idle { color: var(--ink2); font-weight: 600; }
.aw-row { --lh: #7A63D0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; border-top: 1px solid var(--grid); padding-top: 10px; }
.ovhead + .aw-row { border-top: 0; padding-top: 0; }
.aw-row b { display: block; }
.aw-it { margin: 3px 0 0; font-size: 14px; padding-left: 12px; position: relative; }
.aw-it::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink2); }
.aw-it.red::before { background: #B4472F; }
.aw-it.amber::before { background: #C9761A; }
.au-watch .aw-it { padding-left: 14px; }
@media (max-width: 760px) { .au-line { grid-template-columns: minmax(0, 1fr); } }
/* The prototype's styles: the import screen. In the prototype's order; do not reorder. */
/* import from another system */
.im-safe { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #0D3D2E; background: #EAF6F1; border: 1px solid #BFE0D4; border-radius: 12px; padding: 10px 12px; }
.im-safe svg { flex: none; margin-top: 3px; }
.im-step { gap: 12px; }
.im-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #0D3D2E; background: #DDF1E8; border-radius: 999px; padding: 3px 11px; }
.im-file { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; border: 1.5px dashed var(--teal); border-radius: 12px; padding: 10px 14px; background: var(--tealW); font-weight: 800; color: var(--tealD); cursor: pointer; }
.im-file input { font: inherit; font-size: 13px; }
.im-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.im-map label, .im-match label { display: flex; flex-direction: column; gap: 4px; }
.im-map span, .im-match span { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.im-prev { display: flex; flex-wrap: wrap; gap: 6px; }
.im-prev span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--faint); color: var(--ink2); }
.im-prev b { color: var(--ink); }
.im-match { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* The prototype's styles: modals and the toast. In the prototype's order; do not reorder. */
/* modal and toast */
.scrim { position: fixed; inset: 0; background: rgba(16, 32, 28, .45); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal { background: var(--card); border-radius: 18px; max-width: 560px; width: 100%; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(16, 32, 28, .3); }
.modal h2 { margin: 0; font-size: 24px; }
.facts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 10px 30px rgba(16, 32, 28, .3); z-index: 39; pointer-events: none; max-width: calc(100vw - 32px); }

@media (max-width: 1260px) {
  .rgrid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "today today" "cap side"; }
  .rgrid > .today { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .today .sub { margin-top: 0; }
  .today .plist { flex-direction: row; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .today .plist .prow { flex: 0 0 230px; }
  .today .prow .mean { display: none; }
  .notegrid { grid-template-columns: minmax(0, 1fr); }
  .recordcard { position: static; }
  .bgrid, .ggrid, .dgrid { grid-template-columns: minmax(0, 1fr); }
  .previewcol { position: static; }
}
@media (max-width: 1100px) {
  .ghead { display: none; }
  .grow2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grow2 > textarea { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bwrap { grid-template-columns: minmax(0, 1fr); }
  .bnav { flex-direction: row; align-items: center; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .bnav nav { flex-direction: row; flex-wrap: wrap; }
  .bnav .me { display: none; }
  .bmain { padding: 18px 16px 48px; }
  .gfoot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .rgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "today" "cap" "side"; padding: 16px 16px 40px; }
  .rgrid > .side { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .notegrid { padding: 16px 16px 40px; }
  .rhead { padding: 12px 16px; }
  .pbar, .tipbar { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .frow > label, .frow > .lbl { padding-top: 0; }
  .tgtrow { grid-template-columns: 90px minmax(0, 1fr); }
  .tgtrow .help { grid-column: 1 / -1; }
  .dcards { grid-template-columns: minmax(0, 1fr); }
  .answers { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .qitem { grid-template-columns: minmax(0, 1fr); }
  .grow2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .ans:active, .pillbtn:active, .countbtn:active { transform: none; }
}
.mvleft { border-color: var(--amber); background: var(--amberW); }
.mvleft h3 { color: var(--amberD); }
/* The prototype's styles: the front door, starting a clinic, invites, and team and access. In the prototype's order; do not reorder. */
/* ---------- front door: landing page (one visual world, matched to the green seal) ---------- */
.plogo { border-radius: 50%; display: block; flex: none; }
.pbar .plogo { box-shadow: 0 0 0 1.5px rgba(252, 240, 222, .7); }
/* ---------- clinic setup and the invite, from the new person's side ---------- */
.ob { min-height: calc(100vh - 90px); display: grid; place-items: start center; padding: 40px 16px 72px; background: radial-gradient(900px 480px at 50% -8%, #DCEFE6, rgba(220, 239, 230, 0) 70%), var(--ground); }
.ob-card { width: min(660px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 22px 50px rgba(16, 32, 28, .08); }
.ob-brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 21px; flex-wrap: wrap; }
.ob-brand img { border-radius: 50%; }
/* Full logo at account access; the adjacent name remains available to screen readers. */
.pbf-full-logo { justify-content: center; flex-direction: column; }
.pbf-full-logo > .ob-inv { margin-left: 0; text-align: center; }
.pbf-full-logo > img { width: 176px; height: 176px; object-fit: contain; border-radius: 0; }
.pbf-full-logo > b { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width:620px) { .pbf-full-logo > img { width: 144px; height: 144px; } }

.ob-inv { margin-left: auto; font-family: var(--sans); font-size: 13px; color: var(--ink2); }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ob-steps li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink2); padding: 5px 13px 5px 5px; border-radius: 999px; background: var(--faint); }
.ob-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line2); font-size: 13px; }
.ob-steps li.now { background: var(--tealT); color: var(--tealD); }
.ob-steps li.now span, .ob-steps li.done span { background: var(--teal); color: #FFFFFF; border-color: var(--teal); }
.ob-body { display: flex; flex-direction: column; gap: 14px; }
.ob-body h1 { margin: 0; font-family: var(--serif); font-size: 34px; line-height: 1.08; }
.ob-mfa { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px; border-radius: 16px; background: var(--tealW); border: 1px solid var(--line); }
.ob-mfa h3 { margin: 0 0 6px; font-size: 18px; }
.ob-qr { background: #FFFFFF; padding: 8px; border-radius: 12px; border: 1px solid var(--line); width: 138px; }
.ob-qr svg { display: block; width: 120px; height: 120px; }
.ob-rows { display: grid; gap: 10px; }
.ob-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; }
.ob-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ob-sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-or { margin: 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .1em; }
.ob-done { width: 60px; height: 60px; border-radius: 50%; background: var(--tealT); color: var(--teal); display: grid; place-items: center; }
.ob-done svg { width: 30px; height: 30px; }
.ob-can { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
@media (max-width: 620px) { .ob-mfa, .ob-row, .ob-sso { grid-template-columns: minmax(0, 1fr); } .ob-card { padding: 20px; } }
/* ---------- team and access ---------- */
.ac-org { margin: -8px 12px 0; font-size: 14px; font-weight: 700; color: var(--ink2); }
.ac-me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--faint); }
.ac-me img { border-radius: 50%; }
.ac-me b { display: block; font-size: 14px; }
.ac-me small { color: var(--ink2); font-size: 13px; }
.ac-stats { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--ink2); }
.ac-stats b { color: var(--ink); font-size: 19px; margin-right: 2px; }
.ac-table { padding: 4px 0; overflow-x: auto; }
.ac-row { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(170px, 1fr) minmax(150px, 1fr) 112px minmax(140px, .9fr) minmax(190px, auto); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); min-width: 1000px; }
.ac-row.ac-th { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); padding-top: 10px; padding-bottom: 8px; }
.ac-row.off { opacity: .58; }
.ac-row.ac-confirm { grid-template-columns: minmax(0, 1fr) auto; border-top: 0; border-left: 4px solid var(--amber); background: var(--ground); }
.ac-row.ac-confirm small { max-width: 640px; }
.ac-row small { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; font-weight: 400; }
.ac-who { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.inp.small { min-height: 36px; padding: 4px 8px; font-size: 14px; }
.ac-inv { border-color: var(--teal); box-shadow: 0 0 0 3px var(--tealT); }
.ac-rolegrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.ac-roles { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 104px; }
.ac-rolebtn { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; color: var(--ink); }
.ac-rolebtn b { font-size: 16px; }
.ac-rolebtn span { font-size: 13px; color: var(--ink2); }
.ac-rolebtn[aria-pressed="true"] { border-color: var(--teal); background: var(--tealT); }
.ac-roleed { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.ac-rolehead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ac-rolehead h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 30px; }
.ac-count { font-size: 13px; font-weight: 800; color: var(--tealD); background: var(--tealT); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ac-lock { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--amberW); color: var(--amberD); font-weight: 700; font-size: 14px; }
.ac-lock svg { width: 18px; height: 18px; flex: none; }
.ac-sees { margin: 0; font-size: 14px; color: var(--ink2); padding: 10px 12px; border-radius: 12px; background: var(--faint); }
.ac-sees b { color: var(--ink); }
.ac-group { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.ac-group legend { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; padding: 0; }
.ac-perm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; position: relative; }
.ac-perm:hover { background: var(--faint); }
.ac-perm.locked { cursor: default; }
.ac-perm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-sw { width: 42px; height: 25px; border-radius: 13px; background: #C3CFCA; position: relative; transition: background .15s; }
.ac-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: left .15s; }
.ac-perm input:checked + .ac-sw { background: var(--teal); }
.ac-perm input:checked + .ac-sw::after { left: 20px; }
.ac-perm input:focus-visible + .ac-sw { outline: 3px solid var(--teal); outline-offset: 2px; }
.ac-perm input:disabled + .ac-sw { opacity: .62; }
.ac-pt b { display: block; font-size: 15px; }
.ac-pt small { display: block; font-size: 13px; color: var(--ink2); }
.ac-cred { font-size: 12px; font-weight: 800; color: #4A2A73; background: var(--learnerT); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ac-set { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 320px); gap: 8px 24px; align-items: center; justify-content: start; padding: 8px 10px; }
.ac-set .inp { width: 100%; max-width: 320px; }
.ac-set b { display: block; }
.ac-set small { display: block; font-size: 13px; color: var(--ink2); max-width: 52ch; }
.ac-log { padding: 4px 0; }
.ac-logrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.ac-logrow:first-child { border-top: 0; }
.ac-at { color: var(--ink2); font-variant-numeric: tabular-nums; font-size: 14px; }
.ac-mailmodal { max-width: 620px; }
.mail { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mail-top { display: grid; gap: 3px; padding: 12px 16px; background: var(--faint); font-size: 14px; color: var(--ink2); }
.mail-top b { color: var(--ink); margin-right: 6px; }
.mail-body { padding: 26px 24px; display: grid; justify-items: center; text-align: center; gap: 10px; background: #FFFDF8; }
.mail-body img { border-radius: 50%; }
.mail-body h2 { margin: 0; font-family: var(--serif); font-size: 25px; }
.mail-body p { margin: 0; max-width: 44ch; }
.mail-note { font-style: italic; color: var(--ink2); }
.mail-btn { display: inline-block; background: #002A1E; color: #FCF0DE; font-weight: 800; padding: 12px 22px; border-radius: 10px; margin: 6px 0; }
.mail-small { font-size: 13px; color: var(--ink2); }
@media (max-width: 900px) { .ac-rolegrid { grid-template-columns: minmax(0, 1fr); } .ac-roles { position: static; flex-direction: row; flex-wrap: wrap; } .ac-logrow { grid-template-columns: minmax(0, 1fr); gap: 2px; } }


/* ---------- treatment plan versions and goals ---------- */
.tp-until { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tp-until label { font-weight: 800; color: var(--ink2); font-size: 14px; }
.tp-until .inp { width: 200px; min-height: 36px; padding: 4px 10px; font-size: 15px; }
.tbl tr.on > td { background: var(--tealW); }
.tbl td.nowrap, .tp-goals td:first-child { white-space: nowrap; }
.drhead .missing { max-width: 72ch; }
@media (max-width: 640px) { .tbl tr.gedit .gform, .tbl tr.gedit .askrow { position: sticky; left: 12px; max-width: calc(100vw - 100px); } }
.tbl tr.gedit > td { background: var(--faint); padding: 14px 12px 16px; }
.gform { padding: 0; gap: 12px; }
.ac-set + .ac-policy { padding: 0 10px; margin-top: -10px; }
@media (max-width: 640px) { .ac-set { grid-template-columns: minmax(0, 1fr); } }
.ck.held { border: 2px dashed var(--amber); background: #FFFFFF; }
.ck.held .ic { background: #9A5B0B; }
.holdfix { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.holdfix .askrow { padding: 10px 12px; }
.holdfix .askrow .inp { min-width: 0; width: 100%; }
.tp-log, .au-log { max-width: 1080px; }
.aw-row .oh-fix { grid-column: 1 / -1; margin-top: 0; }
.refedit { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.holdfix .askrow > label, .holdfix .askrow > .inp { flex: 1 1 100%; }
.amodal .pfa-ask { margin-top: 4px; }
.amodal .pfa-ask > span { flex: 1 1 100%; }
/* The prototype's styles: layout fixes for the product screens in standards mode (build_lx.py writes them), after every other app rule. In the prototype's order; do not reorder. */
/* ---------- product views: standards-mode fixes (build_lx.py STANDARDS_FIXES) ---------- */
/* BCBA home "done" check (.ck2): in standards mode the inline SVG sat on the text baseline, so the span grew from 14 to 22 px and the icon dropped 2 px. Make the icon a block, as quirks mode effectively rendered it. */
.ck2 > svg { display: block; }
/* Admin sidebar owner card (.ac-me): the role line under the name picked up the 16 px parent strut in standards mode (+5 px). A block keeps its own 13 px line box, as in quirks mode. */
.ac-me small { display: block; }
/* BCBA home next-visit card (.tk-who): the "BCBA visit" line under the title picked up the parent strut (+3 px). */
.tk-who div > span { display: block; }
/* Admin people table: "After they join" (.help nested in a grid cell) picked up the parent strut (+2 px). */
.ac-row .help { display: block; }
/* Office week board chips (.bchip): the "Auth pending" / "No auth" badge sat alone on an inline line that picked up the parent strut (+0.6 px a chip, +2 px down the board). Same fix the product already uses for .wkb badges. */
.bchip .abadge { display: block; width: max-content; }
/* BCBA home next-visit time block (.tk-time): the 42 px time line picked up the 16 px parent strut (+0.4 px, a 1 px seam). Line-height 1 on the block, with the two small lines kept at the body 1.4, matches the quirks geometry exactly. */
.tk-time { line-height: 1; } .tk-time em { line-height: 1.4; }
/* Product tables (the note, goals, supervision forms): quirks mode resets font size, weight, style and line-height on <table> (cells ran at line-height normal); standards mode inherits the body 1.4, so every row grew 1 to 3 px (+15 px on the note). This restates the quirks UA rule for product tables only, at zero specificity (:where) so class rules such as .tbl still win, as they did over the UA rule. */
:where(table:not(.lx table)) { font-weight: initial; font-style: initial; font-variant: initial; font-size: initial; line-height: initial; white-space: initial; text-align: initial; }
/* ---------- end product views: standards-mode fixes ---------- */
/* The prototype's styles: the landing page's core (lx-core). In the prototype's order; do not reorder. */
/* ---------- landing v3 (lx) ---------- */
/* ---- lx-core.css ---- */

.lx, .lx-film {
--lx-forest: #002A1E; --lx-deep: #00140E; --lx-pool: #0C3B2D; --lx-ivory: #FCF0DE; --lx-kraft: #F4E6CB; --lx-paper: #FFFDF7; --lx-white: #FFFFFF;
--lx-copper: #D08650; --lx-copper-hi: #E09A63; --lx-copper-deep: #A5582F; --lx-copper-deep-hi: #8E4A26; --lx-cream: #FFF7EC;
--lx-ink: #10201C; --lx-ink2: #3E4C47; --lx-ink3: #3F5A4F; --lx-muted: #5B6F66;
--lx-rule-paper: #E4D6BC; --lx-rule-ivory: #DCCDB0; --lx-rule-ui: #E3EAE7; --lx-margin: #C9776E; --lx-sig: #1B3A8C;
--lx-iv: #FCF0DE; --lx-iv80: rgba(252, 240, 222, .8); --lx-iv72: rgba(252, 240, 222, .72); --lx-iv62: rgba(252, 240, 222, .62);
--lx-iv40: rgba(252, 240, 222, .4); --lx-iv08: rgba(252, 240, 222, .08);
--lx-own-bg: #DDF1E8; --lx-own-bd: #2E8B6A; --lx-own-fg: #0D3D2E;
--lx-help-bg: #E6EEF7; --lx-help-bd: #4A6FA5; --lx-help-fg: #16324F;
--lx-wrong-bg: #F8E6DF; --lx-wrong-bd: #B4472F; --lx-wrong-fg: #5A1F12;
--lx-teal: #0E6B61; --lx-teal-d: #0A4F48; --lx-teal-t: #E3F3EF;
--lx-learner: #7A63D0; --lx-learner-t: #EDE8FB; --lx-dana: #8B75D9; --lx-dana-bg: #F3EAFB; --lx-dana-fg: #4A2A73;
--lx-amber: #E9A23B; --lx-amber-bg: #FFF1D6; --lx-amber-fg: #5C3A07;
--lx-line: #D5DEDA; --lx-line2: #B9C6C1; --lx-faint: #EEF2F0; --lx-sw-off: #C3CFCA;
--lx-key: radial-gradient(1100px 700px at 72% 34%, #0C3B2D 0%, #002A1E 60%);
--lx-shadow-dark: 0 30px 60px -10px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .25);
--lx-shadow-ivory: 0 30px 60px rgba(60, 40, 10, .18), 0 1px 0 #E6D6B8;
--lx-serif: Fraunces, Georgia, "Times New Roman", serif;
--lx-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--lx-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--lx-fs-h1: 76px; --lx-fs-h2: 64px; --lx-fs-sub: 34px; --lx-fs-kicker: 13px; --lx-fs-lede: 18px; --lx-fs-cue: 30px;
--lx-fs-hinge: 56px; --lx-fs-prove: 28px; --lx-fs-payoff: 56px; --lx-fs-marg: 24px; --lx-fs-lhead: 22px; --lx-fs-letter: 18px;
--lx-fs-crtitle: 22px; --lx-fs-crlabel: 12px; --lx-fs-crline: 24px; --lx-fs-close: 88px; --lx-fs-ready1: 44px; --lx-fs-ready2: 36px;
--lx-fs-sd: 40px; --lx-fs-ans: 18px; --lx-fs-tech: 13px; --lx-fs-body: 15px; --lx-fs-clock: 26px; --lx-fs-data: 14px; --lx-fs-readout: 13px;
--lx-fs-btn: 16px; --lx-fs-film: 13px;
--lx-s1: 4px; --lx-s2: 8px; --lx-s3: 12px; --lx-s4: 16px; --lx-s5: 24px; --lx-s6: 32px; --lx-s7: 48px; --lx-s8: 64px; --lx-s9: 96px; --lx-s10: 128px;
--lx-pad-x: 64px; --lx-gutter: 24px; --lx-content: 1312px; --lx-cols: 12;
--lx-sec-pt: 128px; --lx-sec-pb: 112px; --lx-nav-h: 64px; --lx-bar-h: 48px; --lx-scroll-mt: 72px;
--lx-r-inst: 22px; --lx-r-band: 18px; --lx-r-card: 16px; --lx-r-ans: 14px; --lx-r-check: 12px; --lx-r-pill: 999px; --lx-r-paper: 6px 18px 18px 6px; --lx-r-letter: 2px;
--lx-z-film: 60; --lx-z-nav: 40; --lx-z-bar: 30; --lx-z-fx: 3; --lx-z-glass: 4;
--lx-e-settle: cubic-bezier(.16, 1, .3, 1); --lx-e-exact: cubic-bezier(.2, 0, 0, 1); --lx-e-draw: cubic-bezier(.65, 0, .35, 1); --lx-e-stamp: cubic-bezier(.2, 1.4, .35, 1);
--lx-d-press: 90ms; --lx-d-color: 120ms; --lx-d-select: 180ms; --lx-d-swap: 240ms; --lx-d-ink: 260ms; --lx-d-fly: 420ms; --lx-d-type: 700ms; --lx-d-flip: 900ms; --lx-d-race: 1400ms; --lx-d-thread: 1400ms;
--lx-focus: #D08650;
}
@media (max-width: 1100px) {
.lx, .lx-film {
--lx-fs-h1: 56px; --lx-fs-h2: 52px; --lx-fs-sub: 28px; --lx-fs-lede: 16px; --lx-fs-cue: 26px; --lx-fs-hinge: 48px; --lx-fs-prove: 26px; --lx-fs-payoff: 48px;
--lx-fs-marg: 22px; --lx-fs-letter: 17px; --lx-fs-crline: 22px; --lx-fs-close: 72px; --lx-fs-ready1: 40px; --lx-fs-ready2: 32px; --lx-fs-sd: 34px; --lx-fs-ans: 17px; --lx-fs-clock: 24px;
--lx-pad-x: 32px; --lx-content: 960px; --lx-sec-pt: 96px; --lx-sec-pb: 88px;
}
}
@media (max-width: 699px) {
.lx, .lx-film {
--lx-fs-h1: 44px; --lx-fs-h2: 38px; --lx-fs-sub: 22px; --lx-fs-kicker: 12px; --lx-fs-cue: 22px; --lx-fs-hinge: 34px; --lx-fs-prove: 22px; --lx-fs-payoff: 36px;
--lx-fs-marg: 19px; --lx-fs-lhead: 20px; --lx-fs-letter: 16px; --lx-fs-crtitle: 20px; --lx-fs-crline: 19px; --lx-fs-close: 44px; --lx-fs-ready1: 32px; --lx-fs-ready2: 28px;
--lx-fs-sd: 30px; --lx-fs-ans: 16px; --lx-fs-body: 14px; --lx-fs-clock: 20px; --lx-fs-data: 13px; --lx-fs-readout: 12px; --lx-fs-btn: 15px;
--lx-pad-x: 16px; --lx-gutter: 16px; --lx-content: 358px; --lx-cols: 1; --lx-sec-pt: 72px; --lx-sec-pb: 64px; --lx-nav-h: 56px; --lx-bar-h: 44px; --lx-scroll-mt: 64px;
}
}
@media (max-width: 699px) and (max-height: 740px) { .lx, .lx-film { --lx-fs-sd: 26px; } }
html.lx-on, html.lx-on body { background: #00140E; }
html.lx-on { scrollbar-gutter: stable; }
html.lx-lock { overflow: hidden; }
.lx {
position: relative; background: var(--lx-deep); color: var(--lx-ivory); font-family: var(--lx-sans); font-size: var(--lx-fs-body); line-height: 1.4;
overflow-x: clip; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }
.lx-main { display: block; position: relative; }
.lx-main > section { scroll-margin-top: var(--lx-scroll-mt); position: relative; }
.lx-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }
.lx-navline { display: block; height: 1px; margin-bottom: -1px; pointer-events: none; }
.lx img { max-width: 100%; }
.lx h1, .lx h2, .lx h3, .lx h4, .lx p, .lx ol, .lx ul, .lx dl, .lx dd, .lx figure { margin: 0; }
.lx ol, .lx ul { padding: 0; list-style: none; }
.lx [data-f], .lx-film [data-f] { font-variation-settings: "SOFT" var(--soft, 0), "WONK" var(--wonk, 0); }
.lx .lx-it, .lx-film .lx-it { font-style: italic; --soft: 50; --wonk: 1; }
.lx-serif { font-family: var(--lx-serif); }
.lx-mono, .lx-code { font-family: var(--lx-mono); font-variant-numeric: tabular-nums; }
.lx-nobr { white-space: nowrap; }
.lx-kicker { font-family: var(--lx-sans); font-size: var(--lx-fs-kicker); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--lx-iv72); }
.lx-lede { font-size: var(--lx-fs-lede); line-height: 1.5; color: var(--lx-iv80); max-width: 30em; }
.lx-h2 { font-family: var(--lx-serif); font-weight: 700; font-size: var(--lx-fs-h2); line-height: 1; letter-spacing: -.022em; color: var(--lx-ivory); }
.lx-subit { font-family: var(--lx-serif); font-style: italic; font-weight: 560; font-size: var(--lx-fs-sub); line-height: 1.15; letter-spacing: -.01em; color: var(--lx-copper); --soft: 50; --wonk: 1; }
.lx-eyebrow { font-family: var(--lx-sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; color: var(--lx-ink2); }
.lx-help { font-size: 13px; line-height: 1.4; color: var(--lx-muted); }
.lx-readout { font-family: var(--lx-mono); font-size: var(--lx-fs-readout); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
.lx-t { font-family: var(--lx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-ms { color: var(--lx-ms, #A5582F); }
.lx-ap { opacity: .6; }
.lx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lx-dark { --lx-focus: #D08650; --lx-ms: #D08650; color: var(--lx-ivory); }
.lx-light, .lx-note, .lx-claim, .lx-sigblock, .lx-surface { --lx-focus: #A5582F; --lx-ms: #A5582F; }
.lx-wrap { width: 100%; max-width: calc(var(--lx-content) + 2 * var(--lx-pad-x)); margin: 0 auto; padding-left: var(--lx-pad-x); padding-right: var(--lx-pad-x); }
.lx-grid { display: grid; grid-template-columns: repeat(var(--lx-cols), minmax(0, 1fr)); column-gap: var(--lx-gutter); }
.lx :focus { outline: none; }
.lx :focus-visible, .lx-film :focus-visible { outline: 2px solid var(--lx-focus); outline-offset: 3px; }
.lx [tabindex="-1"]:focus, .lx [tabindex="-1"]:focus-visible { outline: none; }
.lx-pbar :focus-visible, .lx-skip:focus-visible { outline: 2px solid #D08650; outline-offset: 3px; }
.pbar.lx-pbar { position: static; min-height: var(--lx-bar-h, 48px); padding: 0 20px; flex-wrap: nowrap; gap: 8px 16px; }
.pbar.lx-pbar .brand { white-space: nowrap; }
.lx-pbar-tag { font-size: 13px; line-height: 1.3; color: rgba(252, 240, 222, .72); white-space: nowrap; }
.lx-pbar-tag b { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FCF0DE; }
.lx-pbar-short { display: none; }
.pbar.lx-pbar .linkbtn { white-space: nowrap; min-height: 40px; }
@media (max-width: 619px) {
.pbar.lx-pbar { min-height: 44px; padding: 0 12px; gap: 4px; }
.pbar.lx-pbar .tag { display: none; }
.lx-pbar-long { display: none; }
.lx-pbar-short { display: inline; }
.pbar.lx-pbar .brand { font-size: 15px; gap: 7px; }
.pbar.lx-pbar .brand .light { font-size: 12px; }
.pbar.lx-pbar .plogo { width: 22px; height: 22px; }
.pbar.lx-pbar .linkbtn { font-size: 13px; padding: 6px 5px; }
}
@media (max-width: 379px) { .pbar.lx-pbar .plogo { display: none; } }
.lx-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lx-skip:focus { position: fixed; top: 16px; left: 16px; z-index: 70; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
background: #D08650; color: #00140E; font: 800 15px/1 "Atkinson Hyperlegible Next", system-ui, sans-serif; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.lx-nav {
position: sticky; top: 0; z-index: 40; height: var(--lx-nav-h); margin-bottom: calc(-1 * var(--lx-nav-h));
background-color: rgba(0, 20, 14, 0); box-shadow: inset 0 -1px 0 rgba(252, 240, 222, 0);
transition: background-color var(--lx-d-swap) var(--lx-e-exact), box-shadow var(--lx-d-swap) var(--lx-e-exact);
}
.lx-nav[data-solid="true"] { background-color: #00140E; box-shadow: inset 0 -1px 0 rgba(252, 240, 222, .08); }
.lx-nav-in { height: 100%; max-width: calc(var(--lx-content) + 2 * var(--lx-pad-x)); margin: 0 auto; padding: 0 var(--lx-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lx-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 0; margin-left: -2px; border: 0; background: none; color: var(--lx-ivory); border-radius: 999px; cursor: pointer; }
.lx-brand-mark { width: 36px; height: 36px; border-radius: 50%; display: block; flex: none; box-shadow: 0 0 0 1px rgba(252, 240, 222, .16); }
.lx-brand-word { font-family: var(--lx-serif); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.lx-nav-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 699px) {
.lx-brand { gap: 10px; }
.lx-brand-mark { width: 32px; height: 32px; }
.lx-brand-word { font-size: 18px; }
.lx-nav-cta { gap: 4px; }
.lx-nav .lx-nav-signin { background: none; border-color: transparent; min-height: 44px; padding: 0 10px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(252, 240, 222, .5); }
.lx-nav .lx-nav-start { font-size: 15px; padding: 0 14px; min-height: 40px; height: 40px; }
}
@media (max-width: 419px) { .lx-brand-word { display: none; } }
.lx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
border: 1.5px solid transparent; background: transparent; color: inherit; font-family: var(--lx-sans); font-size: var(--lx-fs-btn); font-weight: 800; line-height: 1; letter-spacing: 0;
text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: background-color var(--lx-d-color) var(--lx-e-exact), border-color var(--lx-d-color) var(--lx-e-exact), color var(--lx-d-color) var(--lx-e-exact), transform var(--lx-d-press) var(--lx-e-exact);
}
.lx-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.lx-btn:disabled, .lx-btn[aria-disabled="true"] { cursor: default; }
.lx-btn--copper { background: #D08650; color: #00140E; }
.lx-btn--copper:hover { background: #E09A63; }
.lx-btn--ghost { border-color: rgba(252, 240, 222, .4); color: var(--lx-ivory); }
.lx-btn--ghost:hover { border-color: rgba(252, 240, 222, .8); }
.lx-btn--ghostink { border-color: rgba(16, 32, 28, .32); color: var(--lx-ink); --lx-focus: #A5582F; }
.lx-btn--ghostink:hover { border-color: rgba(16, 32, 28, .7); }
.lx-btn--copperdeep { background: #A5582F; color: #FFF7EC; --lx-focus: #A5582F; }
.lx-btn--copperdeep:hover { background: #8E4A26; }
.lx-btn--dark { background: #10201C; color: #FFFFFF; border-radius: 12px; min-height: 40px; padding: 0 16px; --lx-focus: #A5582F; }
.lx-btn--dark:hover { background: #22342F; }
.lx-btn--teal { background: #0E6B61; color: #FFFFFF; border-radius: 12px; min-height: 44px; padding: 0 18px; --lx-focus: #A5582F; }
.lx-btn--teal:hover { background: #0A4F48; }
.lx-btn--nav { min-height: 40px; height: 40px; padding: 0 18px; }
.lx-btn--big { min-height: 56px; padding: 0 32px; font-size: 18px; }
@media (max-width: 699px) { .lx-btn--big { width: 100%; } }
.lx-textbtn {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer;
font-family: var(--lx-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: currentColor;
transition: color var(--lx-d-color) var(--lx-e-exact), text-decoration-color var(--lx-d-color) var(--lx-e-exact); border-radius: 4px;
}
.lx-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-radius: 4px; }
.lx kbd { font-family: var(--lx-mono); font-size: 12px; font-weight: 700; line-height: 1.5; padding: 0 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .65; }
.lx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-family: var(--lx-sans); font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap; background: #EEF2F0; color: #3E4C47; }
.lx-chip--green { background: #DDF1E8; color: #0D3D2E; }
.lx-chip--teal { background: #E3F3EF; color: #0A4F48; }
.lx-chip--dana { background: #F3EAFB; color: #4A2A73; }
.lx-chip--cred { background: #EDE8FB; color: #4A2A73; }
.lx-chip--saved { background: #DDF1E8; color: #0D3D2E; }
.lx-chip--amber { background: #FFF1D6; color: #5C3A07; box-shadow: inset 0 0 0 1.5px #E9A23B; }
.lx-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: #E3F3EF; color: #0A4F48; font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #EEF2F0; color: #3E4C47; font-family: var(--lx-sans); font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .01em; white-space: nowrap; }
.lx-tag--dark { background: rgba(252, 240, 222, .1); color: var(--lx-iv80); }
.lx-recchip { display: inline-block; vertical-align: 1px; padding: 0 8px; border-radius: 999px; background: #E3F3EF; color: #0A4F48; font-family: var(--lx-sans); font-size: 12px; font-weight: 800; line-height: 18px; white-space: nowrap; letter-spacing: 0; }
.lx-rail-svg { display: block; overflow: visible; max-width: none; }
.lx-rail-svg.lx-rail--slide { overflow: hidden; }
.lx-rail-svg text { font-family: var(--lx-mono); font-size: 12px; font-weight: 500; fill: #5B6F66; font-variant-numeric: tabular-nums; }
.lx-rail-svg .lx-r-runlab { font-family: var(--lx-sans); font-weight: 700; }
.lx-rail-svg .lx-r-new { fill: #A5582F; font-weight: 700; }
.lx-rail-svg .lx-r-marklab { fill: #10201C; }
.lx-rail-svg .lx-r-danalab { fill: #5B6F66; }
.lx-rail--halo text { paint-order: stroke; stroke: #FFFDF7; stroke-width: 5px; stroke-linejoin: round; }
.lx-rail--halo text.lx-r-runlab { stroke: none; }
.lx-rail-svg .lx-r-tick { stroke-linecap: round; }
.lx-rail-svg .is-later { opacity: 0; }
.lx-rail-svg .lx-r-dia, .lx-rail-svg .lx-r-tick, .lx-rail-svg .lx-r-brk, .lx-rail-svg .lx-r-you { transform-box: fill-box; transform-origin: 50% 100%; }
.lx-note {
--lx-row: 24px; --lx-note-pt: 12px; position: relative; color: var(--lx-ink); background-color: #FFFDF7;
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lx-row) - 1px), rgba(74, 111, 165, .13) calc(var(--lx-row) - 1px), rgba(74, 111, 165, .13) var(--lx-row));
background-position: 0 var(--lx-note-pt); background-repeat: repeat-y; border-left: 3px solid #C9776E; padding: var(--lx-note-pt) 16px var(--lx-note-pt) 18px;
}
.lx-note-h { font-family: var(--lx-sans); font-size: 15px; font-weight: 800; line-height: var(--lx-row); color: var(--lx-ink); letter-spacing: 0; }
.lx-note-lines { display: block; }
.lx-nl { display: block; font-family: var(--lx-mono); font-size: var(--lx-fs-data); font-weight: 500; line-height: var(--lx-row); color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-nl-t { margin-right: 4px; }
.lx-nl--btn { width: 100%; text-align: left; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; border-radius: 4px; font: inherit; font-family: var(--lx-mono); font-size: var(--lx-fs-data); line-height: var(--lx-row); color: var(--lx-ink); }
.lx-nl--btn:focus-visible { outline-offset: 2px; border-radius: 4px; }
.lx-nl.is-you .lx-nl-t { color: #A5582F; }
.lx-note-ph { font-family: var(--lx-sans); font-size: 13px; line-height: var(--lx-row); color: var(--lx-muted); font-style: normal; }
.lx-note-margin { font-family: var(--lx-serif); font-style: italic; font-weight: 500; font-size: 15px; line-height: var(--lx-row); color: #A5582F; --soft: 50; --wonk: 1; font-variation-settings: "SOFT" 50, "WONK" 1; }
.lx-sigblock { display: flex; flex-direction: column; gap: 4px; color: var(--lx-ink); }
.lx-sigslot { display: block; width: 220px; max-width: 100%; height: 48px; border-radius: 8px; border: 1.5px dashed #B9C6C1; transition: border-color var(--lx-d-swap) var(--lx-e-exact); }
.lx-sigblock[data-state="signed"] .lx-sigslot { border-color: transparent; }
.lx-sig-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lx-sig-p { fill: none; stroke: #1B3A8C; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.lx-sigline { font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--lx-muted); font-variant-numeric: tabular-nums; }
.lx .lx-lock { font-family: var(--lx-mono); font-size: 12px; font-weight: 700; line-height: 1.4; color: #0A4F48; font-variant-numeric: tabular-nums; }
.lx-claim { position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--lx-ink); }
.lx-claim-eyebrow { color: var(--lx-ink2); }
.lx-claim-rows { display: flex; flex-direction: column; }
.lx-claim-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #E4D6BC; font-family: var(--lx-sans); font-size: var(--lx-fs-data); line-height: 1.35; font-variant-numeric: tabular-nums; }
.lx-claim-row:first-child { border-top: 1px dashed #E4D6BC; }
.lx-claim-row .lx-code { font-family: var(--lx-mono); font-weight: 700; }
.lx-claim-row b.lx-code { font-weight: 700; }
.lx-checks { display: flex; flex-direction: column; gap: 8px; }
.lx-ck { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid #D5DEDA; background: #FFFFFF; font-size: 14px; line-height: 1.35; color: #5B6F66; transition: color var(--lx-d-swap) var(--lx-e-exact), border-color var(--lx-d-swap) var(--lx-e-exact); }
.lx-ck b { display: block; font-size: 15px; font-weight: 800; }
.lx-ck-d { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; }
.lx-ck-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #C3CFCA; background: transparent; transition: background-color var(--lx-d-swap) var(--lx-e-exact), box-shadow var(--lx-d-swap) var(--lx-e-exact); }
.lx-ck-ic svg { display: block; overflow: visible; }
.lx-ck-ic path { fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.01; transition: stroke-dashoffset 220ms var(--lx-e-draw) 80ms; }
.lx-ck.is-ok { color: var(--lx-ink); }
.lx-ck.is-ok .lx-ck-ic { background: #2E8B6A; box-shadow: none; }
.lx-ck.is-ok .lx-ck-ic path { stroke-dashoffset: 0; }
.lx-ck.is-ok .lx-ck-d { color: var(--lx-ink2); }
.lx-checks--compact { gap: 6px; }
.lx-checks--compact .lx-ck { grid-template-columns: 20px minmax(0, 1fr); padding: 8px 10px; font-size: 14px; }
.lx-checks--compact .lx-ck b { font-size: 14px; }
.lx-checks--compact .lx-ck-ic { width: 20px; height: 20px; }
.lx-verdict { font-size: 18px; font-weight: 800; line-height: 1.2; padding: 10px 12px; border-radius: 12px; border: 2px solid #0E6B61; background: #E3F3EF; color: #0A4F48; }
.lx-verdict[hidden] { display: none; }
.lx-ready {
position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-block; pointer-events: none;
font-family: var(--lx-serif); font-weight: 800; font-size: var(--lx-fs-ready1); line-height: 1; letter-spacing: .08em; color: #A5582F;
padding: .14em .2em .1em .28em; border: 3px double #A5582F; border-radius: 6px; mix-blend-mode: multiply; transform: rotate(-6deg); transform-origin: 50% 50%;
}
.lx-claim[data-state="pending"] .lx-ready { opacity: 0; }
.lx-ring { box-shadow: 0 0 0 2px #A5582F; border-radius: 6px; transition: box-shadow var(--lx-d-select) var(--lx-e-exact); }
@media (prefers-reduced-motion: reduce) {
.lx, .lx *, .lx *::before, .lx *::after, .lx-film, .lx-film *, .lx-skip {
animation: none !important; transition-property: opacity !important; transition-duration: 150ms !important; transition-timing-function: linear !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
}
.lx.lx-rm, .lx.lx-rm *, .lx.lx-rm *::before, .lx.lx-rm *::after {
animation: none !important; transition-property: opacity !important; transition-duration: 150ms !important; transition-timing-function: linear !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
.lx.lx-rm .lx-btn:active, .lx.lx-rm .lx-btn:active:not(:disabled) { transform: none; }
@media (prefers-reduced-motion: reduce) { .lx .lx-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: none; } }
@media (forced-colors: active) {
.lx :focus-visible, .lx-film :focus-visible, .lx-pbar :focus-visible, .lx-skip:focus-visible { outline-color: Highlight; }
.lx-btn, .lx-chip, .lx-pill, .lx-tag, .lx-recchip { border: 1px solid ButtonText; }
.lx-ready { color: CanvasText; border-color: CanvasText; mix-blend-mode: normal; }
.lx-ck-ic { box-shadow: inset 0 0 0 2px CanvasText; }
.lx-ck-ic path { stroke: CanvasText; }
.lx-sig-p { stroke: CanvasText; }
.lx-note { border-left-color: CanvasText; }
.lx-rail-svg line, .lx-rail-svg path, .lx-rail-svg rect { forced-color-adjust: auto; }
.lx .lx-cu-stroke, .lx-film .lx-cu-stroke { stroke: CanvasText; }
.lx .lx-cu-fill, .lx-film .lx-cu-fill { fill: CanvasText; }
}
/* The prototype's styles: the landing page's first section (lx-s1). In the prototype's order; do not reorder. */
/* ---- lx-s1.css ---- */

.lx-hero {
min-height: calc(100svh - var(--lx-nav-h)); padding: calc(var(--lx-nav-h) + 24px) var(--lx-pad-x) 48px;
background-color: #002A1E; background-image: radial-gradient(1100px 700px at 72% 34%, #0C3B2D 0%, #002A1E 60%); color: var(--lx-ivory);
}
.lx-hero-in { max-width: var(--lx-content); margin: 0 auto; }
.lx-hero-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lx-gutter); align-items: end; }
.lx-hero-title { grid-column: 1 / span 8; min-width: 0; }
.lx-hero .lx-kicker { margin-bottom: 10px; }
.lx-h1 { font-family: var(--lx-serif); font-size: var(--lx-fs-h1); line-height: .95; font-weight: 600; letter-spacing: -.024em; color: var(--lx-ivory); white-space: nowrap; }
.lx-h1-a, .lx-h1-b { display: inline-block; }
.lx-h1-b { font-weight: 560; letter-spacing: -.02em; color: #D08650; padding-right: .06em; }
.lx-hero-aside { grid-column: 9 / span 4; min-width: 0; padding-bottom: 4px; }
.lx-hero .lx-lede { max-width: 30em; }
.lx-hero .lx-s1-film { margin-top: 6px; color: var(--lx-iv80); text-decoration-color: rgba(252, 240, 222, .45); }
.lx-hero .lx-s1-film:hover { color: var(--lx-ivory); text-decoration-color: currentColor; }
.lx-hero .lx-cue { margin-top: 24px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.lx-cue em { font-family: var(--lx-serif); font-size: var(--lx-fs-cue); font-weight: 560; line-height: 1.1; letter-spacing: -.01em; color: #D08650; }
.lx-cue span { font-size: 15px; line-height: 1.35; color: var(--lx-iv72); }
.lx-s1-pre .lx-s1-e { opacity: 0; }
.lx.lx-s1-handoff .lx-brand-mark, .lx.lx-s1-handoff .lx-brand-word, .lx.lx-s1-handoff .lx-nav-cta { opacity: 0; }
.lx-bench { position: relative; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.lx-bench-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.lx-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 3; }
.lx-s1-fx, .lx-s1-fy { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.lx-s1-fy i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1px #FFFFFF, 0 3px 8px rgba(0, 20, 14, .28); }
.lx-s1-trail { fill: none; stroke: #A5582F; stroke-width: 1; stroke-linecap: round; }
.lx-s1-leader { fill: none; stroke: #A5582F; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.lx-s1-leaddot { fill: #A5582F; }
.lx-inst { position: relative; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; color: var(--lx-ink); border-radius: 22px; padding: 20px 24px 22px; box-shadow: var(--lx-shadow-dark); }
.lx-inst-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 12px; align-items: center; }
.lx-inst-eyebrow { grid-column: 1 / 3; grid-row: 1; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 16px; color: #3E4C47; white-space: nowrap; }
.lx-s1-badges { grid-column: 3 / 5; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.lx-saved { gap: 5px; font-size: 12.5px; padding: 1px 9px 1px 7px; }
.lx-saved svg { display: block; flex: none; }
.lx-av { grid-column: 1; grid-row: 2; width: 32px; height: 32px; border-radius: 50%; background: #EDE8FB; box-shadow: inset 0 0 0 2px #7A63D0; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; color: #4A2A73; }
.lx-who { grid-column: 2; grid-row: 2; min-width: 0; display: flex; flex-direction: column; }
.lx-who b { font-size: 18px; font-weight: 800; line-height: 1.15; }
.lx-who span { font-size: 14px; line-height: 1.3; color: #3E4C47; white-space: nowrap; }
.lx-clockwrap { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lx-date { position: relative; display: grid; justify-items: end; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 16px; color: #5B6F66; font-variant-numeric: tabular-nums; }
.lx-date > * { grid-area: 1 / 1; }
.lx-date-clip { display: block; height: 16px; overflow: hidden; transition: opacity 150ms linear; }
.lx-date-in { display: flex; flex-direction: column; align-items: flex-end; }
.lx-date-in > span { display: block; height: 16px; white-space: nowrap; }
.lx-date[data-late="true"] .lx-date-in { transform: translateY(-50%); }
.lx-skipping { white-space: nowrap; color: #A5582F; font-weight: 700; opacity: 0; transition: opacity 150ms linear; }
.lx-date[data-skip="1"] .lx-date-clip { opacity: 0; }
.lx-date[data-skip="1"] .lx-skipping { opacity: 1; }
.lx-clock { font-family: var(--lx-mono); font-size: var(--lx-fs-clock); font-weight: 700; line-height: 1; color: var(--lx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.lx-c-ms { color: #A5582F; }
.lx-c-ap { opacity: .6; font-size: .72em; }
.lx.lx-rm .lx-c-ms { display: none; }
.lx-pause { grid-column: 4; grid-row: 2; align-self: end; min-width: 44px; min-height: 44px; margin: -12px -8px -12px -4px; padding: 0 8px; border: 0; background: none; border-radius: 8px; cursor: pointer;
font-family: var(--lx-mono); font-size: 12px; font-weight: 700; color: #3E4C47; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(62, 76, 71, .45); transition: color var(--lx-d-color) var(--lx-e-exact); }
.lx-pause:hover { color: var(--lx-ink); text-decoration-color: currentColor; }
.lx-pause[aria-pressed="true"] { color: #A5582F; text-decoration-color: currentColor; }
.lx-hero .lx-pause:focus-visible { outline-offset: -7px; border-radius: 12px; }
.lx-pause[aria-disabled="true"] { opacity: .45; cursor: default; }
.lx-inst-rule { height: 4px; margin: 14px -24px 0; background: #7A63D0; flex: none; }
.lx-inst-body { position: relative; display: grid; flex: 1 1 auto; padding-top: 16px; }
.lx-inst-body > .lx-v { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; visibility: hidden; }
.lx-inst-body[data-view="capture"] > .lx-v--capture, .lx-inst-body[data-view="sign"] > .lx-v--sign,
.lx-inst-body[data-view="claim"] > .lx-v--claim, .lx-inst-body > .lx-v.is-out { visibility: visible; }
.lx-v--capture { gap: 12px; }
.lx-caprow { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.lx-pname { font-size: 16px; font-weight: 700; color: #3E4C47; }
.lx-tally { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--lx-ink); white-space: nowrap; }
.lx-dots { display: flex; gap: 4px; }
.lx-dots i { display: block; width: 12px; height: 12px; border-radius: 3px; }
.lx-dots i.is-g { background: #2E8B6A; }
.lx-dots i.is-b { background: #4A6FA5; }
.lx-dots i.is-r { background: #B4472F; }
.lx-tally-t { display: inline-block; }
.lx-hero .lx-sd { font-size: var(--lx-fs-sd); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--lx-ink); margin-top: -2px; }
.lx-s1-sd { display: inline-block; }
.lx-banner { display: flex; flex-direction: column; gap: 3px; border-radius: 14px; padding: 12px 14px; background: #DDF1E8; color: #0D3D2E; }
.lx-banner-lead { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.lx-banner-t { font-size: 15px; line-height: 1.38; }
.lx-answers { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.lx-ans {
position: relative; min-width: 0; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 10px;
border-radius: 14px; border: 2px solid; font-family: var(--lx-sans); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background-color var(--lx-d-color) var(--lx-e-exact), opacity var(--lx-d-select) var(--lx-e-exact);
}
.lx-ans--g { background: #DDF1E8; border-color: #2E8B6A; color: #0D3D2E; }
.lx-ans--b { background: #E6EEF7; border-color: #4A6FA5; color: #16324F; }
.lx-ans--r { background: #F8E6DF; border-color: #B4472F; color: #5A1F12; }
.lx-ans--g:hover { background: #D0EBDF; }
.lx-ans--b:hover { background: #DAE5F2; }
.lx-ans--r:hover { background: #F4DBD2; }
.lx-ans-l { font-size: var(--lx-fs-ans); font-weight: 800; line-height: 1.15; }
.lx-ans-t { font-size: 13px; font-weight: 700; line-height: 1.2; opacity: .78; }
.lx-ans kbd { position: absolute; top: 7px; right: 8px; }
.lx-ans[aria-disabled="true"] { opacity: .42; cursor: default; }
.lx-ans[aria-disabled="true"]:hover { background-color: revert-layer; }
.lx-ans--g[aria-disabled="true"]:hover { background: #DDF1E8; }
.lx-ans--b[aria-disabled="true"]:hover { background: #E6EEF7; }
.lx-ans--r[aria-disabled="true"]:hover { background: #F8E6DF; }
.lx-s1-ring { position: absolute; inset: -2px; border: 2px solid #A5582F; border-radius: 14px; opacity: 0; pointer-events: none; }
.lx-s1-status { display: grid; min-height: 40px; }
.lx-s1-status > * { grid-area: 1 / 1; visibility: hidden; align-self: start; min-width: 0; }
.lx-s1-status[data-status="kept"] > .lx-kept, .lx-s1-status[data-status="hold"] > .lx-s1-hold,
.lx-s1-status[data-status="plenty"] > .lx-s1-plenty, .lx-s1-status[data-status="dana"] > .lx-s1-dana { visibility: visible; }
.lx-hero .lx-dir, .lx-s1-hold, .lx-s1-plenty { font-size: 14px; font-weight: 700; line-height: 1.4; color: #A5582F; }
.lx-kept { font-size: 14px; line-height: 1.45; color: #3E4C47; }
.lx-kept b { font-weight: 800; color: var(--lx-ink); }
.lx-kept-t { font-family: var(--lx-mono); font-weight: 700; color: var(--lx-ink); }
.lx-kept-t .lx-t { font-weight: 700; }
.lx-kept-s { display: block; }
.lx-s1-dana .lx-chip { transform-origin: 0 50%; }
.lx-s1-foot { display: grid; margin-top: auto; }
.lx-v--capture:has(> .lx-s1-foot[data-foot="dir"]):has(> .lx-s1-status[data-status="none"]) > .lx-s1-foot { order: 1; margin-top: 0; }
.lx-v--capture:has(> .lx-s1-foot[data-foot="dir"]):has(> .lx-s1-status[data-status="none"]) > .lx-s1-status { order: 2; }
.lx-s1-foot > * { grid-area: 1 / 1; align-self: center; min-width: 0; }
.lx-s1-foot[data-foot="dir"] > .lx-actions, .lx-s1-foot[data-foot="act"] > .lx-dir { visibility: hidden; }
.lx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.lx-s1-undo { color: var(--lx-ink); gap: 8px; text-decoration-color: rgba(16, 32, 28, .4); }
.lx-s1-undo:hover { text-decoration-color: currentColor; }
.lx-s1-undo kbd { text-decoration: none; }
.lx-actions .lx-help { flex: 1 1 180px; font-size: 13px; line-height: 1.35; color: #5B6F66; }
.lx-actions [aria-disabled="true"] { cursor: default; }
.lx-v--sign { justify-content: flex-start; }
.lx-s1-signin { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding-top: 38px; }
.lx-s1-signin > p, .lx-s1-seat { max-width: 34em; }
.lx-s1-signfoot { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.lx-s1-signh { font-size: var(--lx-fs-sd); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.lx-s1-signp { font-size: 16px; line-height: 1.45; color: var(--lx-ink); }
.lx-s1-seat { font-size: 14px; line-height: 1.45; color: #3E4C47; padding: 10px 12px; border-radius: 12px; background: #F4F1FC; box-shadow: inset 3px 0 0 #7A63D0; }
.lx-s1-signrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.lx-s1-signrow .lx-help { flex: 1 1 160px; }
.lx-s1-sign[aria-disabled="true"] { background: #E3F3EF; color: #0A4F48; }
.lx-s1-narrow { display: none; }
.lx-v--claim { gap: 12px; }
.lx-s1-claim { gap: 9px; }
.lx-hero .lx-s1-claim .lx-claim-help { margin-top: -3px; }
.lx-s1-claim .lx-claim-row { padding: 6px 0; }
.lx-s1-claim .lx-checks { gap: 6px; }
.lx-s1-claim .lx-ck { padding: 8px 12px; }
.lx-s1-claim .lx-ck-d { margin-top: 1px; }
.lx-s1-claim .lx-ready { right: 14px; bottom: 50px; }
.lx-s1-claim .lx-verdict { padding: 8px 12px; font-size: 17px; }
.lx-s1-markring { fill: none; stroke: #A5582F; stroke-width: 2; }
.lx-after { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.lx-hero .lx-after[hidden] { display: flex; visibility: hidden; }
.lx-hero .lx-s1-claim .lx-verdict[hidden] { display: block; visibility: hidden; }
.lx-after .lx-help { font-size: 13px; color: #5B6F66; }
.lx-s1-rerun { color: var(--lx-ink); margin-left: auto; text-decoration-color: rgba(16, 32, 28, .4); }
.lx-paper { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; background: #FFFDF7; color: var(--lx-ink); border-radius: 6px 18px 18px 6px; border-left: 3px solid #C9776E; padding: 22px 26px 22px 24px; box-shadow: var(--lx-shadow-dark); }
.lx-paper-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 30px; }
.lx-paper-h { font-family: var(--lx-serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--lx-ink); }
.lx-paper-meta { font-family: var(--lx-mono); font-size: 12px; line-height: 1.3; color: #5B6F66; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-s1-pdate { display: inline-block; }
.lx-s1-win { display: none; }
.lx-book { position: relative; display: flex; flex-direction: column; font-family: var(--lx-mono); font-size: 13px; line-height: 20px; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-book-dot { position: absolute; left: -15px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #A5582F; }
.lx-s1-units { display: inline-block; white-space: nowrap; border-radius: 4px; font-weight: 700; }
.lx-rail { position: relative; }
.lx-s1-rail { position: relative; height: 112px; }
.lx-s1-rail > svg { position: absolute; left: 0; top: 0; }
.lx-s1-rail[data-mode="slide"]::before, .lx-s1-rail[data-mode="slide"]::after { content: ""; position: absolute; top: -2px; bottom: 17px; width: 40px; z-index: 1; pointer-events: none; }
.lx-s1-rail[data-mode="slide"]::before { left: 0; background: linear-gradient(to right, #FFFDF7 0%, rgba(255, 253, 247, .85) 30%, rgba(255, 253, 247, 0) 100%); }
.lx-s1-rail[data-mode="slide"]::after { right: 0; background: linear-gradient(to left, #FFFDF7 0%, rgba(255, 253, 247, .85) 30%, rgba(255, 253, 247, 0) 100%); }
.lx-bench[data-phase="racing"] .lx-s1-rail::before, .lx-bench[data-phase="racing"] .lx-s1-rail::after { opacity: 0; transition: opacity 200ms linear; }
.lx-hero .lx-rail-svg .lx-r-dia { transform-origin: 50% 50%; }
.lx-hero .lx-rail .lx-legend { margin-top: 6px; font-family: var(--lx-mono); font-size: 12px; line-height: 1.4; color: #5B6F66; }
.lx-hero .lx-rail .lx-legend[hidden] { display: none; }
.lx-hero .lx-s1-note { flex: 1 1 auto; display: flex; flex-direction: column; border-left: 0; padding: 0; background-position: 0 0; margin-top: 2px; }
.lx-hero .lx-s1-note .lx-sigblock { margin-top: auto; padding-top: 14px; }
.lx-hero .lx-s1-note .lx-sigslot { background: rgba(255, 253, 247, .85); }
.lx-hero .lx-s1-note[data-state="final"] .lx-sigslot { background: #FFFDF7; }
.lx-hero .lx-claimline { padding-top: 2px; font-family: var(--lx-mono); font-size: 13px; line-height: 1.4; color: #3E4C47; font-variant-numeric: tabular-nums; }
.lx-bench[data-phase="ready"] .lx-claimline { color: #0A4F48; font-weight: 700; }
@media (max-width: 1100px) {
.lx-hero { padding: calc(var(--lx-nav-h) + 20px) var(--lx-pad-x) 40px; }
.lx-hero-title { grid-column: 1 / -1; }
.lx-hero-aside { grid-column: 1 / span 9; display: block; margin-top: 10px; padding-bottom: 0; max-width: 40em; }
.lx-hero .lx-lede { display: inline; max-width: none; }
.lx-hero .lx-s1-film { margin: 0 0 0 12px; min-height: 0; vertical-align: baseline; display: inline; line-height: 1.5; padding: 0; }
.lx-hero .lx-cue { margin-top: 16px; }
.lx-bench { margin-top: 10px; }
.lx-inst-top { row-gap: 10px; }
.lx-inst-rule { margin-top: 12px; }
.lx-inst-body { padding-top: 14px; }
.lx-v--capture { gap: 10px; }
.lx-bench { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lx-inst { padding: 18px 20px 20px; }
.lx-inst-rule { margin-left: -20px; margin-right: -20px; }
.lx-ans { min-height: 92px; padding: 12px 6px; }
.lx-paper { padding: 20px 20px 20px 20px; }
.lx-paper-head { flex-wrap: wrap; row-gap: 2px; }
.lx-paper-meta { white-space: normal; }
.lx-paper-meta > span { white-space: nowrap; }
.lx-book-dot { left: -13px; }
}
@media (max-width: 699px) {
.lx-hero { min-height: 0; padding: calc(var(--lx-nav-h) + 16px) 16px 32px; }
.lx-hero-head { display: block; }
.lx-hero .lx-kicker { max-width: 300px; }
.lx-h1 { white-space: normal; }
.lx-hero-aside { display: block; margin-top: 14px; }
.lx-hero .lx-cue { margin-top: 18px; }
.lx-cue span { font-size: 14px; }
.lx-bench { margin-top: 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 12px; align-content: space-between;
min-height: calc(100vh - var(--lx-nav-h)); min-height: calc(100svh - var(--lx-nav-h)); scroll-margin-top: 64px; }
.lx-paper { grid-row: 1; border-radius: 6px 14px 14px 6px; padding: 12px 14px 12px 13px; gap: 8px; }
.lx-inst { grid-row: 2; border-radius: 18px; padding: 14px; }
.lx-paper-head { display: none; }
.lx-s1-win { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-s1-win .lx-clock { font-size: 20px; }
.lx-s1-wmeta { display: grid; justify-items: end; font-family: var(--lx-mono); font-size: 12px; line-height: 15px; color: #5B6F66; white-space: nowrap; text-align: right; }
.lx-s1-wdate { display: flex; flex-direction: column; align-items: flex-end; }
.lx-s1-wskip { align-self: center; }
.lx-inst-body > .lx-v { display: none; }
.lx-inst-body[data-view="capture"] > .lx-v--capture, .lx-inst-body[data-view="sign"] > .lx-v--sign, .lx-inst-body[data-view="claim"] > .lx-v--claim { display: flex; }
.lx-inst-body > .lx-v.is-out { display: flex; position: absolute; left: 0; right: 0; top: 12px; }
.lx-hero .lx-s1-foot { margin-top: 0; }
.lx-s1-signin { padding-top: 6px; }
.lx-s1-signfoot { margin-top: 2px; }
.lx-hero .lx-s1-claim .lx-ready { right: 8px; bottom: -2px; }
.lx-s1-wmeta > * { grid-area: 1 / 1; transition: opacity 150ms linear; }
.lx-s1-wmeta[data-skip="1"] .lx-s1-wdate { opacity: 0; }
.lx-s1-wmeta[data-skip="1"] .lx-s1-wskip { opacity: 1; }
.lx-s1-wnew { display: none; }
.lx-s1-rail { height: 70px; }
.lx-bench[data-phase="live"] .lx-book, .lx-bench[data-phase="racing"] .lx-book { display: none; }
.lx-bench[data-phase="live"] .lx-s1-note .lx-nl[data-line="time"], .lx-bench[data-phase="racing"] .lx-s1-note .lx-nl[data-line="time"],
.lx-bench[data-phase="live"] .lx-s1-note .lx-note-h, .lx-bench[data-phase="racing"] .lx-s1-note .lx-note-h,
.lx-bench[data-phase="live"] .lx-s1-note .lx-note-ph, .lx-bench[data-phase="racing"] .lx-s1-note .lx-note-ph,
.lx-bench[data-phase="live"] .lx-s1-note .lx-sigblock, .lx-bench[data-phase="racing"] .lx-s1-note .lx-sigblock { display: none; }
.lx-hero .lx-s1-note { --lx-fs-data: 13px; }
.lx-book-dot { left: -11px; }
.lx-hero .lx-rail .lx-legend { margin-top: 2px; }
.lx-inst-top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 8px; }
.lx-inst-eyebrow { grid-column: 1; grid-row: 1; }
.lx-pause { grid-column: 2; grid-row: 1; align-self: center; margin: -14px -8px -14px 0; }
.lx-av, .lx-clockwrap { display: none; }
.lx-who { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 0; }
.lx-who b { font-size: 14px; line-height: 1.3; }
.lx-who span::before { content: "\00a0·\00a0"; }
.lx-s1-badges { grid-column: 2; grid-row: 2; }
.lx-s1-extag { display: none; }
.lx-saved .lx-s1-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lx-inst-rule { margin: 10px -14px 0; height: 4px; }
.lx-inst-body { padding-top: 12px; }
.lx-v--capture { gap: 10px; }
.lx-caprow { min-height: 22px; }
.lx-pname { font-size: 14px; }
.lx-caprow .lx-chip { font-size: 12px; padding: 1px 8px; }
.lx-tally { gap: 6px; font-size: 13px; }
.lx-dots { gap: 3px; }
.lx-dots i { width: 9px; height: 9px; border-radius: 2px; }
.lx-tally-t { display: none; }
.lx-banner { padding: 10px 12px; }
.lx-banner-lead { font-size: 12px; }
.lx-banner-t { font-size: 14px; }
.lx-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lx-ans { min-height: 84px; }
.lx-hero .lx-dir, .lx-s1-hold, .lx-s1-plenty, .lx-kept { font-size: 13px; }
.lx-s1-status { min-height: 38px; }
.lx-actions { gap: 4px 12px; }
.lx-actions .lx-s1-end { order: -1; flex: 1 1 auto; min-height: 48px; font-size: 15px; }
.lx-actions .lx-help { display: none; }
.lx-s1-wide { display: none; }
.lx-s1-narrow { display: inline; }
.lx-s1-signh { font-size: 24px; }
.lx-s1-signp { font-size: 15px; }
.lx-after .lx-s1-show { flex: 1 1 100%; min-height: 48px; }
.lx-s1-rerun { margin-left: 0; }
}
@media (max-width: 699px) and (max-height: 740px) {
.lx-bench { row-gap: 10px; }
.lx-bench[data-phase="live"] .lx-s1-wmeta, .lx-bench[data-phase="racing"] .lx-s1-wmeta { display: none; }
.lx-bench[data-phase="live"] .lx-s1-wnew { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--lx-mono); font-size: 12px; line-height: 15px; color: #5B6F66; white-space: nowrap; }
.lx-s1-wnew b { color: #A5582F; font-weight: 700; }
.lx-s1-win { align-items: center; gap: 6px; }
.lx-bench[data-phase="live"] .lx-s1-win .lx-clock { font-size: 17px; }
.lx-bench[data-phase="live"] .lx-s1-rail, .lx-bench[data-phase="racing"] .lx-s1-rail { height: 40px; }
.lx-bench[data-phase="live"] .lx-s1-note, .lx-bench[data-phase="live"] .lx-claimline { display: none; }
.lx-banner-t { display: none; }
.lx-ans { min-height: 72px; padding: 8px 6px; gap: 1px; }
.lx-inst { padding: 12px 14px 14px; }
.lx-v--capture { gap: 8px; }
.lx-s1-status { min-height: 36px; }
}
.lx.lx-rm .lx-s1-fx, .lx.lx-rm .lx-s1-fy { display: none; }
.lx-film { position: fixed; inset: 0; z-index: 60; background: transparent; color: #FCF0DE; opacity: .001; overflow: hidden; font-family: var(--lx-sans); }
.lx-film-ground { position: absolute; inset: 0; background: #00140E; }
.lx-film-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.lx-ec { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.lx-ec-ground { position: absolute; inset: 0; background-color: #00140E; }
.lx-ec-vig { position: absolute; background: radial-gradient(closest-corner at 50% 50%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .10) 78%, rgba(0, 0, 0, .16) 100%); }
.lx-ec-type, .lx-ec-name { position: absolute; overflow: visible; }
.lx-ec-seal { position: absolute; border-radius: 50%; transform-origin: 50% 50%; will-change: transform; }
.lx-film-ctl { position: absolute; left: 32px; right: 32px; bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; opacity: 0; transition: opacity 300ms linear; }
.lx-film--ctl .lx-film-ctl { opacity: 1; }
.lx-film-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; white-space: nowrap; border-radius: 999px; border: 1.5px solid rgba(252, 240, 222, .42); background: rgba(0, 20, 14, .35);
color: #CFC6B4; font-family: var(--lx-sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.lx-film-btn:hover { color: #FCF0DE; border-color: rgba(252, 240, 222, .7); }
.lx-film-btn kbd { font-family: var(--lx-mono); font-size: 12px; letter-spacing: 0; padding: 0 5px; border: 1px solid currentColor; border-radius: 5px; opacity: .7; }
.lx-film-prog { position: relative; width: 160px; height: 1px; background: #1E4A3C; overflow: hidden; }
.lx-film-prog i { position: absolute; inset: 0; background: #D08650; transform: scaleX(0); transform-origin: 0 50%; }
.lx-film :focus { outline: none; }
.lx-film :focus-visible { outline: 2px solid #D08650; outline-offset: 3px; }
.lx-film-note { font-size: 13px; color: #CFC6B4; }
.lx-film--native { opacity: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 0 32px; }
.lx-film--native .lx-film-v { position: relative; inset: auto; width: 100%; height: auto; max-height: calc(100% - 60px); aspect-ratio: 16 / 9; object-fit: contain; }
.lx-film--native .lx-film-ctl { display: contents; opacity: 1; }
.lx-film--native .lx-film-note { position: relative; padding: 0 16px; text-align: center; }
.lx-film--native .lx-film-close { position: absolute; top: 16px; right: 16px; }
.lx-film--hand .lx-film-v { transition: none; }
.lx-film.lx-film--still { opacity: 1; z-index: 80; background: #00140E; }
.lx-film--still .lx-ec { opacity: 1; }
@media (max-width: 699px) { .lx-film-ctl { left: 16px; right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .lx-film, .lx-film * { transition: none !important; } }
.lx-film .lx-film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; min-height: 64px; padding: 0 34px; font-size: 16px; letter-spacing: .12em; border: 0; color: #00140E; background: #D08650; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.lx-film .lx-film-play:hover { color: #00140E; background: #E09A63; }
.lx-film--tap .lx-film-v { filter: brightness(.55); }
.lx-film--wait::after { content: 'Loading the film'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--lx-sans); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(252, 240, 222, .62); pointer-events: none; }
.lx-film--wait .lx-film-prog i { opacity: .35; }
@media (min-width: 700px) {
.lx-ans { justify-content: flex-start; padding-top: calc((96px - 4px - (var(--lx-fs-ans) * 1.15 + 18.6px)) / 2); padding-bottom: 8px; }
}
@media (min-width: 700px) and (max-width: 1100px) {
.lx-ans { padding-top: calc((92px - 4px - (var(--lx-fs-ans) * 1.15 + 18.6px)) / 2); }
}
@media (min-width: 700px) and (max-width: 944px), (min-width: 1101px) and (max-width: 1170px) {
.lx-inst-top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 8px; }
.lx-inst-eyebrow { grid-column: 1; grid-row: 1; }
.lx-pause { grid-column: 2; grid-row: 1; align-self: center; margin: -14px -8px -14px 0; }
.lx-av { display: none; }
.lx-who { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 0; }
.lx-who b { font-size: 16px; line-height: 1.3; }
.lx-who span::before { content: "\00a0·\00a0"; }
.lx-s1-badges { grid-column: 2; grid-row: 2; }
.lx-s1-extag { display: none; }
.lx-saved .lx-s1-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lx-clockwrap { grid-column: 1 / -1; grid-row: 3; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.lx-caprow { flex-wrap: wrap; row-gap: 4px; }
}
@media (min-width: 700px) and (max-width: 833px) {
.lx-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* The prototype's styles: the landing page's second section (lx-s2). In the prototype's order; do not reorder. */
/* ---- lx-s2.css ---- */

.lx-rec { background: var(--lx-deep); padding: 112px 0 112px; --lx-s2-gd: 176px; }
.lx-rec .lx-rec-head { max-width: 58rem; }
.lx-rec .lx-rec-h { font-size: var(--lx-fs-h2); }
.lx-rec .lx-rec-sub { margin-top: 12px; }
.lx-rec .lx-rec-sub .lx-mono { font-style: normal; font-weight: 700; font-size: .82em; letter-spacing: 0; color: var(--lx-copper); font-family: var(--lx-mono); }
.lx-rec .lx-rec-sub--ex { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 17px; line-height: 1.45; color: var(--lx-iv72); }
.lx-rec .lx-rec-runit { min-height: 44px; }
.lx-rec .lx-band {
position: relative; margin-top: 56px; padding: 28px 32px 26px; border-radius: 18px; background: #FFFDF7; color: var(--lx-ink);
box-shadow: var(--lx-shadow-dark); isolation: isolate;
}
.lx-rec .lx-band-rail { position: relative; z-index: 1; height: 110px; touch-action: pan-y; cursor: crosshair; }
.lx-rec .lx-band-lanes { position: relative; z-index: 1; height: 84px; pointer-events: none; }
.lx-rec .lx-band-row {
position: relative; z-index: 1; display: grid; column-gap: 24px; row-gap: 22px; align-items: start; margin-top: 6px;
grid-template-columns: minmax(0, 300fr) minmax(0, 600fr) minmax(0, 300fr);
grid-template-areas: "book note claim" "meter note claim";
}
.lx-rec .lx-s2-ca, .lx-rec .lx-s2-cb { display: contents; }
.lx-rec .lx-band-book { grid-area: book; }
.lx-rec .lx-band-meter { grid-area: meter; }
.lx-rec .lx-band-note { grid-area: note; }
.lx-rec .lx-band-claim { grid-area: claim; position: relative; padding-bottom: 46px; }
.lx-rec .lx-s2-rail .lx-r-dana text { font-weight: 500; transform: translateY(-2.5px); }
.lx-rec .lx-s2-rail .lx-r-tick, .lx-rec .lx-s2-rail .lx-r-dia, .lx-rec .lx-s2-rail .lx-r-brk, .lx-rec .lx-s2-rail .lx-r-you, .lx-rec .lx-s2-rail .lx-r-danabar {
transition: transform var(--lx-d-select) var(--lx-e-exact), stroke var(--lx-d-select) var(--lx-e-exact), fill var(--lx-d-select) var(--lx-e-exact);
}
.lx-rec .lx-s2-rail .lx-r-danabar { transform-box: fill-box; transform-origin: 50% 100%; }
.lx-rec .lx-s2-rail .lx-r-mark { transition: stroke-width var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-band[data-sel="rid"] .lx-s2-rail .lx-r-tick[data-src="rid"],
.lx-rec .lx-band[data-sel="hit"] .lx-s2-rail [data-src="hit"]:not(.lx-r-mark) { transform: scale(1.6); }
.lx-rec .lx-band[data-sel="rid"] .lx-s2-rail .lx-r-you { transform: scale(1.18); }
.lx-rec .lx-band[data-sel="hit"] .lx-s2-rail .lx-r-brk { transform: scale(1, 1.6); }
.lx-rec .lx-band[data-sel="time"] .lx-s2-rail .lx-r-mark { stroke-width: 2; }
.lx-rec .lx-band[data-sel="dana"] .lx-s2-rail .lx-r-danabar { transform: scale(1, 1.6); fill: #7A63D0; }
.lx-rec .lx-s2-eyebrow { font-size: 12px; margin-bottom: 6px; color: var(--lx-ink2); }
.lx-rec .lx-s2-bk { font-family: var(--lx-mono); font-size: var(--lx-fs-data); font-weight: 500; line-height: 21px; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-rec .lx-s2-bk .lx-code { font-weight: 700; }
.lx-rec .lx-s2-units .lx-nobr { font-weight: 700; }
.lx-rec .lx-meter { padding-top: 12px; border-top: 1px dashed #E4D6BC; }
.lx-rec .lx-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lx-rec .lx-meter-top b { font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--lx-ink); }
.lx-rec .lx-meter-v { font-family: var(--lx-mono); font-size: 18px; font-weight: 700; line-height: 1; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-rec .lx-meter-track { position: relative; display: block; height: 10px; margin: 11px 0 23px; border-radius: 999px; background: #E7EEEA; }
.lx-rec .lx-meter-track i { display: block; height: 100%; border-radius: 999px; background: #0E6B61; }
.lx-rec .lx-meter-track em { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: #A5582F; }
.lx-rec .lx-meter-lab { position: absolute; top: 17px; transform: translateX(-50%); font-family: var(--lx-mono); font-size: 12px; font-weight: 700; line-height: 1; color: #A5582F; white-space: nowrap; }
.lx-rec .lx-meter-foot { font-size: 12.5px; line-height: 1.4; color: var(--lx-muted); }
.lx-rec .lx-s2-note { --lx-row: 26px; --lx-note-pt: 2px; margin-left: 10px; background-color: transparent; padding: 2px 8px 6px 18px; }
.lx-rec .lx-s2-note .lx-note-h { font-size: 16px; }
.lx-rec .lx-s2-note .lx-nl--btn { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: var(--lx-row); padding: 0 6px; margin-left: -6px; width: calc(100% + 6px); border-radius: 4px;
transition: background-color var(--lx-d-select) var(--lx-e-exact), color var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-s2-note .lx-nl-t { margin-right: 0; }
.lx-rec .lx-s2-note .lx-nl--btn:hover, .lx-rec .lx-s2-note .lx-nl--btn.is-sel { background-color: rgba(165, 88, 47, .07); }
.lx-rec .lx-s2-note .lx-nl--btn.is-sel .lx-nl-t { color: #7A3F1F; }
.lx-rec .lx-s2-note .lx-nl--btn[aria-pressed="true"] { box-shadow: inset 2px 0 0 #A5582F; }
.lx-rec .lx-s2-note .lx-nl--btn:focus-visible { outline-offset: 2px; }
.lx-rec .lx-s2-note .lx-note-margin { text-align: right; padding-right: 6px; }
.lx-rec .lx-s2-note .lx-sigblock { margin-top: 10px; gap: 2px; }
.lx-rec .lx-s2-note .lx-sigslot { width: 200px; height: 50px; }
.lx-rec .lx-s2-claim { position: static; gap: 12px; }
.lx-rec .lx-s2-claim .lx-claim-row { font-size: var(--lx-fs-data); padding: 7px 0; }
.lx-rec .lx-s2-claim .lx-checks--compact .lx-ck { padding: 7px 10px; }
.lx-rec .lx-s2-claim .lx-verdict { display: none; }
.lx-rec .lx-s2-claim .lx-ready { font-size: var(--lx-fs-ready2); right: -12px; bottom: 2px; }
.lx-rec .lx-wires { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.lx-rec .lx-s2-str { fill: none; stroke: #A5582F; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
transition: stroke-width var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-s2-ln { opacity: .12; transition: opacity var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-s2-dot { fill: #A5582F; }
.lx-rec .lx-band[data-sel="time"] .lx-s2-ln[data-line="time"], .lx-rec .lx-band[data-sel="rid"] .lx-s2-ln[data-line="rid"],
.lx-rec .lx-band[data-sel="hit"] .lx-s2-ln[data-line="hit"], .lx-rec .lx-band[data-sel="dana"] .lx-s2-ln[data-line="dana"] { opacity: 1; }
.lx-rec .lx-band[data-sel="time"] .lx-s2-ln[data-line="time"] .lx-s2-str, .lx-rec .lx-band[data-sel="rid"] .lx-s2-ln[data-line="rid"] .lx-s2-str,
.lx-rec .lx-band[data-sel="hit"] .lx-s2-ln[data-line="hit"] .lx-s2-str, .lx-rec .lx-band[data-sel="dana"] .lx-s2-ln[data-line="dana"] .lx-s2-str { stroke-width: 1.75; }
.lx-rec .lx-band[data-sel="rid"] .lx-s2-ln[data-line="rid"] .lx-s2-str.is-me { stroke-width: 2.5; }
.lx-rec .lx-s2-th { fill: none; stroke: #A5582F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lx-rec .lx-s2-bdot { fill: #A5582F; }
.lx-rec .lx-glass {
position: absolute; left: 0; top: 0; z-index: 4; width: var(--lx-s2-gd); height: var(--lx-s2-gd); border-radius: 50%; background: #FFFFFF;
box-shadow: inset 0 0 0 2px #A5582F, inset 0 0 0 3px #FFFFFF, 0 18px 40px rgba(0, 20, 14, .35), 0 2px 6px rgba(0, 20, 14, .18);
cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
transition: box-shadow var(--lx-d-color) var(--lx-e-exact);
}
.lx-rec .lx-glass.is-drag { cursor: grabbing; will-change: transform; }
.lx-rec .lx-glass:focus-visible { outline: 2px solid #A5582F; outline-offset: 4px; box-shadow: inset 0 0 0 3px #A5582F, inset 0 0 0 4px #FFFFFF, 0 18px 40px rgba(0, 20, 14, .35), 0 2px 6px rgba(0, 20, 14, .18); }
.lx-rec .lx-lens-field { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; }
.lx-rec .lx-lens-svg { position: absolute; left: 0; top: 0; display: block; overflow: hidden; }
.lx-rec .lx-lens-ax { stroke: #C3CFCA; stroke-width: 1; }
.lx-rec .lx-lens-rule { fill: none; stroke: #9AAAA4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lx-rec .lx-lens-c { stroke: #A5582F; stroke-width: 1; }
.lx-rec .lx-lens-sp { transform-box: view-box; }
.lx-rec .lx-lens-ev line, .lx-rec .lx-lens-strand { vector-effect: non-scaling-stroke; }
.lx-rec .lx-lens-strand { stroke: #A5582F; stroke-width: 1.75; }
.lx-rec .lx-lens-strand.is-me { stroke-width: 2.5; }
.lx-rec .lx-lens-sec { font-family: var(--lx-mono); font-size: 12px; font-weight: 500; fill: #5B6F66; font-variant-numeric: tabular-nums; }
.lx-rec .lx-lens-sec.is-you { fill: #A5582F; font-weight: 700; }
.lx-rec .lx-lens-sec.is-c { opacity: 0; }
.lx-rec .lx-lens-led { position: absolute; left: 0; right: 0; top: 25px; margin: 0; text-align: center; pointer-events: none; }
.lx-rec .lx-lens-t { display: block; font-family: var(--lx-mono); font-size: 14px; font-weight: 700; line-height: 18px; color: var(--lx-ink); }
.lx-rec .lx-lens-l { display: inline-block; margin-top: 1px; padding-bottom: 1px; font-family: var(--lx-sans); font-size: 12px; font-weight: 800; line-height: 15px; letter-spacing: -.005em;
border-bottom: 1.5px solid #A5582F; white-space: nowrap; opacity: 0; transition: opacity var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-lens-led.has-ev .lx-lens-l { opacity: 1; }
.lx-rec .lx-glass-scale { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 1; color: #5B6F66; pointer-events: none; white-space: nowrap; }
.lx-rec .lx-glass-scale::before, .lx-rec .lx-glass-scale::after { content: ""; width: 14px; height: 5px; border: 1px solid #9AAAA4; border-top: 0; }
.lx-rec .lx-glass-scale::before { border-right: 0; }
.lx-rec .lx-glass-scale::after { border-left: 0; }
.lx-rec .lx-s2-needle { display: none; }
.lx-rec .lx-s2-barwrap { display: flex; align-items: stretch; height: 84px; margin: 8px 0 4px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 2px #A5582F; position: relative; z-index: 1; }
.lx-rec .lx-s2-step { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: #A5582F; font: 700 24px/1 var(--lx-sans); cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.lx-rec .lx-barlens { position: relative; flex: 1 1 auto; min-width: 0; touch-action: none; cursor: grab; border-radius: 4px; }
.lx-rec .lx-barlens .lx-lens-field { inset: 2px 0; border-radius: 0; }
.lx-rec .lx-barlens .lx-lens-led { top: auto; bottom: 3px; }
.lx-rec .lx-barlens:focus-visible { outline-offset: 2px; }
.lx-rec .lx-rec-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 20px; }
.lx-rec .lx-rec-readout { color: var(--lx-iv80); max-width: 62rem; min-height: 1.4em; }
.lx-rec .lx-rec-legend { flex: none; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--lx-iv62); text-align: right; max-width: 30rem; }
.lx-rec .lx-rec-dir { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--lx-iv72); max-width: 44rem; }
@keyframes lx-s2-in { from { opacity: 0; } to { opacity: 1; } }
.lx-rec.is-pre .lx-rec-head > *, .lx-rec.is-pre .lx-band, .lx-rec.is-pre .lx-rec-foot, .lx-rec.is-pre .lx-rec-dir { opacity: 0; }
.lx-rec.is-pre .lx-s2-rail .lx-r-ticks, .lx-rec.is-pre .lx-s2-rail .lx-r-yous, .lx-rec.is-pre .lx-s2-rail .lx-r-dias, .lx-rec.is-pre .lx-s2-rail .lx-r-brk { opacity: 0; }
.lx-rec.is-pre .lx-lens, .lx-rec.is-pre3 .lx-lens { opacity: 0; }
.lx-rec .lx-band.is-sweep .lx-s2-rail .lx-r-ticks > *, .lx-rec .lx-band.is-sweep .lx-s2-rail .lx-r-yous > *, .lx-rec .lx-band.is-sweep .lx-s2-rail .lx-r-dias > *, .lx-rec .lx-band.is-sweep .lx-s2-rail .lx-r-brk {
animation: lx-s2-in 160ms linear both; animation-delay: var(--lx-s2-d, 0ms);
}
@media (max-width: 1100px) {
.lx-rec { padding: 96px 0 88px; --lx-s2-gd: 168px; }
.lx-rec .lx-band { margin-top: 48px; padding: 28px 28px 30px; }
.lx-rec .lx-band-lanes { height: 78px; }
.lx-rec .lx-band-row { grid-template-columns: minmax(0, 556fr) minmax(0, 312fr); column-gap: 36px; grid-template-areas: none; }
.lx-rec .lx-s2-ca, .lx-rec .lx-s2-cb { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lx-rec .lx-s2-cb { gap: 26px; }
.lx-rec .lx-band-note { padding-left: 0; }
.lx-rec .lx-band-meter { margin-left: 10px; max-width: 420px; }
.lx-rec .lx-lens-led { top: 22px; }
}
@media (max-width: 699px) {
.lx-rec { padding: 72px 0 64px; }
.lx-rec .lx-rec-sub--ex { font-size: 16px; }
.lx-rec .lx-rec-runit { width: 100%; min-height: 48px; }
.lx-rec .lx-band { margin-top: 32px; padding: 14px; border-radius: 16px; overflow: clip; }
.lx-rec .lx-band-rail { height: 96px; }
.lx-rec .lx-band-lanes { display: none; }
.lx-rec .lx-band-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "note" "book" "meter" "claim"; row-gap: 20px; margin-top: 16px; }
.lx-rec .lx-s2-ca, .lx-rec .lx-s2-cb { display: contents; }
.lx-rec .lx-band-meter { margin-left: 0; max-width: none; }
.lx-rec .lx-band-note { padding-left: 0; }
.lx-rec .lx-band-meter { padding-left: 0; }
.lx-rec .lx-s2-note { --lx-row: 24px; margin-left: 8px; padding: 2px 0 6px 12px; }
.lx-rec .lx-s2-note .lx-nl--btn { font-size: 13px; column-gap: 6px; letter-spacing: -.025em; padding: 0 4px; margin-left: -4px; width: calc(100% + 4px); }
.lx-rec .lx-s2-note .lx-recchip { letter-spacing: 0; }
.lx-rec .lx-s2-note .lx-recchip { margin-left: auto; }
.lx-rec .lx-s2-note .lx-note-margin { text-align: left; }
.lx-rec .lx-s2-note .lx-sigslot { width: 180px; height: 44px; }
.lx-rec .lx-band-claim { padding-bottom: 44px; }
.lx-rec .lx-s2-claim .lx-ready { right: 4px; bottom: 4px; }
.lx-rec .lx-s2-needle { display: block; position: absolute; left: 0; top: 4px; width: 2px; height: 58px; margin-left: -1px; background: #A5582F; pointer-events: none; z-index: 2; }
.lx-rec .lx-s2-needle::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid #A5582F; background: #FFFFFF; }
.lx-rec .lx-band[data-sel] .lx-s2-rail [data-src].lx-r-tick { transition: transform var(--lx-d-select) var(--lx-e-exact), stroke var(--lx-d-select) var(--lx-e-exact); }
.lx-rec .lx-band[data-sel="rid"] .lx-s2-rail .lx-r-tick[data-src="rid"], .lx-rec .lx-band[data-sel="hit"] .lx-s2-rail .lx-r-tick[data-src="hit"] { stroke: #A5582F; }
.lx-rec .lx-rec-foot { flex-direction: column; gap: 6px; margin-top: 16px; }
.lx-rec .lx-rec-legend { text-align: left; }
}
@media (forced-colors: active) {
.lx-rec .lx-glass, .lx-rec .lx-s2-barwrap { border: 2px solid CanvasText; }
.lx-rec .lx-s2-str, .lx-rec .lx-s2-th, .lx-rec .lx-lens-c, .lx-rec .lx-lens-strand { stroke: CanvasText; }
.lx-rec .lx-s2-dot, .lx-rec .lx-s2-bdot { fill: CanvasText; }
}
/* The prototype's styles: the landing page's third and fourth sections (lx-s34). In the prototype's order; do not reorder. */
/* ---- lx-s34.css ---- */

.lx-letter [hidden], .lx-credits [hidden] { display: none !important; }
.lx-letter {
background: #FCF0DE; color: #10201C; padding: var(--lx-sec-pt) var(--lx-pad-x) var(--lx-sec-pb);
--lx-focus: #A5582F; --lx-ms: #A5582F;
--pk-w: 812px; --pk-sx: 0px; --pk-sy: 40px; --pk-sw: 560px; --pk-sh: 312px; --pk-tab0: 20px; --pk-tab1: 150px; --pk-tab2: 298px;
--pk-cx: 372px; --pk-cy: 64px; --pk-cw: 400px; --pk-seal: 160px; --pk-over: 40px;
--pk-doc-x: 24px; --pk-doc-y: 22px; --pk-doc-w: 560px; --pk-doc-s: .68; --pk-band-at: bottom;
--lt-rot: -1deg;
}
.lx-letter .lx-s34-in { max-width: var(--lx-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.lx-letter .lx-s34-later {
display: flex; align-items: center; gap: 16px; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em;
text-transform: uppercase; color: #3F5A4F; line-height: 1.4;
}
.lx-letter .lx-s34-later::before, .lx-letter .lx-s34-later::after { content: ''; width: 48px; height: 1px; background: #DCCDB0; }
.lx-letter-stage { position: relative; width: 100%; margin-top: 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lx-gutter); }
.lx-letter .lx-sheet {
grid-column: 4 / span 6; position: relative; z-index: 1; background: #FFFDF7; color: #10201C;
border: 1px solid #E4D6BC; border-radius: 2px; padding: 60px 60px 64px; box-shadow: var(--lx-shadow-ivory);
rotate: var(--lt-rot); transform-origin: 50% 50%;
}
.lx-letter .lx-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'payer date' 'fic fic'; align-items: baseline; column-gap: 24px; padding-bottom: 18px; border-bottom: 3px double #E4D6BC; }
.lx-letter .lx-sheet-payer { grid-area: payer; }
.lx-letter .lx-sheet-date { grid-area: date; }
.lx-letter .lx-sheet-fic { grid-area: fic; }
.lx-letter .lx-sheet-payer { font-family: var(--lx-serif); font-weight: 600; font-size: var(--lx-fs-lhead); line-height: 1.2; letter-spacing: -.008em; color: #10201C; }
.lx-letter .lx-sheet-fic { margin-top: 5px; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 1.4; color: #5B6F66; }
.lx-letter .lx-sheet-date { font-family: var(--lx-mono); font-size: 13px; font-weight: 500; line-height: 1.4; color: #3E4C47; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-letter .lx-sheet-title { margin-top: 34px; font-family: var(--lx-sans); font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: 0; color: #10201C; }
.lx-letter .lx-sheet-member { margin-top: 4px; font-family: var(--lx-mono); font-size: 13px; font-weight: 500; line-height: 1.5; color: #3E4C47; }
.lx-letter .lx-sheet-body { margin-top: 22px; font-family: var(--lx-sans); font-size: var(--lx-fs-letter); font-weight: 400; line-height: 1.6; color: #10201C; text-wrap: pretty; font-variant-numeric: tabular-nums; hanging-punctuation: first; }
.lx-letter .lx-sheet-due { margin-top: 12px; font-size: var(--lx-fs-letter); font-weight: 800; line-height: 1.6; }
.lx-letter .lx-sheet-sign { margin-top: 64px; font-size: 16px; font-weight: 600; line-height: 1.4; color: #10201C; }
.lx-letter .lx-qs { grid-column: 1 / -1; }
.lx-letter .lx-q { position: absolute; top: 0; left: 0; width: 280px; z-index: 2; }
.lx-letter .lx-q[data-i="0"] { top: 190px; }
.lx-letter .lx-q[data-i="1"] { top: 190px; left: auto; right: 0; }
.lx-letter .lx-q[data-i="2"] { top: 400px; }
.lx-letter .lx-q[data-side="l"] { text-align: right; }
.lx-letter .lx-q-q { font-family: var(--lx-serif); font-style: italic; font-weight: 600; font-size: var(--lx-fs-marg); line-height: 1.2; letter-spacing: 0; color: #A5582F; text-wrap: balance; }
.lx-letter .lx-q-a { text-wrap: balance; margin-top: 8px; font-family: var(--lx-mono); font-size: 14px; font-weight: 500; line-height: 1.5; color: #3F5A4F; }
.lx-letter .lx-q-tick { display: none; }
.lx-letter .lx-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.lx-letter .lx-leaders .lx-ld-p { fill: none; stroke: #CDBA95; stroke-width: 1; }
.lx-letter .lx-leaders .lx-ld-dot { fill: #A5582F; }
.lx-letter .lx-hinge { margin-top: 72px; font-family: var(--lx-serif); font-weight: 400; font-size: var(--lx-fs-hinge); line-height: 1.05; letter-spacing: -.02em; color: #10201C; text-align: center; }
.lx-letter .lx-prove {
margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 36px; border: 0; border-radius: 999px;
background: #A5582F; color: #FFF7EC; font-family: var(--lx-serif); font-weight: 600; font-size: var(--lx-fs-prove); line-height: 1; cursor: pointer;
box-shadow: 0 10px 24px -8px rgba(110, 50, 18, .45);
transition: background-color var(--lx-d-color) var(--lx-e-exact), transform var(--lx-d-press) var(--lx-e-exact), box-shadow var(--lx-d-swap) var(--lx-e-exact), color var(--lx-d-swap) var(--lx-e-exact);
}
.lx-letter .lx-prove .lx-prove-t { display: inline-block; padding-bottom: .06em; }
.lx-letter .lx-prove:hover { background: #8E4A26; }
.lx-letter .lx-prove:active:not([aria-disabled="true"]) { transform: scale(.98); }
.lx-letter .lx-prove.is-built { background: transparent; color: #10201C; box-shadow: inset 0 0 0 1.5px rgba(16, 32, 28, .26); font-family: var(--lx-sans); font-size: 17px; font-weight: 800; cursor: default; }
.lx-letter .lx-prove.is-built:hover { background: transparent; }
.lx-letter .lx-prove.is-built .lx-mono { font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.lx-letter .lx-s34-help { margin-top: 14px; max-width: 38em; font-size: 15px; line-height: 1.5; color: #3F5A4F; text-align: center; }
.lx-letter .lx-s34-resetrow { margin-top: 2px; }
.lx-letter .lx-s34-resetrow .lx-textbtn { color: #10201C; text-decoration-color: rgba(16, 32, 28, .45); }
.lx-letter .lx-s34-resetrow .lx-textbtn:hover { text-decoration-color: #10201C; }
.lx-letter .lx-s34-pkrow { width: 100%; }
.lx-letter .lx-packet { margin: 36px auto 0; width: var(--pk-w); max-width: 100%; }
.lx-letter .lx-pk-stage { display: flow-root; position: relative; width: 100%; min-height: calc(var(--pk-sy) + var(--pk-sh) + 24px); padding-bottom: 24px; }
.lx-letter .lx-pk-sheet {
position: absolute; left: var(--pk-sx); top: var(--pk-sy); width: var(--pk-sw); height: var(--pk-sh); border-radius: 3px;
background: #F4E6CB; box-shadow: 0 1px 0 #E6D6B8, 0 2px 5px rgba(60, 40, 10, .07), 0 22px 44px -8px rgba(60, 40, 10, .20);
}
.lx-letter .lx-pk-sheet[data-i="0"] { z-index: 3; rotate: -1deg; }
.lx-letter .lx-pk-sheet[data-i="1"] { z-index: 2; translate: 7px -7px; rotate: 0deg; background: #EFDFC1; }
.lx-letter .lx-pk-sheet[data-i="2"] { z-index: 1; translate: 14px -14px; rotate: 1deg; background: #EAD8B7; }
.lx-letter .lx-pk-tab {
position: absolute; bottom: calc(100% - 1px); left: var(--tab-x, 20px); height: 28px; padding: 0 14px; display: flex; align-items: center;
background: inherit; border-radius: 7px 7px 0 0; font-family: var(--lx-sans); font-size: 13px; font-weight: 800; line-height: 1; color: #10201C; white-space: nowrap;
}
.lx-letter .lx-pk-sheet[data-i="0"] .lx-pk-tab { --tab-x: var(--pk-tab0); }
.lx-letter .lx-pk-sheet[data-i="1"] .lx-pk-tab { --tab-x: var(--pk-tab1); }
.lx-letter .lx-pk-sheet[data-i="2"] .lx-pk-tab { --tab-x: var(--pk-tab2); }
.lx-letter .lx-pk-face { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; padding: var(--pk-doc-y) var(--pk-doc-x); }
.lx-letter .lx-pk-cap { font-family: var(--lx-sans); font-size: 13px; font-weight: 700; line-height: 1.3; color: #10201C; }
.lx-letter .lx-pk-cap .lx-mono { font-weight: 700; }
.lx-letter .lx-pk-doc { position: relative; margin-top: 10px; width: calc(var(--pk-doc-w) * var(--pk-doc-s)); height: calc(250px * var(--pk-doc-s)); }
.lx-letter .lx-pk-docin { position: absolute; left: 0; top: 0; width: var(--pk-doc-w); transform: scale(var(--pk-doc-s)); transform-origin: 0 0; box-shadow: 0 1px 0 #E4D6BC, 0 12px 26px -8px rgba(60, 40, 10, .28); border-radius: 2px; }
.lx-letter .lx-pk-docin .lx-note { padding: 14px 20px 14px 22px; border-radius: 2px; }
.lx-letter .lx-pk-docin .lx-sigslot { height: 44px; }
.lx-letter .lx-pk-band {
position: absolute; z-index: 6; left: calc(var(--pk-sx) - 10px); right: calc(var(--pk-w) - var(--pk-cx) - var(--pk-cw) - 10px);
top: calc(var(--pk-sy) + var(--pk-sh) * .72); height: 2px; background: #A5582F; transform-origin: 0 50%; border-radius: 1px;
}
.lx-letter .lx-pk-band::before { content: ''; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #A5582F; }
.lx-letter .lx-pk-cover {
position: relative; z-index: 5; margin: var(--pk-cy) 0 0 var(--pk-cx); width: var(--pk-cw); padding: 24px 28px 22px; border-radius: 4px;
background: #FFFDF7; color: #10201C; box-shadow: 0 1px 0 #E4D6BC, 0 2px 6px rgba(60, 40, 10, .08), 0 26px 48px -12px rgba(60, 40, 10, .34);
}
.lx-letter .lx-pk-eyebrow { font-family: var(--lx-sans); font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: #3E4C47; }
.lx-letter .lx-pk-title { margin-top: 4px; font-family: var(--lx-serif); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -.015em; }
.lx-letter .lx-pk-range { margin-top: 10px; font-family: var(--lx-mono); font-size: 13px; font-weight: 500; line-height: 1.4; color: #3E4C47; font-variant-numeric: tabular-nums; }
.lx-letter .lx-pk-ledger { margin-top: 18px; padding: 12px 0 13px; border-top: 1px solid #E4D6BC; border-bottom: 1px solid #E4D6BC; display: flex; flex-direction: column; gap: 5px; }
.lx-letter .lx-pk-stage[data-band="bottom"] .lx-pk-ledger { border-bottom-color: transparent; }
.lx-letter .lx-pk-stage[data-band="top"] .lx-pk-ledger { border-top-color: transparent; }
.lx-letter .lx-pk-l { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); column-gap: .55em; font-family: var(--lx-mono); font-size: 15px; font-weight: 500; line-height: 1.45; font-variant-numeric: tabular-nums; }
.lx-letter .lx-pk-l b { font-weight: 700; text-align: right; }
.lx-letter .lx-pk-built { margin-top: 12px; font-family: var(--lx-mono); font-size: 12px; font-weight: 500; line-height: 1.4; color: #5B6F66; font-variant-numeric: tabular-nums; }
.lx-letter .lx-pk-foot { margin-top: 5px; font-family: var(--lx-sans); font-size: 14px; line-height: 1.4; color: #3F5A4F; }
.lx-letter .lx-pk-seal {
position: absolute; z-index: 7; width: var(--pk-seal); height: var(--pk-seal); max-width: none;
left: calc(var(--pk-cx) + var(--pk-cw) + var(--pk-over) - var(--pk-seal)); top: calc(var(--pk-cy) - var(--pk-over-y, var(--pk-over)));
border-radius: 50%; box-shadow: 0 14px 28px -8px rgba(60, 40, 10, .42), 0 2px 4px rgba(60, 40, 10, .12);
}
.lx-letter .lx-s34-pay { margin-top: 40px; text-align: center; }
.lx-letter .lx-payoff { font-family: var(--lx-serif); font-style: italic; font-weight: 560; font-size: var(--lx-fs-payoff); line-height: 1.05; letter-spacing: -.015em; color: #A5582F; }
.lx-letter .lx-payoff-sub { margin-top: 14px; font-size: 18px; line-height: 1.5; color: #3F5A4F; }
.lx-letter.lx-s34-pre .lx-sheet, .lx-letter.lx-s34-pre .lx-q, .lx-letter.lx-s34-pre .lx-ld-dot { opacity: 0; }
.lx-letter .lx-packet.is-pre .lx-pk-sheet, .lx-letter .lx-packet.is-pre .lx-pk-cover, .lx-letter .lx-packet.is-pre .lx-pk-seal, .lx-letter .lx-s34-pay.is-pre > * { opacity: 0; }
.lx-letter .lx-packet.is-pre .lx-pk-band { transform: scaleX(0); }
.lx-credits {
background: #00140E; color: #FCF0DE; padding: calc(var(--lx-sec-pt) + 16px) var(--lx-pad-x) calc(var(--lx-sec-pb) + 16px);
--cr-lab: 280px; --cr-gap: 40px; --cr-line: 600px; --cr-shift: 0px;
}
.lx-credits .lx-s34-cin { max-width: var(--lx-content); margin: 0 auto; }
.lx-credits .lx-cr-group + .lx-cr-group { margin-top: 120px; }
.lx-credits .lx-cr-title { font-family: var(--lx-serif); font-style: italic; font-weight: 600; font-size: var(--lx-fs-crtitle); line-height: 1.2; letter-spacing: 0; color: #D08650; text-align: center; padding-right: calc(2 * var(--cr-shift)); }
.lx-credits .lx-cr-body { position: relative; margin-top: 40px; }
.lx-credits .lx-cr-rule { position: absolute; left: calc(50% - var(--cr-shift)); top: 2px; bottom: 2px; width: 1px; margin-left: -.5px; background: rgba(208, 134, 80, .6); transform-origin: 50% 0; }
.lx-credits .lx-cr { display: flex; flex-direction: column; gap: 28px; }
.lx-credits .lx-cr-row { display: grid; grid-template-columns: calc(50% - var(--cr-gap) / 2 - var(--cr-shift)) var(--cr-gap) minmax(0, 1fr); align-items: baseline; }
.lx-credits .lx-cr-row dt {
grid-column: 1; justify-self: end; max-width: var(--cr-lab); text-align: right;
font-family: var(--lx-mono); font-size: var(--lx-fs-crlabel); font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: rgba(252, 240, 222, .62);
}
.lx-credits .lx-cr-row dd { grid-column: 3; max-width: var(--cr-line); font-family: var(--lx-serif); font-size: var(--lx-fs-crline); font-weight: 400; line-height: 1.35; letter-spacing: -.005em; color: #FCF0DE; text-wrap: pretty; }
.lx-credits .lx-cr-row dd .lx-t { font-size: .8em; letter-spacing: 0; }
.lx-credits .lx-cr-row[data-row="guest"] dt { color: #D08650; }
.lx-credits .lx-cr-end { margin-top: 80px; text-align: center; font-size: 14px; line-height: 1.5; color: rgba(252, 240, 222, .62); }
.lx-credits .lx-charter {
width: 640px; max-width: 100%; margin: 48px auto 0; padding: 24px 28px 20px; border-radius: 16px; background: #FFFFFF; color: #10201C;
box-shadow: var(--lx-shadow-dark); font-family: var(--lx-sans);
}
.lx-credits .lx-ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-credits .lx-ch-head h3 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.lx-credits .lx-ch-head .lx-tag { margin-left: auto; }
.lx-credits .lx-charter .lx-dir { margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: #A5582F; }
.lx-credits .lx-ch-rows { margin: 12px -10px 0; }
.lx-credits .lx-ch-row {
display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 56px; padding: 8px 10px;
border-radius: 10px; cursor: pointer; transition: background-color var(--lx-d-color) var(--lx-e-exact);
}
.lx-credits .lx-ch-row + .lx-ch-row { box-shadow: inset 0 1px 0 #E3EAE7; }
.lx-credits .lx-ch-row:hover { background-color: #F4F7F5; }
.lx-credits .lx-ch-l { min-width: 0; }
.lx-credits .lx-ch-l b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.lx-credits .lx-ch-hint1 { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #3E4C47; }
.lx-credits .lx-switch {
position: relative; width: 42px; height: 25px; padding: 0; border: 0; border-radius: 13px; background: #C3CFCA; cursor: pointer; flex: none;
transition: background-color var(--lx-d-select) var(--lx-e-exact);
}
.lx-credits .lx-switch::before { content: ''; position: absolute; inset: -10px -1px; }
.lx-credits .lx-switch-k { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform var(--lx-d-select) var(--lx-e-exact); }
.lx-credits .lx-switch[aria-checked="true"] { background: #0E6B61; }
.lx-credits .lx-switch[aria-checked="true"] .lx-switch-k { transform: translateX(17px); }
.lx-credits .lx-switch:focus-visible { outline: 2px solid #A5582F; outline-offset: 3px; }
.lx-credits .lx-ch-hint { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: #FFF1D6; color: #5C3A07; box-shadow: inset 0 0 0 1.5px #E9A23B; font-size: 14px; font-weight: 700; line-height: 1.4; }
.lx-credits .lx-ch-act-h { margin-top: 18px; font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: #3E4C47; }
.lx-credits .lx-ch-log { margin-top: 6px; }
.lx-credits .lx-ch-logrow { display: grid; grid-template-rows: 1fr; border-top: 1px solid #E3EAE7; border-left: 1px solid transparent; }
.lx-credits .lx-ch-logrow.is-you { border-left-color: #E3EAE7; }
.lx-credits .lx-ch-logrow.is-new { border-left-color: #A5582F; }
.lx-credits .lx-ch-login { min-height: 0; overflow: hidden; }
.lx-credits .lx-ch-logc { display: grid; grid-template-columns: 142px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 9px 0 9px 10px; color: #10201C; }
.lx-credits .lx-ch-at { font-family: var(--lx-mono); font-size: 13px; font-weight: 500; line-height: 1.45; color: #5B6F66; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-credits .lx-ch-what { font-family: var(--lx-sans); font-size: 14px; line-height: 1.45; }
.lx-credits .lx-ch-what b { font-weight: 800; }
.lx-credits .lx-cr-group.lx-s34-pre .lx-cr-title, .lx-credits .lx-cr-group.lx-s34-pre .lx-cr-row, .lx-credits .lx-charter.lx-s34-pre { opacity: 0; }
.lx-credits .lx-cr-group.lx-s34-pre .lx-cr-rule { transform: scaleY(0); }
@media (max-width: 1100px) {
.lx-letter {
--pk-w: 736px; --pk-sx: 0px; --pk-sy: 40px; --pk-sw: 510px; --pk-sh: 312px; --pk-tab0: 18px; --pk-tab1: 144px; --pk-tab2: 288px;
--pk-cx: 318px; --pk-cy: 64px; --pk-cw: 384px; --pk-seal: 144px; --pk-over: 34px; --pk-doc-x: 20px; --pk-doc-w: 560px; --pk-doc-s: .54;
}
.lx-letter .lx-sheet { grid-column: 1 / -1; justify-self: center; width: 560px; padding: 46px 50px 50px; }
.lx-letter .lx-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 296px)); justify-content: center; column-gap: 24px; margin-top: 44px; }
.lx-letter .lx-q, .lx-letter .lx-q[data-i] { position: relative; top: auto; left: auto; right: auto; width: auto; padding-top: 34px; text-align: left; }
.lx-letter .lx-q[data-side="l"] { text-align: left; }
.lx-letter .lx-q-tick { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 24px; background: #DCCDB0; transform-origin: 50% 0; }
.lx-letter .lx-q-tick::before { content: ''; position: absolute; left: -1.5px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #A5582F; }
.lx-letter .lx-leaders { display: none; }
.lx-credits { --cr-lab: 240px; --cr-gap: 32px; --cr-line: 540px; --cr-shift: 64px; }
.lx-credits .lx-charter { width: 600px; }
}
@media (max-width: 699px) {
.lx-letter {
--lt-rot: -.6deg;
--pk-w: 100%; --pk-sx: 4px; --pk-sy: 40px; --pk-sw: calc(100% - 28px); --pk-sh: 330px; --pk-tab0: 10px; --pk-tab1: 36%; --pk-tab2: 71%;
--pk-cx: 22px; --pk-cy: 246px; --pk-cw: calc(100% - 44px); --pk-seal: 104px; --pk-over: 12px; --pk-over-y: 62px; --pk-doc-x: 16px; --pk-doc-y: 16px; --pk-doc-w: 560px; --pk-doc-s: .5; --pk-band-at: top;
}
.lx-letter-stage { display: block; margin-top: 24px; }
.lx-letter .lx-sheet { width: 100%; padding: 24px 20px 26px; }
.lx-letter .lx-sheet-head { gap: 12px; padding-bottom: 14px; }
.lx-letter .lx-sheet-title { margin-top: 22px; }
.lx-letter .lx-sheet-body { margin-top: 16px; }
.lx-letter .lx-sheet-sign { margin-top: 28px; }
.lx-letter .lx-qs { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; }
.lx-letter .lx-q, .lx-letter .lx-q[data-i] { padding: 2px 0 2px 16px; border-left: 1px solid #A5582F; }
.lx-letter .lx-q-tick { display: none; }
.lx-letter .lx-q-a { font-size: 13px; margin-top: 6px; }
.lx-letter .lx-hinge { margin-top: 56px; }
.lx-letter .lx-prove { width: 100%; min-height: 56px; padding: 0 20px; }
.lx-letter .lx-prove.is-built { font-size: 16px; }
.lx-letter .lx-pk-tab { height: 26px; padding: 0 10px; font-size: 12px; }
.lx-letter .lx-pk-cover { padding: 20px 20px 18px; }
.lx-letter .lx-pk-title { font-size: 26px; }
.lx-letter .lx-pk-l { font-size: 14px; }
.lx-letter .lx-payoff-sub { font-size: 16px; }
.lx-credits .lx-cr-rule { display: none; }
.lx-credits .lx-cr-group + .lx-cr-group { margin-top: 88px; }
.lx-credits .lx-cr-title::before { content: ''; display: block; width: 1px; height: 40px; margin: 0 auto 18px; background: rgba(208, 134, 80, .6); }
.lx-credits .lx-cr-body { margin-top: 28px; }
.lx-credits .lx-cr { gap: 22px; }
.lx-credits .lx-cr-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; text-align: center; }
.lx-credits { --cr-shift: 0px; }
.lx-credits .lx-cr-row dt, .lx-credits .lx-cr-row dd { grid-column: 1; justify-self: center; text-align: center; max-width: 100%; }
.lx-credits .lx-charter { width: 100%; padding: 18px 16px 14px; }
.lx-credits .lx-ch-rows { margin: 10px -8px 0; }
.lx-credits .lx-ch-row { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; padding: 10px 8px; align-items: start; }
.lx-credits .lx-ch-row .lx-switch { margin-top: 1px; }
.lx-credits .lx-ch-row .lx-chip { grid-column: 2; justify-self: start; margin-top: 6px; }
.lx-credits .lx-ch-logc { grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding-left: 8px; }
.lx-credits .lx-cr-end { margin-top: 64px; }
}
@media (max-width: 419px) {
.lx-letter .lx-pk-cover { padding: 18px 16px 16px; }
.lx-letter .lx-pk-l { font-size: 13px; }
.lx-letter .lx-pk-range { font-size: 12.5px; }
.lx-letter .lx-pk-title { font-size: 24px; }
}
/* The prototype's styles: the landing page's last section (lx-s5). In the prototype's order; do not reorder. */
/* ---- lx-s5.css ---- */

.lx-close {
--s5-seal: 240px; --s5-ring: calc(var(--s5-seal) * 280 / 240);
position: relative; isolation: isolate; overflow: clip;
min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
padding: 96px var(--lx-pad-x) 104px; background: #002A1E; color: var(--lx-ivory); text-align: center;
}
.lx-close::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: -1; pointer-events: none;
background: linear-gradient(to bottom, #00140E 0, rgba(0, 20, 14, .55) 76px, rgba(0, 20, 14, 0) 240px);
}
.lx-close:focus { outline: none; }
.lx-close-in { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--lx-content); }
.lx-close .lx-seal-wrap { position: relative; width: var(--s5-ring); height: var(--s5-ring); display: grid; place-items: center; flex: none; }
.lx-close .lx-seal-wrap::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 2200px; height: 1240px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
background: radial-gradient(1100px 560px at 50% calc(50% - 24px), #0C3B2D 0%, rgba(12, 59, 45, .55) 20%, rgba(0, 42, 30, 0) 46%);
}
.lx-close .lx-seal { display: block; width: var(--s5-seal); height: var(--s5-seal); max-width: none; transform-origin: 50% 50%; }
.lx-close .lx-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lx-close .lx-seal-ring-c { fill: none; stroke: #D08650; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lx-close .lx-s5-orbit { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.lx-close .lx-s5-bead {
position: absolute; left: 50%; top: calc(var(--s5-ring) * 6 / 280); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
background: #D08650; box-shadow: 0 0 0 3px rgba(208, 134, 80, .25);
}
.lx-close .lx-receipt {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 46em; margin: 34px 0 0; padding: 0 6px;
border: 0; border-radius: 6px; background: none; cursor: pointer; color: #D08650;
font-family: var(--lx-mono); font-size: 13px; font-weight: 500; line-height: 1.45; font-variant-numeric: tabular-nums; text-wrap: balance;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(208, 134, 80, 0);
transition: text-decoration-color var(--lx-d-color) var(--lx-e-exact), color var(--lx-d-color) var(--lx-e-exact);
}
.lx-close .lx-receipt:hover { text-decoration-color: rgba(208, 134, 80, .9); color: #E09A63; }
.lx-close .lx-receipt[hidden] { display: none; }
.lx-close .lx-close-h {
margin: 20px 0 0; max-width: 15em; font-family: var(--lx-serif); font-weight: 600; font-size: var(--lx-fs-close); line-height: .98;
letter-spacing: -.025em; color: var(--lx-ivory); text-wrap: balance;
}
.lx-close .lx-close-h .lx-it { font-weight: 560; color: #D08650; letter-spacing: -.02em; }
.lx-close .lx-receipt[hidden] + .lx-close-h { margin-top: 44px; }
.lx-close .lx-sub { margin: 22px 0 0; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--lx-iv80); text-wrap: balance; }
.lx-close .lx-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.lx-close .lx-close-cta .lx-btn--big { min-width: 176px; }
.lx-close .lx-help { font-size: 14px; line-height: 1.45; color: var(--lx-iv72); max-width: 40em; text-wrap: balance; }
.lx-close .lx-close-cta + .lx-help { margin-top: 18px; }
.lx-close .lx-help + .lx-help { margin-top: 6px; }
.lx-close[data-pre] .lx-seal, .lx-close[data-pre] .lx-receipt, .lx-close[data-pre] .lx-close-h, .lx-close[data-pre] .lx-sub,
.lx-close[data-pre] .lx-close-cta, .lx-close[data-pre] .lx-help { opacity: 0; }
.lx-close[data-pre] .lx-seal-ring-c { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.lx-foot { background: #00140E; color: var(--lx-iv72); box-shadow: inset 0 1px 0 rgba(252, 240, 222, .06); }
.lx-foot-in {
max-width: calc(var(--lx-content) + 2 * var(--lx-pad-x)); margin: 0 auto; padding: 0 var(--lx-pad-x); min-height: 64px;
display: flex; align-items: center; justify-content: space-between; gap: 4px 24px; font-size: 13px; line-height: 1.4;
}
.lx-foot-note { color: var(--lx-iv72); }
.lx-foot-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; color: var(--lx-iv80); }
.lx-foot-links [data-lp="film"][hidden] + .lx-foot-dot { display: none; }
.lx-foot .lx-link { font-size: 13px; font-weight: 600; color: var(--lx-iv80); text-decoration-color: rgba(252, 240, 222, .38); transition: text-decoration-color var(--lx-d-color) var(--lx-e-exact), color var(--lx-d-color) var(--lx-e-exact); }
.lx-foot .lx-link:hover { color: var(--lx-ivory); text-decoration-color: var(--lx-ivory); }
.lx-foot-dot { color: var(--lx-iv40); }
.lx-foot [hidden] { display: none !important; }
.lx-foot [hidden] + .lx-foot-dot { display: none; }
.lx [data-lp="film"][hidden] { display: none !important; }
@media (max-width: 1100px) {
.lx-close { --s5-seal: 200px; padding: 88px var(--lx-pad-x) 96px; }
.lx-close .lx-close-h { max-width: 12em; }
.lx-close .lx-sub { font-size: 18px; }
}
@media (max-width: 699px) {
.lx-close { --s5-seal: 168px; padding: 88px 16px 72px; min-height: 0; }
.lx-close .lx-seal-wrap::before { width: 900px; height: 900px; background: radial-gradient(400px 380px at 50% calc(50% - 16px), #0C3B2D 0%, rgba(12, 59, 45, .55) 18%, rgba(0, 42, 30, 0) 40%); }
.lx-close .lx-receipt { max-width: 358px; margin-top: 30px; }
.lx-close .lx-close-h { max-width: 9em; }
.lx-close .lx-sub { font-size: 17px; margin-top: 18px; }
.lx-close .lx-close-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-top: 28px; }
.lx-close .lx-close-cta .lx-btn--big { width: 100%; min-width: 0; }
.lx-foot-in { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 24px 16px calc(32px + env(safe-area-inset-bottom)); }
.lx-foot-links { gap: 0 10px; }
}
@media (forced-colors: active) {
.lx-close .lx-s5-bead { background: CanvasText; box-shadow: none; }
}
/* ---------- end landing v3 (lx) ---------- */
/* The prototype's styles: the sign-in screens, devices, the PIN and the lock, and Sign-in and security (version 23). In the prototype's order; do not reorder. */
/* v23: sign-in, devices, the PIN and Admin > Sign-in and security. Built from the prototype's own tokens and classes. */
.v23auth .ob-body { gap: 16px; }
.v23auth .ob-body h1:focus { outline: none; }
.v23auth .ob-body h2 { margin: 0; font-size: 19px; }
.v23auth .ob-body h3 { margin: 0 0 6px; font-size: 17px; }
.v23bar select { max-width: 260px; min-height: 34px; border-radius: 8px; border: 1px solid #3A5049; background: #22342F; color: #FFFFFF; font-weight: 700; font-size: 14px; padding: 4px 8px; }
.v23-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v23-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v23-act { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-width: 0; }
.v23-act > .btn { flex: none; }
.v23-act > .help { flex: 1 1 220px; min-width: 0; }
.v23-rowacts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.v23-err { border: 1.5px solid #B4472F; border-radius: 12px; background: #FFF6F2; color: #5A1F12; padding: 12px 14px; font-weight: 600; }
.v23-ok { border: 1px solid var(--teal); border-radius: 12px; background: var(--tealT); color: var(--tealD); padding: 12px 14px; }
.v23-note { padding: 12px 14px; background: var(--faint); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.v23-note p { margin: 0; }
.v23-proto { border: 2px dashed #8A5A0E; background: #FFF8EA; color: #5C3A07; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.v23-proto .help { color: #5C3A07; }
.v23-plabel { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v23-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.v23-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--ink2); flex-wrap: wrap; }
.v23-inline select { width: auto; max-width: 100%; }
.v23-inline input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--teal); }
.v23-mono { font-family: var(--mono); overflow-wrap: anywhere; }
.v23-codes { margin: 0; padding-left: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; font-size: 16px; }
.v23-codes li.used .v23-mono { text-decoration: line-through; color: var(--ink2); }
.v23-codes small { color: var(--ink2); font-weight: 700; }
.v23-wait { width: 100%; border-collapse: collapse; font-size: 15px; }
.v23-wait caption { text-align: left; padding-bottom: 6px; }
.v23-wait th, .v23-wait td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--grid); }
.v23-wait th { font-size: 13px; color: var(--ink2); }
.v23-wait tr.now td { background: var(--amberT); }
.v23-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.v23-or { margin: 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.v23-label { font-weight: 800; color: var(--ink2); font-size: 14px; }
.v23-pininput { text-align: center; font-family: var(--mono); letter-spacing: .35em; font-size: 28px; max-width: 310px; margin: 0 auto; }
.v23-pinpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 310px; width: 100%; margin: 0 auto; }
.v23-pinpad .btn { min-height: 56px; font-size: 22px; padding: 0 6px; }
.v23-pinpad .btn[data-key="Clear"], .v23-pinpad .btn[data-key="Delete"] { font-size: 15px; }
.v23-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.v23-dev { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.v23-dev > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.v23-dev small { color: var(--ink2); font-size: 13px; }
.v23-dev .v23-rowacts, .v23-dev > .v23-act { flex: 1 1 100%; }
.v23-dev.v23-confirm { margin-top: -4px; border-left: 4px solid var(--amber); background: var(--ground); }
.v23-dev.v23-confirm small { display: block; max-width: 640px; }
.v23-dev.v23-confirm .v23-rowacts { flex-direction: row; flex-wrap: wrap; }
.v23-req { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1.5px solid var(--amber); border-radius: 14px; background: #FFFFFF; }
.v23-why { padding: 10px 12px; background: var(--faint); border-radius: 10px; }
.v23-notices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.v23-notices li { padding: 10px 12px; border-left: 4px solid var(--teal); background: var(--tealW); border-radius: 8px; font-size: 15px; }
.v23-at { display: block; font-size: 12px; font-weight: 800; color: var(--ink2); }
.v23adm { display: flex; flex-direction: column; gap: 12px; }
.v23adm h4 { margin: 8px 0 0; font-size: 15px; }
.v23adm .kvgrid { grid-template-columns: 150px minmax(0, 1fr); }
.v23-indent { padding: 0 10px; }
.v23-saved { padding: 10px 12px; border: 1.5px solid var(--line2); border-radius: 12px; background: #FFFFFF; color: var(--ink); }
.v23-entry { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 2px solid var(--teal); border-radius: 16px; background: var(--tealW); }
.v23auth .kvgrid dd { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .v23bar { padding: 10px 14px; }
  .v23bar .tag { width: 100%; }
  .v23bar select { max-width: 200px; }
  .v23auth .ob { padding: 22px 12px 50px; }
  .v23auth .ob-card { padding: 20px 16px; }
  .v23auth .ob-body h1 { font-size: 28px; }
  .v23auth .ob-mfa { grid-template-columns: minmax(0, 1fr); }
  .v23-codes { grid-template-columns: minmax(0, 1fr); }
  .v23auth .kvgrid, .v23adm .kvgrid { grid-template-columns: 110px minmax(0, 1fr); }
  .v23-act > .btn { max-width: 100%; white-space: normal; }
}

/* v23b: person records, claim identity, the office list, and the three v23 gaps. The person-record rules are Codex's
   (Codex handoff/v23/v23.css, the staff part), kept; the rest use the prototype's own tokens and the v23 classes. */
.v23staff .v23-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.v23staff .v23-grid .card { padding: 20px; }
.v23staff .drow { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.v23staff .inp { max-width: 100%; }
.v23staff dl { margin: 12px 0; }
.v23staff dt { font-size: 13px; font-weight: 800; color: var(--ink2); }
.v23staff dd { margin: 4px 0 14px; overflow-wrap: anywhere; }
.v23staff dd small { display: block; margin-top: 2px; }
.v23staff .v23-span { grid-column: 1 / -1; }
.v23staff .v23-hold { padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.v23staff .v23-hold h3 { margin: 0; }
.v23staff .v23-hold p { margin: 0; }
.v23staff h2 { margin: 0 0 8px; font-size: 19px; }
.v23staff .pagehead { flex-wrap: wrap; gap: 12px; }
.v23staff > .help { margin: 0 0 16px; }
.v23-stafflist { display: flex; flex-direction: column; gap: 12px; }
.v23b-line { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v23b-line-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.v23b-orow { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.v23b-orow .v23-act { margin-top: 6px; }
.v23b-rl { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4px; }
.v23b-rl .textbtn { margin-left: 0; font-size: 14px; }
.v23b-rl small { font-size: 12px; }
.v23b-claim .v23b-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.v23b-claim .frow label { font-weight: 800; font-size: 14px; color: var(--ink2); }
.v23b-warn { border: 1.5px solid #C9761A; background: var(--amberT); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.v23b-warn p { margin: 0; }
.v23b-acked { border: 1px solid var(--line); background: var(--faint); border-radius: 12px; padding: 10px 14px; }
.v23b-acked p { margin: 0; }
.v23b-formerr:empty { display: none; }
.v23b-formerr { margin: 0; color: #5A1F12; font-weight: 700; }
.v23b-mfa { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.v23b-mfa-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v23b-mfa .v23-act { flex: 1 1 320px; justify-content: flex-end; }
.v23b-mfa .v23-act > .help { flex: 0 1 260px; }
.v23b-setup { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.v23b-setup h2 { margin: 0; }
.v23b-setup p { margin: 0; }
.ob-body .v23-act { margin-top: 4px; }
.v23b-walkback { margin-bottom: 16px; }
@media (max-width: 699px) {
  .v23staff .v23-grid, .v23b-claim .v23b-rows { grid-template-columns: minmax(0, 1fr); }
  .v23staff .v23-span { grid-column: auto; }
  .v23b-mfa .v23-act { justify-content: flex-start; }
}

/* ---------- v24: billing (brief D). The prototype's tokens, Fraunces for money, text-and-colour pills ---------- */
.v24 { --copper: #A5582F; --red: #B4472F; --redT: #F8E6DF; --redD: #5A1F12; }
.v24 .bmain { gap: 16px; }
.v24 .v24-head { align-items: flex-start; }
.v24 .v24-head > div:first-child { flex: 1 1 520px; min-width: 0; }
.v24 .v24-head > .v24-act, .v24 .v24-head > .v24-viewas { flex: 0 1 330px; }
.v24-act { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.v24-act > .btn { flex: none; }
.v24-act > .help { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.v24-link { gap: 2px 8px; }
.v24-link > .textbtn { text-align: left; }
.v24-link > .help { flex: 1 1 140px; font-size: 12px; }
.v24-acts { display: flex; flex-direction: column; gap: 10px; }
.v24-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v24-cardhead h2 { margin: 0; font-size: 19px; }
.v24-cardhead .help { margin-top: 3px; }
.v24-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.v24-scroll { overflow-x: auto; max-width: 100%; border-radius: 12px; }
.v24-scroll:focus-visible { outline: 3px solid var(--teal); }
.v24-tbl { font-size: 14px; }
.v24-tbl td { vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--grid); }
.v24-tbl td small { display: block; color: var(--ink2); font-size: 12px; margin-top: 2px; }
.v24-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v24-tbl tbody tr:hover { background: var(--tealW); }
.v24-matchcard .v24-tbl { min-width: 980px; }
.v24-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; border: 1.5px solid transparent; }
.v24-ok { background: #DDF1E8; color: #0D3D2E; border-color: #2E8B6A; }
.v24-fix { background: var(--amberT); color: var(--amberD); border-color: var(--amber); }
.v24-late { background: var(--redT); color: var(--redD); border-color: var(--red); }
.v24-refuse { background: #EFE9FB; color: #2E1B63; border-color: #6A4BB8; }
.v24-info, .v24-sent { background: #E6EEF7; color: #16324F; border-color: #4A6FA5; }
.v24-booked, .v24-na { background: var(--faint); color: var(--ink2); border-color: var(--line2); border-style: dashed; }
p.v24-sent { border: 0; background: var(--tealT); color: var(--tealD); padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.v24-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.v24-runbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--ink); color: #FFFFFF; padding: 18px 22px; border-radius: 16px; }
.v24-runbar .eyebrow { color: #B9D8CF; }
.v24-runbar h2 { margin: 2px 0 4px; font-family: var(--serif); font-size: 26px; }
.v24-runbar p { color: #DCE6E2; font-size: 14px; }
.v24-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.v24-clock b { font-family: var(--serif); font-size: 30px; font-variant-numeric: tabular-nums; }
.v24-clock span { color: #DCE6E2; font-size: 13px; }
.v24-warn { border: 1.5px solid var(--amber); background: var(--amberW); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.v24-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.v24-mcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 6px solid var(--line2); }
.v24-mcard span { font-weight: 800; color: var(--ink2); font-size: 14px; }
.v24-mcard b { font-family: var(--serif); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.v24-mcard small { color: var(--ink2); font-size: 13px; }
.v24-mcard.ready { border-left-color: #2E8B6A; } .v24-mcard.fix { border-left-color: var(--amber); } .v24-mcard.late { border-left-color: var(--red); } .v24-mcard.info, .v24-mcard.sent { border-left-color: #4A6FA5; }
.v24-bar { display: flex; flex-direction: column; gap: 8px; }
.v24-stack { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--faint); }
.v24-stack i { display: block; height: 100%; }
.v24-stack i.ready { background: #2E8B6A; } .v24-stack i.fix { background: var(--amber); } .v24-stack i.late { background: var(--red); } .v24-stack i.none { width: 100%; }
.v24-owners { display: flex; flex-direction: column; gap: 12px; }
.v24-owner { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--grid); padding-top: 10px; }
.v24-owner:first-child { border-top: 0; padding-top: 0; }
.v24-av { width: 40px; height: 40px; border-radius: 50%; background: var(--tealT); color: var(--tealD); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.v24-owner h3 { margin: 0 0 4px; font-size: 16px; }
.v24-owner h3 span { font-weight: 400; color: var(--ink2); font-size: 13px; }
.v24-ownbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v24-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.v24-amt { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.v24-watch { display: flex; flex-direction: column; gap: 10px; }
.v24-witem { border-top: 1px solid var(--grid); padding-top: 10px; }
.v24-witem:first-child { border-top: 0; padding-top: 0; }
.v24-witem h3 { margin: 6px 0 2px; font-size: 16px; }
.v24-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.v24-seg button { border: 1.5px solid var(--line2); background: var(--card); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; color: var(--ink2); display: inline-flex; gap: 6px; align-items: center; }
.v24-seg button span { font-variant-numeric: tabular-nums; background: var(--faint); border-radius: 999px; padding: 0 7px; }
.v24-seg button[aria-pressed="true"] { background: var(--tealT); border-color: var(--teal); color: var(--tealD); }
.v24-filters { align-items: flex-start; }
.v24-aging { display: flex; flex-direction: column; gap: 8px; }
.v24-age { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px; gap: 10px; align-items: center; font-size: 14px; }
.v24-age b { text-align: right; font-variant-numeric: tabular-nums; }
.v24-agebar { height: 12px; background: var(--faint); border-radius: 6px; overflow: hidden; }
.v24-agebar i { display: block; height: 100%; background: var(--copper); }
.v24-hero { padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 6px solid var(--line2); }
.v24-hero h2 { margin: 8px 0 4px; font-size: 21px; }
.v24-hero.ready, .v24-hero.paid { border-left-color: #2E8B6A; } .v24-hero.fix, .v24-hero.partial { border-left-color: var(--amber); } .v24-hero.late, .v24-hero.denied, .v24-hero.rejected { border-left-color: var(--red); } .v24-hero.refused { border-left-color: #6A4BB8; }
.v24-heroamt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.v24-heroamt b, .v24-total { font-family: var(--serif); font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.v24-heroamt span { color: var(--ink2); font-size: 13px; text-align: right; }
.v24-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v24-ck { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; background: var(--card); }
.v24-ck.fix { border-color: var(--amber); background: var(--amberW); } .v24-ck.late { border-color: var(--red); background: #FFF6F2; } .v24-ck.refuse { border-color: #6A4BB8; }
.v24-ckhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v24-ck p { font-size: 14px; }
.v24-fix { font-weight: 400; }
.v24-src { font-size: 12px; color: var(--ink2); }
.v24-relform, .v24-contract-fields{border:0;padding:0;margin:0;min-width:0}
    .v24-keyform { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line2); padding-top: 8px; }
.v24-keygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.v24-err { color: var(--redD); font-size: 14px; font-weight: 700; min-height: 0; }
.v24-err:empty { display: none; }
.v24-heldlist { display: flex; flex-direction: column; gap: 12px; }
.v24-helditem { border-top: 1px solid var(--grid); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.v24-helditem:first-child { border-top: 0; padding-top: 0; }
.v24-hihead { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.v24-hihead > .v24-link { flex: 1 1 260px; }
.v24-rules { display: flex; flex-direction: column; gap: 4px; font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.v24-formlayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.v24-formlayout > section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v24-formlayout .v24-scroll { background: var(--faint); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.v24-claimaside { padding: 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.v24-brief { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; border-top: 1px solid var(--grid); padding-top: 6px; font-size: 13px; }
.v24-brief span { color: var(--ink2); grid-column: 1; }
.v24-brief strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.v24-passstrip { gap: 6px; }
.v24-sheet { width: 780px; margin: 0 auto; padding: 20px; background: #FFFFFF; color: #202020; font-family: Arial, Helvetica, sans-serif; font-size: 10px; box-shadow: 0 2px 12px #10201C18; }
.v24-sheet header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
.v24-sheet h3 { margin: 0; font-size: 17px; }
.v24-wm { color: #98442A; font-weight: 700; letter-spacing: .05em; padding-top: 4px; }
.v24-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #A14A40; border-left: 1px solid #A14A40; }
.v24-cell { border-right: 1px solid #A14A40; border-bottom: 1px solid #A14A40; padding: 4px 6px; min-height: 40px; display: flex; flex-direction: column; gap: 3px; }
.v24-box { position: relative; border-radius: 3px; outline-offset: 1px; }
.v24-box b { display: block; font-size: 8px; color: #8A3029; font-weight: 400; text-transform: uppercase; }
.v24-box span { font-size: 10px; overflow-wrap: anywhere; }
.v24-box:hover, .v24-box:focus { background: #FFF7EC; }
.v24-tipbox { display: none; position: absolute; left: 0; top: 100%; z-index: 5; background: var(--ink); color: #FFFFFF; font-size: 11px; padding: 5px 8px; border-radius: 6px; width: max-content; max-width: 260px; font-family: var(--sans); }
.v24-box:hover .v24-tipbox, .v24-box:focus .v24-tipbox { display: block; }
.v24-cms { border-collapse: collapse; width: 100%; margin: 8px 0; table-layout: fixed; }
.v24-cms th, .v24-cms td { border: 1px solid #A14A40; padding: 4px; height: 26px; overflow-wrap: anywhere; font-size: 10px; }
.v24-cms th { font-size: 8px; font-weight: 400; color: #8A3029; text-align: left; }
.v24-cms td:focus { background: #FFF7EC; outline: 2px solid var(--teal); }
.v24-sheet footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 9px; }
.v24-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.v24-allfields summary { font-weight: 800; cursor: pointer; font-size: 16px; }
.v24-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.v24-facts dt { font-size: 12px; font-weight: 800; color: var(--ink2); }
.v24-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 14px; }
.v24-facts dd small { display: block; color: var(--ink2); font-size: 12px; margin-top: 2px; }
.v24-timeline { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v24-timeline small { display: block; color: var(--ink2); font-size: 12px; }
.v24-ctsum { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; }
.v24-viewas { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; }
.v24-viewas > .frow { flex: 0 1 280px; }
.v24-viewas > .help { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.v24-office .v24-orow { border-top: 1px solid var(--grid); padding-top: 8px; }
@media (max-width: 1100px) { .v24-pair, .v24-formlayout { grid-template-columns: minmax(0, 1fr); } .v24-claimaside { position: static; } }
@media (max-width: 900px) { .v24 .bnav .ac-me, .v24 .bnav .ac-org { display: none; } }
@media (max-width: 640px) {
  .v24 .bmain { padding: 16px 16px 40px; }
  .v24-runbar h2 { font-size: 21px; }
  .v24-clock { align-items: flex-start; }
  .v24-mcard b, .v24-heroamt b, .v24-total { font-size: 28px; }
  .v24-heroamt { align-items: flex-start; }
  .v24-heroamt span { text-align: left; }
  .v24-age { grid-template-columns: 90px minmax(0, 1fr) 80px; }
  .v24 .v24-head > .v24-act, .v24 .v24-head > .v24-viewas { flex: 1 1 100%; }
}
.v24-brow { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.v24-browhead { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.v24-browval { font-weight: 800; }
.v24-brows { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.v24-browlearner h3, .v24-idaudit h3 { margin: 0 0 6px; font-size: 16px; }
.v24-prof { gap: 12px; }
.v24-idlist { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.v24-idrow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; border-top: 1px solid var(--grid); padding-top: 8px; }
.v24-idrow dt { font-weight: 800; color: var(--ink2); font-size: 14px; }
.v24-idrow dd { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v24-idval { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 640px) { .v24-idrow { grid-template-columns: minmax(0, 1fr); } .v24-brows { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v25a: session robustness, session history and family guidance (brief E1). The prototype's tokens; text-and-colour chips ---------- */
.v25-act { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.v25-act > .btn, .v25-act > .sp-btn, .v25-act > .pillbtn { flex: none; }
.v25-act > .help { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.v25-acts { display: flex; flex-direction: column; gap: 10px; }
.v25-proto { gap: 8px; }
.v25-proto .sp-row > .help { color: var(--amberD); font-weight: 700; font-size: 13px; flex: 1 1 220px; min-width: 0; }
.v25-proto .v25-act > .help { color: var(--amberD); font-weight: 700; }
.v25-banner { max-width: 1560px; margin: 16px auto 0; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.v25-box { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--amber); background: var(--amberW); color: var(--ink); }
.v25-box.ok { border-color: #2E8B6A; background: #F1FAF6; }
.v25-box.info { border-color: #4A6FA5; background: #F2F6FB; }
.v25-box h2 { margin: 0; font-size: 18px; }
.v25-box p { font-size: 15px; }
.v25-intr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.v25-intr .v25-acts { align-items: flex-start; }
.saved.dev { background: var(--amberT); color: var(--amberD); border: 2px solid var(--amber); }
.saved.away { background: #E6EEF7; color: #16324F; }
.v25-dev { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--amberT); color: var(--amberD); font-size: 12px; font-weight: 800; white-space: nowrap; }
.v25-elsewhere { max-width: 1100px; margin: 20px auto 48px; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
.v25-elsewhere .v25-box { border-color: #4A6FA5; background: #F2F6FB; padding: 20px 22px; }
.v25-ro { display: inline-flex; align-items: center; border-style: solid; cursor: default; }
.v25-elsewhere .v25-box h2 { font-size: 22px; font-family: var(--serif); }
.v25-closed { min-height: calc(100vh - 92px); display: grid; place-items: center; padding: 24px 16px; background: var(--ink); }
.v25-closed .v25-box { max-width: 560px; width: 100%; border-style: dashed; border-color: #8A5A0E; }
.v25-hist { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v25-hist h2 { margin: 0; font-size: 20px; }
.v25-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.v25-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--ink2); min-width: 0; }
.v25-filters select { min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--card); padding: 4px 10px; font-size: 15px; max-width: 100%; }
.v25-rows { display: flex; flex-direction: column; gap: 8px; }
.v25-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 300px); gap: 8px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-left: 6px solid var(--lh, var(--teal)); border-radius: 12px; background: var(--card); }
.v25-row .v25-when b { display: block; font-size: 15px; }
.v25-row .v25-when span { font-size: 13px; color: var(--ink2); }
.v25-row .v25-what b { font-size: 16px; }
.v25-row .v25-what > span { display: block; font-size: 14px; color: var(--ink2); }
.v25-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.v25-past { max-width: 1200px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.v25-pastgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.v25-side { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.v25-fg { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border: 2px solid #9A5B0B; }
.v25-fg.live { border-color: var(--teal); }
.v25-fg h2 { margin: 0; font-size: 20px; }
.v25-fg fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v25-fg legend { font-weight: 800; font-size: 14px; color: var(--ink2); padding: 0 4px; }
.v25-fg .chk { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.v25-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v25-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.v25-step b { font-size: 15px; }
.v25-step .help { grid-column: 1 / -1; }
.v25-seg { display: inline-flex; align-self: flex-start; max-width: 100%; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.v25-seg button { border: 0; background: var(--card); color: var(--ink); font-weight: 800; font-size: 14px; min-height: 40px; padding: 0 14px; }
.v25-seg button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.v25-taps { display: flex; flex-wrap: wrap; gap: 8px; }
.v25-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.v25-log li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.v25-log .t { font-family: var(--mono); font-size: 13px; color: var(--ink2); }
.v25-practice td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1100px) { .v25-pastgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .v25-row { grid-template-columns: minmax(0, 1fr); } .v25-intr { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .v25-banner, .v25-elsewhere { padding: 0 16px; } .v25-past { padding: 16px; } .v25-step { grid-template-columns: minmax(0, 1fr); } .v25-log li { grid-template-columns: minmax(0, 1fr); } }
/* ---------- v25b: guardian signing, import review, held records, organization settings, reports (brief E2). The prototype's tokens ---------- */
.v25b-act { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.v25b-act > .btn, .v25b-act > .sp-btn, .v25b-act > .linkbtn { flex: 0 1 auto; max-width: 100%; white-space: normal; height: auto; }
.v25b-act > .sc-seg { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; }
.v25b-act > .help { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.v25b-acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.v25b-err { margin: 0; color: #9B2C1F; font-weight: 700; font-size: 14px; min-height: 0; }
.v25b-err:empty { display: none; }
.v25b-proto { margin-top: 6px; }
.v25b-proto .v25b-act > .help { color: var(--amberD); font-weight: 700; }
.v25b-dl { display: grid; gap: 8px; margin: 0; }
.v25b-dl > div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 14px; }
.v25b-dl dt { font-weight: 800; font-size: 14px; }
.v25b-dl dd { margin: 0; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.v25b-dl dd small { display: block; color: var(--ink2); font-size: 12px; }
/* settings */
.v25b-settings { display: flex; flex-direction: column; gap: 18px; }
.v25b-setsec { display: flex; flex-direction: column; gap: 12px; }
.v25b-set { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.v25b-sethead { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.v25b-sethead h4 { margin: 0; font-size: 16px; flex: 1 1 240px; min-width: 0; }
.v25b-val { font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 999px; background: #E3F3EF; color: #0B4F47; max-width: 100%; overflow-wrap: anywhere; }
.v25b-eff { margin: 0; font-size: 15px; }
.v25b-who { margin: 0; }
.v25b-opts { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v25b-opts legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v25b-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.v25b-opt input { margin-top: 4px; flex: none; }
.v25b-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v25b-opt small { color: var(--ink2); font-size: 13px; }
.v25b-packs ul { margin: 6px 0 0; padding-left: 18px; }
.v25b-packs h4 { margin: 0; }
/* held records and guardian documents */
.v25b-held, .v25b-doc { border: 1px solid var(--line); border-left: 6px solid var(--lh, var(--teal)); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.v25b-heldhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v25b-heldhead > div { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; }
.v25b-heldhead .help { font-size: 13px; }
.v25b-revs { margin: 0; }
.v25b-as { margin-bottom: 14px; }
.v25b-dline { margin: 0; font-size: 15px; }
.v25b-sigshow { max-width: 260px; border-bottom: 2px solid var(--line); }
.v25b-sigshow svg { width: 100%; height: auto; display: block; }
/* reports */
.v25b-reps { display: flex; flex-direction: column; gap: 14px; }
.v25b-repnav { flex-wrap: wrap; }
.v25b-tbl { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.v25b-tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 14px; align-items: start; }
.v25b-tr:first-child { border-top: 0; }
.v25b-th { background: #F3F5F4; font-weight: 800; font-size: 13px; }
.v25b-tr > span { min-width: 0; overflow-wrap: anywhere; }
.v25b-tr small { display: block; color: var(--ink2); font-size: 12px; }
.v25b-span { grid-column: span 5; }
.v25b-export { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.v25b-miss { color: #9B2C1F; font-weight: 800; }
/* the import review */
.v25b-rev { display: flex; flex-direction: column; gap: 14px; }
.v25b-qs { display: flex; flex-direction: column; gap: 10px; }
.v25b-qs h3, .v25b-revl h3 { margin: 4px 0 0; font-size: 17px; }
.v25b-revl { border-top: 2px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.v25b-saved { display: flex; flex-direction: column; gap: 8px; }
.v25b-q { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.v25b-q.open { border: 2px solid var(--amber); background: var(--amberW); }
.v25b-qhead { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.v25b-qhead .help { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.v25b-found { margin: 0; font-size: 15px; }
/* the guardian's phone */
.v25b-gbar .v25b-act > .help { color: #D8E4E0; font-size: 12px; flex: 0 1 auto; }
.v25b-phonewrap { padding: 20px 16px 48px; display: flex; justify-content: center; background: #E9EEEC; min-height: calc(100vh - 92px); }
.v25b-phone { width: 100%; max-width: 390px; background: #FFFFFF; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 32, 28, .12); overflow: hidden; }
.v25b-ghead { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #10201C; color: #FFFFFF; }
.v25b-ghead span { font-size: 13px; color: #CFE0DA; }
.v25b-gbody { padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.v25b-gbody p { margin: 0; }
.v25b-gh1 { margin: 0; font-size: 23px; font-family: var(--serif); line-height: 1.2; }
.v25b-gmeta { font-size: 13px; color: var(--ink2); }
.v25b-gdoc { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #FBFCFB; }
.v25b-gsign { display: flex; flex-direction: column; gap: 10px; }
.v25b-gsign h2 { margin: 0; font-size: 19px; }
.v25b-glab { font-weight: 800; font-size: 14px; }
.v25b-pad { width: 100%; height: 150px; border: 2px dashed #7C8C86; border-radius: 12px; background: #FFFFFF; touch-action: none; display: block; }
.v25b-gagree { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.v25b-gagree input { margin-top: 3px; width: 22px; height: 22px; flex: none; }
.v25b-gacts { display: flex; flex-direction: column; gap: 10px; }
.v25b-gacts .btn { min-height: 48px; }
.v25b-admnav { margin: 0 0 14px; }
.v25b-admnav .sc-seg button, .v25b-repnav button { white-space: normal; }
@media (max-width: 700px) {
  .v25b-dl > div { grid-template-columns: minmax(0, 1fr); }
  .v25b-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v25b-span { grid-column: span 1; }
  .v25b-phonewrap { padding: 0; background: #FFFFFF; }
  .v25b-phone { max-width: none; border-radius: 0; border: 0; box-shadow: none; }
}
/* ---------- v25c: guardian signing on a clinic device, the EVV location stamp, visit aggregator status, invite links (brief F). The prototype's tokens ---------- */
/* a marker around a page built by v24's helpers: it adds no box of its own */
.v25c-contents { display: contents; }
.v25c-acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.v25c-explain { border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); min-width: 0; }
.v25c-explain h3 { margin: 0; font-size: 17px; }
.v25c-explain p { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.v25c-today { margin: 10px 0 12px; }
.v25c-quiet { font-size: 14px; }
.v25c-line { margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.v25c-line p { margin: 0; }
.v25c-line.ok { color: var(--ink2); font-size: 14px; }
.v25c-line.miss { border: 2px solid var(--amber); background: var(--amberW); }
.v25c-endcard { display: flex; flex-direction: column; gap: 12px; margin: 12px 16px 0; min-width: 0; }
.v25c-endcard .v25c-line { margin: 0; }
.v25b-enddocs { display: flex; flex-direction: column; gap: 10px; }
.v25c-cgsig .v25b-act { margin-top: 6px; }
.v25c-away { margin: 6px 0 0; font-weight: 700; font-size: 14px; }
.v25c-item, .v25c-visit { border: 1px solid var(--line); border-left: 6px solid var(--lh, var(--amber)); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); min-width: 0; }
.v25c-item { border-left-color: var(--amber); }
.v25c-chk { display: flex; flex-direction: column; gap: 8px; }
.v25c-done { color: #0B4F47; font-weight: 700; }
.v25c-setline p { margin: 0 0 6px; font-size: 15px; }
.v25c-office .v24-list { margin: 0; }
.v25c-invlink { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: #FBFCFB; min-width: 0; }
.v25c-invhead { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.v25c-link { width: 100%; max-width: 560px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.v25c-mailoff { border: 2px solid var(--amber); background: var(--amberW); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.v25c-mailoff p { margin: 0; }
.v25c-mailoff .v25c-invlink { background: transparent; border-top: 0; padding: 0; }
@media (max-width: 520px) { .v25c-line { margin: 10px 10px 0; } .v25c-endcard { margin: 10px 10px 0; } }

/* ---------- view as (mock, decision 0013): an owner or admin opens anyone's screens, read only. The prototype's tokens ---------- */
.pbar .va-open { border: 2px solid #DCE6E2; border-radius: 10px; padding: 5px 12px; text-decoration: none; }
.pbar .va-open[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.vabar { flex-basis: 100%; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--amberT); color: var(--amberD); border-radius: 12px; padding: 8px 12px; margin: 2px 0 0; font-size: 15px; }
.vabar b { font-weight: 800; }
.vabar .grow { flex: 1 1 auto; }
.vabar .btn.small { border-color: var(--amberD); color: var(--amberD); background: #FFFFFF; }
.va-modal .va-list { display: grid; gap: 10px; }
.va-modal .whocard { text-align: left; border: 2px solid var(--line2); border-radius: 16px; background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font: inherit; color: var(--ink); }
.va-modal .whocard:hover, .va-modal .whocard:focus-visible { border-color: var(--teal); }
.va-modal .whocard b { font-size: 18px; }
.va-modal .whocard span { font-size: 15px; color: var(--ink2); }
.va-modal .va-step { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin: 0; }
.va-off { cursor: not-allowed; }
.va-why { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 8px; padding: 4px 10px; border-radius: 999px; background: var(--amberT); color: var(--amberD); font-size: 13px; font-weight: 700; line-height: 1.3; max-width: 34em; }
.va-why::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.va-ro { pointer-events: none; opacity: .55; }
@media (max-width: 520px) { .va-why { margin-left: 0; } }
/* v25h: one menu per role (the owner's, admin's and biller's rail), Home, and "Ask a person". Built from the prototype's own tokens and classes. */
.v25h-rail { gap: 14px; }
.v25h-rail .v25h-note { font-size: 12.5px; color: var(--ink2); margin: 0 12px; line-height: 1.35; }
/* the office's pages fill the rail's page, whatever wraps them (the connected scheduler wraps its own) */
.v25h-frame .bmain .adm { padding: 0; max-width: none; margin: 0; }
.v25h-off { display: none !important; }
.v25h-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.v25h-find { display: flex; align-items: center; }
.v25h-find input { min-height: 34px; width: 240px; border-radius: 8px; border: 1px solid #3A5049; background: #22342F; color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 700; padding: 0 10px; }
.v25h-find input::placeholder { color: #BFD0CA; }
.v25h-who { border-left: 4px solid var(--teal); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.v25h-who h2 { margin: 0; font-size: 19px; }
.v25h-who-row { display: flex; align-items: center; gap: 12px; }
.v25h-who-row p { margin: 0; }
.v25h-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #F3EEFC; color: #4B2F96; display: grid; place-items: center; font-weight: 800; }
.v25h-askmodal textarea { width: 100%; }
.v25h-asks .v25h-askrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--grid); }
.v25h-asks .v25h-askrow:first-of-type { border-top: 0; }
.v25h-quote { margin: 4px 0 2px; font-size: 15px; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Home (the approved mock, pm-redesign/prototype-home-dashboard.html) */
.hd .bmain { gap: 20px; }
.hd-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hd-counts .hchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); font-weight: 800; font-size: 14px; color: var(--ink); }
.hd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hd-filter .bk-l { margin-right: 2px; }
.hd-sec { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hd-sechead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.hd-sechead h2 { margin: 0; font-size: 21px; }
.hd-sechead .help { flex: 1 1 320px; }
.hd-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hd-need { display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) minmax(220px, 300px); gap: 12px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--grid); }
.hd-need:first-child { border-top: 0; padding-top: 4px; }
.hd-rank { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--ink2); text-align: right; }
.hd-num { min-height: 56px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hd-num small { font-family: var(--sans); font-size: 11px; font-weight: 800; color: var(--ink2); margin-top: 3px; letter-spacing: .02em; }
.hd-num.red { border-color: #B4472F; background: #F8E6DF; color: #5A1F12; }
.hd-num.amber { border-color: var(--amber); background: var(--amberW); color: var(--amberD); }
.hd-num.teal { border-color: var(--teal); background: var(--tealW); color: var(--tealD); }
button.hd-num:hover { box-shadow: 0 0 0 3px var(--tealT); }
.hd-nbody h3 { margin: 0 0 3px; font-size: 17px; }
.hd-stake { font-size: 15px; color: var(--ink); margin: 0; }
.hd-stake b { font-variant-numeric: tabular-nums; }
.hd-set { margin: 3px 0 0; font-size: 13px; color: var(--ink2); }
.hd-fix { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hd-fix .help { font-size: 13px; }
.hd-more { align-self: flex-start; }
.hd-clear { padding: 10px 0; font-weight: 700; color: var(--tealD); margin: 0; }
.hd-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hd-n { text-align: left; border: 1px solid var(--line); border-left: 6px solid var(--line2); border-radius: 14px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-height: 44px; font: inherit; color: var(--ink); }
.hd-n span { font-size: 14px; font-weight: 800; color: var(--ink2); }
.hd-n b { font-family: var(--serif); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-n small { font-size: 13px; color: var(--ink2); }
.hd-n:hover { border-color: var(--teal); }
.hd-n.auth { border-left-color: #4A6FA5; } .hd-n.sch { border-left-color: #7DBFB3; } .hd-n.del { border-left-color: #0E6B61; } .hd-n.can { border-left-color: var(--amber); } .hd-n.noauth { border-left-color: #B4472F; }
.hd-n.ready { border-left-color: #2E8B6A; } .hd-n.fix { border-left-color: var(--amber); } .hd-n.late { border-left-color: #B4472F; } .hd-n.info { border-left-color: #4A6FA5; }
.hd-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hd-two.one { grid-template-columns: minmax(0, 1fr); }
.hd-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hd-box h3 { margin: 0; font-size: 16px; }
.hd-chart svg { width: 100%; height: auto; display: block; }
.hd-chart text { font-family: var(--sans); fill: var(--ink); }
.hd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); }
.hd-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hd-legend .s { background: #7DBFB3; } .hd-legend .d { background: #0E6B61; } .hd-legend .c { background: repeating-linear-gradient(45deg, #FFF1D6 0 4px, #E9A23B 4px 6px); box-shadow: inset 0 0 0 1px #E9A23B; }
.hd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hd-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--grid); }
.hd-list li:first-child { border-top: 0; }
.hd-list .v { font-variant-numeric: tabular-nums; font-weight: 800; }
.hd-link { border: 0; background: none; padding: 4px 0; min-height: 32px; color: var(--tealD); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-align: left; font-size: inherit; }
.hd-link.plain { color: var(--ink); text-decoration-color: var(--line2); }
.hd-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.hd-tbl caption { text-align: left; font-weight: 800; padding-bottom: 6px; }
.hd-tbl th, .hd-tbl td { padding: 8px 10px; border-top: 1px solid var(--grid); text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; }
.hd-tbl th:first-child, .hd-tbl td:first-child { text-align: left; }
.hd-tbl thead th { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.hd-tbl tfoot td, .hd-tbl tfoot th { font-weight: 800; border-top: 2px solid var(--line2); }
.hd-tbl td small, .hd-tbl th small { display: block; font-size: 12px; color: var(--ink2); font-weight: 400; }
.hd-tbl .hd-link { padding: 2px 0; min-height: 28px; }
.hd-tbl .zero { color: var(--ink2); }
.hd-foot { font-size: 13px; color: var(--ink2); margin: 0; }
.hd-wide { overflow-x: auto; }
.hd-scrim { position: fixed; inset: 0; background: rgba(16, 32, 28, .45); z-index: 40; display: flex; justify-content: flex-end; }
.hd-drawer { width: min(760px, 96vw); height: 100%; background: var(--ground); box-shadow: -12px 0 40px rgba(16, 32, 28, .25); display: flex; flex-direction: column; }
.hd-dhead { background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 22px; display: flex; gap: 12px; align-items: flex-start; }
.hd-dhead h2 { margin: 2px 0 4px; font-family: var(--serif); font-size: 26px; }
.hd-dbody { padding: 18px 22px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.hd-dbody .card { padding: 6px 14px; }
.hd-dbody .hd-tbl td { text-align: left; } .hd-dbody .hd-tbl td:last-child { text-align: right; }
@media (max-width: 1260px) { .hd-need { grid-template-columns: 24px 70px minmax(0, 1fr); } .hd-fix { grid-column: 3; flex-direction: row; align-items: center; flex-wrap: wrap; } .hd-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .hd-need { grid-template-columns: 64px minmax(0, 1fr); } .hd-rank { display: none; } .hd-fix { grid-column: 1 / -1; } .v25h-asks .v25h-askrow { grid-template-columns: minmax(0, 1fr); } .v25h-find input { width: 180px; } }
/* In the rail, the office's week board keeps its full minimum width (170 px and five days of 150 px): the right column goes
   below the board when the page is narrower than both, as the connected scheduler's does (connected/scheduling-layout.css). */
.v25h-frame .adm { container-type: inline-size; }
@container (max-width: 1275px) { .v25h-frame .admgrid { grid-template-columns: minmax(0, 1fr); } }
/* The prototype's styles: the RBT's session at a glance (version 26f): the target in its ring, the answers, the targets as rings, what to watch for and how to teach it, all in view. In the prototype's order; do not reorder. */
/* ---------- version 26f: the RBT's session at a glance ---------- */
/* One calm, light screen built like an iPad app (Justin, Oct 27: the screen was too busy). A glass bar on top holds the
   session's buttons. The program's card is where the eye goes: the target in a ring that fills with each try, what to say
   beside it, the answers right under it in the same place every time, and the targets as rings that close. Beside it,
   always open, what to watch for and how to teach it, each scrolling on its own. This session so far is the glass bar at
   the foot of the screen, with the whole of it just below. The prototype's own bars sit above and scroll away. Every rule
   is scoped to the session, so the other screens keep their look */
#app:has(> .fmode) > .pbar { position: relative; }
.fmode, .fhour {
  --fh-plot: 80px; --fh-bar: calc(var(--fh-plot) + 64px); --fh-peek: var(--fh-bar);
  --f-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--sans);
  --f-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, var(--sans);
  --f-bg: #F2F2F7; --f-card: #FFFFFF; --f-l1: #111114; --f-l2: #55555C; --f-l3: #8E8E93;
  --f-sep: rgba(60, 60, 67, .16); --f-fill: rgba(118, 118, 128, .14); --f-fill2: rgba(118, 118, 128, .08);
  --f-tint: #00A383; --f-tintink: #007A63; --f-tintfill: rgba(0, 163, 131, .12); --f-ring2: rgba(0, 163, 131, .16);
  --f-red: #D70015; --f-redfill: rgba(255, 59, 48, .1); --f-orange: #FF9500; --f-orangeink: #9A4A00; --f-orangefill: rgba(255, 149, 0, .14);
  --f-glass: rgba(249, 249, 251, .84); --f-menu: rgba(250, 250, 252, .97);
  --f-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px -14px rgba(0, 0, 0, .16);
  --f-hero: linear-gradient(140deg, #FFFFFF 45%, #EAFBF5 100%);
  --fm-ease: cubic-bezier(.25, .8, .25, 1); --fm-spring: cubic-bezier(.34, 1.45, .64, 1);
  font-family: var(--f-font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; color: var(--f-l1); }
.fmode { height: calc(100vh - var(--session-top, 0px) - var(--fh-peek)); height: calc(100dvh - var(--session-top, 0px) - var(--fh-peek)); min-height: 520px; position: relative; display: flex; flex-direction: column;
  background: radial-gradient(900px 520px at 22% -6%, rgba(0, 190, 150, .13), transparent 70%), radial-gradient(700px 500px at 100% 100%, rgba(94, 155, 255, .08), transparent 70%), var(--f-bg); }
.fk { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--f-l2); }
.fvh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fmode .fi, .fhour .fi { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fmode kbd { font-family: var(--f-font); font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--f-l2); border: 1px solid var(--f-sep); border-radius: 5px; padding: 0 5px; opacity: 1; }
/* the keys to press show once a keyboard is in use: a key pressed on the session screen outside a text field. A tablet
   or phone without one never shows them (version 26c) */
html:not(.fkeys) .fmode kbd, html:not(.fkeys) .fmode .hint { display: none; }
.fmode .fline, .fhour .fline { margin: 0; font-size: 15px; color: var(--f-l2); }
.fcap .textbtn, .fhour .textbtn { color: var(--f-tintink); }
.fcap .help, .fhour .help { color: var(--f-l2); }
/* the bar on top: back to Today and the caregiver, the learner in the middle, and the session's buttons. When they do not
   fit on one line, the buttons go to a line of their own: nothing ever sits over anything else */
.fhead.rhead { position: relative; z-index: 20; flex: none; flex-wrap: wrap; gap: 8px 12px; padding: 10px 20px; background: var(--f-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--f-sep); }
.fhead .fleft, .fhead .ftools { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; gap: 10px; }
.fhead .ftools { justify-content: flex-end; }
.fhead .who { flex: 0 1 auto; min-width: 0; align-items: center; text-align: center; line-height: 1.2; }
.fhead .who b { font-size: 17px; font-weight: 600; line-height: 1.2; }
.fhead .who span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--f-l2); }
.fhead .fback { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--f-tintink); font-size: 17px; }
.fhead .fback .fi { width: 22px; height: 22px; stroke-width: 2.4; }
.fhead .btn, .fhead .pillbtn { min-height: 36px; gap: 6px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--f-fill); color: var(--f-l1); font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .15s var(--fm-spring); }
.fhead .btn:active, .fhead .pillbtn:active { transform: scale(.96); }
.fhead .pillbtn[aria-pressed="true"] { background: var(--f-tintfill); color: var(--f-tintink); }
.fhead .fbrkbtn.on { background: var(--f-orange); color: #2B1700; }
.fhead .fmorebtn { width: 36px; padding: 0; }
/* Help sits with the session's buttons, at their height */
.fhead .academy-entry { margin: 0; }
.fhead .academy-entry > button.academy-help-button { min-height: 36px; padding: 2px 14px 2px 2px; font-size: 15px; font-weight: 700; }
.fhead .academy-entry > button.academy-help-button::before { width: 30px; height: 30px; font-size: 16px; }
.fhead .fmorebtn[aria-expanded="true"] { background: var(--f-l1); color: #FFFFFF; }
.fhead .btn.dark { padding: 0 6px; background: none; color: var(--f-red); }
.fhead .fclock .clock { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--f-fill2); font-family: var(--f-round); font-size: 17px; font-weight: 600; }
.fhead .fclock .clock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--f-tint); }
.fhead .saved { padding: 0; gap: 4px; background: none; color: var(--f-l2); font-size: 13px; font-weight: 500; }
.fhead .saved svg { width: 14px; height: 14px; color: var(--f-tintink); }
.fhead .saved.dev, .fhead .saved.away, .fhead .saved[role="status"] { padding: 5px 10px; border: 0; background: var(--amberT); color: var(--amberD); font-weight: 600; }
.fhead .cgpick { display: inline-flex; align-items: center; gap: 6px; }
.fhead .cgpick .help { font-size: 13px; font-weight: 600; color: var(--f-l2); }
/* a missing location at Start: a short note in the bar, which opens the line about it (version 26c) */
.fhead .pillbtn.v25c-pill { min-height: 32px; gap: 7px; padding: 0 12px; background: var(--f-orangefill); color: var(--f-orangeink); font-size: 13px; }
.fhead .pillbtn.v25c-pill::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--f-orange); }
/* a pause that is running: its own line under the bar, with Back to treatment one tap away */
.fhead .fntbar { flex: 1 0 100%; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--f-orangefill); font-size: 15px; }
.fhead .fntbar b { color: var(--f-orangeink); }
.fhead .fntbar .btn { margin-left: auto; background: var(--f-card); }
.fmode > .v25-banner { margin: 12px auto 0; width: 100%; }
.fmode > .v25c-line { margin: 10px 24px 0; }
.fmode > .v25c-line.miss { flex-direction: row; flex-wrap: wrap; align-items: center; }
.fmode > .v25c-line.miss > p { flex: 1 1 420px; }
/* the More menu and today's plan: menus like an app's, opaque, over the screen */
.fmenuw { position: relative; }
.fpop { position: absolute; z-index: 50; min-width: 280px; padding: 6px 0; border-radius: 14px; background: var(--f-menu); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 0 0 .5px var(--f-sep), 0 24px 48px -12px rgba(0, 0, 0, .28); animation: fpopin .22s var(--fm-spring) both; }
.fmenu { top: calc(100% + 8px); right: 0; transform-origin: top right; }
.fplanmenu { top: 58px; left: 20px; width: min(380px, calc(100% - 40px)); max-height: calc(100% - 72px); overflow: auto; transform-origin: top left; }
@keyframes fpopin { from { opacity: 0; transform: scale(.94); } }
.fmi { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 16px; border: 0; background: none; color: var(--f-l1); text-align: left; font-size: 16px; }
.fmi small { display: block; font-size: 13px; color: var(--f-l2); }
.fmi > .fi { margin-left: auto; width: 20px; height: 20px; color: var(--f-l2); }
.fmi:hover, .fpi:hover { background: var(--f-fill2); }
.fmh { padding: 6px 16px 4px; font-size: 13px; color: var(--f-l2); }
.fpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; width: 100%; padding: 9px 16px; border: 0; background: none; color: var(--f-l1); text-align: left; }
.fpi .nm { grid-column: 1; font-size: 16px; }
.fpi .st { grid-column: 1; font-size: 13px; color: var(--f-l2); }
.fpi .st em, .prow .st em { font-style: normal; font-weight: 600; color: var(--f-tintink); }
.fpi.notyet .st, .prow.notyet .st { color: var(--f-orangeink); }
.fpi > .fpr { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 28px; height: 28px; }
.fpi[aria-current="true"] { background: var(--f-tintfill); }
/* the screen under the bar: the program's card, then what to watch for and how to teach it */
.fmode > .rgrid { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 0; padding: 0; align-items: stretch; }
.fmode > .rgrid > .capcard { grid-area: auto; }
.fmode .capcard.fcap { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 16px; }
/* the program's card scrolls inside itself when the program has a lot to say; its parts keep their size and the answers give
   up their extra height first */
.fprog { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px; padding: 18px 8px 20px 28px; }
.fprog:not(:has(> .ftgts)) { grid-template-rows: minmax(0, 1fr) auto; }
.fwork { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.fwork > * { flex-shrink: 0; }
.fcontrols { min-height: 0; max-height: calc(60dvh - 100px); overflow: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.fprog.fbreaking { display: flex; overflow: auto; }
.fphead { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.fptitle { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--f-l1); text-align: left; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.fptitle .fi { width: 18px; height: 18px; color: var(--f-l3); stroke-width: 2.6; transition: transform .2s var(--fm-ease); }
.fptitle[aria-expanded="true"] .fi { transform: rotate(180deg); }
.fchip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; background: var(--f-fill); color: var(--f-l1); }
.fchip.t-green, .fchip.t-teal { background: var(--f-tintfill); color: var(--f-tintink); }
.fchip.t-blue { background: rgba(0, 122, 255, .11); color: #0A55B0; }
.fchip.t-violet { background: rgba(175, 82, 222, .12); color: #7A2EA6; }
.fchip.t-orange, .fchip.t-amber { background: var(--f-orangefill); color: var(--f-orangeink); }
.fchip.t-dashed { background: transparent; box-shadow: inset 0 0 0 1px var(--f-l3); }
.fpof { margin-left: auto; font-size: 14px; color: var(--f-l2); }
.fprog .btn.fnextp { min-height: 34px; gap: 4px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: var(--f-fill); color: var(--f-l1); font-size: 15px; font-weight: 600; }
.fprog .btn.fnextp .fi { width: 16px; height: 16px; }
.fprog .btn.fnextp kbd { margin-left: 4px; }
/* now: where the eye lands. The target inside its ring, and what to say */
.fnow { --ringsz: 160px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; padding: 22px 28px 22px 22px; border-radius: 26px; background: var(--f-hero); box-shadow: var(--f-shadow); overflow: hidden; }
.fnow.noring { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
.fnow:has(> .fdone) { min-height: 200px; }
/* every target has its tries: the answers dim, and a tap still counts as one more try */
.fprog:has(.fdone) .answers.fpad { opacity: .45; transition: opacity .3s var(--fm-ease); }
.fbig { position: relative; flex: none; width: var(--ringsz); height: var(--ringsz); }
.fring2 { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.fring2 circle { fill: none; stroke-width: 6; }
.fring2 .tr { stroke: var(--f-ring2); }
.fring2 .fg { stroke: url(#fringg); stroke-linecap: round; transition: stroke-dashoffset .6s var(--fm-spring); }
.fring2 .fg[stroke-dashoffset="100"] { opacity: 0; }
.fbig .fring2 circle { stroke-width: 4.2; }
.fbig .fring2 .fg { filter: drop-shadow(0 0 3px rgba(0, 190, 150, .35)); }
.fbig .fin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16%; text-align: center; }
.ftw { max-width: 100%; font-family: var(--f-round); font-size: calc(var(--ringsz) * .2); font-weight: 800; letter-spacing: -.03em; line-height: 1; overflow-wrap: anywhere; }
.ftw.long { font-size: calc(var(--ringsz) * .135); line-height: 1.05; }
.ftw.xlong { font-size: calc(var(--ringsz) * .095); line-height: 1.1; letter-spacing: -.01em; }
.ftc { margin-top: 6px; font-family: var(--f-round); font-size: 15px; font-weight: 600; color: var(--f-l2); font-variant-numeric: tabular-nums; }
.fbig.closed .ftc { color: var(--f-tintink); }
.fsay { min-width: 0; }
.fsay .sd { margin: 4px 0 0; font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--f-l1); }
.fsay .sd.mid { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.fsay .sd.long { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.fsay .sdsub { margin: 6px 0 0; font-size: 17px; color: var(--f-l2); }
.fsay .fready { margin: 10px 0 0; font-size: 16px; color: var(--f-l2); }
.fsay .fready b { font-weight: 600; color: var(--f-l1); }
.fnext { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; margin: 14px 0 0; font-size: 15px; color: var(--f-l2); }
.fnext b { font-weight: 600; color: var(--f-l1); }
.fstreak { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--f-orangefill); color: var(--f-orangeink); font-size: 14px; font-weight: 700; animation: fpin .35s var(--fm-spring); }
.fstreak .fi { width: 15px; height: 15px; }
@keyframes fpin { from { transform: scale(.6); opacity: 0; } }
/* the program is done for today: the card says so and offers the next program still to go. The answers stay below it */
.fdone { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 28px; padding: 18px 28px 18px 22px; border-radius: inherit; background: var(--f-card); animation: fpin .4s var(--fm-spring); }
.fdone .fbig { --ringsz: 120px; }
.fdone .fin .fi { width: 44%; height: 44%; color: var(--f-tintink); stroke-width: 3; }
.fdtext { min-width: 0; }
.fdtext h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.fdtext p { margin: 6px 0 14px; color: var(--f-l2); }
.fdtext .frow { display: flex; flex-wrap: wrap; gap: 10px; }
.fdtext .btn { min-height: 44px; gap: 6px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--f-fill); color: var(--f-l1); font-size: 16px; font-weight: 600; }
.fdtext .btn.fgo { background: var(--f-tintink); color: #FFFFFF; }
.fdtext .btn .fi { width: 16px; height: 16px; }
.fcap .pausedline { border-width: 1.5px; border-radius: 12px; }
.fcap.paused [data-act="answer"], .fcap.paused [data-act="mtap"], .fcap.paused [data-act="timer"], .fcap.paused [data-act="latcue"], .fcap.paused [data-act="latstop"], .fcap.paused [data-act="ivstart"], .fcap.paused [data-act="ivhit"], .fcap.paused [data-act="ivans"], .fcap.paused [data-act="tstep"], .fcap.paused [data-act="obs"], .fcap.paused [data-act="beh"], .fcap.paused [data-act="resp"] { opacity: .45; }
/* the answers, right under the card, in the same place every time: On own large on the left, the help steps as one row from
   least to most, then the misses */
.fprog .answers.fpad { flex: 0 0 152px; min-height: 128px; max-height: 172px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 10px; }
.fprog .answers.fpad.nohelp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.fpad .ans { position: relative; overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 10px; border: 0; border-radius: 18px; font-size: 17px; font-weight: 600; line-height: 1.15; text-align: center; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--fm-spring), filter .2s; }
.fpad .ans:active { transform: scale(.97); }
.fpad .ans .al { display: block; text-wrap: balance; }
.fpad .ans kbd { position: absolute; top: 8px; right: 10px; }
.fpad .ans.own { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 10px; font-size: 28px; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 60, 45, .3); background: linear-gradient(180deg, #11AE8E, #00866B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 16px 30px -14px rgba(0, 134, 107, .75); }
.fpad .ans.own:hover { filter: brightness(1.05); }
.fpad .ans.own .fi { width: 30px; height: 30px; stroke-width: 2.8; }
.fpad .ans.own .ftok { flex-basis: 100%; margin-top: 4px; font-size: 14px; font-weight: 600; opacity: .9; }
.fpad .ans.own kbd { color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .45); text-shadow: none; }
.fpad .fhelp { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.fpad.nohelp .fhelp { grid-template-rows: minmax(0, 1fr); }
.fpad .ladder { min-height: 0; display: grid; grid-template-columns: repeat(var(--hc), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1px; overflow: hidden; border-radius: 18px; background: var(--f-sep); box-shadow: var(--f-shadow); }
.fpad .ladder .ans { border-radius: 0; background: var(--f-card); color: var(--f-l1); }
.fpad .ladder .ans:active, .fpad .miss .ans:active { transform: none; filter: brightness(.95); }
/* the end words come after the answer's own, so it is read and found by its name first, and sit above it */
.fpad .ladder .ans small { order: -1; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--f-l2); }
.fpad .ladder.many { gap: 6px; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.fpad .ladder.many .ans { border-radius: 14px; box-shadow: var(--f-shadow); }
.fpad .miss { min-height: 0; display: grid; grid-template-columns: repeat(var(--nm), minmax(0, 1fr)); gap: 8px; }
.fpad .miss .ans { min-height: 56px; background: var(--f-fill2); color: var(--f-l1); font-size: 16px; }
.fpad .miss .ans.wrong { background: var(--f-redfill); color: var(--f-red); }
.fpad .ans.flash { animation: fflash .45s var(--fm-ease); }
@keyframes fflash { from { box-shadow: 0 0 0 6px rgba(0, 163, 131, .35); } to { box-shadow: 0 0 0 0 rgba(0, 163, 131, 0); } }
.fprog .note { border: 1.5px dashed var(--f-l3); border-radius: 14px; color: var(--f-l2); }
/* under the answers: today's tally for this program and Undo, which names what it takes back */
.funder { display: flex; align-items: center; gap: 14px; min-height: 28px; }
.funder .tally { min-width: 0; padding: 0; border: 0; background: none; color: var(--f-l2); font-size: 15px; font-weight: 400; white-space: nowrap; }
.funder .tally b { font-weight: 600; color: var(--f-l1); }
.funder .btn.undo { margin-left: auto; min-height: 36px; gap: 6px; padding: 0 4px; border: 0; background: none; color: var(--f-tintink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.funder .btn.undo .fi { width: 17px; height: 17px; }
.funder .btn.undo:disabled { opacity: 1; color: var(--f-l3); }
/* every target as a ring that closes when its tries are in; a tap switches */
.ftgts { padding: 14px 18px 12px; border-radius: 20px; background: var(--f-card); box-shadow: var(--f-shadow); }
.ftgh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ftgh h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ftgh > span:not(.hint) { font-size: 13px; color: var(--f-l2); }
.ftgh .hint { margin-left: auto; }
.ftgts .targets { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ftgts .tgt { flex: 1 1 0; min-width: 88px; max-width: 170px; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 8px 6px; border: 0; border-radius: 14px; background: none; color: var(--f-l1); }
.ftgts .tgt[aria-pressed="true"] { background: var(--f-tintfill); color: var(--f-l1); }
.ftgts .tgt:disabled { opacity: .45; }
.ftgts .tgt .fr { position: relative; width: 60px; height: 60px; }
.ftgts .tgt .fring2 circle { stroke-width: 6.5; }
.ftgts .tgt .fring2 .tr { stroke: var(--f-fill); }
.ftgts .tgt .fring2 .fg { stroke: var(--f-tint); }
.ftgts .tgt .fck { position: absolute; inset: 0; display: grid; place-items: center; color: var(--f-tint); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--fm-spring); }
.ftgts .tgt .fck .fi { width: 22px; height: 22px; stroke-width: 3; }
.ftgts .tgt.closed .fck { opacity: 1; transform: none; }
.ftgts .tgt .fct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-round); font-size: 17px; font-weight: 800; }
.ftgts .tgt b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-round); font-size: 15px; font-weight: 600; }
.ftgts .tgt small { font-size: 12px; font-weight: 400; color: var(--f-l2); font-variant-numeric: tabular-nums; }
.ftgts .tgt.fresh small { font-weight: 600; color: var(--f-orangeink); }
/* every other measure on the card */
.fmeasure { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.fmeasure .dur { border: 0; border-radius: 22px; background: var(--f-card); box-shadow: var(--f-shadow); padding: 22px; }
.fmeasure .btn { border-radius: 999px; }
.fmeasure .btn.big { max-width: 440px; }
.fmeasure .countbtn { position: relative; overflow: hidden; border: 0; border-radius: 22px; background: var(--f-card); box-shadow: var(--f-shadow); }
.fmeasure .steprow2 { border: 0; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); padding: 10px 12px; }
.fmeasure .mini { position: relative; overflow: hidden; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--f-fill); color: var(--f-l1); font-size: 15px; font-weight: 600; }
/* a running break covers the program's card until it ends */
.fbrk { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px; border-radius: 26px; background: var(--f-card); box-shadow: var(--f-shadow); animation: fpin .3s var(--fm-spring); }
.fring { position: relative; flex: none; width: 140px; height: 140px; }
.fring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fring circle { fill: none; stroke-width: 10; }
.fring .tr { stroke: var(--f-orangefill); }
.fring .fg { stroke: var(--f-orange); stroke-linecap: round; stroke-dasharray: 60; transition: stroke-dashoffset .25s linear; }
.fring b { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--f-round); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fbrkt h2 { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.fbrkt p { max-width: 34ch; margin: 4px 0 16px; font-size: 15px; color: var(--f-l2); }
.fbrk .btn.fend { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--f-orange); color: #2B1700; font-size: 16px; font-weight: 700; }
.fbrkbar { padding: 10px 14px; border-radius: 14px; background: var(--f-orangefill); color: var(--f-orangeink); font-weight: 600; }
/* the side, always open: what to watch for, then how to teach it. What to watch for scrolls on its own above how to teach
   it, so what follows a behavior tap never pushes how to teach it out of view. How to teach it gives up its extra height
   first, never its last 190px */
.fside { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px 0; }
.fsidetop { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.fpanel { position: relative; flex: none; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px; }
.fph h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--f-l2); }
.fphlink { padding: 0; border: 0; background: none; color: var(--f-tintink); font-size: 15px; }
.fwatch .bip { border-width: 1.5px; border-radius: 14px; font-size: 15px; }
.fwatch .bip .fi { width: 22px; height: 22px; }
.fwatch .beh { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: hidden; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); }
.fbeh, .flink { position: relative; overflow: hidden; width: 100%; min-height: 52px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center; padding: 9px 16px; border: 0; background: none; color: var(--f-l1); text-align: left; font-size: 17px; }
.fwatch .beh > * + *::after { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--f-sep); }
.fbeh:active, .flink:active { background: var(--f-fill2); }
.fbeh::before { content: attr(data-ini); grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #FF9500; color: #FFFFFF; font-size: 15px; font-weight: 700; }
.fbeh.bh1::before { background: #FF3B30; }
.fbeh.bh2::before { background: #5E5CE6; }
.fbeh.bh3::before { background: #0A84FF; }
.fbeh.bh4::before { background: #AF52DE; }
.fbeh.bh5::before { background: #30B0C7; }
.fbeh.other::before { background: var(--f-l3); }
.fbeh > b { grid-column: 2; grid-row: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.fbeh > small { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--f-l2); }
.fbeh > kbd { grid-column: 3; grid-row: 1 / 3; }
.fbeh > .n { grid-column: 4; grid-row: 1 / 3; min-width: 28px; font-family: var(--f-round); font-size: 26px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.fbeh.timing { background: var(--f-orangefill); }
.fbeh.timing > .n, .fbeh.timing > small { color: var(--f-orangeink); }
.fbeh.timing > .n { font-size: 19px; }
.flink { min-height: 46px; color: var(--f-tintink); }
.flink > .fi { grid-column: 1; justify-self: center; width: 20px; height: 20px; }
.flink > span { grid-column: 2; }
.fwatch > .help { padding: 0 16px; font-size: 13px; }
.fdockhint { display: none; margin: 0; padding: 0 16px; color: var(--f-l2); font-size: 14px; }
/* after a behavior: what did you do, as the plan's acts to tap, then the plan's steps for it */
.fcap .callout { gap: 10px; padding: 14px; border: 0; border-radius: 14px; background: #FFF4F2; box-shadow: inset 0 0 0 1.5px rgba(215, 0, 21, .35); }
.fcap .callout .lead { font-size: 15px; color: #8A0F0F; }
.fcap .callout .row, .fcap .callout .row.acts { gap: 8px; }
.fcap .callout .pillbtn { position: relative; overflow: hidden; min-height: 42px; gap: 8px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--f-card); box-shadow: inset 0 0 0 1px var(--f-sep); color: var(--f-l1); font-size: 15px; font-weight: 600; text-align: left; }
.fcap .callout .pillbtn .n { background: var(--f-l1); }
.fcap .callout .pillbtn[data-act="brk"] { background: var(--f-orangefill); box-shadow: none; color: var(--f-orangeink); }
.fcap .callout .pillbtn[data-act="brk"] .n { background: var(--f-orange); color: #2B1700; }
.fcap .callout > .help { font-size: 13px; }
.fcap .callout .row.cend { justify-content: space-between; }
.fcap .callout .textbtn { font-size: 14px; text-decoration: none; }
.fcap .callout .btn.small { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--f-l1); color: #FFFFFF; }
.fcap .callout .says { display: grid; gap: 6px; padding-top: 10px; border-top: .5px solid rgba(215, 0, 21, .25); }
.fcap .callout .says .eyebrow { font-size: 12px; color: #8A0F0F; }
.fcap .callout .says ol, .fcap .callout .says .now, .fcap .callout .says .unsafe { margin: 0; font-size: 14px; line-height: 1.4; }
.fcap .callout.brkcall { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--f-orangefill); box-shadow: none; }
.fcap .callout.brkcall .lead { color: var(--f-orangeink); }
.fcap .callout.brkcall .help { display: none; }
/* the running break already has its own card where the program was: no second one under Watch for */
.fmode .fwatch > .callout.brkcall { display: none; }
/* while the plan's acts are up, the reward steps aside: none is given during a behavior, and the next answer brings it back */
.fcap:has(.fwatch > .callout:not(.brkcall)) .howcard > .freward { display: none; }
.fcap .askrow { flex-direction: column; align-items: stretch; border-width: 1.5px; border-radius: 14px; }
.fcap .askrow .btn.small { border-radius: 999px; }
.fcap .fsheet .help { color: var(--ink2); }
.fcap .fsheet .textbtn { color: var(--teal); }
.fsabc .abcpanel { border: 0; background: transparent; padding: 0; }
.fsabc .abcrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fsabc .abclab { padding-top: 0; }
.fsabc .abcpanel .btn { border-radius: 999px; }
/* how to teach it: in view the whole time, scrolling inside itself when the program has a lot to say. The reward is on top */
.fside > .howcard { flex: 0 1000 auto; min-height: 190px; overflow: auto; overscroll-behavior: contain; scroll-margin-top: 0; gap: 0; padding: 0 0 12px; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); scrollbar-width: thin; }
.howcard > .fph { position: sticky; top: 0; z-index: 1; align-items: center; padding: 12px 16px 10px; background: var(--f-card); }
.howcard .freward { display: flex; gap: 12px; padding: 12px 16px; background: var(--f-tintfill); }
.howcard .fric { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--f-tint); color: #FFFFFF; }
.howcard .fric .fi { width: 17px; height: 17px; }
.howcard .frl { display: block; font-size: 13px; font-weight: 600; color: var(--f-tintink); }
.howcard .freward .fline { margin: 2px 0 0; font-size: 15.5px; font-weight: 600; color: var(--f-l1); }
.howcard .fcue { margin: 2px 0 0; font-size: 15.5px; line-height: 1.4; }
.howcard .freward.full { background: var(--f-orangefill); }
.howcard .freward.full .frl { color: var(--f-orangeink); }
.howcard .freward.full .fric { background: var(--f-orange); }
.howcard .freward.off { background: var(--f-fill2); }
.howcard .freward.off .fric { background: var(--f-l3); }
.howcard .ftokr { position: relative; flex: none; width: 44px; height: 44px; }
.howcard .ftokr .fring2 circle { stroke-width: 6; }
.howcard .ftokr b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-round); font-size: 16px; font-weight: 800; }
.howcard .freward.full .ftokr .fg { stroke: var(--f-orange); }
.howcard .tabpanel { gap: 0; padding: 0; }
.howcard .tabpanel > h3 { display: none; }
.howcard .howgrid { display: block; margin: 0; font-size: 15.5px; line-height: 1.4; }
.howcard .howgrid dt { position: relative; padding: 11px 16px 0; font-size: 13px; font-weight: 600; color: var(--f-l2); }
.howcard .howgrid dt::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--f-sep); }
.howcard .howgrid dd { margin: 2px 0 0; padding: 0 16px 11px; color: var(--f-l1); }
/* Say and Have ready are the program card's own; How to teach it shows them too while the card is scrolled past its Say
   (version 26c) */
.fcap:not(.fsayout) .howcard .fdup { display: none; }
.howcard .byline { padding: 8px 16px 0; font-size: 12px; color: var(--f-l2); }
/* this session so far: the glass bar at the foot of the screen, with no tap, and the whole of it just below. Programs not
   run yet pick with a tap; the button goes down to the whole of it and back up. The whole of it fills a screen, so the
   button brings it to the top however little the session holds so far. A toast shows above the bar, not over it */
.fhour { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--f-bg); }
.fhbar { position: relative; box-sizing: border-box; width: 100%; height: var(--fh-bar); display: flex; align-items: stretch; gap: 16px; padding: 8px 20px 6px; color: #F5F7F6; background: radial-gradient(70% 220% at 18% 0%, #12352F 0%, #081A17 55%, #030807 100%); box-shadow: 0 -12px 32px -14px rgba(3, 20, 17, .5); }
.fhbar:has(.fhc.off) { background: radial-gradient(70% 220% at 18% 0%, #3A2208 0%, #1A1006 55%, #070402 100%); }
.fhbar:has(.fhc.brk), .fhbar:has(.fhc.new) { background: radial-gradient(70% 220% at 18% 0%, #2A2A2E 0%, #151517 55%, #0A0A0B 100%); }
.fplan { flex: none; align-self: center; display: flex; align-items: center; gap: 10px; padding-right: 4px; }
.fplan > .fpr { width: 38px; height: 38px; }
.fplan .fring2 circle { stroke-width: 7; }
.fplan .fring2 .tr { stroke: rgba(255, 255, 255, .14); }
.fhnow { flex: 1 1 auto; min-width: 0; display: flex; }
.fsf { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 0 20px; border-left: .5px solid rgba(255, 255, 255, .12); line-height: 1.2; }
.fplan > .fsf { padding: 0; border: 0; }
.fsf > span:first-child { font-size: 12px; color: rgba(245, 247, 246, .6); white-space: nowrap; }
.fsf b { font-family: var(--f-round); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the hour, drawn (Justin, Oct 29: "Climb is dope"): a dark panel like a Live Activity, the hour's word and its reason
   over the learner's climb. The word, the now line and the panel take the hour's color: green while On track, orange
   when Off track, grey on a break, a pause or before the first entry. Answer colors: on own green, help blue, not red */
.fhc { --pad: 26px; --lab: 104px; --hue: #4BE3B1; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; container-type: inline-size; }
.fhc.off { --hue: #FF9F0A; }
.fhc.brk, .fhc.new { --hue: #AEAEB2; }
.fhs { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-width: 0; height: 28px; margin-bottom: 4px; padding-right: 214px; }
.fhs-w { flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--f-round); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--hue); white-space: nowrap; }
.fhc.off .fhs-w { color: #FFB340; }
.fhc.brk .fhs-w, .fhc.new .fhs-w { color: #F5F7F6; }
.fhs-i { flex: none; width: 22px; height: 22px; filter: drop-shadow(0 0 8px var(--hue)); }
.fhs-i circle { fill: var(--hue); }
.fhs-i path { fill: none; stroke: #04120F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fhs-y { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.2; color: rgba(245, 247, 246, .6); white-space: nowrap; text-overflow: ellipsis; }
.fhs-y > span + span::before { content: '\00B7'; margin: 0 7px; color: rgba(245, 247, 246, .3); font-weight: 400; }
.fhs-y > span:first-child { font-weight: 600; color: #F5F7F6; }
.fhs-y > span.r { font-weight: 700; color: #FFC266; }
.fhs-n { flex: none; display: flex; align-items: baseline; gap: 5px; font-size: 13px; color: rgba(245, 247, 246, .6); white-space: nowrap; }
.fhs-n > b { font-family: var(--f-round); font-size: 21px; font-weight: 800; color: #F5F7F6; font-variant-numeric: tabular-nums; }
.fhs-left { flex: none; padding-left: 6px; font-family: var(--f-round); font-size: 17px; font-weight: 800; color: #F5F7F6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fhs-left.r { color: #FFC266; }
.fhc-labs { grid-column: 1; grid-row: 2; position: relative; height: var(--fh-plot); }
.fhc-lab { position: absolute; right: 14px; transform: translateY(-50%); font-size: 11px; line-height: 1; color: rgba(245, 247, 246, .5); white-space: nowrap; }
.fhc-lab.own { font-size: 13px; font-weight: 700; color: #3EE6A8; }
.fhc-lab.not { color: rgba(255, 107, 129, .85); }
.fhc-lab.band { display: none; }
.fhc-plot { grid-column: 2; grid-row: 2; position: relative; height: var(--fh-plot); }
.fhc-plot > i, .fhc-plot > span, .fhc-plot > svg { position: absolute; font-style: normal; }
.fhc-tk { top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .05); }
.fhc-brk { top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; background: rgba(255, 255, 255, .07); }
.fhc-brk.nt { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 6px); }
.fhc-brk > span { margin-bottom: 3px; font-size: 10.5px; font-weight: 600; color: rgba(245, 247, 246, .45); }
.fhc-gap { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 159, 10, .1); }
.fhc-gap.now { background: rgba(255, 159, 10, .18); }
.fhc-gap > span { display: flex; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.2; color: #FFB340; white-space: nowrap; }
.fhc-gap > span > b::before { content: '\00B7'; margin-right: 5px; font-weight: 400; }
.fhc-nb { left: -8px; right: 0; top: 70%; bottom: 0; border-radius: 10px; background: rgba(255, 107, 129, .06); }
.fhc-own { left: 0; right: var(--pad); height: 1px; margin-top: -.5px; background: linear-gradient(90deg, rgba(62, 230, 168, .28), rgba(62, 230, 168, .1)); }
.fhc-svg, .fhc-glow { left: 0; top: 0; width: calc(100% - var(--pad)); height: 100%; overflow: visible; }
.fhc-glow { filter: blur(6px); opacity: .7; }
.fhc-dot { z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #06110F, 0 0 8px var(--c); }
.fhc-oth { z-index: 1; bottom: 0; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--c); opacity: .8; }
.fhc-spark { z-index: 3; width: 20px; height: 20px; margin: -10px 0 0 -10px; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(62, 230, 168, .6)); }
.fhc-spark > b { display: block; width: 100%; height: 100%; background: #FFFFFF; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.fhc-sl { z-index: 3; top: 1px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; line-height: 1.2; color: #F5F7F6; white-space: nowrap; }
.fhc-sl > em { font-style: normal; font-weight: 600; color: #3EE6A8; }
.fhc-beh { z-index: 1; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #FF453A; box-shadow: 0 0 10px 1px rgba(255, 69, 58, .6); }
.fhc-bl { z-index: 3; top: 1px; transform: translateX(calc(-100% - 6px)); font-size: 11.5px; font-weight: 700; line-height: 1.2; color: #FF7A70; white-space: nowrap; }
.fhc-now { z-index: 2; top: -6px; bottom: -2px; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: var(--hue); box-shadow: 0 0 12px 1px var(--hue); }
.fhc-end { z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .5); }
.fhc-axis { grid-column: 2; grid-row: 3; position: relative; height: 18px; }
.fhc-ax { position: absolute; top: 5px; transform: translateX(-50%); font-size: 11.5px; line-height: 1; color: rgba(245, 247, 246, .4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fhc-ax.a0 { left: 0; transform: none; }
.fhc-ax.now { transform: translateX(calc(-100% + 10px)); font-weight: 700; color: #F5F7F6; }
.fhc-ax.now.st { transform: none; }
/* a narrow graph keeps only its start and now, and stacks the words of 10 minutes with no entries */
@container (max-width: 560px) { .fhc-ax.mid { display: none; } .fhc-gap > span { flex-direction: column; align-items: center; gap: 0; } .fhc-gap > span > b::before { content: none; } }
/* narrower screens drop the learner's count, then the reasons that are not why the hour is Off track */
@media (max-width: 1240px) and (min-width: 761px) { .fhs-n { display: none; } }
@media (max-width: 1180px) and (min-width: 761px) { .fhs-y > span:nth-child(3):not(.r) { display: none; } }
@media (max-width: 1000px) and (min-width: 761px) { .fhs { gap: 10px; } .fhs-w { font-size: 22px; } .fhs-y { font-size: 13px; } .fhs-left { font-size: 15px; } .fhs-y > span:nth-child(2):not(.r) { display: none; } }
.fhmore { position: absolute; top: 6px; right: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #F5F7F6; font-size: 15px; font-weight: 600; white-space: nowrap; }
.fhmore::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--fm-ease); }
.fhour.below .fhmore::after { transform: translateY(2px) rotate(-135deg); }
.fhour .fhup, .fhour.below .fhdn { display: none; }
.fhour.below .fhup { display: inline; }
body:has(#app > .fmode) > .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.fhbody { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px 20px; align-items: start; }
.fhline { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--f-l2); }
.fhline b { color: var(--f-orangeink); }
.fhour .timeline { grid-column: 1; overflow-x: auto; padding: 8px 6px 0; border-radius: 20px; background: var(--f-card); box-shadow: var(--f-shadow); scrollbar-width: thin; }
.fhplan { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 8px; }
.fhplan > h3.fk, .fhour .recent h3.fk { margin: 0; padding: 0 16px; font-size: 13px; }
.fhplan .plist { gap: 0; overflow: hidden; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); }
.fhplan .prow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 10px 16px; border: 0; border-radius: 0; background: none; color: var(--f-l1); }
.fhplan .prow + .prow::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--f-sep); }
.fhplan .prow[aria-current="true"] { padding: 10px 16px; border: 0; background: var(--f-tintfill); }
.fhplan .prow .nm { grid-column: 1; font-size: 16px; font-weight: 600; }
.fhplan .prow .st { grid-column: 1; font-size: 13px; color: var(--f-l2); }
.fhplan .prow > .fpr { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; }
.fhplan .btn.ffwd { min-height: 40px; border: 1.5px dashed var(--amber); border-radius: 999px; background: transparent; color: var(--amberD); font-size: 13px; }
.fhour .recent { grid-column: 1; display: flex; flex-direction: column; gap: 8px; }
.fhour .frech { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 16px; }
.fhour .frech .textbtn { font-size: 15px; text-decoration: none; }
.fhour .recent ol { margin: 0; gap: 0; overflow: hidden; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); }
.fhour .recent li { position: relative; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 9px 16px; font-size: 15px; line-height: 1.3; }
.fhour .recent li + li::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--f-sep); }
.fhour .recent li.beh { color: #8A0F0F; font-weight: 600; }
.fhour .recent .t { font-family: var(--f-round); font-size: 14px; color: var(--f-l2); }
.fhour .recent .fline { padding: 0 16px; font-size: 14px; }
.fhour .v25-dev { background: var(--amberT); color: var(--amberD); }
/* the behavior plan and every entry, in sheets from the right; closed, a sheet sits past its own shadow so none falls on the screen */
.fscrim { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .3); }
.fsheet { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(580px, 100%); overflow: auto; overscroll-behavior: contain; padding: 64px 18px 28px; border-radius: 14px 0 0 14px; background: var(--f-bg); color: var(--ink); box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .35); transform: translateX(calc(100% + 140px)); transition: transform .38s var(--fm-ease); }
.fsheet.open { transform: none; }
.fsheet .fsx { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--f-fill); color: var(--f-l1); font-size: 22px; line-height: 1; }
.fsheet .card { margin: 0; border: 0; border-radius: 14px; box-shadow: var(--f-shadow); }
.flist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.flog .flist { padding: 14px 18px 18px; margin: 0; }
.flog .flist li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--f-fill2); font-size: 15px; }
.flog .flist li.beh { color: #8A0F0F; font-weight: 600; }
.flog .flist .t { font-family: var(--mono); font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* motion after a tap: a ripple where the finger was, the ring filling and bumping, the next target sliding in, sparks around
   a ring that closes, and a burst when the tokens are full, when today's plan has all its tries and when the note is signed */
.frip { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: frip .6s ease-out forwards; }
@keyframes frip { to { transform: translate(-50%, -50%) scale(14); opacity: 0; } }
.fbig.fbump, .ftokr.fbump, .fr.fr-spark { animation: fbig .5s var(--fm-spring); }
@keyframes fbig { 40% { transform: scale(1.06); } }
.fnow.fslide > .fbig, .fnow.fslide > .fsay { animation: fslide .42s var(--fm-ease); }
@keyframes fslide { from { opacity: 0; transform: translateX(26px); } }
.fspark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; animation: fspark .7s var(--fm-ease) forwards; }
@keyframes fspark { to { transform: translate(var(--sx), var(--sy)) scale(.3); opacity: 0; } }
.fbeh .n.fbump { animation: fbump .5s var(--fm-spring); }
@keyframes fbump { 30% { transform: scale(1.4); color: var(--f-orange); } }
.fsheet.fin { animation: fsheetin .38s var(--fm-ease) both; }
@keyframes fsheetin { from { transform: translateX(calc(100% + 140px)); } }
.fburst { position: fixed; z-index: 80; width: 0; height: 0; pointer-events: none; }
.fburst i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .fmode *, .fmode *::before, .fmode *::after, .fhour *, .fburst i { animation: none !important; transition: none !important; }
  .fpad .ans:active { transform: none; }
}
/* smaller laptops: the saved line keeps its check and its time goes, the side narrows and the ring gets smaller */
@media (max-width: 1280px) {
  .fhead .saved[data-v25-save="server"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fhead .saved[data-v25-save="server"] { justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--f-tintfill); }
}
@media (max-width: 1180px) {
  .fmode .capcard.fcap { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 14px; }
  .fprog { padding: 16px 6px 16px 18px; }
  .fside { padding: 16px 16px 16px 0; }
  .fnow { --ringsz: 160px; gap: 22px; padding: 18px 22px 18px 18px; }
  .fsay .sd { font-size: clamp(22px, 2.6vw, 34px); }
  .fpad .ladder .ans small { display: none; }
  .fpad .ans { font-size: 16px; }
  .fpad .ans.own { font-size: 24px; }
  .fsf { padding: 0 14px; }
  .fplan > .fsf > span:first-child { display: none; }
  .fhead .academy-entry > button.academy-help-button { gap: 0; padding: 2px; font-size: 0; }
}
@media (max-width: 1100px) {
  .fhead .who span { display: none; }
}
@media (max-width: 1000px) {
  .fmode .capcard.fcap { grid-template-columns: minmax(0, 1fr) 270px; }
  .fnow { --ringsz: 128px; gap: 18px; }
  .fnext { margin-top: 8px; }
  .fsay .fready { font-size: 15px; }
  .fpof { display: none; }
  .fhead .fbrkbtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fhead .fbrkbtn { width: 36px; padding: 0; }
  .fhead.rhead { column-gap: 8px; }
  .fhead .fleft, .fhead .ftools { gap: 6px; }
  .fhead .pillbtn { padding: 0 10px; }
  .fhead .fclock .clock { padding: 6px 10px; }
  .ftgts .tgt { min-width: 70px; }
  .ftgts .tgt .fr { width: 48px; height: 48px; }
}
/* The hour has its own compact row. Short screens give up surplus ring and pad space before any target is clipped. */
@media (max-height: 860px) and (min-width: 761px) {
  .fprog { gap: 10px; padding-top: 12px; }
  .fside { gap: 14px; padding-top: 12px; }
  .fnow { --ringsz: 140px; padding-top: 14px; padding-bottom: 14px; }
  .fprog .answers.fpad { flex-basis: 128px; min-height: 112px; max-height: 144px; }
  .fwork { gap: 10px; }
  .fpad .ans.own { font-size: 24px; }
  .fpad .miss .ans { min-height: 46px; }
  .ftgts { padding: 10px 14px 8px; }
  .ftgts .tgt { gap: 3px; padding: 4px; }
  .ftgts .tgt .fr { width: 44px; height: 44px; }
  .fbeh { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .fmode, .fhour { --fh-plot: 72px; }
  body:has(#app > .fmode) > .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}
@media (max-height: 740px) and (min-width: 761px) {
  .fmode, .fhour { --fh-plot: 56px; --fh-bar: calc(var(--fh-plot) + 60px); }
  .fhbar { padding-top: 6px; padding-bottom: 4px; }
  .fhs-w { font-size: 22px; }
  .fhc-lab { font-size: 10.5px; }
  .fhc-lab.step { display: none; }
  .fhc-lab.band { display: block; }
  .fhc-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  body:has(#app > .fmode) > .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .fnow { --ringsz: 100px; padding-top: 10px; padding-bottom: 10px; }
  .fsay .sd { font-size: clamp(20px, 2.3vw, 28px); }
  .fprog .btn.fnextp { min-height: 32px; }
  .fpad .ladder .ans small { display: none; }
  .fdtext h2 { font-size: 22px; }
  .fdtext p { margin-bottom: 10px; }
  .fdone .fbig { --ringsz: 88px; }
}
/* Very short landscape windows keep bounded panes instead of pushing the reserved hour below the viewport. */
@media (max-height: 520px) and (min-width: 761px) {
  .fmode { min-height: 0; }
  .fside { overflow: auto; }
  .fprog { display: flex; flex-direction: column; overflow: auto; }
  .fwork, .fcontrols { flex-shrink: 0; overflow: visible; max-height: none; }
  .fprog > .ftgts { flex-shrink: 0; }
  .fprog .answers.fpad { flex-basis: 96px; min-height: 96px; max-height: 96px; }
}
/* phones: one column in page order, the program first. The behaviors dock at the bottom of the screen, one tap away while
   the answers are in view, and a toast sits above them */
@media (max-width: 760px) {
  .fmode { height: auto; min-height: 100vh; min-height: 100dvh; }
  .fmode, .fhour { --fh-peek: 0px; }
  .fhead.rhead { position: sticky; top: 0; padding: 8px 12px; gap: 8px; }
  .fhead .fleft, .fhead .ftools { gap: 6px; }
  .fhead .ftools { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 8px; }
  .fhead .ftools > .v25c-pill { order: 10; }
  .fhead .fback span, .fhead .saved[data-v25-save="server"], .fhead .fbrkbtn > span { display: none; }
  .fhead .who { flex: 1 1 0; }
  .fhead .who span { display: none; }
  .fhead .fclock .clock { padding: 6px 10px; font-size: 15px; }
  .fmode > .rgrid { display: block; padding: 0 0 20px; }
  .fmode .capcard.fcap { display: flex; flex-direction: column; gap: 16px; }
  .fprog, .fsidetop, .fside > .howcard { overflow: visible; min-height: 0; }
  .fprog { display: flex; flex-direction: column; padding: 14px 14px 0; }
  .fwork, .fcontrols { overflow: visible; max-height: none; }
  .fside { padding: 0 14px; }
  .fpof { display: none; }
  .fnow { --ringsz: 150px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 20px; text-align: center; }
  .fnext { justify-content: center; }
  .fdone { flex-direction: column; justify-content: center; gap: 12px; padding: 18px; text-align: center; }
  .fdone .fbig { --ringsz: 72px; }
  .fdtext .frow { justify-content: center; }
  .fprog .answers.fpad, .fprog .answers.fpad.nohelp { flex: none; min-height: 0; max-height: none; grid-template-columns: minmax(0, 1fr); }
  .fpad .fhelp, .fpad.nohelp .fhelp { grid-template-rows: none; grid-auto-rows: auto; }
  .fpad .ladder { grid-auto-rows: auto; }
  .fpad .ans.own { min-height: 90px; }
  .fpad .ladder, .fpad .ladder.many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .fpad .ladder .ans { min-height: 56px; border-radius: 14px; box-shadow: var(--f-shadow); }
  .fpad .ladder .ans small { display: none; }
  .fwatch .beh { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: var(--f-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--f-sep); }
  .fwatch .beh > * + *::after { display: none; }
  .fbeh, .flink { flex: 0 0 auto; width: auto; min-height: 48px; grid-template-columns: 30px auto auto; padding: 6px 12px; border-radius: 14px; background: var(--f-card); box-shadow: var(--f-shadow); }
  .fbeh { min-width: 150px; }
  .fbeh > small, .fbeh > kbd { display: none; }
  .fbeh > .n { grid-column: 3; font-size: 22px; }
  .fwatch:not(:has(> .callout, > .askrow)) > .fdockhint { display: block; }
  body:has(#app > .fmode) > .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
  .fhbar { height: auto; flex-wrap: wrap; gap: 12px 16px; padding: 14px 14px 12px; }
  .fhnow { order: 2; flex: 1 1 100%; }
  .fplan { flex: 1 1 100%; }
  .fplan > .fsf > span:first-child { display: inline; }
  .fhc { flex: 1 1 100%; --lab: 86px; --pad: 22px; --fh-plot: 160px; }
  .fhs { height: auto; flex-wrap: wrap; gap: 6px 12px; padding-right: 0; }
  .fhs-left { order: 2; margin-left: auto; padding: 0; }
  .fhs-y { order: 3; flex: 1 1 100%; white-space: normal; }
  .fhs-n { order: 4; flex: 1 1 100%; flex-wrap: wrap; }
  .fhc-lab { right: 10px; font-size: 10.5px; }
  .fhc-lab.own { font-size: 12px; }
  .fhmore { position: static; order: 3; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .fhbody { grid-template-columns: minmax(0, 1fr); padding: 4px 14px 144px; }
  .fhour .timeline, .fhplan, .fhour .recent { grid-column: 1; grid-row: auto; }
  /* The main pane scrolls in its own viewport. The hour, transient status and behavior row own separate space. */
  .fmode { height: calc(100vh - var(--session-top, 0px) - var(--session-hour-row, 248px)); height: calc(100dvh - var(--session-top, 0px) - var(--session-hour-row, 248px)); min-height: 240px; }
  .fmode > .rgrid { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .fhbar { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto var(--session-status-row, 0px) 44px; gap: 4px 8px; height: auto; padding: 8px 12px calc(78px + env(safe-area-inset-bottom, 0px)); }
  .fhbar::after { content: ''; grid-column: 1 / -1; grid-row: 2; height: var(--session-status-row, 0px); }
  .fplan { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: center; gap: 3px; width: 56px; padding: 0; }
  .fplan > .fpr { width: 26px; height: 26px; }
  .fplan > .fsf { align-items: center; }
  .fplan > .fsf > span:first-child { display: none; }
  .fplan .fsf b { font-size: 11px; }
  .fhnow { grid-column: 2; grid-row: 1; order: 0; width: 100%; }
  .fhc { --lab: 56px; --pad: 14px; --fh-plot: 40px; }
  .fhs { height: auto; gap: 2px 6px; margin-bottom: 4px; }
  .fhs-w { font-size: 16px; }
  .fhs-i { width: 18px; height: 18px; }
  .fhs-left { order: 1; font-size: 12px; }
  .fhs-y { order: 2; flex: 1 1 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  .fhs-n { order: 3; flex: 1 1 100%; font-size: 11px; }
  .fhs-n > b { font-size: 14px; }
  .fhc-lab.step { display: none; }
  .fhc-lab.band { display: block; font-size: 10px; }
  .fhc-lab.own { font-size: 10px; }
  .fhc-axis { height: 14px; }
  .fhc-ax { top: 3px; font-size: 10px; }
  .fhmore { grid-column: 1 / -1; grid-row: 3; order: 0; min-height: 44px; height: 44px; font-size: 14px; }
  body:has(#app > .fmode) > .toast { top: var(--session-status-top, 100dvh); bottom: auto; }
}
/* the RBT's note (version 26b): the session at a glance on a dark card, then the record that is signed, then slide to sign.
   The record's own markup stays as it is: its PDF is made from it */
.notegrid > .nhero { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px; padding: 30px 34px; border-radius: 28px; color: #FFFFFF; background: radial-gradient(120% 160% at 100% 0%, rgba(79, 209, 181, .24), transparent 55%), linear-gradient(135deg, #052520 0%, #0A3832 55%, #11514A 100%); box-shadow: 0 26px 50px -30px rgba(5, 37, 32, .8); }
.nhero .nhwho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nhero .eyebrow { margin: 0; color: #9BE8D6; letter-spacing: .12em; }
.nhero h2 { margin: 2px 0 4px; font-family: var(--serif); font-size: clamp(36px, 4.2vw, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; color: #FFFFFF; }
.nhero p { margin: 0; color: #CFE3DD; font-size: 17px; line-height: 1.45; }
.nhero .nhstate { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 14px; font-weight: 800; color: #FFE1A0; }
.nhero .nhstate i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #F2B544; box-shadow: 0 0 0 4px rgba(242, 181, 68, .2); }
.nhero.signed .nhstate { color: #A7EEDC; }
.nhero.signed .nhstate i { background: #4FD1B5; box-shadow: 0 0 0 4px rgba(79, 209, 181, .22); }
.nhstats { flex: none; display: flex; gap: 12px; }
.nstat { min-width: 124px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 20px 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); }
.nstat b { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1; color: #FFFFFF; }
.nstat span { font-size: 14px; font-weight: 700; color: #CFE3DD; }
/* the record, calmer and roomier on the RBT's own screen */
.nhero ~ .notecard { gap: 16px; padding: 26px 30px; border-radius: 26px; box-shadow: 0 20px 44px -34px rgba(16, 32, 28, .45); }
.nhero ~ .notecard h3 { margin: 16px 0 0; font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.005em; }
.nhero ~ .notecard .behlist { list-style: none; padding: 0; gap: 8px; }
.nhero ~ .notecard .behlist li { padding: 12px 16px; border-radius: 16px; background: var(--faint); }
.nhero ~ .notecard textarea.inp { padding: 14px 16px; border-radius: 16px; font-size: 16px; line-height: 1.5; }
.nhero ~ .notecard .sigs:has(> .rbtsig.open) > .sig { grid-column: 1 / -1; }
.nhero ~ .notecard .sigs .rbtsig.open { padding: 18px; border-radius: 20px; border-color: rgba(14, 107, 97, .35); background: var(--tealW); }
.nhero ~ .auditcard { border-radius: 24px; }
/* slide to sign: drag the knob to the end, or tap it, to open the signature. It waits while the audit check has steps left */
.fsign { --fs: 0; position: relative; height: 68px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, #0A3832, #0E6B61); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .28); user-select: none; -webkit-user-select: none; }
.fsign::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: calc(56px + var(--fs) * (100% - 68px)); border-radius: 999px; background: linear-gradient(90deg, #2FB596, #4FD1B5); transition: width .42s cubic-bezier(.34, 1.4, .64, 1); }
.fsign:has(> .fsknob.drag)::before { transition: none; }
.fsign .fstxt { position: relative; padding: 0 24px 0 72px; font-size: 17px; font-weight: 800; letter-spacing: .02em; color: #FFFFFF; opacity: calc(1 - var(--fs) * 1.6); }
.fsign .fstxt.on { background: linear-gradient(100deg, rgba(255, 255, 255, .5) 30%, #FFFFFF 50%, rgba(255, 255, 255, .5) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fsshine 2.6s linear infinite; }
@keyframes fsshine { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.fsknob { position: absolute; z-index: 1; left: 6px; top: 6px; bottom: 6px; width: 56px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: #FFFFFF; color: #0A4F48; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45); cursor: grab; touch-action: none; transition: transform .42s cubic-bezier(.34, 1.4, .64, 1); }
.fsknob.drag { cursor: grabbing; transition: none; }
.fsknob svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fsknob:focus-visible { outline: 3px solid #F2B544; outline-offset: 3px; }
.fsign .fstxt.offt { display: none; }
.fsign:has(> .fsknob:disabled) { background: var(--grid); box-shadow: inset 0 1px 4px rgba(16, 32, 28, .12); }
.fsign:has(> .fsknob:disabled)::before { display: none; }
.fsign:has(> .fsknob:disabled) .fstxt.on { display: none; }
.fsign:has(> .fsknob:disabled) .fstxt.offt { display: block; color: var(--ink2); }
.fsknob:disabled { color: var(--line2); box-shadow: 0 2px 6px rgba(16, 32, 28, .12); cursor: not-allowed; }
.fsign.done { --fs: 1; }
.fsign.done .fstxt { opacity: 1; padding: 0 72px 0 24px; }
.fsign.done .fsknob { left: auto; right: 6px; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .fsign .fstxt.on { animation: none; background: none; color: #FFFFFF; }
  .fsign::before, .fsknob { transition: none; }
}
@media (max-width: 720px) {
  .notegrid > .nhero { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 20px; border-radius: 24px; }
  .nhstats .nstat { flex: 1; min-width: 0; }
  .nhero ~ .notecard { padding: 18px 16px; border-radius: 22px; }
}
/* Get ready (version 26b): four cards to tap through before a session, like a story. Tap the right of a card, swipe or
   press the arrow keys to move on. On a phone the cards fill the screen */
html:has(.rstory), body:has(.rstory) { overflow: hidden; }
.rstory { --rs-ease: cubic-bezier(.2, .8, .2, 1); --rs-spring: cubic-bezier(.34, 1.5, .64, 1); position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; background: rgba(3, 18, 16, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.rstory.rin { animation: rsfade .3s var(--rs-ease) both; }
.rstory.rin .rscard { animation: rsrise .5s var(--rs-spring) both; }
@keyframes rsfade { from { opacity: 0; } }
@keyframes rsrise { from { transform: translateY(22px) scale(.96); } }
.rstory :focus-visible { outline: 3px solid #F2B544; outline-offset: 3px; }
.rscard { position: relative; width: min(460px, calc(100vw - 32px)); height: min(800px, calc(100vh - 40px)); height: min(800px, calc(100dvh - 40px)); overflow: hidden; border-radius: 34px; color: #FFFFFF; background: #0A3A34; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08); }
/* the progress bars and the header stay put while the cards slide under them; on the warm card they turn dark */
.rsbars { position: absolute; z-index: 5; top: 14px; left: 18px; right: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rsbars i { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .28); transition: background .4s; }
.rsbars i::after { content: ''; position: absolute; inset: 0; background: #FFFFFF; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--rs-ease), background .4s; }
.rsbars i.done::after { transform: scaleX(1); }
.rshead { position: absolute; z-index: 5; top: 28px; left: 18px; right: 14px; display: flex; align-items: center; gap: 10px; transition: color .4s; }
.rshead .rsav { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #FFFFFF; background: var(--lh); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); transition: box-shadow .4s; }
.rshead b { flex: none; font-size: 15px; }
.rshead > span:not(.rsav) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.rshead .rsx { flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); color: inherit; font-size: 26px; line-height: 1; cursor: pointer; transition: background .4s; }
.rshead .rsx:hover { background: rgba(0, 0, 0, .32); }
.rscard[data-p="1"] .rshead { color: #2A1405; }
.rscard[data-p="1"] .rshead .rsx { background: rgba(42, 20, 5, .1); }
.rscard[data-p="1"] .rshead .rsav { box-shadow: 0 0 0 2px rgba(42, 20, 5, .35); }
.rscard[data-p="1"] .rsbars i { background: rgba(42, 20, 5, .18); }
.rscard[data-p="1"] .rsbars i::after { background: #2A1405; }
.rstrack { display: flex; height: 100%; touch-action: pan-y; transition: transform .55s var(--rs-ease); }
.rspage { position: relative; flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; padding-top: 86px; overflow: hidden; }
/* a card longer than the screen scrolls on its own, and fades at the bottom so more below is plain */
.rsbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 26px 26px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.rskick { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #DDF2EC; }
.rspage h2 { margin: 6px 0 0; font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1.04; letter-spacing: -.01em; color: inherit; }
.rslede { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: #E4F1ED; }
.rsnext { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 26px 24px; }
.rsnext > span { font-size: 14px; font-weight: 700; color: #DDF2EC; }
.rsnext button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; white-space: nowrap; color: #10201C; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); cursor: pointer; transition: transform .15s; }
.rsnext button:hover { transform: translateY(-2px); }
.rsnext .rsback { flex: none; width: 50px; padding: 0 0 3px; font-size: 26px; color: #FFFFFF; background: rgba(255, 255, 255, .16); box-shadow: none; }
/* card 1: hello */
.rspage.rs-hello { background: radial-gradient(520px 420px at 80% 8%, rgba(155, 232, 214, .35), transparent 60%), linear-gradient(165deg, #0A4A42 0%, #0E6B61 52%, #1E7666 100%); }
.rsmid { margin: auto 0; display: flex; flex-direction: column; }
.rsbig { flex: none; margin: 0 auto; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 60px; font-weight: 600; color: #FFFFFF; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--lh) 55%, #FFFFFF), var(--lh)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), 0 0 0 14px rgba(255, 255, 255, .07), 0 30px 50px -20px rgba(0, 0, 0, .6); animation: rsfloat 5s ease-in-out infinite; }
@keyframes rsfloat { 50% { transform: translateY(-6px); } }
.rs-hello h2 { margin-top: 20px; text-align: center; }
.rswhen { margin: 8px 0 0; text-align: center; font-size: 17px; line-height: 1.4; color: #E4F3EE; }
.rsfacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.rsfacts span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 99px; font-size: 14px; font-weight: 800; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.rsfacts .rsvis { color: #0B2B26; background: #BFE9DD; border-color: transparent; }
.rsfacts .rsvis i { width: 8px; height: 8px; border-radius: 50%; background: #0B2B26; }
.rsnew { margin-top: 22px; padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.rsnew > b { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #DDF2EC; }
.rsnew p { margin: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.35; }
.rsnew p + p { margin-top: 12px; }
.rsnew p > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; color: #0A4F48; background: rgba(255, 255, 255, .92); }
.rsnew small { display: block; margin-top: 3px; font-size: 13px; color: #D2EBE4; }
/* card 2: rewards */
.rspage.rs-love { color: #2A1405; background: radial-gradient(480px 380px at 15% 0%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(165deg, #FCD98B 0%, #F6B26F 48%, #EE8F6E 100%); }
.rs-love .rskick { color: #5A3412; }
.rs-love .rslede { color: #4A2A10; }
.rs-love .rsnext > span { color: #4A2A10; }
.rs-love .rsnext .rsback { color: #2A1405; background: rgba(42, 20, 5, .12); }
.rs-love .rsbody { scrollbar-color: rgba(42, 20, 5, .3) transparent; }
.rsbody:focus { outline: none; }
.rstok { margin-top: 18px; display: grid; gap: 4px; padding: 16px 18px 15px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 0 0 3px #2A1405, 0 18px 34px -22px rgba(120, 40, 0, .7); }
.rscoins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rscoins i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, #F2B544 60%, #C98A12); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 4px 8px -4px rgba(120, 60, 0, .6); }
.rstok b { font-size: 18px; line-height: 1.25; }
.rstok small { font-size: 14px; font-weight: 600; line-height: 1.35; color: #6A3D1B; }
.rstag { justify-self: start; margin-top: 6px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FCD98B; background: #2A1405; }
.rsgrid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsgrid li { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .84); box-shadow: 0 16px 30px -22px rgba(120, 40, 0, .7); }
.rsgrid li.off { background: rgba(255, 255, 255, .55); box-shadow: none; }
.rsic { width: 36px; height: 36px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 12px; color: #6A3A05; background: #FCD98B; }
.rsgrid li.off .rsic { color: #6A4A30; background: rgba(42, 20, 5, .08); }
.rsic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rsgrid b { font-size: 15px; line-height: 1.25; }
.rsgrid small { font-size: 13px; font-weight: 600; line-height: 1.35; color: #5E3517; }
/* card 3: watch for */
.rspage.rs-watch { background: radial-gradient(520px 420px at 85% 0%, rgba(180, 170, 255, .35), transparent 60%), linear-gradient(165deg, #252A63 0%, #3A3F8A 55%, #5458A8 100%); }
.rs-watch .rskick { color: #DCDDFA; }
.rs-watch .rslede, .rs-watch .rsnext > span { color: #E6E7FA; }
.rsbefore { margin-top: 16px; padding: 12px 16px; border-radius: 18px; color: #23285E; background: rgba(255, 255, 255, .94); }
.rsbefore b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #3F4494; }
.rsbefore p { margin: 3px 0 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.rswc { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.rswt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rswt b { font-size: 19px; }
.rswt span { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .18); }
.rslooks { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: #EEEFFC; }
.rsnot { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: #DADBF7; }
.rslast { margin: 8px 0 0; font-size: 13px; font-weight: 800; color: #DADBF7; }
.rsdo { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: rgba(16, 18, 60, .32); }
.rsdo > b { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #DCDDFA; }
.rsdo ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: rs; }
.rsdo li { counter-increment: rs; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; font-weight: 700; line-height: 1.35; }
.rsdo li::before { content: counter(rs); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #2E3378; background: #FFFFFF; }
.rsthen { margin: 14px 0 0; font-size: 14px; color: #E6E7FA; }
.rsevs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.rsevs span { padding: 5px 12px; border-radius: 99px; font-size: 14px; font-weight: 800; color: #FFFFFF; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); }
.rsnow, .rsunsafe { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: #EEEFFC; }
.rsunsafe b { color: #FFD9A0; }
/* card 4: the plan, and Start */
.rspage.rs-plan { background: radial-gradient(560px 420px at 80% 0%, rgba(79, 209, 181, .26), transparent 62%), linear-gradient(165deg, #062723 0%, #0A3A34 50%, #0D2F3D 100%); }
.rs-plan .rskick { color: #9BE8D6; }
.rs-plan .rslede { color: #D5E7E1; }
.rsplist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.rsplist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.rsplist li > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-style: normal; font-size: 14px; font-weight: 800; color: #4FD1B5; background: rgba(79, 209, 181, .16); }
.rsplist b { display: block; font-size: 16px; line-height: 1.25; }
.rsplist small { display: block; margin-top: 2px; font-size: 13px; color: #B5D3CA; }
.rsplist em { padding: 3px 9px; border-radius: 99px; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; color: #D5E7E1; background: rgba(255, 255, 255, .1); }
.rsplist em.chg { color: #0B2B26; background: #BFE9DD; }
.rsfocus { margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(79, 209, 181, .1); border: 1px solid rgba(79, 209, 181, .4); }
.rsfocus small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #4FD1B5; }
.rsfocus p { margin: 6px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.rsfocus span { display: block; margin-top: 8px; font-size: 13px; color: #B5D3CA; }
.rs-plan .rsnext { flex-direction: column; align-items: stretch; gap: 10px; }
.rs-plan .rsnext > span { text-align: center; color: #D5E7E1; }
.rsgorow { display: flex; gap: 10px; }
.rsgorow .rsgo { flex: 1; min-height: 60px; font-size: 19px; color: #05302A; background: linear-gradient(180deg, #7BE3CB, #4FD1B5); box-shadow: 0 20px 40px -18px rgba(79, 209, 181, .7); }
.rsgorow .rsback { width: 60px; min-height: 60px; }
.rsgorow .rsgo.soft { color: #10201C; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
/* each card's parts come in as it slides in */
@keyframes rsup { from { opacity: 0; transform: translateY(12px); } }
@keyframes rscoin { from { opacity: 0; transform: translateY(-16px) scale(.4); } }
.rspage.play .rsnew, .rspage.play .rsfacts, .rspage.play .rstok, .rspage.play .rswc, .rspage.play .rsbefore, .rspage.play .rsdo, .rspage.play .rsfocus { animation: rsup .45s var(--rs-ease) both; }
.rspage.play .rsnew, .rspage.play .rsdo { animation-delay: .12s; }
.rspage.play .rsgrid li, .rspage.play .rsplist li { animation: rsup .45s var(--rs-ease) both; animation-delay: calc(var(--i) * 45ms + .08s); }
.rspage.play .rscoins i { animation: rscoin .5s var(--rs-spring) both; animation-delay: calc(var(--i) * 70ms + .2s); }
@media (prefers-reduced-motion: reduce) {
  .rstory, .rstory * { animation: none !important; transition: none !important; }
}
@media (max-height: 760px) {
  .rsbig { width: 100px; height: 100px; font-size: 46px; }
  .rspage h2 { font-size: 34px; }
}
/* a phone: the cards fill the screen */
@media (max-width: 560px) {
  .rstory { place-items: stretch; }
  .rscard { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  .rsbody { padding: 0 20px 26px; }
  .rsnext { padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .rspage h2 { font-size: 34px; }
}
/* the signed note's last row: the next session, with Get ready for it */
.nupnext { --lh: #7A63D0; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 20px; color: #FFFFFF; background: radial-gradient(120% 160% at 100% 0%, rgba(79, 209, 181, .22), transparent 55%), linear-gradient(135deg, #052520 0%, #0E6B61 100%); }
.nupnext .lav { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.nuptxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nuptxt .eyebrow { margin: 0; color: #9BE8D6; }
.nuptxt b { font-size: 18px; }
.nuptxt span { font-size: 14px; color: #CFE3DD; }
.nupgo { flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; color: #0A4F48; background: #FFFFFF; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); cursor: pointer; transition: transform .15s; }
.nupgo:hover { transform: translateY(-2px); }
.nupgo:focus-visible { outline: 3px solid #F2B544; outline-offset: 3px; }
@media (max-width: 720px) {
  .nupnext { flex-wrap: wrap; }
  .nupgo { width: 100%; }
}
/* The prototype's styles: the hour made yours (version 26g): the hour in each person's style, a step's card, Replay and Make it yours. In the prototype's order; do not reorder. */
/* ---------- version 26g: the hour, made yours ---------- */
/* the hour in each person's style (Justin, Oct 29 2026: "okay so lets ship it"): taller at the foot of the session
   screen, drawn to the room it has. The session above makes room for it: the targets become one row of chips, and the
   answers, Undo and how to teach it stay in full view. A phone, or a window too short for both, keeps Climb */
.fmode.hs, .fhour.hs { --fh-bar: clamp(236px, calc(100vh - 504px), 380px); }
@supports (height: 100dvh) { .fmode.hs, .fhour.hs { --fh-bar: clamp(236px, calc(100dvh - 504px), 380px); } }
.fmode.hs { min-height: 0; }
.fhour.hs .fhbar { display: block; padding: 0; color: var(--hr-fg); background: var(--hr-bg); box-shadow: 0 -14px 34px -16px rgba(5, 8, 30, .45); }
.fhour.hs .fhnow { display: block; height: 100%; }
.hr { --hr-fg: #EAF0FF; --hr-fg2: #B8C2E6; --hr-bd: rgba(255, 255, 255, .18); --hr-btn: rgba(255, 255, 255, .08); --hr-gold: #FDE047; --hr-off: #FDBA74;
  position: relative; height: 100%; display: flex; flex-direction: column; color: var(--hr-fg); }
.hr-strip { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px 18px; min-height: 62px; padding: 10px 20px 2px; }
.hr-strip .fplan { align-self: center; }
.hr-strip .fsf > span:first-child { color: var(--hr-fg2); }
.hr-word { flex: none; font-family: var(--f-round); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.hr-why { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.hr-why.r { color: var(--hr-off); font-weight: 700; }
.hr-wins { flex: none; display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--hr-fg2); white-space: nowrap; }
.hr-wins > b { font-family: var(--f-round); font-size: 27px; font-weight: 800; color: var(--hr-gold); font-variant-numeric: tabular-nums; }
.hr-left { flex: none; font-family: var(--f-round); font-size: 19px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-left.r { color: var(--hr-off); }
.hr-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.hr-btn, .hr .fhmore { position: static; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hr-bd); border-radius: 13px; background: var(--hr-btn); color: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; }
.hr-btn .fi { width: 17px; height: 17px; }
.hr-btn:hover, .hr .fhmore:hover { filter: brightness(1.15); }
.hr-plot { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hr-plot > svg { position: absolute; inset: 0; display: block; max-width: 100%; max-height: 100%; overflow: visible; }
.hr-plot [data-si] { cursor: pointer; outline: none; transition: opacity .2s; }
.hr-plot [data-si]:hover { filter: brightness(1.12); }
.hr-plot [data-si]:focus-visible { filter: drop-shadow(0 0 3px var(--hr-gold)) drop-shadow(0 0 8px var(--hr-gold)); }
/* point at a step and the rest of the hour steps back */
@media (hover: hover) { .hr-plot svg:has([data-si]:hover) [data-si]:not(:hover) { opacity: .42; } }
/* Make it yours from Climb */
.fhs-mine { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #F5F7F6; }
.fhs-mine .fi { width: 16px; height: 16px; }
@media (min-width: 761px) { .fhc .fhs { padding-right: 160px; } }
@media (max-width: 760px) { .fhs-mine { order: 1; width: 30px; height: 30px; margin-left: 0; } }
/* narrower screens keep each part short before any of it is cut */
@media (max-width: 1360px) { .hr-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hr-btn { width: 44px; justify-content: center; padding: 0; } }
@media (max-width: 1180px) { .hr-strip .fplan > .fsf { display: none; } .hr-wins.won { font-size: 0; } .hr-wins.won > b::after { content: '\2605'; margin-left: 3px; font-size: 18px; } .hr-strip { gap: 10px 14px; } }
@media (max-width: 1040px) { .hr-word { font-size: 22px; } .hr-why { font-size: 15px; } .hr-left { font-size: 16px; } .hr .fhmore { padding: 0 12px; font-size: 14px; } }
@media (max-height: 760px) { .hr-strip { min-height: 50px; padding-top: 4px; } .hr-strip .fplan > .fsf { display: none; } .hr-btn, .hr .fhmore { min-height: 40px; } .hr-btn { width: 40px; } }

/* each step's live moment: a new piece drops into place, a badge pops, a burst for a help to on own moment */
@keyframes hrDrop { 0% { transform: translateY(-150px); opacity: 0; } 55% { opacity: 1; } 78% { transform: translateY(4px); } 100% { transform: none; } }
@keyframes hrPopIn { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes hrBurst { 0% { transform: scale(.1); opacity: 0; } 35% { opacity: 1; } 65% { transform: scale(1.6); } 100% { transform: none; } }
@keyframes hrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hrGrow { 0% { transform: scaleY(0); opacity: 0; } 55% { transform: scaleY(1.35); opacity: 1; } 100% { transform: none; } }
.hr-plot .drop { animation: hrDrop .65s cubic-bezier(.3, .7, .4, 1) both; transform-box: fill-box; }
.hr-plot .popin { animation: hrPopIn .55s both; transform-box: fill-box; transform-origin: center; }
.hr-plot .burst { animation: hrBurst 1s both; transform-box: fill-box; transform-origin: center; }
.hr-studio .hr-plot .drop { animation-name: hrGrow; animation-duration: .5s; transform-origin: center; }
.hr-plot.calm *, .fhour.motion-calm *, .hrflt.calm, .hrtoast.calm { animation: none !important; transition: none !important; }
body.hr-rpl .hr-plot [data-si] { pointer-events: none; }
body.hr-rpl .hr-plot .key, .hr-plot.short .key { display: none; }
body.hr-rpl .hr-plot .drop { animation-duration: .3s; }
body.hr-rpl .hr-plot .sk-fw, body.hr-rpl .hr-plot .loop { animation: none; }

/* Skyline's crane lowers only a newly recorded floor, then stays over the current building. */
@keyframes skFloorPlace { from { transform: translateY(calc(-1 * var(--sk-lift, 0px))); } to { transform: none; } }
@keyframes skCableLower { from { transform: scaleY(var(--sk-cable-start, 1)); } to { transform: scaleY(1); } }
.hr-skyline { --sk-place-duration: .85s; }
body.hr-rpl .hr-skyline { --sk-place-duration: .3s; }
.hr-skyline .fl.drop { animation: skFloorPlace var(--sk-place-duration) cubic-bezier(.25, .6, .35, 1) both; }
.sk-crane.building .sk-cable { transform-box: fill-box; transform-origin: 50% 0; animation: skCableLower var(--sk-place-duration) cubic-bezier(.25, .6, .35, 1) both; }
.sk-crane.building .sk-hook { animation: skFloorPlace var(--sk-place-duration) cubic-bezier(.25, .6, .35, 1) both; }
.hr-skyline .fl.drop, .sk-crane.building .sk-cable, .sk-crane.building .sk-hook { animation-delay: var(--sk-delay, 0ms); }

/* Skyline: a city at night under the stars */
.fhour.look-skyline { --hr-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Ccircle cx='207' cy='63' r='1.3' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='46' cy='225' r='0.8' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='37' cy='213' r='0.6' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='278' cy='29' r='0.6' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='272' cy='347' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='404' cy='245' r='0.6' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='375' cy='21' r='0.7' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='356' cy='56' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='346' cy='240' r='1.1' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='66' cy='240' r='0.7' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='62' cy='299' r='1.1' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='396' cy='208' r='1.1' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='497' cy='196' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='192' cy='334' r='1.3' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='52' cy='126' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='467' cy='121' r='0.6' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='328' cy='69' r='0.8' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='597' cy='177' r='1.3' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='489' cy='241' r='0.8' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='445' cy='250' r='1.1' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='44' cy='39' r='0.8' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='446' cy='27' r='1.3' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='414' cy='417' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='459' cy='373' r='0.8' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='602' cy='149' r='1.1' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='316' cy='92' r='0.8' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='473' cy='167' r='0.9' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='106' cy='169' r='0.8' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='524' cy='363' r='0.8' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='631' cy='287' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='97' cy='74' r='0.7' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='8' cy='349' r='0.7' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='180' cy='61' r='1.1' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='390' cy='134' r='0.7' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='608' cy='275' r='1.3' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='292' cy='366' r='1.3' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='251' cy='168' r='0.6' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='406' cy='26' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='282' cy='46' r='1.1' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='66' cy='238' r='1.1' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='607' cy='258' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='393' cy='62' r='0.8' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='385' cy='199' r='0.6' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='636' cy='196' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='55' cy='43' r='0.8' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='306' cy='291' r='1.1' fill='%23fff' fill-opacity='0.35'/%3E%3C/svg%3E") 0 0 / 640px 420px repeat, radial-gradient(130% 120% at 50% 125%, #5B21B6 0%, #311763 26%, #140F3A 52%, #070A1E 86%); }
.hr-skyline .hr-word { padding: 7px 14px 9px; border: 2px solid #5EEAD4; border-radius: 13px; font-family: var(--f-font); font-size: 28px; font-weight: 500; color: #CCFBF1; text-shadow: 0 0 2px #fff, 0 0 8px #2DD4BF, 0 0 18px #2DD4BF; box-shadow: 0 0 10px #2DD4BF, 0 0 24px rgba(45, 212, 191, .45), inset 0 0 12px rgba(45, 212, 191, .45); animation: hrNeon 7s infinite; }
.hr-skyline.hr-off .hr-word { color: #FFEDD5; border-color: #FDBA74; text-shadow: 0 0 2px #fff, 0 0 8px #F97316, 0 0 18px #F97316; box-shadow: 0 0 10px #F97316, 0 0 24px rgba(249, 115, 22, .5), inset 0 0 12px rgba(249, 115, 22, .45); animation: hrNeon2 2.6s infinite; }
.hr-skyline.hr-brk .hr-word, .hr-skyline.hr-new .hr-word { color: #E2E8F0; border-color: #94A3B8; text-shadow: 0 0 6px rgba(148, 163, 184, .8); box-shadow: 0 0 10px rgba(148, 163, 184, .45), inset 0 0 10px rgba(148, 163, 184, .3); animation: none; }
@keyframes hrNeon { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .55; } 93% { opacity: 1; } 95% { opacity: .75; } 96% { opacity: 1; } }
@keyframes hrNeon2 { 0%, 68%, 100% { opacity: 1; } 70% { opacity: .35; } 72% { opacity: 1; } 77% { opacity: .5; } 79% { opacity: 1; } }
.hr-plot .sk-fw { transform-box: fill-box; transform-origin: center; animation: hrFw 3.4s ease-out infinite; }
.hr-plot .sk-fw:nth-of-type(2n) { animation-delay: -1.3s; }
@keyframes hrFw { 0% { transform: scale(.3); opacity: 0; } 12% { opacity: 1; } 55% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
.hr-plot .sk-star .sk-tw { transform-box: fill-box; transform-origin: center; animation: hrStar 4s ease-in-out infinite; }
@keyframes hrStar { 50% { transform: scale(.78) rotate(12deg); opacity: .85; } }
.hr-plot .sk-star.born { animation: hrIn .6s both; }

/* Ribbon: a ribbon of light over a neon grid */
.fhour.look-ribbon { --hr-bg: linear-gradient(180deg, #0B0720 0%, #170A35 55%, #24104A 100%); }
.hr-ribbon { --hr-fg: #F3E8FF; --hr-fg2: #D8B4FE; --hr-bd: rgba(232, 121, 249, .35); --hr-btn: rgba(255, 255, 255, .07); }
.hr-ribbon .hr-word { font-family: var(--f-font); font-size: 34px; font-weight: 900; font-style: italic; text-transform: uppercase; background: linear-gradient(180deg, #ECFEFF 10%, #22D3EE 55%, #A855F7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .55)); padding-right: 4px; }
.hr-ribbon.hr-off .hr-word { background-image: linear-gradient(180deg, #FFF7ED 10%, #FB923C 55%, #E11D48 100%); filter: drop-shadow(0 0 10px rgba(249, 115, 22, .6)); }
.hr-ribbon.hr-brk .hr-word, .hr-ribbon.hr-new .hr-word { background-image: linear-gradient(180deg, #FFFFFF 10%, #CBD5E1 60%, #94A3B8 100%); filter: none; }
.hr-ribbon .hr-why { display: inline-block; flex: 0 1 auto; padding: 6px 10px; border-radius: 7px; background: #ECFEFF; color: #0B0720; font-size: 15px; }
.hr-ribbon .hr-why.r { background: #431407; color: #FED7AA; box-shadow: inset 0 0 0 1px #FB923C; }
.hr-ribbon .hr-why + .hr-wins { margin-left: auto; }
.hr-ribbon .hr-wins > b, .hr-ribbon .hr-left { font-style: italic; }
.hr-plot .rb-sun { animation: hrSun 6s ease-in-out infinite alternate; }
@keyframes hrSun { to { opacity: .82; } }
.hr-plot .rb-glint { animation: hrGlint 4.2s linear infinite; }
@keyframes hrGlint { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -1000; } }
.hr-plot .rb-head { transform-box: fill-box; transform-origin: center; animation: hrHead 1.6s ease-in-out infinite; }
@keyframes hrHead { 50% { transform: scale(1.35); } }

/* Studio: each run a sound wave on one track */
.fhour.look-studio { --hr-bg: linear-gradient(180deg, #1D1F24 0, #1D1F24 62px, #121317 62px); }
.hr-studio { --hr-fg: #E7E9EE; --hr-fg2: #A0A7B4; --hr-bd: #2E3138; --hr-btn: linear-gradient(180deg, #3A3E47, #2B2E35); --hr-gold: #FDE047; --hr-off: #FCD34D; }
.hr-studio .hr-strip { border-bottom: 1px solid #0B0C0E; }
.hr-studio .hr-word { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 12px; border-radius: 7px; background: #141519; box-shadow: inset 0 0 0 1px #24262C; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A7F3D0; }
.hr-studio .hr-word::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #34D399; box-shadow: 0 0 6px #34D399, 0 0 16px #34D399; }
.hr-studio.hr-off .hr-word { color: #FCD34D; }
.hr-studio.hr-off .hr-word::before { background: #F59E0B; box-shadow: 0 0 6px #F59E0B, 0 0 16px #F59E0B; animation: hrBlink 1s steps(1) infinite; }
.hr-studio.hr-brk .hr-word, .hr-studio.hr-new .hr-word { color: #CBD5E1; }
.hr-studio.hr-brk .hr-word::before, .hr-studio.hr-new .hr-word::before { background: #94A3B8; box-shadow: none; }
@keyframes hrBlink { 50% { opacity: .25; } }
.hr-studio .hr-wins > b, .hr-studio .hr-left { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.hr-studio .hr-btn, .hr-studio .fhmore { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #000; border-color: transparent; }

/* Quest: a game level, the learner's chimp hopping from tower to tower */
.fhour.look-quest { --hr-bg: #DFF3FF; }
.hr-quest { --hr-fg: #2B2D42; --hr-fg2: #475569; --hr-bd: #D7E3EE; --hr-btn: #FFFFFF; --hr-gold: #B45309; --hr-off: #C2410C; padding: 0 14px 12px; }
.hr-quest .hr-strip { padding: 10px 6px 8px; }
.hr-quest .fplan .fring2 .tr { stroke: rgba(43, 45, 66, .14); }
.hr-quest .hr-word { display: inline-flex; align-items: center; padding: 8px 20px 10px; border-radius: 14px; border-bottom: 5px solid #15803D; background: #22C55E; color: #fff; font-size: 25px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.hr-quest.hr-off .hr-word { background: #F97316; border-bottom-color: #C2410C; }
.hr-quest.hr-brk .hr-word, .hr-quest.hr-new .hr-word { background: #64748B; border-bottom-color: #334155; }
.hr-quest .hr-why { flex: 0 1 auto; padding: 7px 13px; border-radius: 999px; background: #2B2D42; color: #fff; font-size: 15px; font-weight: 800; }
.hr-quest .hr-why.r { background: #FFEDD5; color: #C2410C; }
.hr-quest .hr-why + .hr-wins { margin-left: auto; }
.hr-quest .hr-wins > b { color: #2B2D42; }
.hr-quest .hr-btn, .hr-quest .fhmore { border: 0; border-bottom: 4px solid #D7E3EE; border-radius: 15px; background: #fff; font-weight: 800; color: #2B2D42; }
.hr-quest .hr-btn .fi { color: #DB2777; }
.hr-quest .hr-plot { overflow: hidden; border: 3px solid #fff; border-radius: 24px; box-shadow: 0 6px 0 #B9D9EE, 0 14px 30px rgba(30, 80, 130, .18); }
.hr-plot .qu-chimp image { animation: hrBob 1.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes hrBob { 50% { transform: translateY(-5px); } }
.hr-plot .qu-cloud { animation: hrCloud 30s linear infinite alternate; }
@keyframes hrCloud { to { transform: translateX(40px); } }
.hr-plot .qu-star { transform-box: fill-box; transform-origin: center; animation: hrQStar 2.4s ease-in-out infinite; }
@keyframes hrQStar { 50% { transform: scale(1.15) rotate(8deg); } }
.hr-plot .qu-chimp.hop { animation: hrHop .46s cubic-bezier(.3, .6, .4, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
body.hr-rpl .hr-plot .qu-chimp.hop { animation-duration: .28s; }
@keyframes hrHop { 0% { transform: translate(var(--dx), var(--dy)); } 45% { transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45 + var(--up))); } 82% { transform: translate(0, 3px) scale(1.04, .94); } 100% { transform: none; } }

/* Zen: a raked garden, each run a cairn */
.fhour.look-zen { --hr-bg: radial-gradient(rgba(120, 100, 70, .05) 1px, transparent 1px) 0 0 / 7px 7px, radial-gradient(rgba(120, 100, 70, .035) 1px, transparent 1px) 3px 5px / 13px 13px, linear-gradient(180deg, #F7F3EA, #F1EBDF); }
.fhour.look-zen .fhbar { box-shadow: 0 -1px 0 #DDD4C4; }
.hr-zen { --hr-fg: #2B2A26; --hr-fg2: #7A7366; --hr-bd: #DDD4C4; --hr-btn: rgba(255, 255, 255, .6); --hr-gold: #8C6A1E; --hr-off: #A8573A; }
.hr-zen .fplan .fring2 .tr { stroke: rgba(43, 42, 38, .12); }
.hr-zen .hr-word { font-family: 'Iowan Old Style', Charter, 'Bitstream Charter', var(--serif); font-size: 30px; font-weight: 500; }
.hr-zen.hr-off .hr-word { color: #A8573A; }
.hr-zen .hr-why { font-family: 'Iowan Old Style', Charter, 'Bitstream Charter', var(--serif); font-size: 18px; font-style: italic; font-weight: 400; color: #3E3A33; }
.hr-zen .hr-why.r { color: #A8573A; font-style: normal; font-weight: 600; }
.hr-zen .hr-wins > b { font-family: 'Iowan Old Style', Charter, var(--serif); font-weight: 500; color: #B5654F; }
.hr-zen .hr-left { font-weight: 700; color: #5A5448; }
.hr-plot .zn-drift { animation: hrDrift 9s ease-in-out infinite alternate; }
@keyframes hrDrift { to { transform: translateY(-3px); } }
.hr-plot .zn-ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: hrRipple 1.7s cubic-bezier(.2, .6, .3, 1) both; pointer-events: none; }
@keyframes hrRipple { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* what opens over the hour: a step's card, the word for a tap as it lands, the banner for a help to on own moment, Undo's
   ghost and Replay's bar. Each takes its colors from the style */
.hrpop, .hrflt, .hrtoast, .hrpb { --pop-bg: #141633; --pop-fg: #F1F5FF; --pop-fg2: #A9B3D6; --pop-bd: rgba(255, 255, 255, .16); --pop-row: rgba(255, 255, 255, .05); --pop-gold: #FDE047; font-family: var(--f-font, -apple-system, system-ui, sans-serif); }
.hrpop.hr-studio, .hrflt.hr-studio, .hrtoast.hr-studio, .hrpb.hr-studio { --pop-bg: #1C1E23; --pop-bd: #34373F; }
.hrpop.hr-quest, .hrflt.hr-quest, .hrtoast.hr-quest, .hrpb.hr-quest { --pop-bg: #FFFFFF; --pop-fg: #1F2937; --pop-fg2: #6B7280; --pop-bd: #E2E8F0; --pop-row: rgba(0, 0, 0, .04); --pop-gold: #B45309; }
.hrpop.hr-zen, .hrflt.hr-zen, .hrtoast.hr-zen, .hrpb.hr-zen { --pop-bg: #FBF8F2; --pop-fg: #2B2A26; --pop-fg2: #7A7366; --pop-bd: #DDD4C4; --pop-row: rgba(0, 0, 0, .035); --pop-gold: #8C6A1E; }
.hrpop { position: fixed; z-index: 60; width: 320px; max-height: 70vh; overflow: auto; padding: 14px 16px; border: 1px solid var(--pop-bd); border-radius: 16px; background: var(--pop-bg); color: var(--pop-fg); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.35; animation: hrIn .2s both; }
.hrpop .hrp-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--pop-fg2); font-size: 22px; line-height: 1; }
.hrpop header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 28px; }
.hrpop header > i { flex: none; width: 10px; height: 28px; border-radius: 4px; }
.hrpop header div { flex: 1; min-width: 0; }
.hrpop header b { display: block; font-size: 16px; font-weight: 800; }
.hrpop header small { font-size: 12.5px; color: var(--pop-fg2); }
.hrpop header em { font-size: 13px; font-style: normal; font-weight: 800; white-space: nowrap; }
.hrpop ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hrpop li { display: grid; grid-template-columns: 40px 1fr 10px auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; }
.hrpop li:nth-child(odd) { background: var(--pop-row); }
.hrpop li span { font-size: 12.5px; color: var(--pop-fg2); font-variant-numeric: tabular-nums; }
.hrpop li b { font-weight: 700; }
.hrpop li i, .hrflt > i:first-child, .hrpb .rp-t i { width: 10px; height: 10px; border-radius: 50%; background: #9CA3AF; }
.hrpop li.t-g i, .hrflt.t-g > i, .hrpb .rp-t.t-g i { background: #22C55E; }
.hrpop li.t-b i, .hrflt.t-h > i, .hrpb .rp-t.t-b i { background: #60A5FA; }
.hrpop li.t-r i, .hrflt.t-r > i, .hrpb .rp-t.t-r i { background: #F87171; }
.hrpop li small { font-size: 12.5px; font-weight: 600; color: var(--pop-fg2); }
.hrpop li.w small, .hrpop .hrp-w { color: var(--pop-gold); }
.hrpop .hrp-w { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.hrpop p { margin: 6px 0 0; font-size: 13px; color: var(--pop-fg2); }
.hrpop .hrp-b { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pop-bd); }
.hrpop .hrp-b span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hrpop .hrp-b i, .hrflt > i.bd, .hrpb .rp-bd { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; }
.hrpop .hrp-b small { color: var(--pop-fg2); }
.hrflt { position: fixed; z-index: 34; pointer-events: none; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--pop-bd); border-radius: 999px; background: var(--pop-bg); color: var(--pop-fg); font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: hrFloat 1.9s ease-out both; }
@keyframes hrFloat { 0% { opacity: 0; transform: translate(-50%, -70%); } 12% { opacity: 1; transform: translate(-50%, -110%); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -210%); } }
.hrtoast { position: fixed; z-index: 36; pointer-events: none; transform: translateX(-50%); padding: 11px 20px; border: 2px solid var(--pop-gold); border-radius: 16px; background: var(--pop-bg); color: var(--pop-fg); font-size: 19px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 0 36px color-mix(in srgb, var(--pop-gold) 45%, transparent), 0 14px 40px rgba(0, 0, 0, .35); animation: hrToast 2.9s both; }
.hrtoast b { font-weight: 900; color: var(--pop-gold); }
@keyframes hrToast { 0% { opacity: 0; transform: translate(-50%, -12px) scale(.9); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 16% { transform: translate(-50%, 0) scale(1); } 84% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.hrdrz { position: fixed; z-index: 34; pointer-events: none; }
.hrdrz .ghost { position: absolute; inset: 0; border-radius: 4px; background: var(--f); animation: hrGhost .65s ease-out both; }
@keyframes hrGhost { 0% { opacity: .95; } 100% { opacity: 0; transform: translateY(-26px) scale(.55); } }
.hrpb { position: fixed; z-index: 35; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border: 1px solid var(--pop-bd); border-radius: 20px; background: color-mix(in srgb, var(--pop-bg) 94%, transparent); color: var(--pop-fg); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 15px; line-height: 1.3; backdrop-filter: blur(14px); animation: hrIn .25s both; transition: box-shadow .3s; }
.hrpb.win { box-shadow: 0 0 0 2px var(--pop-gold), 0 0 34px color-mix(in srgb, var(--pop-gold) 50%, transparent), 0 18px 50px rgba(0, 0, 0, .35); }
.hrpb button { font: inherit; cursor: pointer; }
.hrpb-pp { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--pop-fg); color: var(--pop-bg); }
.hrpb-pp .fi { width: 20px; height: 20px; }
.hrpb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hrpb-cap { display: flex; align-items: center; gap: 10px; min-height: 28px; overflow: hidden; font-size: 17px; white-space: nowrap; }
.hrpb-cap time { min-width: 68px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--pop-fg2); font-variant-numeric: tabular-nums; }
.hrpb-cap b { font-weight: 800; }
.hrpb-cap b.r { color: #F97316; }
.hrpb-cap span { font-weight: 600; color: var(--pop-fg2); }
.hrpb-cap em { font-style: normal; font-weight: 800; color: var(--pop-gold); }
.hrpb .rp-st { padding: 4px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--pop-fg2); }
.hrpb .rp-st.off { background: rgba(249, 115, 22, .12); color: #F97316; }
.hrpb .rp-t { display: inline-flex; align-items: center; gap: 6px; color: var(--pop-fg); }
.hrpb-tr { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--pop-fg2); }
.hrpb-rail { position: relative; flex: 1; height: 30px; }
.hrpb-ticks { position: absolute; left: 9px; right: 9px; top: 0; bottom: 0; pointer-events: none; }
.hrpb-ticks::before { content: ''; position: absolute; left: -9px; right: -9px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--pop-bd); }
.hrpb-ticks::after { content: ''; position: absolute; left: -9px; bottom: 5px; width: calc(var(--p, 0%) + 9px); height: 3px; border-radius: 2px; background: var(--pop-fg2); }
.hrpb .rp-k { position: absolute; bottom: 10px; width: 3px; height: 7px; border-radius: 2px; transform: translateX(-50%); background: var(--pop-bd); }
.hrpb .rp-k.t-g { height: 13px; }
.hrpb .rp-k.w { width: 5px; height: 19px; background: var(--pop-gold); }
.hrpb .rp-k.k-beh { bottom: 12px; width: 7px; height: 7px; }
.hrpb .rp-k.k-quiet { width: 5px; height: 15px; background: #F97316; }
.hrpb .rp-k.k-break { width: 5px; height: 9px; background: #84CC16; }
.hrpb-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hrpb-range::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.hrpb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 30px; border: 3px solid var(--pop-bg); border-radius: 7px; background: var(--pop-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.hrpb-range::-moz-range-thumb { width: 14px; height: 26px; border: 3px solid var(--pop-bg); border-radius: 7px; background: var(--pop-fg); }
.hrpb-range:focus-visible { outline: 2px solid var(--pop-gold); outline-offset: 3px; border-radius: 6px; }
.hrpb-x, .hrpb-snd { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pop-bd); border-radius: 13px; background: none; color: var(--pop-fg); font-size: 14px; font-weight: 700; white-space: nowrap; }
.hrpb-snd .fi { width: 18px; height: 18px; }
.hrpb-snd[aria-pressed="true"] { background: var(--pop-fg); color: var(--pop-bg); }
.hrpb .fi, .hrpop .fi { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Make it yours: a sheet over the session, like the behavior plan's */
/* the session in the style's own colors: Skyline, Ribbon and Studio go dark, Quest bright, Zen on paper. Only the colors
   change; every button keeps its place and size, and a theme recolors these too */
.fmode.hs.look-skyline, .fhour.hs.look-skyline { color-scheme: dark;
  --f-bg: #0B0A22; --f-card: #17163D; --f-l1: #F1F5FF; --f-l2: #B4BDE0; --f-l3: #7D86AE;
  --f-sep: rgba(255, 255, 255, .13); --f-fill: rgba(255, 255, 255, .09); --f-fill2: rgba(255, 255, 255, .05);
  --f-tint: #14B8A6; --f-tintink: #5EEAD4; --f-tintfill: rgba(45, 212, 191, .16); --f-ring2: rgba(45, 212, 191, .22);
  --f-red: #FF7A8A; --f-redfill: rgba(255, 90, 110, .16); --f-orange: #FDBA74; --f-orangeink: #FDBA74; --f-orangefill: rgba(251, 146, 60, .18);
  --f-glass: rgba(11, 10, 34, .84); --f-menu: rgba(23, 22, 61, .98); --f-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .7);
  --f-hero: linear-gradient(140deg, #1C1B4A 45%, #0F3345 100%);
  --ink: var(--f-l1); --ink2: var(--f-l2); --ground: var(--f-bg); --card: var(--f-card); --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .24); --faint: rgba(255, 255, 255, .06); --grid: rgba(255, 255, 255, .08);
  --teal: var(--f-tint); --tealD: var(--f-tintink); --tealT: var(--f-tintfill); --tealW: var(--f-fill2); --amberT: rgba(233, 162, 59, .2); --amberD: #FCD34D; --amberW: rgba(233, 162, 59, .1); --learnerT: rgba(122, 99, 208, .26); }
.fmode.hs.look-ribbon, .fhour.hs.look-ribbon { color-scheme: dark;
  --f-bg: #12061F; --f-card: #1F0E36; --f-l1: #FDF4FF; --f-l2: #D8C3EE; --f-l3: #9C86B8;
  --f-sep: rgba(255, 255, 255, .13); --f-fill: rgba(255, 255, 255, .09); --f-fill2: rgba(255, 255, 255, .05);
  --f-tint: #0891B2; --f-tintink: #67E8F9; --f-tintfill: rgba(34, 211, 238, .16); --f-ring2: rgba(34, 211, 238, .22);
  --f-red: #FF7A9A; --f-redfill: rgba(255, 80, 130, .16); --f-orange: #FDBA74; --f-orangeink: #FDBA74; --f-orangefill: rgba(251, 146, 60, .18);
  --f-glass: rgba(18, 6, 31, .84); --f-menu: rgba(31, 14, 54, .98); --f-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .7);
  --f-hero: linear-gradient(140deg, #2A1250 45%, #3B0F3F 100%);
  --ink: var(--f-l1); --ink2: var(--f-l2); --ground: var(--f-bg); --card: var(--f-card); --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .24); --faint: rgba(255, 255, 255, .06); --grid: rgba(255, 255, 255, .08);
  --teal: var(--f-tint); --tealD: var(--f-tintink); --tealT: var(--f-tintfill); --tealW: var(--f-fill2); --amberT: rgba(233, 162, 59, .2); --amberD: #FCD34D; --amberW: rgba(233, 162, 59, .1); --learnerT: rgba(122, 99, 208, .26); }
.fmode.hs.look-studio, .fhour.hs.look-studio { color-scheme: dark;
  --f-bg: #101114; --f-card: #1B1D22; --f-l1: #E7E9EE; --f-l2: #A0A6B2; --f-l3: #6F7582;
  --f-sep: rgba(255, 255, 255, .11); --f-fill: rgba(255, 255, 255, .08); --f-fill2: rgba(255, 255, 255, .045);
  --f-tint: #10B981; --f-tintink: #6EE7B7; --f-tintfill: rgba(52, 211, 153, .15); --f-ring2: rgba(52, 211, 153, .2);
  --f-red: #FF7A7A; --f-redfill: rgba(255, 90, 90, .15); --f-orange: #FBBF24; --f-orangeink: #FCD34D; --f-orangefill: rgba(245, 158, 11, .16);
  --f-glass: rgba(16, 17, 20, .86); --f-menu: rgba(27, 29, 34, .98); --f-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .75);
  --f-hero: linear-gradient(140deg, #22252B 45%, #16241F 100%);
  --ink: var(--f-l1); --ink2: var(--f-l2); --ground: var(--f-bg); --card: var(--f-card); --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .24); --faint: rgba(255, 255, 255, .06); --grid: rgba(255, 255, 255, .08);
  --teal: var(--f-tint); --tealD: var(--f-tintink); --tealT: var(--f-tintfill); --tealW: var(--f-fill2); --amberT: rgba(233, 162, 59, .2); --amberD: #FCD34D; --amberW: rgba(233, 162, 59, .1); --learnerT: rgba(122, 99, 208, .26); }
.fmode.hs.look-quest, .fhour.hs.look-quest {
  --f-bg: #E6F4FF; --f-card: #FFFFFF; --f-l1: #1F2937; --f-l2: #4B5563; --f-l3: #8A94A6;
  --f-sep: rgba(30, 64, 120, .14); --f-fill: rgba(56, 120, 200, .1); --f-fill2: rgba(56, 120, 200, .06);
  --f-tint: #16A34A; --f-tintink: #15803D; --f-tintfill: rgba(34, 197, 94, .14); --f-ring2: rgba(34, 197, 94, .2);
  --f-glass: rgba(240, 248, 255, .86); --f-menu: rgba(250, 253, 255, .98);
  --f-hero: linear-gradient(140deg, #FFFFFF 45%, #FFF7D6 100%); --f-font: var(--f-round); --teal: var(--f-tintink); --tealT: var(--f-tintfill); }
.fmode.hs.look-zen, .fhour.hs.look-zen {
  --f-bg: #F3EEE3; --f-card: #FBF8F2; --f-l1: #2B2A26; --f-l2: #6B6458; --f-l3: #9A9284;
  --f-sep: rgba(70, 55, 30, .15); --f-fill: rgba(110, 95, 60, .1); --f-fill2: rgba(110, 95, 60, .06);
  --f-tint: #56744A; --f-tintink: #3F5A35; --f-tintfill: rgba(86, 116, 74, .14); --f-ring2: rgba(86, 116, 74, .2);
  --f-glass: rgba(243, 238, 227, .88); --f-menu: rgba(251, 248, 242, .98); --f-shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 10px 30px -16px rgba(60, 45, 20, .2);
  --f-hero: linear-gradient(140deg, #FBF8F2 45%, #EEF2E6 100%); --teal: var(--f-tintink); --tealT: var(--f-tintfill); }
.fmode.hs.look-skyline { background: radial-gradient(900px 520px at 22% -6%, rgba(45, 212, 191, .12), transparent 70%), radial-gradient(800px 520px at 100% 100%, rgba(129, 140, 248, .14), transparent 70%), var(--f-bg); }
.fmode.hs.look-ribbon { background: radial-gradient(900px 520px at 22% -6%, rgba(236, 72, 153, .14), transparent 70%), radial-gradient(800px 520px at 100% 100%, rgba(34, 211, 238, .1), transparent 70%), var(--f-bg); }
.fmode.hs.look-studio { background: var(--f-bg); }
.fmode.hs.look-quest { background: linear-gradient(180deg, #CDEBFF 0%, var(--f-bg) 60%); }
.fmode.hs.look-zen { background: var(--f-bg); }
/* the app's own pieces inside a dark session: light words on dark buttons and chips, dark words on the bright ones */
.fmode.hs:is(.look-skyline, .look-ribbon, .look-studio) .btn.primary { color: #04201B; }
.fmode.hs:is(.look-skyline, .look-ribbon, .look-studio) :is(.abcchip, .chipsel) { border-color: rgba(255, 255, 255, .26); background: var(--f-fill); color: var(--f-l1); }
.fmode.hs:is(.look-skyline, .look-ribbon, .look-studio) :is(.abcchip, .chipsel)[aria-pressed="true"] { border-color: var(--f-tintink); background: var(--f-tintink); color: #04201B; }
/* on own, in each style's own light */
.fmode.hs.look-ribbon .fpad .ans.own { background: linear-gradient(180deg, #22D3EE, #0891B2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 30px -10px rgba(34, 211, 238, .6); }
.fmode.hs.look-studio .fpad .ans.own { background: linear-gradient(180deg, #14B87F, #0A7F58); }
.fmode.hs.look-quest .fpad .ans.own { background: linear-gradient(180deg, #34C759, #16A34A); box-shadow: 0 5px 0 #0F7A35, 0 14px 24px -12px rgba(22, 120, 60, .6); }
.fmode.hs.look-zen .fpad .ans.own { background: linear-gradient(180deg, #6E8F5C, #56744A); text-shadow: none; }
/* the hour's themes: each recolors the style it is on (rbt/hour.js hrThemeCSS) and adds a touch of its own */
.fhour.th-tron .hr-plot { background-image: linear-gradient(rgba(0, 229, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .07) 1px, transparent 1px); background-size: 48px 48px; }
.fhour.th-pride .hr { position: relative; }
.hr .th-mark { flex: none; width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 1180px) { .hr .th-mark { display: none; } }
.fhour.th-pride .hr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #FF3B3B 0 16.66%, #FF8C00 0 33.33%, #FFE100 0 50%, #22C55E 0 66.66%, #4F7BFF 0 83.33%, #B45CE8 0); }
.hr-plot .th-aurora { animation: thDrift 14s ease-in-out infinite alternate; }
@keyframes thDrift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.th-wave { position: fixed; z-index: 33; overflow: hidden; pointer-events: none; }
.th-wave i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%; background: linear-gradient(100deg, transparent 0%, #FF3B3B 22%, #FF8C00 32%, #FFE100 42%, #22C55E 52%, #4F7BFF 62%, #B45CE8 72%, transparent 92%); filter: blur(18px); opacity: .36; mix-blend-mode: screen; animation: thWave 1.8s cubic-bezier(.4, .1, .3, 1) both; }
.th-wave.th-light i { mix-blend-mode: multiply; opacity: .3; }
@keyframes thWave { from { transform: translateX(-110%) skewX(-12deg); } to { transform: translateX(200%) skewX(-12deg); } }
.hr-plot .th-breathe { animation: thBreathe 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes thBreathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }
/* Acceptance is calm by design: nothing flashes or flickers, loops slow down, bursts fade in instead of popping */
.hr.th-accept .hr-word, .hr.th-accept .hr-word::before, .th-accept .hr-plot .rb-head { animation: none !important; }
.th-accept .hr-plot .sk-star .sk-tw { animation-duration: 10s !important; }
.th-accept .hr-plot .rb-glint { animation-duration: 11s !important; }
.th-accept .hr-plot .qu-chimp image { animation-duration: 4s !important; }
.th-accept .hr-plot .burst, .th-accept .hr-plot .sk-fw { animation: thCalmIn 1.4s ease-out both !important; }
@keyframes thCalmIn { from { opacity: 0; } to { opacity: 1; } }
.hrflt.th-accept { animation-duration: 2.6s !important; }
.hrtoast.th-accept { animation-duration: 3.6s !important; }
/* Tron: Undo breaks the try into the grid */
.hrdrz.tron i { position: absolute; width: 5px; height: 5px; background: #00E5FF; box-shadow: 0 0 6px #00E5FF; animation: thDerez .9s ease-in both; }
@keyframes thDerez { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
.hrm-style:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.hrm-note { margin: 10px 0 0; font-size: 13px; color: var(--f-l2); }
.hrm-clinic { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--f-fill); }
.hrm-clinic img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.hrm-clinic b { display: block; color: var(--f-l1); }
.hrm-sw { display: inline-flex; gap: 4px; margin: 4px 8px 0 0; vertical-align: middle; }
.hrm-sw i { width: 16px; height: 16px; border-radius: 5px; }
.fsheet.hrmine { display: flex; flex-direction: column; gap: 2px; padding: 22px 24px 16px; }
.hrmine header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding-right: 44px; }
.hrmine header h2 { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.hrmine header p { order: 3; flex-basis: 100%; margin: 6px 0 0; font-size: 15px; color: var(--f-l2); }
.hrmine header h2 .fi { width: 24px; height: 24px; color: var(--f-tint); }
.hrmine h3 { margin: 16px 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-l2); }
.hrm-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hrm-style { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 7px 9px; border: 2px solid var(--f-sep); border-radius: 16px; background: var(--f-card); color: var(--f-l1); text-align: left; transition: border-color .15s, transform .15s; }
.hrm-style:hover { transform: translateY(-1px); }
.hrm-style svg { display: block; width: 100%; height: auto; margin-bottom: 6px; border-radius: 9px; }
.hrm-style b { padding-left: 3px; font-size: 15px; }
.hrm-style small { padding-left: 3px; font-size: 12px; color: var(--f-l2); }
.hrm-style[aria-pressed="true"] { border-color: var(--f-tint); box-shadow: 0 0 0 4px var(--f-tintfill); }
.hrm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hrm-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--f-fill); }
.hrm-seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--f-l2); font-size: 14px; font-weight: 600; }
.hrm-seg button[aria-checked="true"] { background: var(--f-card); color: var(--f-l1); box-shadow: 0 1px 4px rgba(15, 23, 42, .14); }
.hrm-lock { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--f-tintfill); font-size: 14px; color: var(--f-tintink); }
.hrm-lock .fi { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.hrmine footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--f-sep); font-size: 13px; color: var(--f-l2); }

/* the session gives the hour its room: the targets become one row of chips */
.fmode.hs .ftgts { display: flex; align-items: center; gap: 14px; padding: 5px 10px 5px 16px; border-radius: 18px; }
.fmode.hs .ftgh { flex: none; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; max-width: 150px; }
.fmode.hs .ftgh h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--f-l2); }
.fmode.hs .ftgh > span:not(.hint) { font-size: 12px; }
.fmode.hs .ftgh .hint { display: none; }
.fmode.hs .ftgts .targets { flex: 1 1 auto; min-width: 0; gap: 6px; }
.fmode.hs .ftgts .tgt { flex: 0 1 auto; min-width: 0; max-width: 220px; min-height: 46px; display: grid; grid-template-columns: 34px minmax(0, auto); grid-template-rows: auto auto; column-gap: 9px; row-gap: 0; align-items: center; justify-items: start; padding: 4px 14px 4px 6px; border-radius: 13px; background: var(--f-fill); text-align: left; }
.fmode.hs .ftgts .tgt .fr { grid-row: 1 / 3; width: 34px; height: 34px; }
.fmode.hs .ftgts .tgt .fct { font-size: 13px; }
.fmode.hs .ftgts .tgt .fck .fi { width: 16px; height: 16px; }
.fmode.hs .ftgts .tgt b { align-self: end; max-width: 150px; font-size: 15px; }
.fmode.hs .ftgts .tgt small { align-self: start; }
.fmode.hs .fprog { gap: 10px; padding-top: 12px; padding-bottom: 14px; }
.fmode.hs .fwork { gap: 10px; }
.fmode.hs .fprog .answers.fpad { flex-basis: 128px; min-height: 112px; max-height: 148px; }
/* a long list of steps scrolls inside the controls; the program's name and what is up now keep their room above it */
.fmode.hs .fprog:has(> .fcontrols > .fmeasure) { grid-template-rows: minmax(min(168px, 40%), 1fr) minmax(0, auto) auto; }
.fmode.hs .fprog:has(> .fcontrols > .fmeasure):not(:has(> .ftgts)) { grid-template-rows: minmax(min(168px, 50%), 1fr) minmax(0, auto); }
.fmode.hs .fnow { --ringsz: 112px; gap: 22px; padding-top: 12px; padding-bottom: 12px; }
.fmode.hs .fside { gap: 12px; padding-top: 12px; padding-bottom: 14px; }
@media (max-height: 760px) { .fmode.hs .fnow { --ringsz: 92px; padding-top: 10px; padding-bottom: 10px; } }

/* Watch for and how to teach it on the left, and big answer buttons */
.fmode.side-left .capcard.fcap { grid-template-columns: 360px minmax(0, 1fr); }
.fmode.side-left .fside { order: -1; padding: 18px 0 20px 20px; }
.fmode.side-left .fprog { padding: 18px 28px 20px 8px; }
@media (max-width: 1180px) { .fmode.side-left .capcard.fcap { grid-template-columns: 300px minmax(0, 1fr); } .fmode.side-left .fside { padding: 16px 0 16px 16px; } }
@media (max-width: 1000px) { .fmode.side-left .capcard.fcap { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 760px) { .fmode.side-left .fside { order: 0; padding: 0 14px; } .fmode.side-left .fprog { padding: revert-layer; } }
.fmode.size-big .fprog .answers.fpad { flex-basis: 196px; min-height: 160px; max-height: 220px; }
.fmode.size-big .fpad .ans { font-size: 20px; }
.fmode.size-big .fpad .ans.own { font-size: 32px; }
.fmode.size-big .fpad .miss .ans { min-height: 66px; font-size: 19px; }
/* The new session styles keep targets beside the cue and leave the city room below. Climb keeps its existing cards. */
.fmode.hs .fnow-details { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
.fmode.hs .fnow-details > .fnext { flex: 0 1 auto; max-width: 200px; margin: 0; }
.fmode.hs .fnow .ftgts { flex: 1 1 0; min-width: 0; margin-top: 0; padding: 0; gap: 10px; border-radius: 0; background: none; box-shadow: none; }
.fmode.hs .fnow .ftgh { max-width: none; }
.fmode.hs .fnow .ftgh h3 { font-size: 11px; white-space: nowrap; }
.fmode.hs .fnow .ftgh > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fmode.hs .fnow .tgt { display: inline-flex; flex-direction: row; flex: 0 0 auto; gap: 6px; max-width: none; min-height: 44px; padding: 5px 10px; border: 1px solid var(--f-sep); border-radius: 10px; }
.fmode.hs .fnow .tgt .fr { display: flex; flex: none; align-items: center; justify-content: center; width: 5ch; height: 20px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fmode.hs .fnow .tgt .fct { position: static; white-space: nowrap; }
.fmode.hs .fnow .tgt .fr > svg { display: none; }
.fmode.hs .fnow .tgt b { align-self: center; max-width: none; font-size: 14px; }
.fmode.hs .fnow .tgt small { align-self: center; white-space: nowrap; font-size: 11px; }

/* Compact screens prioritize target names and counts over repeated phase and next-target hints. */
@media (min-width: 761px) and (max-width: 1180px) {
  .fmode.hs .fnow-details > .fnext, .fmode.hs .fnow .tgt small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fmode.hs .fnow .tgt { flex: 1 1 0; min-width: 44px; overflow: hidden; }
  .fmode.hs .fnow .tgt b { min-width: 0; }
}

/* Fit the actual space below the workspace and session headers, including mock and practice banners. */
@media (min-width: 761px) {
  .fmode.hs, .fhour.hs { --fh-bar: clamp(204px, calc(var(--session-room, 100dvh) - 500px), 380px); }
  .fmode.session-tight { min-height: 0; }
  .fhour.session-tight:not(.hs), .fmode.session-tight:not(.hs) { --fh-plot: 56px; --fh-bar: 116px; }
  .fmode.session-tight .fprog { display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
  .fmode.session-tight .fwork, .fmode.session-tight .fcontrols { flex: none; overflow: visible; max-height: none; }
  .fmode.session-tight .ftgts { flex-shrink: 0; }
  .fmode.session-tight .fside { overflow: auto; }
}
.hr-program-count { font-weight: 700; }
/* The prototype’s approved operational workspace: shared shell, Home, Schedule, People and settings. In the prototype's order; do not reorder. */
/* ---------- version 25n: the approved operational workspace ---------- */
/* Shared presentation only. All source records, actions and role boundaries stay with their existing adapters. */
.v25h-frame { --ground:#F8F7F2; --card:#FFFEFA; --line:#DEDFD5; --line2:#BFCBBE; --ink:#183D36; --ink2:#58695F; --faint:#EEEFE7; --grid:#E7E8E0; --tealT:#E4EEE7; --tealW:#F6F9F2; background:var(--ground); grid-template-columns:222px minmax(0,1fr); }
.v25h-frame > .bmain { padding:30px 32px 48px; gap:22px; max-width:1600px; }
.v25h-frame .bnav { background:#F0F0E7; padding:26px 16px 20px; gap:22px; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; }
.v25h-frame .ws-brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:21px; letter-spacing:-.04em; font-weight:650; color:var(--tealD); line-height:1.1; padding:0 9px; }
.v25h-frame .ws-brand :is(img,svg) { width:34px; height:34px; flex:none; }
.v25h-frame .ws-org { padding:12px; background:#FFFEFA99; border:1px solid var(--line); border-radius:11px; font-size:13px; overflow-wrap:anywhere; }
.v25h-frame .ws-org small { display:block; margin-top:3px; color:var(--ink2); font-size:11px; }
.v25h-frame .ws-navtitle { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink2); margin:0 12px 9px; font-weight:750; }
.v25h-frame .bnav nav { gap:5px; flex-direction:column; flex-wrap:nowrap; }
.v25h-frame .bnav nav button { font-size:14px; padding:12px; min-height:45px; border-radius:9px; justify-content:flex-start; font-weight:600; }
.v25h-frame .bnav nav button:hover { background:#E4EBE0; }
.v25h-frame .bnav nav button[aria-current="page"] { background:var(--teal); color:#fff; }
.ws-icon { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.v25h-frame .bnav nav .count { margin-left:auto; min-width:20px; height:20px; font-size:11px; border-radius:5px; background:#E2E9DA; color:var(--tealD); }
.v25h-frame .bnav nav button[aria-current="page"] .count { background:#FFFFFF26; color:#fff; }
.v25h-frame .bnav .me { border-top:1px solid var(--line); padding:15px 10px 0; font-size:12px; overflow-wrap:anywhere; }
.v25h-frame .pagehead { align-items:flex-start; gap:18px; margin-bottom:1px; min-width:0; }
.v25h-frame .pagehead > div { min-width:0; }
.v25h-frame .pagehead .h1 { font-size:37px; line-height:1.15; font-weight:550; letter-spacing:-.035em; margin:5px 0 9px; }
.v25h-frame .pagehead .crumb { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink2); }
.v25h-frame .pagehead .lede { font-size:15px; line-height:1.5; max-width:760px; color:var(--ink2); }
.v25h-frame .pagehead > .btn { margin-top:18px; flex:none; }
.v25h-frame .card { border-radius:16px; }
.v25h-frame .btn { line-height:20px; border-width:1px; border-radius:9px; font-weight:650; font-size:14px; min-height:40px; padding:9px 14px; }
.v25h-frame .btn.small { min-height:35px; font-size:13px; padding:7px 11px; }
.v25h-frame .btn:not(.primary):not(.dark) { border-color:var(--line2); background:var(--card); }
.v25h-frame .inp { border-width:1px; border-radius:8px; }
/* Keep compact rounded surfaces on their own paint layer as long pages scroll. */
.v25h-frame .v25b-set :is(.btn,.inp), .v25h-frame .v25b-val, .v25h-frame .ws-setting-detail summary, .v25h-frame .hd-fix .btn, .v25h-frame .v24-contract { transform:translateZ(0); }
.v25h-frame .v24-contract { line-height:20px; }
.v25h-frame .v24-contract .v24-cardhead h2 { line-height:32px; }
.v25h-frame .v24-ctsum { line-height:20px; }
.v25h-frame .v24-ctsum .v24-pill { transform:translateZ(0); line-height:18px; border-width:1px; }
.v25h-frame .chip { font-size:12px; border-radius:6px; font-weight:650; }
.v25h-frame .sc-seg { background:#EEEFE7; border-radius:9px; padding:3px; }
.v25h-frame .sc-seg button { font-size:13px; font-weight:650; border-radius:7px; padding:8px 11px; min-height:35px; }
.v25h-frame .hd-counts { background:#E7EEE4; border:1px solid #D5DFD2; border-radius:14px; padding:16px 20px; gap:12px; margin-top:0; }
.v25h-frame .hd-counts .hchip { background:none; border:0; border-radius:0; min-height:32px; font-size:16px; font-weight:600; padding:0 22px 0 0; border-right:1px solid #CAD7C6; }
.v25h-frame .hd-counts .hchip:last-child { border:0; }
.ws-home-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); gap:22px; align-items:start; }
.ws-home-main,.ws-home-side { display:flex; flex-direction:column; gap:22px; min-width:0; }
/* Home for the owner and the office: the command screen (version 25x) */
.cx-root { --cx-ink: #0B1F1B; --cx-deep: #072A26; --cx-mint: #5FE0C4; --cx-amber: #F5B651; --cx-sky: #8FB8FF; --cx-shadow: 0 1px 2px rgba(16,32,28,.05), 0 12px 28px -20px rgba(16,32,28,.28); display: flex; flex-direction: column; gap: 22px; }
.cx-root button { cursor: pointer; }
.cx-root :focus-visible { outline: 3px solid #5FE0C4; outline-offset: 2px; }
/* the hero */
.cx-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 26px 30px 24px; color: #FFFFFF; background: linear-gradient(135deg, #062723 0%, #0A3A34 45%, #0D2F3D 100%); box-shadow: 0 24px 40px -30px rgba(4,30,27,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.cx-aurora { position: absolute; inset: -40%; z-index: -1; background: radial-gradient(38% 42% at 18% 30%, rgba(95,224,196,.36), transparent 70%), radial-gradient(30% 36% at 78% 20%, rgba(143,184,255,.28), transparent 70%), radial-gradient(34% 40% at 64% 86%, rgba(245,182,81,.20), transparent 70%); filter: blur(10px); animation: cx-drift 22s ease-in-out infinite alternate; }
.cx-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%); }
@keyframes cx-drift { 0% { transform: translate3d(0,0,0) rotate(0deg); } 100% { transform: translate3d(4%, -3%, 0) rotate(8deg); } }
.cx-herotop { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.cx-crumb { margin: 0; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.62); letter-spacing: .02em; }
.cx-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.cx-pill svg { width: 14px; height: 14px; }
.cx-pill:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.cx-pill.solid { background: #FFFFFF; color: var(--cx-deep); border-color: #FFFFFF; box-shadow: 0 8px 20px -10px rgba(95,224,196,.8); }
.cx-pill.solid:hover { background: #E9FBF6; }
.cx-herobody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; margin-top: 18px; }
.cx-h1 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 4.2vw, 50px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; background: linear-gradient(92deg, #FFFFFF 0%, #DFF8F1 55%, #A9E9DA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.cx-chips span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.cx-eyebrow { margin: 22px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 8px; }
.cx-card .cx-eyebrow { margin: 0 0 4px; color: var(--ink2); }
.cx-eyebrow.live { color: #0E6B61; }
.cx-eyebrow.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #19B394; animation: cx-pulse 2s infinite; }
@keyframes cx-pulse { 0% { box-shadow: 0 0 0 0 rgba(25,179,148,.55); } 70% { box-shadow: 0 0 0 9px rgba(25,179,148,0); } 100% { box-shadow: 0 0 0 0 rgba(25,179,148,0); } }
.cx-brief { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cx-brief li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.86); }
.cx-brief li > i { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); background: rgba(255,255,255,.5); }
.cx-brief li.amber > i { background: var(--cx-amber); box-shadow: 0 0 12px rgba(245,182,81,.8); }
.cx-brief li.red > i { background: #FF8A6B; box-shadow: 0 0 12px rgba(255,138,107,.8); }
.cx-brief li.teal > i { background: var(--cx-mint); box-shadow: 0 0 12px rgba(95,224,196,.8); }
.cx-hero .cx-link { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.35); }
.cx-brief .cx-link { display: inline; }
.cx-link { border: 0; background: none; padding: 0; font: inherit; color: var(--tealD); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(14,107,97,.3); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-align: left; transition: text-decoration-color .15s ease; }
.cx-link:hover { text-decoration-color: currentColor; }
.cx-link.warn { color: #8E3A26; font-size: 14px; margin: 2px 22px 18px; align-self: flex-start; }
/* the rings */
.cx-rings { display: flex; align-items: center; gap: 22px; }
.cx-ringbox { position: relative; width: 196px; height: 196px; flex: none; }
.cx-ringbox svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cx-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 12; }
.cx-ring { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.cx-ring.del { stroke: var(--cx-mint); filter: drop-shadow(0 0 6px rgba(95,224,196,.55)); }
.cx-ring.sch { stroke: var(--cx-sky); filter: drop-shadow(0 0 6px rgba(143,184,255,.5)); }
.cx-ring.day { stroke: var(--cx-amber); filter: drop-shadow(0 0 6px rgba(245,182,81,.5)); }
.cx-root.intro .cx-ring { animation: cx-ringin 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cx-ringin { from { stroke-dashoffset: var(--len); } }
.cx-ringmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cx-ringmid b { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-ringmid span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); max-width: 96px; line-height: 1.3; }
.cx-ringkey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-ringkey button { display: grid; grid-template-columns: 10px auto; column-gap: 10px; text-align: left; border: 0; background: none; color: #FFFFFF; font: inherit; padding: 6px 10px; border-radius: 12px; transition: background .15s ease; }
.cx-ringkey button:hover { background: rgba(255,255,255,.08); }
.cx-ringkey i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.cx-ringkey i.del { background: var(--cx-mint); } .cx-ringkey i.sch { background: var(--cx-sky); } .cx-ringkey i.day { background: var(--cx-amber); }
.cx-ringkey span { font-size: 12px; color: rgba(255,255,255,.62); font-weight: 700; }
.cx-ringkey b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the command bar */
.cx-cmd { margin-top: 22px; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px 0 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); font: inherit; font-size: 16px; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cx-cmd svg { width: 20px; height: 20px; flex: none; color: var(--cx-mint); }
.cx-cmd span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cmd:hover { background: rgba(255,255,255,.12); border-color: rgba(95,224,196,.55); box-shadow: 0 0 0 4px rgba(95,224,196,.12); color: #FFFFFF; }
.cx-root kbd, .cx-pal kbd { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 7px; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); }
/* cards */
.cx-card { background: var(--card); border-radius: 22px; border: 1px solid rgba(16,32,28,.06); box-shadow: var(--cx-shadow); overflow: hidden; }
.cx-cardhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; padding: 20px 22px 0; }
.cx-cardhead h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 550; letter-spacing: -.02em; line-height: 1.15; }
.cx-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink2); }
.cx-foot { margin: 0; padding: 4px 22px 18px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
/* the day */
.cx-days { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--faint); }
.cx-days button { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 74px; padding: 8px 12px 10px; border-radius: 12px; border: 0; background: none; font: inherit; text-align: left; color: var(--ink2); transition: background .15s ease, box-shadow .15s ease; }
.cx-days button span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cx-days button b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cx-days button.is-today span::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #19B394; margin-left: 6px; vertical-align: 1px; }
.cx-days button:hover { background: rgba(255,255,255,.7); }
.cx-days button[aria-pressed="true"] { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16,32,28,.08), 0 6px 16px -10px rgba(16,32,28,.4); }
.cx-spark { display: block; height: 4px; border-radius: 4px; background: rgba(16,32,28,.08); overflow: hidden; margin-top: 3px; }
.cx-spark > i { display: block; height: 100%; border-radius: 4px; background: #9FD3C8; overflow: hidden; }
.cx-spark > i > i { display: block; height: 100%; background: #0E6B61; }
.cx-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 22px 0; font-size: 13px; color: var(--ink2); }
.cx-key i { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.cx-key.live i { background: linear-gradient(135deg, #19B394, #0E6B61); } .cx-key.wait i { background: linear-gradient(135deg, #F7C46C, #E9A23B); } .cx-key.ahead i { background: #E3ECF9; box-shadow: inset 0 0 0 1px #A9C0E6; } .cx-key.done i { background: #CFE7E0; } .cx-key.can i { background: repeating-linear-gradient(135deg, #EEF2F0 0 3px, #D5DEDA 3px 6px); }
.cx-scroll { overflow-x: auto; padding: 10px 22px 6px; }
.cx-tl { position: relative; min-width: 720px; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; overflow: hidden; }
.cx-lane { display: grid; grid-template-columns: 158px minmax(0, 1fr); align-items: center; gap: 14px; }
.cx-who { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.cx-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-track { position: relative; height: 50px; border-radius: 14px; background: linear-gradient(180deg, #F7FAF9, #F1F5F3); }
.cx-axis .cx-track { height: 22px; background: none; }
.cx-tick { position: absolute; top: 0; bottom: -600px; width: 0; border-left: 1px dashed rgba(16,32,28,.1); pointer-events: none; z-index: 0; }
.cx-tick span { position: absolute; top: 2px; left: 5px; font-size: 11px; font-style: normal; font-weight: 700; color: #8A9A94; white-space: nowrap; }
.cx-now { position: absolute; top: 0; bottom: -600px; width: 0; border-left: 2px solid #19B394; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 4px rgba(25,179,148,.6)); }
.cx-now span { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: 11px; font-weight: 800; font-style: normal; color: #FFFFFF; background: #0E6B61; border-radius: 999px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(14,107,97,.7); }
.cx-bar { position: absolute; top: 5px; bottom: 5px; z-index: 1; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 10px 0 8px; border-radius: 11px; border: 0; font: inherit; text-align: left; overflow: hidden; white-space: nowrap; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease; }
.cx-bar:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(16,32,28,.55); z-index: 2; }
.cx-bar[aria-pressed="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0E6B61, 0 10px 22px -12px rgba(16,32,28,.55); z-index: 2; }
.cx-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.25); }
.cx-ic svg { width: 12px; height: 12px; }
.cx-bt { display: flex; flex-direction: column; min-width: 0; }
.cx-bar b { font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.cx-bar small { font-size: 11px; line-height: 1.25; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.cx-bar.live { background: linear-gradient(135deg, #1FBF9F, #0E6B61); color: #FFFFFF; }
.cx-bar.live::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); background-size: 220% 100%; animation: cx-sheen 2.8s linear infinite; pointer-events: none; }
@keyframes cx-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.cx-bar.wait { background: linear-gradient(135deg, #FFD58A, #F1A93A); color: #4A2E05; }
.cx-bar.wait .cx-ic { background: rgba(255,255,255,.45); }
.cx-bar.ahead { background: #EAF1FC; color: #22406E; box-shadow: inset 0 0 0 1px #C4D5F0; }
.cx-bar.done { background: #DCEFE9; color: #0A4F48; }
.cx-bar.done .cx-ic { background: #0E6B61; color: #FFFFFF; }
.cx-bar.can { background: repeating-linear-gradient(135deg, #F4F7F5 0 6px, #E6ECE9 6px 12px); color: #7A8A84; box-shadow: inset 0 0 0 1px #D5DEDA; }
.cx-bar.can b { text-decoration: line-through; }
.cx-empty { margin: 0; padding: 18px 22px 22px; color: var(--ink2); }
.cx-detail { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin: 6px 22px 20px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #F3FAF8, #EEF4FB); border: 1px solid rgba(14,107,97,.12); animation: cx-rise .28s cubic-bezier(.2,.8,.2,1) both; }
.cx-dtext { flex: 1 1 260px; min-width: 0; }
.cx-detail h3 { margin: 2px 0 2px; font-size: 19px; }
.cx-detail p { margin: 0; font-size: 14px; color: var(--ink2); }
.cx-detail .cx-note { font-size: 12px; margin-top: 4px; }
.cx-state { font-size: 11px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cx-state.wait { color: #8A5A0C !important; } .cx-state.done, .cx-state.live { color: var(--tealD) !important; } .cx-state.ahead { color: #22406E !important; }
/* avatars */
.cx-av { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: hsl(var(--h) 45% 24%); background: linear-gradient(135deg, hsl(var(--h) 70% 90%), hsl(calc(var(--h) + 40) 60% 82%)); box-shadow: inset 0 0 0 1px hsla(var(--h), 40%, 40%, .15); }
.cx-av.big { width: 46px; height: 46px; font-size: 15px; }
/* the grid below */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 22px; align-items: start; }
.cx-main, .cx-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* needs attention */
.cx-mix { display: flex; gap: 3px; height: 6px; margin: 16px 22px 0; border-radius: 6px; overflow: hidden; }
.cx-mix i { min-width: 6px; transition: opacity .2s ease; }
.cx-mix i.dim { opacity: .2; }
.cx-mix .money, .cx-areas .money i, .cx-t i.money { background: #2E8B6A; } .cx-mix .schedule, .cx-areas .schedule i, .cx-t i.schedule { background: #4A6FA5; } .cx-mix .reports, .cx-areas .reports i, .cx-t i.reports { background: #E09A2D; } .cx-mix .people, .cx-areas .people i, .cx-t i.people { background: #7A63D0; } .cx-mix .home, .cx-areas .home i, .cx-t i.home { background: #19B394; } .cx-mix .settings, .cx-areas .settings i, .cx-t i.settings { background: #64748B; }
.cx-areas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px 4px; }
.cx-areas button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink2); transition: all .15s ease; }
.cx-areas button i { width: 8px; height: 8px; border-radius: 50%; }
.cx-areas button b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cx-areas button:hover { border-color: var(--line2); color: var(--ink); }
.cx-areas button[aria-pressed="true"] { background: var(--cx-ink); border-color: var(--cx-ink); color: #FFFFFF; }
.cx-areas button[aria-pressed="true"] b { color: #FFFFFF; }
.cx-items { list-style: none; margin: 0; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.cx-item { position: relative; border-radius: 16px; border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cx-item:hover { background: #F8FBFA; }
.cx-item.open { background: var(--card); border-color: rgba(16,32,28,.08); box-shadow: 0 14px 30px -20px rgba(16,32,28,.45); }
.cx-item.open::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: #0E6B61; }
.cx-item.open.red::before { background: #D2573A; } .cx-item.open.amber::before { background: #E9A23B; }
.cx-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; }
.cx-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 8px 6px; font: inherit; text-align: left; border-radius: 12px; color: var(--ink); }
.cx-n { flex: none; width: 56px; height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-n small { font-family: var(--sans); font-size: 10px; font-weight: 800; margin-top: 3px; opacity: .75; }
.cx-n.red { background: #FBDFD5; color: #7A2812; } .cx-n.amber { background: #FDEBC8; color: #6A4307; } .cx-n.teal { background: #DDF0EA; color: var(--tealD); }
.cx-t { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.cx-t small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 2px; }
.cx-t small i { width: 7px; height: 7px; border-radius: 50%; }
.cx-chev { flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid #8A9A94; border-bottom: 2px solid #8A9A94; transform: rotate(45deg); transition: transform .2s ease; margin-right: 6px; }
.cx-toggle[aria-expanded="true"] .cx-chev { transform: rotate(-135deg); }
.cx-quick { flex: none; display: flex; gap: 6px; }
.cx-quick .btn { white-space: nowrap; border-radius: 10px; }
.cx-body { padding: 0 18px 16px 82px; display: flex; flex-direction: column; gap: 8px; animation: cx-rise .25s cubic-bezier(.2,.8,.2,1) both; }
.cx-body .hd-stake { font-size: 14px; line-height: 1.55; margin: 0; color: var(--ink2); }
.cx-body .hd-set { font-size: 12px; margin: 0; color: var(--ink2); }
.cx-recs { font-size: 13px; background: var(--card); border-radius: 12px; }
.cx-recs th, .cx-recs td { text-align: left !important; padding: 7px 10px; }
.cx-needs .hd-more { margin: 0 22px 18px; }
.cx-needs .hd-clear { margin: 0; padding: 18px 22px 22px; }
@keyframes cx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* booked to billed */
.cx-flows { list-style: none; margin: 0; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.cx-fl { width: 100%; display: grid; grid-template-columns: 132px minmax(0, 1fr) 64px; align-items: center; gap: 12px; border: 0; background: none; font: inherit; text-align: left; padding: 8px; border-radius: 12px; transition: background .15s ease; }
.cx-fl:hover { background: #F6FAF9; }
.cx-fll { font-size: 13px; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; }
.cx-fll small { font-size: 12px; font-weight: 400; color: var(--ink2); }
.cx-flt { height: 12px; border-radius: 999px; background: var(--faint); overflow: hidden; }
.cx-flt i { display: block; height: 100%; border-radius: 999px; transform-origin: left; }
.cx-root.intro .cx-flt i, .cx-root.intro .cx-pbar i { animation: cx-grow 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cx-grow { from { transform: scaleX(0); } }
.cx-fl.auth i { background: linear-gradient(90deg, #B8CCEE, #8FB0E4); } .cx-fl.sch i { background: linear-gradient(90deg, #8FD8C6, #3FB39B); } .cx-fl.del i { background: linear-gradient(90deg, #1E9E87, #0A4F48); }
.cx-fl > b { font-family: var(--serif); font-size: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cx-runhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 22px 8px; font-size: 13px; font-weight: 700; color: var(--ink2); border-top: 1px solid var(--faint); margin-top: 6px; }
.cx-runhead b { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.cx-money { display: flex; gap: 3px; margin: 0 22px 18px; border-radius: 14px; overflow: hidden; }
.cx-money button { min-width: 0; border: 0; padding: 9px 11px; text-align: left; font: inherit; color: #FFFFFF; display: flex; flex-direction: column; overflow: hidden; transition: filter .15s ease; }
.cx-money button span { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-money button b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-money .ready { background: linear-gradient(135deg, #34A07A, #23705A); } .cx-money .fix { background: linear-gradient(135deg, #E0A33D, #C27F1E); } .cx-money .late { background: linear-gradient(135deg, #C8573D, #9C3A25); }
.cx-money button:hover { filter: brightness(1.08); }
.cx-flow .cx-foot { border-top: 1px solid var(--faint); padding-top: 12px; margin-top: 6px; }
/* room to grow */
.cx-people { list-style: none; margin: 0; padding: 14px 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.cx-people li { display: grid; grid-template-columns: 30px 118px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.cx-pn { min-width: 0; }
.cx-pn b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pn small { font-size: 12px; color: var(--ink2); }
.cx-pbar { position: relative; height: 10px; border-radius: 999px; background: var(--faint); border: 0; padding: 0; overflow: visible; }
.cx-pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #8FD8C6, #19A086); transform-origin: left; }
.cx-pbar em { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px solid var(--cx-ink); border-radius: 2px; }
.cx-pbar:hover i { background: linear-gradient(90deg, #3FB39B, #0A4F48); }
.cx-pv { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-pv small { display: block; font-weight: 400; color: var(--ink2); font-size: 11px; }
/* the command window */
.cx-palwrap { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cx-palscrim { position: absolute; inset: 0; background: rgba(6,24,21,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cx-fade .18s ease both; }
.cx-pal { position: relative; width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 40px 90px -30px rgba(6,24,21,.7), 0 0 0 1px rgba(16,32,28,.08); overflow: hidden; animation: cx-pop .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.cx-palin { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--faint); }
.cx-palin svg { width: 20px; height: 20px; color: #0E6B61; flex: none; }
.cx-palin input { flex: 1 1 auto; min-width: 0; height: 60px; border: 0; background: none; font: inherit; font-size: 18px; color: var(--ink); outline: none; }
.cx-pal kbd { color: var(--ink2); border-color: var(--line); background: var(--faint); }
.cx-pallist { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; }
.cx-pg { margin: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8A9A94; }
.cx-pi { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; background: none; font: inherit; text-align: left; padding: 11px 12px; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 600; }
.cx-pi small { flex: none; font-size: 12px; font-weight: 700; color: var(--ink2); }
.cx-pi:hover, .cx-pi.on { background: linear-gradient(90deg, #E6F5F0, #F1F7FD); }
.cx-pi.on small { color: var(--tealD); }
.cx-empty2 { margin: 0; padding: 16px 20px 20px; color: var(--ink2); }
/* the timeline's hover card */
.cx-tip { position: absolute; z-index: 90; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #0B1F1B; color: #FFFFFF; font-family: var(--sans); font-size: 13px; box-shadow: 0 16px 34px -14px rgba(6,24,21,.8); }
.cx-tip span { color: rgba(255,255,255,.75); }
.cx-tip em { font-style: normal; font-weight: 700; color: #5FE0C4; }
/* the command screen, next (version 25y): kids worth a look, pings, live, since you last looked, hours at risk */
.cx-brief li.cx-since { display: block; font-size: 14px; color: rgba(255,255,255,.75); padding: 8px 12px; margin: 0 0 4px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.cx-since b { color: #FFFFFF; }
.cx-new { font-style: normal; font-weight: 700; color: var(--cx-mint); margin-left: 4px; animation: cx-rise .4s ease both; }
.cx-livepill { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; vertical-align: 6px; padding: 3px 10px; border-radius: 999px; background: #E6F5F0; color: #0A4F48; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0; }
.cx-livepill i { width: 7px; height: 7px; border-radius: 50%; background: #19B394; animation: cx-pulse 2s infinite; }
.cx-bar.flash { animation: cx-flash 1.2s ease 2; }
@keyframes cx-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(25,179,148,0); } 50% { box-shadow: 0 0 0 6px rgba(25,179,148,.35); } }
.cx-bell { flex: none; margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; color: #8A5A0C; }
.cx-bell svg { width: 12px; height: 12px; }
.cx-ping { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #F1A93A, #D9861B); box-shadow: 0 8px 18px -10px rgba(217,134,27,.9); transition: transform .15s ease, filter .15s ease; }
.cx-ping:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cx-ping svg, .cx-pinged svg { width: 15px; height: 15px; }
.cx-pinged { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #FFF3DB; color: #6A4307; font-size: 13px; font-weight: 800; animation: cx-rise .3s ease both; }
.cx-detail .drow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* kids worth a look */
.cx-worth .cx-sub { max-width: 640px; font-size: 14px; }
.cx-kids { list-style: none; margin: 0; padding: 16px 22px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.cx-kid { border-radius: 18px; padding: 16px; background: linear-gradient(160deg, #F4F8FE 0%, #F6FBF9 100%); border: 1px solid rgba(74,111,165,.14); }
.cx-kidhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-kidname { flex: 1 1 160px; min-width: 0; }
.cx-kidname h3 { margin: 0; font-size: 18px; }
.cx-kidname p { margin: 2px 0 0; font-size: 13px; color: var(--ink2); }
.cx-sigs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-sig { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(16,32,28,.06); background: #FFFFFF; font: inherit; text-align: left; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.cx-sig:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(16,32,28,.5); }
.cx-spk { flex: none; width: 132px; height: 44px; }
.cx-spk polyline { fill: none; stroke: #4A6FA5; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cx-spk circle { fill: #4A6FA5; }
.cx-spk.drop polyline { stroke: #C8573D; } .cx-spk.drop circle { fill: #C8573D; }
.cx-spk.off-pace polyline { stroke: #D9861B; } .cx-spk.off-pace circle { fill: #D9861B; }
.cx-spk .goal { stroke: #19B394; stroke-width: 1.2; stroke-dasharray: 3 3; }
.cx-spk .phase { stroke: #8A9A94; stroke-width: 1.2; }
.cx-sigt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-sigt em { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #E3ECF9; color: #22406E; }
.cx-sigt em.drop { background: #FBDFD5; color: #7A2812; } .cx-sigt em.off-pace { background: #FDEBC8; color: #6A4307; }
.cx-sigt b { font-size: 15px; }
.cx-sigt small { font-size: 13px; color: var(--ink2); line-height: 1.4; }
/* hours at risk */
.cx-risk .cx-cardhead { align-items: center; }
.cx-riskn { font-family: var(--serif); font-size: 34px; font-weight: 600; color: #9C3A25; font-variant-numeric: tabular-nums; }
.cx-riskbar { display: flex; gap: 3px; height: 10px; margin: 14px 22px 4px; border-radius: 10px; overflow: hidden; }
.cx-riskbar i, .cx-risks i { background: #C8573D; } .cx-riskbar .wait, .cx-risks i.wait { background: #E9A23B; } .cx-riskbar .under, .cx-risks i.under { background: #7A63D0; } .cx-risks i.auth { background: #4A6FA5; }
.cx-risks { list-style: none; margin: 0; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.cx-risks button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; text-align: left; color: var(--ink); }
.cx-risks button:hover { background: #F6FAF9; }
.cx-risks i { width: 10px; height: 10px; border-radius: 50%; }
.cx-risks b { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .cx-kids { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 16px; } .cx-spk { width: 96px; } .cx-livepill { display: flex; width: max-content; margin: 6px 0 0; } }
/* the flagged graph, full size */
.cx-sigs > li.on { border-radius: 16px; background: #FFFFFF; box-shadow: 0 18px 40px -26px rgba(16,32,28,.5); }
.cx-sigs > li.on .cx-sig { border-color: transparent; box-shadow: none; transform: none; }
.cx-sig .cx-chev { margin-left: auto; }
.cx-sigs > li.on .cx-sigt small { display: none; }
.cx-sig[aria-expanded="true"] .cx-chev { transform: rotate(-135deg); }
.cx-bigwrap { padding: 4px 18px 0; animation: cx-rise .3s cubic-bezier(.2,.8,.2,1) both; }
.cx-bigsay { margin: 4px 0 10px; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); max-width: 720px; }
.cx-big { display: block; width: 100%; height: auto; font-family: var(--sans); }
.cx-big .ph.a { fill: #F1F4F8; } .cx-big .ph.b { fill: #F2F8F5; }
.cx-big .phl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; fill: #5B6B66; text-anchor: middle; }
.cx-big .grid { stroke: #DCE4E1; stroke-width: 1; }
.cx-big .yl { font-size: 12px; fill: #6B7B76; text-anchor: end; font-variant-numeric: tabular-nums; }
.cx-big .xl { font-size: 11px; fill: #8A9A94; text-anchor: middle; }
.cx-big .xt { font-size: 11px; font-weight: 700; fill: #8A9A94; text-anchor: end; }
.cx-big .chg { stroke: #10201C; stroke-width: 2; }
.cx-big .goal { stroke: #19B394; stroke-width: 2; stroke-dasharray: 6 5; }
.cx-big .goaltag rect { fill: #19B394; } .cx-big .goaltag text { font-size: 12px; font-weight: 800; fill: #FFFFFF; text-anchor: middle; }
.cx-big .ln { fill: none; stroke: #2F4F7F; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.cx-big .pt { fill: #2F4F7F; stroke: #FFFFFF; stroke-width: 2; }
.cx-big .pt.late { fill: #FFFFFF; stroke: #2F4F7F; stroke-width: 2; }
.cx-big .pt.last { fill: #10201C; }
.cx-big .lastlab text { font-size: 13px; font-weight: 800; fill: #10201C; text-anchor: middle; }
.cx-big .hl.was { fill: rgba(47,79,127,.08); } .cx-big .hl.now { fill: rgba(200,87,61,.1); }
.cx-big .avg { stroke-width: 3; stroke-linecap: round; } .cx-big .avg.was { stroke: #2F4F7F; } .cx-big .avg.now { stroke: #C8573D; }
.cx-big .tag rect { stroke-width: 0; } .cx-big .tag.was rect { fill: #2F4F7F; } .cx-big .tag.now rect { fill: #C8573D; }
.cx-big .tag text { font-size: 12px; font-weight: 800; fill: #FFFFFF; text-anchor: middle; }
.cx-big .dropcall path { stroke: #C8573D; stroke-width: 2; stroke-dasharray: 3 4; fill: none; }
.cx-big .dropcall rect { fill: #FFFFFF; stroke: #C8573D; stroke-width: 2; } .cx-big .dropcall text { font-size: 12px; font-weight: 800; fill: #C8573D; text-anchor: middle; }
.cx-big .trend { stroke: #D9861B; stroke-width: 3; stroke-linecap: round; }
.cx-big .proj { stroke: #D9861B; stroke-width: 2.5; stroke-dasharray: 4 6; stroke-linecap: round; }
.cx-bigkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: 12px; color: var(--ink2); }
.cx-bigkey i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.cx-bigkey .k-pt { width: 10px; height: 10px; border-radius: 50%; background: #2F4F7F; }
.cx-bigkey .k-late { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #2F4F7F; box-sizing: border-box; }
.cx-bigkey .k-goal { width: 18px; border-top: 2px dashed #19B394; vertical-align: 3px; }
.cx-bigkey .k-chg { width: 2px; height: 12px; background: #10201C; }
.cx-bigacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 18px 18px; }
.cx-bigacts .help { flex: 1 1 260px; margin: 0; font-size: 12px; }
.cx-bigscroll { overflow-x: auto; }
@media (max-width: 700px) { .cx-bigsay { font-size: 18px; } .cx-bigwrap { padding: 4px 10px 0; } .cx-big { min-width: 560px; } }

/* Source accuracy: independent time facts, missing values and explicit refresh. */
.cx-sources { padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); }
.cx-sourcehead { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.cx-sourcehead p, .cx-sources small, .cx-recorded p { font-size: 12px; color: var(--muted); margin: 5px 0; }
.cx-sources details { margin-top: 10px; font-size: 12px; }
.cx-sources summary { cursor: pointer; font-weight: 700; }
.cx-sources ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.cx-sources li { display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--faint); border-radius: 10px; overflow-wrap: anywhere; }
.cx-sources li.stale, .cx-sources li.partial, .cx-sources li.unavailable { border-left: 3px solid #a96500; }
.cx-facts { display: grid; gap: 10px; padding: 16px 22px; }
.cx-facts button { color: inherit; font: inherit; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.cx-facts button:disabled { cursor: default; opacity: 1; }
.cx-facts span { font-weight: 700; font-size: 12px; }
.cx-facts b { font-size: 24px; font-variant-numeric: tabular-nums; }
.cx-facts small { font-size: 11px; line-height: 1.45; }
.cx-facts.hero { min-width: 280px; max-width: 440px; padding: 0; }
.cx-facts.hero button { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.cx-facts.hero small { display: none; }
.cx-billingfacts { display: grid; gap: 8px; padding: 0 22px 18px; }
.cx-billingfacts button { display: flex; justify-content: space-between; gap: 8px; padding: 10px; font: inherit; font-size: 12px; text-align: left; background: var(--faint); border: 1px solid var(--line); border-radius: 9px; }
.cx-recorded { margin: 14px 22px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-recorded h3 { margin: 0; font-size: 15px; }
.cx-recorded ul { padding: 0; list-style: none; }
.cx-recorded li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; }
.cx-recorded small { display: block; color: var(--muted); margin-top: 4px; }
.cx-day .cx-cardhead { flex-wrap: wrap; }
.cx-days { max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) { .cx-sources ul { grid-template-columns: 1fr; } .cx-sourcehead { flex-wrap: wrap; } .cx-facts.hero { min-width: 0; max-width: none; } }

.cx-root [hidden], .cx-pal [hidden], .cx-tip[hidden] { display: none !important; }
/* the first draw */
.cx-root.intro > * { animation: cx-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.cx-root.intro > *:nth-child(2) { animation-delay: .06s; } .cx-root.intro > *:nth-child(3) { animation-delay: .12s; } .cx-root.intro > *:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .cx-root *, .cx-root *::before, .cx-root *::after, .cx-pal, .cx-palscrim { animation: none !important; transition: none !important; } }
@media (max-width: 1150px) { .cx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cx-herobody { grid-template-columns: minmax(0, 1fr); } .cx-rings { justify-content: flex-start; } }
@media (max-width: 700px) { .cx-hero { padding: 20px 16px 18px; border-radius: 22px; } .cx-acts { width: 100%; } .cx-pill { flex: 1 1 auto; justify-content: center; } .cx-brief li { font-size: 15px; } .cx-ringbox { width: 150px; height: 150px; } .cx-ringmid b { font-size: 24px; } .cx-rings { gap: 14px; } .cx-cmd kbd { display: none; } .cx-cardhead { padding: 16px 16px 0; } .cx-cardhead h2 { font-size: 22px; } .cx-days { width: 100%; overflow-x: auto; } .cx-days button { min-width: 64px; padding: 7px 9px 9px; } .cx-keys { padding: 12px 16px 0; } .cx-scroll { padding: 10px 16px 6px; } .cx-lane { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; } .cx-detail { margin: 6px 16px 16px; } .cx-row { flex-wrap: wrap; } .cx-quick { width: 100%; padding-left: 76px; } .cx-body { padding: 0 14px 14px 14px; } .cx-mix, .cx-areas { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; } .cx-people { padding: 12px 16px 14px; } .cx-people li { grid-template-columns: 30px minmax(0, 1fr) 48px; } .cx-pbar { grid-column: 2 / 4; grid-row: 2; } .cx-fl { grid-template-columns: 110px minmax(0, 1fr) 54px; } .cx-money { margin: 0 16px 16px; } .cx-runhead { padding: 8px 16px; } .cx-foot { padding: 4px 16px 16px; } }
/* the BCBA's Home: the command screen in the owner Home's look (version 25y) */
.cx-hero.bh-head { display: block; }
.bh-sub { margin: 10px 0 16px; font-size: 19px; color: rgba(255,255,255,.86); }
.bh-root .cx-brief li { font-size: 18px; }
.bh-root .cx-brief li.blue > i { background: var(--cx-sky); box-shadow: 0 0 12px rgba(143,184,255,.8); }
.bh-ring { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bh-ring .cx-ringmid b { font-size: 54px; line-height: 1; }
.bh-ring .cx-ringmid span { font-size: 13px; max-width: 120px; }
.bh-source-count { justify-content: center; padding: 28px; }
.bh-source-count > b { font-size: 54px; line-height: 1; }
.bh-source-count > span { font-size: 14px; }
.bh-ringkey { margin: 0; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.62); }
.bh-av { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #FFFFFF; background: var(--lh, #2F7F9E); }
.cx-who .bh-av { width: 32px; height: 32px; font-size: 11px; }
.cx-who small { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); }
.bh-line { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0; padding: 12px 22px 22px; font-size: 16px; color: var(--ink2); }
.bh-line p { margin: 0; }
.bh-line b { color: var(--ink); }
.bh-foot { margin: 0; padding: 4px 22px 18px; font-size: 14px; color: var(--ink2); }
/* the next visit */
.bh-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; margin: 14px 22px 4px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(90deg, #E3F3EF, #F3FAF8); border: 1px solid rgba(14,107,97,.16); }
.bh-next.now { background: linear-gradient(90deg, #D4F2E9, #EAF8F3); border-color: rgba(14,107,97,.35); }
.bh-when b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--tealD); font-variant-numeric: tabular-nums; }
.bh-when span { font-size: 13px; font-weight: 700; color: var(--ink2); }
.bh-what .cx-eyebrow { margin: 0 0 2px; color: var(--ink2); }
.bh-what h3 { margin: 0; font-size: 19px; }
.bh-what p { margin: 2px 0 0; font-size: 15px; color: var(--ink2); }
.bh-live { color: #0B5A4B; }
.bh-live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #19B394; margin-right: 6px; vertical-align: 1px; animation: cx-pulse 2s infinite; }
.bh-go { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 280px; }
.bh-go .help { font-size: 12px; text-align: right; }
.bh-today .cx-bar.bh-mine:not(.done) { background: linear-gradient(135deg, #0E6B61, #138476); color: #FFFFFF; }
/* waiting on you */
.bh-n { display: inline-block; vertical-align: 4px; margin-left: 6px; font-family: var(--sans); font-size: 14px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #FFF3DC; color: #6B4308; }
.bh-n.zero { background: #E3F3EF; color: var(--tealD); }
.bh-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.bh-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 22px; border-top: 1px solid var(--faint); }
.bh-rt { min-width: 0; }
.bh-rn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 17px; }
.bh-rl { margin: 2px 0 0; font-size: 15px; color: var(--ink2); }
.bh-rl b { color: var(--ink); }
.bh-small { margin-left: 8px; font-size: 13px; color: var(--ink2); }
.bh-warn { color: #8A5A0C !important; }
.bh-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
.bh-tag.amber { background: #FFF3DC; color: #6B4308; } .bh-tag.blue { background: #E8EFFD; color: #23458F; } .bh-tag.red { background: #FCE9E6; color: #7A231B; }
.bh-ra { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bh-aplist { grid-column: 2 / -1; list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bh-aplist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--faint); font-size: 14px; color: var(--ink2); }
.bh-aplist li:first-child { border-top: 0; }
.bh-aplist b { color: var(--ink); }
/* worth a look */
.bh-wl { list-style: none; margin: 0; padding: 14px 22px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.bh-wl li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #FFFFFF, #FAFCFB); }
.bh-wl .bh-av { width: 32px; height: 32px; font-size: 11px; }
.bh-wl .bh-rn { flex-wrap: nowrap; align-items: flex-start; } .bh-wl .bh-av { flex: none; }
.bh-wt { margin: 0; font-size: 15px; color: var(--ink2); }
/* supervision this month */
.bh-sups { list-style: none; margin: 10px 0 0; padding: 0 22px 14px; }
.bh-sups li { display: grid; grid-template-columns: 32px 150px minmax(0, 1fr) 230px; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--faint); }
.bh-sups li:first-child { border-top: 0; }
.bh-sups .bh-av { width: 32px; height: 32px; font-size: 11px; }
.bh-sn { font-size: 15px; }
.bh-bar { position: relative; height: 12px; border-radius: 999px; background: var(--faint); }
.bh-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #D98B1F, #F5B651); }
.bh-bar i.ok { background: linear-gradient(90deg, #0E6B61, #5FE0C4); }
.bh-bar em { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--ink); }
.bh-sw { font-size: 14px; color: var(--ink2); }
.bh-sw small { display: block; font-size: 12px; }
.bh-root > .card { margin: 0; border-radius: 22px; border: 1px solid rgba(16,32,28,.06); box-shadow: var(--cx-shadow); padding: 20px 22px; }
.bh-root > .card .ovhead h2 { font-family: var(--serif); font-size: 26px; font-weight: 550; letter-spacing: -.02em; }
@media (max-width: 760px) { .bh-next { grid-template-columns: auto minmax(0, 1fr); } .bh-go { grid-column: 1 / -1; align-items: flex-start; max-width: none; } .bh-go .help { text-align: left; }
  .bh-row { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; } .bh-av { width: 40px; height: 40px; } .bh-ra { grid-column: 1 / -1; justify-content: flex-start; } .bh-aplist { grid-column: 1 / -1; }
  .bh-sups { padding: 0 16px 12px; } .bh-sups li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; } .bh-bar, .bh-sw { grid-column: 1 / -1; }
  .bh-line, .bh-foot { padding-left: 16px; padding-right: 16px; } .bh-next { margin: 12px 16px 4px; } .bh-ring { flex-direction: row; } .bh-ring .cx-ringbox { width: 120px; height: 120px; } .bh-ring .cx-ringmid b { font-size: 34px; } .bh-ring .cx-ringmid span { font-size: 11px; } .bh-wl { padding: 12px 16px 16px; } }
.v25h-frame .hd-sec { padding:0; gap:0; overflow:hidden; }
.v25h-frame .hd-sechead { padding:19px 22px; border-bottom:1px solid var(--line); display:block; }
.v25h-frame .hd-sechead h2 { font-family:var(--serif); font-size:24px; font-weight:550; letter-spacing:-.025em; }
.v25h-frame .hd-sechead .help { display:block; margin-top:5px; font-size:12px; line-height:1.45; }
.v25h-frame .hd-needs { padding:0 22px; }
.v25h-frame .hd-need { line-height:20px; grid-template-columns:52px minmax(0,1fr); gap:10px 14px; align-items:start; padding:20px 0; }
.v25h-frame .hd-need:first-child { padding-top:20px; }
.v25h-frame .hd-rank { display:none; }
.v25h-frame .hd-num { grid-column:1; font-size:24px; min-height:50px; border:0; border-radius:10px; transform:translateZ(0); }
.v25h-frame .hd-num small { font-size:10px; }
.v25h-frame .hd-num.amber { background:#FAF0D9; }.v25h-frame .hd-num.teal { background:#E4EEE7; }
.v25h-frame .hd-nbody h3 { font-size:15px; line-height:1.4; font-weight:700; margin-bottom:5px; }
.v25h-frame .hd-stake { font-size:13px; line-height:20px; color:var(--ink2); }
.v25h-frame .hd-set { line-height:18px; font-size:12px; margin-top:7px; }
.v25h-frame .hd-fix { grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap; }
.v25h-frame .hd-more { margin:0 22px 18px; }.v25h-frame .hd-clear { padding:22px; font-size:14px; }
.v25h-frame .hd-nums { padding:18px 20px; gap:10px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.v25h-frame .hd-n { border-left-width:3px; padding:12px; border-radius:10px; }
.v25h-frame .hd-n span { font-size:12px; }.v25h-frame .hd-n b { font-size:27px; font-weight:550; }.v25h-frame .hd-n small { font-size:11px; }
.v25h-frame .hd-two { margin:0 20px 20px; gap:12px; grid-template-columns:minmax(0,1fr); }
.v25h-frame .hd-box { padding:14px; border-radius:11px; background:#FBFCF7; }
.v25h-frame .hd-sec > .help { padding:0 20px 18px; }.v25h-frame .hd-foot { font-size:12px; }
.v25h-frame .hd-tbl { font-size:13px; }.v25h-frame .hd-tbl td,.v25h-frame .hd-tbl th { padding:10px 8px; }
.v25h-frame .adm { gap:18px; min-width:0; }
.v25h-frame .sc-bar { padding:13px 16px; background:var(--card); border:1px solid var(--line); border-radius:13px; gap:10px; }
.v25h-frame .sc-step { padding:2px; background:none; }.v25h-frame .sc-step button { border:1px solid var(--line); background:var(--card); border-radius:8px; }
.v25h-frame .sc-step .at { padding:0 7px; font-size:14px; }.v25h-frame .sc-site { margin-left:auto; font-size:12px; }.v25h-frame .sc-site select { font-size:13px; font-weight:600; min-height:37px; border:1px solid var(--line); border-radius:8px; }
.v25h-frame .sc-cap-top { flex-direction:column; align-items:flex-start; }
.v25h-frame .sc-cap { padding:17px 20px; background:#E7EEE4; border-color:#D5DFD2; }
.v25h-frame .sc-cap-bar { height:8px; }.v25h-frame .sc-cap-nums { gap:9px 18px; font-size:12px; }.v25h-frame .sc-cap-nums b { font-size:23px; font-weight:550; }
.v25h-frame .sc-attn { background:#FAF0D9; border-color:#E9D8AE; border-radius:11px; font-size:12px; padding:12px 15px; }
.v25h-frame .sc-attn button { border-radius:7px; font-size:12px; border-width:1px; }
.v25h-frame .boardwrap { min-width:0; max-width:100%; border-radius:14px; border:1px solid var(--line); background:var(--card); }
.v25h-frame .board { border:0; border-radius:0; }
.v25h-frame .board .bh { padding:15px 9px; background:#F8F9F3; font-weight:700; }
.v25h-frame .board .bh.today { background:#E4EEE0; color:var(--tealD); }.v25h-frame .board .bc.today { background:#F6F9F2; }
.v25h-frame .board .bs { padding:17px 12px; background:#F8F9F3; font-size:13px; gap:6px; font-weight:650; }
.v25h-frame .board .bs span { font-size:11px; font-weight:500; }.v25h-frame .board .bc { padding:9px; gap:8px; }
.v25h-frame .bchip { border-width:1px; border-left-width:3px; padding:10px 9px; border-radius:8px; font-size:11px; line-height:1.45; }
.v25h-frame .bchip b { font-size:12px; margin-bottom:4px; }.v25h-frame .bchip .bsite { font-weight:500; }.v25h-frame .bchip.done { opacity:.8; }
.v25h-frame .board .bplus { min-height:29px; border-radius:7px; }.v25h-frame .bs-out { font-size:11px; }
.v25h-frame .sc-dl { border-radius:14px; }.v25h-frame .sc-dl .dl-b { border-radius:8px; }
.v25h-frame .ac-stats { gap:14px; }.v25h-frame .ac-stats > span { flex:1; padding:16px 19px; border:1px solid var(--line); border-radius:14px; background:var(--card); font-size:13px; }.v25h-frame .ac-stats b { display:block; font-family:var(--serif); font-size:29px; font-weight:550; }
.ws-people-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 17px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.ws-people-tools label { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink2); }.ws-people-tools .ws-people-search { flex:1; min-width:180px; }.ws-people-tools input { width:100%; }.ws-people-tools .inp { min-height:36px; font-size:13px; }.ws-people-tools .help { font-size:12px; }
.v25h-frame .ac-table { padding:0; }.v25h-frame .ac-row { min-width:850px; grid-template-columns:minmax(165px,1.3fr) minmax(140px,1fr) minmax(125px,1fr) 88px minmax(112px,.8fr) minmax(165px,1fr); gap:12px; padding:17px 20px; font-size:13px; }
.v25h-frame .ac-row.ac-th { padding:12px 20px; font-size:10px; letter-spacing:.09em; background:#F8F9F3; }
.v25h-frame .ac-row:not(.ac-th):hover { background:#F8FAF3; }.v25h-frame .ac-row .inp { font-size:13px; min-height:36px; }.v25h-frame .ac-who { font-weight:650; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.v25h-frame .ac-row .help,.v25h-frame .ac-row small { font-size:12px; }
.ws-person-avatar { width:32px; height:32px; border-radius:50%; flex:none; display:inline-grid; place-items:center; background:#E7EEE4; color:var(--tealD); font-size:11px; font-weight:750; }
.v25h-frame .ac-row.off { opacity:.78; }.v25h-frame .ac-row.ac-confirm { min-width:0; grid-template-columns:minmax(0,1fr) auto; padding:18px 20px; background:#FAF0D9; }.v25h-frame .ac-row[hidden] { display:none!important; }
.v25h-frame .rowacts { gap:8px; }.v25h-frame .rowacts .mini { font-size:12px; min-height:30px; }
.ws-settings-layout { display:grid; grid-template-columns:196px minmax(0,1fr); gap:24px; align-items:start; min-width:0; }
.ws-settings-nav { position:sticky; top:calc(var(--bar-h,70px) + 20px); display:flex; flex-direction:column; gap:5px; }
.ws-settings-nav .sc-seg { display:flex; flex-direction:column; gap:5px; background:none; padding:0; }.ws-settings-nav .sc-seg button { text-align:left; justify-content:flex-start; min-height:42px; padding:11px 12px; border-radius:9px; font-weight:550; }.ws-settings-nav .sc-seg button[aria-selected="true"] { background:#E4ECE1; color:var(--tealD); box-shadow:none; font-weight:700; }.ws-settings-nav > .help { font-size:11px; line-height:1.5; padding:8px 12px; }
.v25h-frame .v25b-settings { min-width:0; gap:18px; }.v25h-frame .v25b-setsec { padding:0 0 16px; gap:0; overflow:hidden; }.v25h-frame .v25b-setsec .ovhead { display:block; padding:19px 22px; border-bottom:1px solid var(--line); }.v25h-frame .v25b-setsec .ovhead h2 { font-family:var(--serif); font-weight:550; font-size:23px; letter-spacing:-.025em; }.v25h-frame .v25b-setsec .ovhead .help { display:block; font-size:12px; margin-top:5px; line-height:1.5; }
.v25h-frame .v25b-set { line-height:20px; margin:0; padding:17px 22px; border:0; border-bottom:1px solid var(--line); border-radius:0; }.v25h-frame .v25b-sethead { gap:14px; align-items:center; }.v25h-frame .v25b-sethead h4 { font-size:14px; font-weight:650; }.v25h-frame .v25b-val { line-height:18px; font-size:12px; font-weight:600; border-radius:6px; padding:4px 8px; background:#EDF2E8; }.v25h-frame .v25b-eff { font-size:12px; color:var(--ink2); line-height:1.5; margin:8px 0; }
.ws-setting-detail { line-height:18px; font-size:12px; color:var(--ink2); margin-top:8px; }.ws-setting-detail summary { cursor:pointer; color:var(--tealD); font-weight:600; width:max-content; max-width:100%; }.ws-setting-detail .v25b-who { margin-top:7px; font-size:12px; }
.v25h-frame .v25b-set:not(.open) > .v25b-act { margin-top:10px; }.v25h-frame .v25b-act .help { line-height:18px; font-size:12px; }.v25h-frame .v25b-opt small { font-size:12px; }.v25h-frame .v25b-packs { margin:16px 22px; }.v25h-frame .v25b-act { gap:9px; }
.v25h-frame .hd-drawer { background:var(--ground); border-radius:18px 0 0 18px; }.v25h-frame .hd-dhead { padding:24px; }.v25h-frame .hd-dhead h2 { font-weight:550; }
@media(max-width:1150px) { .v25h-frame { grid-template-columns:198px minmax(0,1fr); }.v25h-frame > .bmain { padding:26px 24px 40px; }.ws-home-grid { grid-template-columns:minmax(0,1fr); }.ws-home-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }.ws-settings-layout { grid-template-columns:175px minmax(0,1fr); gap:18px; } }
@media(max-width:900px) { .v25h-frame { grid-template-columns:178px minmax(0,1fr); }.v25h-frame .bnav { padding:23px 10px; }.v25h-frame .ws-brand { font-size:18px; gap:7px; }.v25h-frame .ws-brand :is(img,svg) { width:29px; height:29px; }.v25h-frame > .bmain { padding:24px 20px 36px; }.v25h-frame .pagehead .h1 { font-size:32px; }.ws-home-side { grid-template-columns:1fr; }.ws-settings-layout { grid-template-columns:minmax(0,1fr); }.ws-settings-nav { position:static; }.ws-settings-nav .sc-seg { flex-direction:row; flex-wrap:wrap; }.ws-settings-nav > .help { padding:3px 0; }.v25h-frame .sc-site { margin-left:0; } }
@media(max-width:700px) { .v25h-frame { display:flex; flex-direction:column; min-width:0; }.v25h-frame .bnav { padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); gap:10px; min-width:0; }.v25h-frame .ws-brand,.v25h-frame .ws-org,.v25h-frame .ws-navtitle,.v25h-frame .bnav>.grow,.v25h-frame .bnav>.me { display:none; }.v25h-frame .bnav nav { flex-direction:row; overflow:auto; flex-wrap:nowrap; gap:5px; padding:2px; }.v25h-frame .bnav nav button { flex:none; padding:9px 11px; min-height:42px; font-size:12px; gap:7px; }.v25h-frame .bnav nav .grp { display:none; }.v25h-frame .bnav nav .ws-icon { width:16px; height:16px; }.v25h-frame .bnav .v25h-note { font-size:11px; margin:0; }.v25h-frame > .bmain { padding:23px 16px 34px; gap:18px; }.v25h-frame .pagehead { flex-wrap:wrap; gap:11px; }.v25h-frame .pagehead .h1 { font-size:32px; }.v25h-frame .pagehead .lede { font-size:13px; }.v25h-frame .pagehead>.btn { margin-top:0; }.v25h-frame .hd-counts { padding:12px 15px; gap:9px; }.v25h-frame .hd-counts .hchip { font-size:13px; padding-right:12px; }.v25h-frame .hd-sechead { padding:17px 18px; }.v25h-frame .hd-sechead h2 { font-size:22px; }.v25h-frame .hd-needs { padding:0 17px; }.v25h-frame .hd-need { line-height:20px; grid-template-columns:45px minmax(0,1fr); gap:9px 12px; }.v25h-frame .hd-fix { grid-column:2; }.v25h-frame .hd-nums { padding:15px; }.v25h-frame .hd-two { margin:0 15px 15px; }.v25h-frame .sc-bar { padding:12px; }.v25h-frame .sc-step { max-width:100%; }.v25h-frame .sc-step .at { white-space:normal; }.v25h-frame .sc-seg { max-width:100%; }.v25h-frame .sc-cap { padding:15px; }.v25h-frame .ac-stats { gap:8px; }.v25h-frame .ac-stats>span { padding:13px; font-size:11px; min-width:0; }.v25h-frame .ac-stats b { font-size:25px; }.v25h-frame .ac-table { overflow:visible; }.v25h-frame .ac-row { min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; padding:18px 16px; }.v25h-frame .ac-row.ac-th { display:none; }.v25h-frame .ac-who { grid-column:1/-1; }.v25h-frame .ac-row>.rowacts { grid-column:1/-1; }.v25h-frame .ac-row:not(.ac-confirm)>span:nth-child(2)::before { content:'Role'; }.v25h-frame .ac-row:not(.ac-confirm)>span:nth-child(3)::before { content:'Credential'; }.v25h-frame .ac-row:not(.ac-confirm)>span:nth-child(4)::before { content:'2-step'; }.v25h-frame .ac-row:not(.ac-confirm)>span:nth-child(5)::before { content:'Status'; }.v25h-frame .ac-row:not(.ac-confirm)>span:nth-child(n+2):nth-child(-n+5)::before { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; color:var(--ink2); }.v25h-frame .ac-row.ac-confirm { grid-template-columns:1fr; }.ws-people-tools { padding:12px; }.ws-people-tools .ws-people-search { flex-basis:100%; }.ws-settings-nav .sc-seg { flex-wrap:nowrap; overflow:auto; }.ws-settings-nav .sc-seg button { flex:none; font-size:12px; }.v25h-frame .v25b-setsec .ovhead { padding:17px; }.v25h-frame .v25b-set { padding:16px 17px; }.v25h-frame .v25b-sethead { flex-wrap:wrap; gap:7px; }.v25h-frame .v25b-val { max-width:100%; overflow-wrap:anywhere; }.v25h-frame .v25b-packs { margin:16px; } }
@media(prefers-reduced-motion:reduce) { .v25h-frame *, .v25h-frame *::before,.v25h-frame *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* the Learners page (version 25z): the hero with what is left to fix, three groups of rows, a fix under its row, and a look at one learner */
.lr-root { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.lr-hero { padding: 28px 32px; }
.lr-htop { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.lr-hl { flex: 1; min-width: 0; }
.lr-h1 { margin: 4px 0 0; font-family: var(--serif); font-size: 52px; font-weight: 600; letter-spacing: -.015em; line-height: 1.05; color: #FFFFFF; }
.lr-sum { margin: 12px 0 0; font-size: 20px; line-height: 1.45; color: #DCEAE5; }
.lr-sum b { color: #FFFFFF; } .lr-sum .n { color: #FFD48A; } .lr-sum .clear { color: #5FE0C4; }
.lr-acts { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lr-acts .cx-pill { min-height: 46px; padding: 0 20px; font-size: 15px; font-weight: 800; }
.lr-acts .cx-pill.solid { color: #062723; }
.lr-menu { position: absolute; left: 0; top: 56px; z-index: 30; width: 340px; max-width: calc(100vw - 48px); padding: 8px; border-radius: 18px; background: #FFFFFF; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(4,30,27,.55), 0 0 0 1px rgba(16,32,28,.06); animation: lr-drop .18s ease both; }
@keyframes lr-drop { from { opacity: 0; transform: translateY(-6px); } }
.lr-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 14px; border-radius: 12px; font: inherit; color: inherit; cursor: pointer; }
.lr-menu button:hover { background: var(--faint); }
.lr-menu b { display: block; font-size: 15px; } .lr-menu span { font-size: 13px; color: var(--ink2); }
.lr-ring { position: relative; width: 196px; height: 196px; flex: none; display: grid; place-items: center; text-align: center; color: #FFFFFF; }
.lr-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lr-ring circle { fill: none; stroke-width: 12; }
.lr-ring .bg { stroke: rgba(255,255,255,.1); }
.lr-ring .fg { stroke: url(#lr-rg); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 10px rgba(79,209,181,.45)); }
.lr-ring b { display: block; font-family: var(--serif); font-size: 60px; font-weight: 600; line-height: 1; }
.lr-ring span { display: block; font-size: 14px; font-weight: 700; color: #A9C4BC; margin-top: 4px; }
.lr-ring span.fx { color: #5FE0C4; font-size: 13px; margin-top: 2px; }
.lr-ring.clear b { color: #5FE0C4; font-size: 28px; } .lr-ring.clear b svg { width: 50px; height: 50px; display: block; margin: 0 auto 4px; }
.lr-find { margin-top: 22px; display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); cursor: text; }
.lr-find svg { width: 22px; height: 22px; color: #5FE0C4; flex: none; }
.lr-find input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: #FFFFFF; font: inherit; font-size: 18px; }
.lr-find input::placeholder { color: #A9C4BC; }
.lr-find:focus-within { border-color: rgba(95,224,196,.7); background: rgba(255,255,255,.12); }
.lr-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px; }
.lr-filter > span:first-child { font-weight: 700; color: var(--ink2); margin-right: 4px; }
.lr-pill { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink2); cursor: pointer; transition: border-color .15s, background .15s; }
.lr-pill em { font-style: normal; color: #66756F; font-weight: 700; margin-left: 5px; }
.lr-pill:hover { border-color: var(--teal); }
.lr-pill[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #FFFFFF; } .lr-pill[aria-pressed="true"] em { color: #CFEDE6; }
.lr-view { margin-left: auto; font-size: 14px; color: var(--ink2); }
.lr-sec { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 40px -36px rgba(16,32,28,.4); animation: lr-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.lr-sec + .lr-sec { animation-delay: .06s; }
@keyframes lr-rise { from { opacity: 0; transform: translateY(10px); } }
.lr-sh { display: flex; align-items: baseline; gap: 12px; padding: 20px 28px 14px; border-bottom: 1px solid var(--faint); }
.lr-sh h2 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 600; }
.lr-sh .c { font-size: 14px; font-weight: 800; padding: 2px 11px; border-radius: 99px; background: var(--faint); color: var(--ink2); }
.lr-sec.needs .lr-sh .c { background: var(--amberT); color: var(--amberD); } .lr-sec.live .lr-sh .c { background: #DDF6EE; color: #0B5A4B; }
.lr-sh p { margin: 0 0 0 auto; font-size: 14px; color: #66756F; }
.lr-row { display: grid; grid-template-columns: minmax(240px, 1.1fr) 180px minmax(260px, 1.5fr) 18px; gap: 22px; align-items: center; padding: 18px 28px; border-top: 1px solid var(--faint); cursor: pointer; transition: background .15s; }
.lr-sh + .lr-row { border-top: 0; }
.lr-row:hover { background: #F8FBFA; } .lr-row:last-child { border-radius: 0 0 24px 24px; }
.lr-row.open { background: #FBFDFC; }
.lr-row.fresh { animation: lr-fresh 2s ease; }
@keyframes lr-fresh { 0% { background: #E9F8F2; } 100% { background: transparent; } }
.lr-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lr-who .lav { width: 50px; height: 50px; font-size: 19px; position: relative; }
.lr-who .lav.lr-live::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; background: #1FB58F; border: 3px solid #FFFFFF; }
.lr-name { display: block; border: 0; background: none; padding: 0; font: inherit; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--ink); text-align: left; cursor: pointer; }
.lr-name:hover { color: var(--tealD); }
.lr-who small { display: block; font-size: 14px; color: var(--ink2); margin-top: 2px; }
.lr-norbt { font-style: normal; font-weight: 700; color: #7A231B; }
.lr-hrs b { font-size: 19px; } .lr-hrs b small { font-size: 14px; font-weight: 600; color: #66756F; }
.lr-hrs span { display: block; font-size: 13px; color: #66756F; }
.lr-bar { height: 7px; border-radius: 9px; background: var(--faint); margin: 7px 0 0; overflow: hidden; }
.lr-bar i { display: block; height: 100%; border-radius: 9px; background: var(--teal); transform-origin: left; animation: lr-grow .9s .2s cubic-bezier(.2,.8,.2,1) both; }
.lr-bar i.short { background: var(--amber); }
@keyframes lr-grow { from { transform: scaleX(0); } }
.lr-what { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lr-what p { margin: 0; flex: 1; min-width: 0; font-size: 16px; color: var(--ink2); }
.lr-what p b { display: block; font-size: 17px; color: var(--ink); }
.lr-what p b.amber { color: var(--amberD); } .lr-what p b.red { color: #7A231B; } .lr-what p b.violet { color: #4A3796; } .lr-what p b.green { color: #0B5A4B; }
.lr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1FB58F; margin-right: 8px; vertical-align: 1px; animation: lr-beat 2s infinite; }
@keyframes lr-beat { 0% { box-shadow: 0 0 0 0 rgba(31,181,143,.5); } 70% { box-shadow: 0 0 0 8px rgba(31,181,143,0); } 100% { box-shadow: 0 0 0 0 rgba(31,181,143,0); } }
.lr-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1FB58F; color: #FFFFFF; margin-right: 8px; vertical-align: -4px; animation: lr-pop .4s cubic-bezier(.2,.8,.2,1.4); }
.lr-ok svg { width: 14px; height: 14px; }
@keyframes lr-pop { from { transform: scale(0); } }
.lr-fix { flex: none; border: 2px solid var(--teal); background: var(--card); color: var(--tealD); border-radius: 12px; padding: 9px 16px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.lr-fix:hover, .lr-fix.on { background: var(--teal); color: #FFFFFF; }
.lr-chev { color: #B9C6C1; font-size: 26px; line-height: 1; transition: transform .15s, color .15s; }
.lr-row:hover .lr-chev { transform: translateX(3px); color: var(--teal); }
.lr-sheet { grid-column: 1 / -1; margin: 2px 0 2px 66px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, #F7FBFA, #EFF6F3); border: 1px solid #D9E7E2; cursor: default; animation: lr-drop .3s cubic-bezier(.2,.8,.2,1); }
.lr-sheet h5 { margin: 0 0 12px; font-size: 16px; } .lr-sheet h5 span { font-weight: 500; color: var(--ink2); }
.lr-item { margin: 0 0 10px; max-width: 640px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.lr-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.lr-opt { border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 16px; text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: 0 6px 14px -12px rgba(16,32,28,.5); }
.lr-opt b { display: block; font-size: 15px; } .lr-opt span { font-size: 13px; color: var(--ink2); }
.lr-opt:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 12px 20px -14px rgba(14,107,97,.7); }
.lr-opt.go { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.lr-clear { padding: 24px 28px; display: flex; align-items: center; gap: 14px; font-size: 17px; color: #0B5A4B; font-weight: 700; }
.lr-clear i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #DDF6EE; } .lr-clear i svg { width: 22px; height: 22px; }
.lr-foot { margin: 18px 4px 0; font-size: 14px; color: #66756F; }
.lr-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(6,24,21,.28); backdrop-filter: blur(2px); animation: lr-fade .25s ease both; }
@keyframes lr-fade { from { opacity: 0; } }
.lr-peek { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 460px; max-width: 100vw; overflow-y: auto; background: var(--card); box-shadow: -30px 0 60px -30px rgba(4,30,27,.6); }
.lr-peek.in { animation: lr-slide .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lr-slide { from { transform: translateX(105%); } }
.lr-pktop { position: relative; padding: 28px 28px 24px; color: #FFFFFF; background: linear-gradient(135deg, #062723, #0A3A34 55%, #0D2F3D); }
.lr-x { position: absolute; right: 18px; top: 18px; border: 0; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.1); color: #FFFFFF; font-size: 17px; cursor: pointer; }
.lr-pktop .lav { width: 62px; height: 62px; font-size: 24px; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.lr-pktop h3 { margin: 14px 0 2px; font-family: var(--serif); font-size: 32px; font-weight: 600; }
.lr-pktop p { margin: 0; color: #CFE0DA; }
.lr-st { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.1); }
.lr-pksec { padding: 20px 28px; border-bottom: 1px solid var(--faint); }
.lr-pksec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #66756F; }
.lr-wd { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 15px; }
.lr-wd span { color: var(--ink2); }
.lr-wd em { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 99px; }
.lr-wd em.done { background: var(--tealT); color: var(--tealD); } .lr-wd em.live { background: #DDF6EE; color: #0B5A4B; } .lr-wd em.ahead { background: var(--faint); color: var(--ink2); } .lr-wd em.gone { background: var(--amberT); color: var(--amberD); } .lr-wd em.none { display: none; }
.lr-wd.today { margin: 0 -10px; padding: 8px 10px; border-radius: 10px; background: var(--tealT); }
.lr-pkteam .tm { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.lr-pkteam .tm-head { display: none; }
.lr-pkact { padding: 22px 28px 30px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { .lr-row { grid-template-columns: minmax(200px, 1fr) 140px minmax(220px, 1.4fr) 16px; gap: 16px; } }
@media (max-width: 760px) {
  .lr-hero { padding: 22px 18px; } .lr-h1 { font-size: 40px; } .lr-sum { font-size: 17px; } .lr-ring { display: none; }
  .lr-acts .cx-pill { min-height: 44px; padding: 0 16px; }
  .lr-filter { flex-wrap: nowrap; overflow-x: auto; margin: 16px 0 4px; } .lr-filter > span:first-child { display: none; } .lr-pill { flex: none; } .lr-view { flex: none; }
  .lr-sh { padding: 16px 18px 12px; flex-wrap: wrap; } .lr-sh p { margin: 0; width: 100%; }
  .lr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who chev" "hrs hrs" "what what"; gap: 12px; padding: 16px 18px; }
  .lr-who { grid-area: who; } .lr-hrs { grid-area: hrs; } .lr-what { grid-area: what; flex-direction: column; align-items: stretch; gap: 10px; } .lr-chev { grid-area: chev; }
  .lr-fix { width: 100%; padding: 12px; } .lr-sheet { margin-left: 0; } .lr-opt { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lr-root *, .lr-root *::before, .lr-root *::after { animation: none !important; transition: none !important; } }
/* shared pieces for every screen in the command look (version 26a, first used on the RBT's Today): cards of one height
   in a row (cx-row3), day cards that open on tap (cx-days2, cx-day, cx-daypanel), the side panel with tabs (cx-scrim,
   cx-peek, cx-peektop, cx-x, cx-tabs, cx-peekbody), a chart with hover tips (cx-chart, cx-pt, cx-tip), a two-way switch
   (cx-seg), status pills (cx-st) and a small ring on a light card (cx-sring) */
.cx-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.cx-row3 > .card, .cx-row3 > .cx-card { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.cx-row3 > .wide { grid-column: 1 / -1; }
.cx-card .cx-eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--tealD); }
.cx-none { margin: 0; padding: 14px 4px; color: var(--ink2); font-size: 16px; }
.cx-days2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cx-day { position: relative; display: grid; align-content: start; gap: 10px; min-height: 132px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--card); font: inherit; text-align: left; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cx-day:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -20px rgba(16,32,28,.6); }
.cx-day .dn { display: flex; align-items: baseline; gap: 8px; height: 32px; }
.cx-day .dn small { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #66756F; }
.cx-day .dn b { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; }
.cx-day .dn em { margin-left: auto; align-self: center; font-style: normal; font-size: 12px; font-weight: 800; color: #FFFFFF; background: var(--teal); padding: 2px 9px; border-radius: 999px; }
.cx-day .who { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 30px; }
.cx-day .who i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; color: #FFFFFF; background: var(--lh, #2F7F9E); box-shadow: 0 0 0 2px #FFFFFF; }
.cx-day .who i.done { opacity: .45; }
.cx-day .who .off { font-size: 15px; color: #8C9A95; }
.cx-day .hs { font-size: 14px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cx-day.past { background: #FAFBFA; }
.cx-day.past .dn b { color: #66756F; }
.cx-day[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 4px var(--tealT); }
.cx-day[aria-pressed="true"]::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; background: var(--card); border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: translateX(-50%) rotate(45deg); }
.cx-daypanel { margin-top: 22px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, #F6FAF8, #F1F6F4); border: 1px solid #DCE9E4; animation: cx-rise .25s cubic-bezier(.2,.8,.2,1) both; }
.cx-dph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 4px 14px; }
.cx-dph b { font-size: 18px; }
.cx-dph span { font-size: 15px; font-weight: 600; color: #66756F; }
.cx-st { flex: none; font-size: 13px; font-weight: 800; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.cx-st.ok { background: var(--tealT); color: var(--tealD); }
.cx-st.wait { background: var(--amberT); color: var(--amberD); }
.cx-st.up { background: var(--faint); color: var(--ink2); }
.cx-st.live { background: #D3F4EA; color: #0B5A4B; }
.cx-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(6,25,22,.45); backdrop-filter: blur(3px); animation: lr-fade .25s ease both; }
.cx-peek { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(540px, 100vw); background: var(--card); box-shadow: -30px 0 60px -30px rgba(4,30,27,.6); }
.cx-peek.in { animation: lr-slide .4s cubic-bezier(.2,.8,.2,1) both; }
.cx-peektop { display: flex; align-items: center; gap: 14px; padding: 24px 26px 18px; background: linear-gradient(180deg, #F3F8F6, var(--card)); }
.cx-peektop .lav { width: 56px; height: 56px; font-size: 19px; flex: none; }
.cx-peektop h3 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.cx-peektop p { margin: 2px 0 0; color: var(--ink2); font-size: 15px; }
.cx-x { flex: none; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 16px; color: var(--ink); cursor: pointer; }
.cx-tabs { display: flex; gap: 4px; padding: 0 26px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cx-tabs button { flex: none; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 800; color: #66756F; cursor: pointer; }
.cx-tabs button[aria-selected="true"] { color: var(--tealD); border-bottom-color: var(--teal); }
.cx-peekbody { flex: 1; overflow: auto; padding: 20px 26px 28px; }
.cx-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--faint); }
.cx-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink2); cursor: pointer; }
.cx-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px -3px rgba(16,32,28,.4); }
.cx-chart { display: block; width: 100%; height: auto; overflow: visible; }
.cx-chart .cx-line { stroke-dasharray: 2000; animation: cx-draw 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cx-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.cx-pt { cursor: pointer; outline: none; }
.cx-hit { fill: transparent; }
.cx-dot { transition: r .15s ease; }
.cx-pt:hover .cx-dot, .cx-pt:focus .cx-dot { r: 8px; }
.cx-tip { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.cx-tip rect { fill: #10201C; }
.cx-tip text { fill: #FFFFFF; font-size: 14px; }
.cx-pt:hover .cx-tip, .cx-pt:focus .cx-tip { opacity: 1; }
.cx-sring { position: relative; width: 148px; height: 148px; flex: none; }
.cx-sring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cx-sring circle { fill: none; stroke-width: 11; }
.cx-sring .tr { stroke: var(--faint); }
.cx-sring .fg { stroke: #0E6B61; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.cx-sring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cx-sring .mid b { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; }
.cx-sring .mid span { margin-top: 4px; font-size: 12px; font-weight: 700; color: #66756F; }
@media (max-width: 1000px) { .cx-row3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cx-days2 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .cx-day { min-width: 112px; min-height: 116px; scroll-snap-align: start; }
  .cx-daypanel { padding: 12px; }
  .cx-peektop { padding: 20px 18px 14px; } .cx-tabs { padding: 0 14px; } .cx-peekbody { padding: 16px 18px 24px; }
}
/* the RBT's Today (version 26a) */
.rhome.rt-page { display: flex; flex-direction: column; align-items: stretch; gap: 22px; max-width: 1200px; padding: 28px 28px 90px; }
.rt-page .card { margin: 0; padding: 0; gap: 0; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(16,32,28,.04), 0 18px 36px -28px rgba(16,32,28,.45); }
.rt-page .card:not(.cx-card) { padding: 22px 26px; gap: 10px; }
.rt-page .card:not(.cx-card) h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.rt-page .rt-card { padding: 0 0 22px; }
.rt-card .cx-cardhead { padding: 24px 26px 0; margin-bottom: 16px; min-height: 58px; align-items: flex-end; }
.rt-card .cx-cardhead h2 { font-size: 28px; font-weight: 600; }
.rt-card > :not(.cx-cardhead) { margin-left: 26px; margin-right: 26px; }
.rt-aside { margin: 0; font-size: 15px; font-weight: 600; color: #66756F; text-align: right; font-variant-numeric: tabular-nums; }
.rt-card > .help { margin-top: 14px; font-size: 14px; color: #66756F; }
.rt-foot { margin-top: auto !important; padding: 16px 0 0; font-size: 14px; color: #66756F; }
/* the hero */
.rt-hero { padding: 30px 34px 32px; border-radius: 30px; display: flex; flex-direction: column; gap: 0; }
.rt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rt-top .cx-crumb { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A9C4BC; }
.rt-hero .syncbox { gap: 6px; }
.rt-hero .syncline { padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #CFE5DE; font-size: 13px; font-weight: 600; }
.rt-hero .syncline > span:not(.chip) { flex: 0 1 auto; }
.rt-hero .syncline .chip { font-size: 12px; }
.rt-hero .syncbox > :not(.syncline) { color: #FFFFFF; }
.rt-herobody { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 36px; align-items: center; margin-top: 10px; }
.rt-herobody.solo { grid-template-columns: minmax(0, 1fr); }
.rt-hero .cx-h1 { font-size: clamp(36px, 4.4vw, 54px); font-weight: 600; letter-spacing: -.015em; }
.rt-sum { margin: 10px 0 0 !important; font-size: 21px; font-weight: 400 !important; color: #DCEAE5 !important; line-height: 1.4; }
.rt-ring { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rt-ring .cx-ringbox { width: 200px; height: 200px; }
.rt-ring .cx-ring.del { stroke: var(--cx-mint); }
.rt-ring .cx-ringmid b { font-size: 46px; line-height: 1; }
.rt-ring .cx-ringmid b small { font-size: 22px; color: #A9C4BC; }
.rt-ring .cx-ringmid span { margin-top: 6px; font-size: 14px; max-width: none; color: #BFD3CC; }
.rt-ringkey { margin: 0; font-size: 14px; font-weight: 600; color: #BFD3CC; text-align: center; }
/* the lead session, on glass in the hero */
.rt-hero .tk { color: #FFFFFF; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rt-hero .tk.lead { margin-top: 24px; grid-template-columns: 116px minmax(0, 1fr) 236px; gap: 22px; padding: 20px 22px; border-radius: 22px; animation: cx-rise .45s cubic-bezier(.2,.8,.2,1) both; }
.rt-hero .tk.lead.warn { background: linear-gradient(180deg, rgba(233,162,59,.18), rgba(233,162,59,.07)); border-color: rgba(233,162,59,.45); }
.rt-hero .tk.lead.live { background: linear-gradient(180deg, rgba(31,181,143,.2), rgba(31,181,143,.07)); border-color: rgba(79,209,181,.55); }
.rt-hero .tk-time { background: none; padding: 0; text-align: left; }
.rt-hero .tk-time b { font-size: 44px; color: #FFFFFF; }
.rt-hero .tk-time span, .rt-hero .tk-time em { color: #A9C4BC; }
.rt-hero .tk-lab { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-mint); }
.rt-hero .tk-lab i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rt-hero .tk.warn .tk-lab { color: #F4C77A; }
.rt-hero .tk.live .tk-lab i { animation: cx-pulse 2s infinite; }
.rt-hero .tk-who b { font-size: 24px; color: #FFFFFF; }
.rt-hero .tk-who span, .rt-hero .tk-where { color: #CFE2DC; }
.rt-hero .tk-who .lav { box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.rt-hero .tk-track { height: 26px; background: rgba(255,255,255,.08); border-radius: 999px; }
.rt-hero .tk-visit { top: 3px; bottom: 3px; border-radius: 999px; background: #BFE9DD; color: #0B2B26; font-size: 0; }
.rt-hero .tk-visit svg { display: none; }
.rt-hero .tk-now { background: #FFFFFF; }
.rt-hero .tk-ticks { color: #A9C4BC; }
.rt-hero .tk-ticks .tk-vk { color: #BFE9DD; }
.rt-hero .tk-act .btn { min-height: 56px; border-radius: 999px; border: 0; background: #FFFFFF; color: var(--ink); font-size: 18px; font-weight: 800; box-shadow: 0 12px 26px -12px rgba(0,0,0,.7); transition: transform .15s ease, box-shadow .15s ease; }
.rt-hero .tk-act .btn:hover { box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); }
.rt-hero .tk.warn .tk-act .btn { background: linear-gradient(180deg, #F8CD82, #F0B252); }
.rt-hero .tk.live .tk-act .btn { background: linear-gradient(180deg, #7BE3CB, #4FD1B5); }
.rt-hero .tk-act .help { color: #A9C4BC; font-size: 13px; }
/* the rest of today, one line each */
.rt-rest { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rt-hero .rt-rest .tk { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 12px 16px; border-radius: 18px; }
.rt-rest .tk-time b { font-size: 26px; }
.rt-rest .tk-time em, .rt-rest .tk-where, .rt-rest .tk-bar { display: none; }
.rt-rest .tk-who b { font-size: 18px; }
.rt-rest .tk-act { flex-direction: row; align-items: center; gap: 12px; text-align: right; }
.rt-rest .tk-act .btn { min-height: 44px; font-size: 15px; padding: 0 18px; }
.rt-hero .tk-act .btn.rt-ready { min-height: 48px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #FFFFFF; font-size: 16px; box-shadow: none; }
.rt-hero .tk-act .btn.rt-ready:hover { background: rgba(255,255,255,.14); box-shadow: none; }
.rt-rest .tk-act .btn.rt-ready { min-height: 44px; font-size: 15px; }
.rt-rest .tk-act .help { max-width: 220px; }
.rt-hero .rt-rest .tk.done { opacity: .8; }
.rt-hero .tk-act .chip { background: rgba(95,224,196,.16); border-color: rgba(95,224,196,.4); color: #BFE9DD; }
.rt-hero .wi-row { margin-top: 14px; color: #FFFFFF; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.rt-hero .wi-row .help { color: #CFE2DC; }
.rt-hero > .help, .rt-hero > p[role="alert"] { color: #F4C77A; }
/* the week */
.rt-sess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rt-week .wss { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px 16px 0; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: none; font: inherit; text-align: left; color: var(--ink); overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; animation: cx-rise .3s cubic-bezier(.2,.8,.2,1) both; }
.rt-week .wss:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -20px rgba(16,32,28,.7); }
.rt-week .wss.done { opacity: 1; }
.rt-week .wbar { align-self: stretch; margin: -16px 0; background: var(--lh, #2F7F9E); }
.rt-week .wtx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-week .wss .t { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); }
.rt-week .wss b { font-size: 18px; }
.rt-week .wss .pl { font-size: 15px; }
.rt-week .wss .vv { margin-top: 6px; font-size: 13px; color: #23458F; background: #E8EFFD; padding: 3px 10px; }
/* the three cards */
.rt-lrows { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 10px; }
.rt-lrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--faint); background: #FBFCFB; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.rt-lrow .cx-chev { transform: rotate(-45deg); }
.rt-lrow:hover { background: var(--card); border-color: #C6E6DE; transform: translateX(2px); }
.rt-lrow .lav { width: 46px; height: 46px; font-size: 16px; }
.rt-lt { display: flex; flex-direction: column; min-width: 0; }
.rt-lt b { font-size: 17px; }
.rt-lt > span { font-size: 14px; color: #66756F; }
.rt-new { margin-left: 8px; vertical-align: 2px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #23458F; background: #E8EFFD; padding: 2px 7px; border-radius: 999px; }
.rt-page .rf-skill { margin: 0 26px; font-family: var(--serif); font-size: 25px; line-height: 1.22; color: var(--tealD); font-weight: 500; }
.rt-todo { list-style: none; padding: 0; margin: 16px 26px 0; display: grid; gap: 8px; }
.rt-todo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--faint); font-size: 15px; }
.rt-todo i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--teal); background: var(--card); font-style: normal; font-size: 12px; font-weight: 800; color: var(--teal); }
.rt-todo small { display: block; font-size: 13px; color: #66756F; }
.rt-forms { margin-top: auto !important; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rt-forms .formrow { border-radius: 16px; padding: 12px 12px 12px 16px; border: 0; background: var(--faint); }
.rt-forms .formrow.unread { background: #E8EFFD; border: 0; }
.rt-card > .formrow { margin-top: 8px; border-radius: 16px; }
.rt-forms .formrow b { display: block; font-size: 15px; }
.rt-forms .formrow .sub2 { font-size: 14px; color: var(--ink2); }
.rt-sup { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; }
.rt-sup p { margin: 0 0 10px; font-size: 16px; color: var(--ink2); }
.rt-sup p b { color: var(--ink); }
.rt-visits { list-style: none; margin-top: auto !important; padding: 16px 0 0; display: grid; }
.rt-visits li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--faint); font-size: 15px; color: var(--ink2); }
.rt-visits span { font-size: 14px; font-weight: 700; color: #66756F; }
.rt-visits b { color: var(--ink); }
/* the chart */
.rt-chartrow { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; }
.rt-page .rl-big { flex-direction: column; align-items: flex-start; gap: 6px; }
.rt-page .rl-big > b { font-family: var(--serif); font-size: 64px; line-height: 1; font-weight: 600; color: var(--tealD); }
.rt-page .rl-big span { display: block; font-size: 16px; color: var(--ink2); }
.rt-page .rl-big .help { margin-top: 8px; display: inline-block; font-size: 14px; font-weight: 800; color: var(--tealD); background: var(--tealT); padding: 4px 11px; border-radius: 999px; }
/* the side panel's rows */
.rt-bx { margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; background: var(--amberT); border: 1px solid #F3DDB0; font-size: 15px; color: var(--amberD); }
.rt-bx b { display: block; margin-bottom: 2px; font-size: 17px; color: #4A2E05; }
.rt-bx p { margin: 4px 0 0; }
.rt-bx .rt-ms { font-weight: 700; }
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rt-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--faint); font-size: 16px; font-weight: 600; }
.rt-list small { font-size: 14px; font-weight: 700; color: #66756F; white-space: nowrap; }
.cx-peek .sfsec { border: 0; padding: 0; margin: 0; }
@media (max-width: 1000px) { .rt-chartrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 900px) { .rt-hero .tk.lead { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .rhome.rt-page { padding: 16px 14px 60px; gap: 16px; }
  .rt-hero { padding: 24px 20px; border-radius: 24px; }
  .rt-herobody { grid-template-columns: minmax(0, 1fr); }
  .rt-ring { display: none; }
  .rt-sum { font-size: 18px; }
  .rt-hero .syncline { border-radius: 16px; padding: 6px 12px 6px 6px; }
  .rt-hero .tk.lead { gap: 12px; padding: 16px; }
  .rt-hero .tk-time b { font-size: 34px; }
  .rt-hero .rt-rest .tk { grid-template-columns: minmax(0, 1fr); }
  .rt-rest .tk-act { flex-direction: column; align-items: stretch; text-align: left; }
  .rt-card .cx-cardhead { padding: 20px 18px 0; min-height: 0; }
  .rt-card > :not(.cx-cardhead) { margin-left: 18px; margin-right: 18px; }
  .rt-page .rf-skill { margin: 0 18px; }
  .rt-todo { margin: 16px 18px 0; }
  .rt-sess { grid-template-columns: minmax(0, 1fr); }
  .rt-sup { grid-template-columns: 120px minmax(0, 1fr); } .rt-sup .cx-sring { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .rt-page *, .cx-peek, .cx-scrim { animation: none !important; transition: none !important; } }
/* The connected office's few additions to the prototype's scheduler styles (prototype 25g). */
/* Keep the heading above the figures when the server has fewer capacity facts than the example week. */
[data-connected-scheduling] .sc-cap-top { flex-direction: column; }
[data-connected-scheduling] .sc-dl .dl-lane {
  background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / var(--lane-hours)));
}
/* An empty time in a lane opens the booking there: a button over the lane, so the keyboard reaches it too. */
[data-connected-scheduling] .sc-dl .dl-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: copy;
}
[data-connected-scheduling] .sc-dl .dl-empty:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
[data-connected-scheduling] .sc-dl .dl-b { z-index: 1; }
/* A week with a Saturday or Sunday booked shows that day too. */
[data-connected-scheduling] .board.d6 { grid-template-columns: 170px repeat(6, minmax(150px, 1fr)); min-width: 1070px; }
[data-connected-scheduling] .board.d7 { grid-template-columns: 170px repeat(7, minmax(150px, 1fr)); min-width: 1220px; }
/* The booking form's length in minutes, and a weekly series' number of weeks (the server books a counted series). */
[data-connected-scheduling] .bk-min, [data-connected-scheduling] .bk-weeks { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink2); }
[data-connected-scheduling] .bk-min .inp, [data-connected-scheduling] .bk-weeks .inp { width: 88px; min-height: 36px; }
/* A learner's Authorizations tab: its parts in one column with the tab body's own gap (the prototype's .wsbody), since they
   sit inside this wrapper rather than directly in the tab body. The Schedule tab's parts too, on the learner's page. */
[data-connected-scheduling].sc-auths, .wsbody > [data-connected-scheduling] { display: flex; flex-direction: column; gap: 18px; }
/* Family design adapted from the owner-supplied Parent Side demo; see docs/PROVENANCE.md. */
.pp-app{--pp-ink:#10201c;--pp-muted:#5b6c64;--pp-line:#dce4e0;--pp-teal:#0e6b61;--pp-pale:#e3f3ef;--pp-serif:'Fraunces Variable',Fraunces,Georgia, "Times New Roman", serif;background:#f2f5f3;color:var(--pp-ink);min-height:100vh;font-family:'Atkinson Hyperlegible Next Variable','Atkinson Hyperlegible Next',system-ui,sans-serif;font-size:17px;line-height:1.45}
.pp-app *{box-sizing:border-box}.pp-app button,.pp-app input,.pp-app textarea,.pp-app select{font:inherit}.pp-app button{cursor:pointer}.pp-app :focus-visible{outline:3px solid #e9765b;outline-offset:3px}.pp-app h1,.pp-app h2{font-family:var(--pp-serif);letter-spacing:-.025em;line-height:1.12;font-weight:600}.pp-app h1{font-size:clamp(34px,4vw,54px);margin:12px 0}.pp-app h2{font-size:28px;margin:4px 0 18px}.pp-app h3{font-size:20px;line-height:1.25}.pp-app p{margin:10px 0}.pp-top{position:sticky;top:0;z-index:35;background:#0f1f1b;color:#fff;display:flex;align-items:center;gap:20px;padding:14px 28px}.pp-brand{font:700 22px var(--pp-serif);flex:1}.pp-brand span{font:15px system-ui;color:#bbccc5;display:block;margin-top:3px}.pp-nav{display:flex;gap:4px}.pp-nav button{border:0;border-radius:10px;padding:12px 14px;background:transparent;color:#c3d5ce;font-weight:700;font-size:15px}.pp-nav button[aria-current=page]{background:#ffffff1c;color:#fff}.pp-nav button>span{display:none}.pp-account{display:flex;align-items:center;gap:8px}.pp-account select{border:1px solid #ffffff55;background:#152d27;color:#fff;border-radius:8px;padding:8px;max-width:110px}.pp-account .pp-btn{background:transparent;color:#fff;border-color:#ffffff55;min-height:38px;font-size:14px}.pp-main{max-width:1260px;margin:auto;padding:22px 28px 90px;display:grid;gap:22px}.pp-toolbar{display:flex;gap:16px;justify-content:space-between;align-items:center}.pp-toolbar label{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:700}.pp-toolbar select{border:1px solid var(--pp-line);border-radius:10px;padding:8px 12px;background:#fff;max-width:300px;color:var(--pp-ink)}.pp-status{font-size:14px;color:var(--pp-muted);margin:0!important;min-height:20px}.pp-status .pp-btn{min-height:32px;font-size:13px;margin-left:8px}.pp-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;padding:34px 36px;color:#fff;background:linear-gradient(135deg,#062723,#0a3a34 48%,#0d2f3d);box-shadow:0 30px 50px -34px #041e1bf2;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:36px;align-items:center}.pp-hero:after{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent)}.pp-hero:before{content:'';position:absolute;z-index:-1;width:620px;height:620px;right:-180px;top:-300px;border-radius:50%;background:radial-gradient(circle,#e9765b33,transparent 65%)}.pp-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-teal);margin-top:0!important}.pp-hero .pp-kicker{color:#afd1c4}.pp-sub{font-size:23px;color:#dceae5}.pp-next{margin-top:24px;display:flex;gap:20px;align-items:center;padding:20px 22px;border-radius:22px;background:#ffffff0c;border:1px solid #ffffff29}.pp-next h2{font-family:inherit;font-weight:700;font-size:22px;margin:3px 0}.pp-next p{margin:4px 0;color:#dceae5}.pp-symbol{font-size:36px;color:inherit}.pp-hero-aside{text-align:center;border:1px solid #ffffff29;border-radius:24px;padding:24px 12px;background:#ffffff08}.pp-hero-aside>span{font-family:var(--pp-serif);font-size:70px;line-height:1;color:#73dcc2}.pp-hero-aside p{color:#bfd3cc}.pp-hero-aside .pp-btn{border:0}.pp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.pp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.pp-card{background:#fff;border:1px solid var(--pp-line);border-radius:24px;padding:26px 28px;box-shadow:0 1px 0 #10201c0a,0 18px 36px -28px #10201c73;min-width:0;display:flex;flex-direction:column}.pp-card>h2{font-size:27px}.pp-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}.pp-heading h2{margin-bottom:6px}.pp-story{font-family:var(--pp-serif);font-size:22px;color:#0a4f48;overflow-wrap:anywhere}.pp-fine{font-size:14px;color:var(--pp-muted);line-height:1.5;overflow-wrap:anywhere}.pp-foot{margin-top:auto;padding-top:16px;display:flex;gap:8px;flex-wrap:wrap}.pp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border-radius:12px;border:1.5px solid var(--pp-teal);background:#fff;color:#0a4f48;font-weight:700;font-size:15px;line-height:1.25;text-decoration:none}.pp-btn:hover{background:#e3f3ef}.pp-btn.pp-solid{background:var(--pp-teal);color:#fff}.pp-btn.pp-solid:hover{background:#0a4f48}.pp-btn.pp-quiet{border-color:var(--pp-line);color:var(--pp-muted)}.pp-btn:disabled{opacity:.55;cursor:wait}.pp-tasks{display:grid;gap:10px;margin-top:10px}.pp-tasks button{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;text-align:left;gap:12px;width:100%;padding:14px 12px;border-radius:16px;border:1px solid #eef2f0;background:#fbfcfb;color:var(--pp-ink)}.pp-tasks button:hover{border-color:#80b8a9;background:#f3faf6}.pp-tasks button>span:first-child{display:grid;place-items:center;min-height:38px;background:#fdebe5;border-radius:11px;font-size:23px}.pp-tasks small{font-size:14px;display:block;color:var(--pp-muted);margin-top:4px}.pp-empty{text-align:center;padding:28px 16px;color:var(--pp-muted);line-height:1.55}.pp-empty h1,.pp-empty h2,.pp-empty h3{color:#0a4f48}.pp-empty .pp-symbol{color:var(--pp-teal)}.pp-steps{padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}.pp-steps li{counter-increment:step;background:#fff3dc;color:#4a2e05;padding:12px 14px;border-radius:14px;display:flex;gap:10px;font-size:16px}.pp-steps li:before{content:counter(step);display:grid;place-items:center;flex:0 0 26px;align-self:start;height:26px;background:#fff;border-radius:50%;font-size:13px;font-weight:800;color:#6b4308}.pp-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pp-goal{border:1px solid var(--pp-line);border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:start}.pp-goal h3{margin:0 0 8px}.pp-goal .pp-btn{margin-top:auto}.pp-pagehead{padding:10px 8px}.pp-pagehead p{color:var(--pp-muted);max-width:760px}.pp-appointment{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--pp-line)}.pp-appointment:first-child{padding-top:0}.pp-appointment:last-child{border-bottom:0}.pp-appointment h2,.pp-appointment h3{margin:6px 0}.pp-appointment>.pp-btn{flex-shrink:0}.pp-receipt{font-size:14px;line-height:1.5;background:var(--pp-pale);border-radius:12px;color:#0a4f48;padding:10px 12px;overflow-wrap:anywhere}.pp-pending{border:1px dashed #d7b876;background:#fff8e9!important;color:#6b4308}.pp-notice{background:#fff3dc;color:#654610;border:1px solid #e6d5ad;border-radius:14px;padding:16px 20px;line-height:1.5}.pp-notice .pp-btn{margin-left:12px}.pp-error{background:#fff0eb;color:#7a2e1c;border-color:#e8b5a5}.pp-thread{display:grid;gap:16px;max-height:600px;overflow:auto;padding:6px 4px 20px}.pp-bubble{background:#f0f4f2;border-radius:20px 20px 20px 5px;padding:14px 18px;max-width:82%;justify-self:start;overflow-wrap:anywhere}.pp-bubble p{margin:3px 0 8px}.pp-mine{background:#e3f3ef;justify-self:end;border-radius:20px 20px 5px 20px}.pp-compose{border-top:1px solid var(--pp-line);padding-top:22px;margin-top:12px;display:grid;gap:14px}.pp-compose>.pp-btn{justify-self:end}.pp-field{font-weight:700;font-size:15px;display:grid;gap:7px;margin:14px 0}.pp-field input,.pp-field textarea,.pp-field select{color:var(--pp-ink);width:100%;font-weight:400;border:1px solid #a9bdb3;background:#fff;border-radius:12px;padding:12px;resize:vertical;line-height:1.5;min-height:44px}.pp-check{display:flex;align-items:start;gap:12px;margin:18px 0;line-height:1.6}.pp-check input{width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:var(--pp-teal)}.pp-overlay{position:fixed;inset:0;background:#09282199;z-index:60;display:flex;justify-content:flex-end}.pp-drawer{background:#fff;width:min(760px,100%);height:100%;overflow:auto;overscroll-behavior:contain;padding:26px 34px 60px;box-shadow:-20px 0 60px #001a1833}.pp-drawer-top{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-26px;background:#fff;z-index:2;padding:12px 0}.pp-drawer h1{font-size:38px}.pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.pp-plan{border:1px solid var(--pp-line);padding:24px;border-radius:10px;margin:24px 0;background:#fffefb}.pp-plan section{border-top:1px solid var(--pp-line);padding-top:16px;margin-top:20px;overflow-wrap:anywhere}.pp-plan h3{font-family:var(--pp-serif);font-size:24px;color:#0a4f48}.pp-plan-goal{margin:18px 0}.pp-app dl{display:grid;grid-template-columns:minmax(80px,1fr) 3fr;gap:5px 18px;font-size:15px}.pp-app dt{color:var(--pp-muted);text-transform:capitalize}.pp-app dd{margin:0;overflow-wrap:anywhere}.pp-digest{font-size:12px;font-family:monospace;overflow-wrap:anywhere}.pp-sign{background:#f2f8f5;border:1px solid #c7e1d8;border-radius:18px;padding:20px;margin-top:20px}.pp-pending-row{display:flex;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--pp-line);padding:12px 0}.pp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pp-skip{position:absolute;left:-9999px;color:#fff}.pp-skip:focus{left:12px;top:8px;padding:12px;background:#0e6b61;z-index:90}
@media(max-width:1050px){.pp-top{gap:12px;padding:12px 20px}.pp-brand{font-size:19px}.pp-nav button{padding:10px}.pp-three{grid-template-columns:1fr 1fr}.pp-three>.pp-card:first-child{grid-column:1/-1}.pp-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-hero{grid-template-columns:minmax(0,1fr) 150px;padding:30px;gap:24px}.pp-goals{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-goal:last-child{grid-column:auto}}
@media(max-width:760px){.pp-top{padding:12px 16px;flex-wrap:wrap}.pp-brand{font-size:18px}.pp-brand span{font-size:12px;max-width:210px;overflow-wrap:anywhere}.pp-account{gap:6px}.pp-account select{padding:7px 4px;font-size:13px;max-width:90px}.pp-account .pp-btn{font-size:13px;padding:8px}.pp-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0f1f1b;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #10201c15}.pp-nav button{font-size:12px;padding:6px 3px;display:grid;gap:1px;justify-items:center}.pp-nav button>span{display:block;font-size:25px;line-height:1}.pp-main{padding:16px 16px 110px;gap:18px}.pp-toolbar label{font-size:13px;gap:8px}.pp-toolbar select{max-width:165px;font-size:14px}.pp-toolbar .pp-btn{padding:9px 12px;font-size:14px}.pp-hero{border-radius:24px;padding:26px 22px;grid-template-columns:1fr;gap:18px}.pp-hero h1{font-size:38px}.pp-sub{font-size:20px}.pp-hero-aside{display:flex;align-items:center;gap:12px;justify-content:space-between;border-radius:16px;padding:12px 16px}.pp-hero-aside>span{font-size:38px}.pp-hero-aside p{margin-right:auto;font-size:14px}.pp-hero-aside .pp-btn{font-size:13px;padding:9px 12px}.pp-next{padding:15px;gap:12px}.pp-next h2{font-size:19px}.pp-next .pp-symbol{font-size:30px}.pp-three,.pp-two,.pp-goals,.pp-tasks{grid-template-columns:1fr}.pp-three>.pp-card:first-child{grid-column:auto}.pp-card{padding:22px;border-radius:22px}.pp-heading{align-items:start;flex-wrap:wrap}.pp-appointment{align-items:start;flex-direction:column;gap:10px}.pp-bubble{max-width:95%}.pp-drawer{padding:16px 22px 40px}.pp-drawer-top{top:-16px}.pp-drawer h1{font-size:32px}.pp-plan{padding:18px}.pp-app dl{grid-template-columns:minmax(80px,1fr) 2fr}.pp-pending-row{align-items:start;flex-direction:column}.pp-notice .pp-btn{margin:10px 0 0}.pp-pagehead h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.pp-app *{animation:none!important;transition:none!important}}
.family-entry{display:flex;align-items:center;gap:14px;padding:10px 24px;background:#e9f3ee;border-bottom:1px solid #d3e4da;color:#315449;font-size:14px}.family-entry .btn{min-height:36px}@media(max-width:600px){.family-entry{padding:10px 16px;gap:10px}.family-entry span{font-size:12px}}
.pp-graph-wrap{margin:16px 0;width:100%;min-width:0}.pp-graph-wrap figcaption{font-size:14px;font-weight:700;color:#0a4f48}.pp-graph{display:block;width:100%;height:auto;overflow:visible;margin-top:12px}.pp-graph text{font-size:12px;fill:#536a5f}.pp-table-scroll{max-width:100%;overflow:auto}.pp-points{border-collapse:collapse;width:100%;font-size:14px;margin:16px 0}.pp-points caption{text-align:left;font-weight:700;padding:8px 0}.pp-points th,.pp-points td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid #dce4e0}.pp-points th{background:#eaf3ef}.pp-points details{font-size:12px;overflow-wrap:anywhere}.pp-points details p{min-width:150px}
.pp-session-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.pp-session-totals>div{background:#eef7f2;border:1px solid #d3e5db;border-radius:16px;padding:16px}.pp-session-totals b{display:block;font:600 32px var(--pp-serif);color:#0a4f48}.pp-session-totals span{font-size:14px;color:#4a6658}.pp-session-summary{margin:24px 0;padding-top:24px;border-top:1px solid #dce4e0}.pp-session-summary>h2{margin-top:24px}.pp-session-group{padding:14px 0;border-top:1px solid #dce4e0}.pp-session-group h3{color:#0a4f48}

/* A line chart never inherits an area fill, even under broader app SVG rules. */
.pp-graph .pp-graph-line,.pp-graph .pp-graph-axis,.pp-graph .pp-graph-grid{fill:none;vector-effect:non-scaling-stroke}.pp-graph .pp-graph-line{stroke:#0e6b61;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pp-graph .pp-graph-point{fill:#0e6b61;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.pp-graph-dates{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#536a5f;font-variant-numeric:tabular-nums}.pp-graph-latest{font-size:14px;color:#0a4f48;line-height:1.5}.pp-graph-latest b{font-size:12px;font-weight:700}
/* Families hub (docs/PARENT_PORTAL.md, "Families hub"). Same look as the parent side: a dark hero, white cards, one next move. */
.fw-page.fh { --fh-ink: #10201c; --fh-ink2: #3e4c47; --fh-ink3: #5b6c64; --fh-ground: #f2f5f3; --fh-line: #dce4e0; --fh-faint: #eef2f0;
  --fh-teal: #0e6b61; --fh-tealD: #0a4f48; --fh-tealT: #e3f3ef; --fh-mint: #4fd1b5;
  --fh-coralT: #fdebe5; --fh-coralD: #8a3420; --fh-blueT: #e8effd; --fh-blueD: #23458f; --fh-amberT: #fff3dc; --fh-amberD: #6b4308;
  --fh-serif: 'Fraunces Variable', Fraunces, Georgia, "Times New Roman", serif;
  --fh-shadow: 0 1px 0 #10201c0a, 0 18px 36px -28px #10201c73;
  max-width: 1260px; margin: auto; padding: 24px 28px 90px; color: var(--fh-ink); background: var(--fh-ground); display: grid; gap: 22px;
  font-family: 'Atkinson Hyperlegible Next Variable', 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 16px; line-height: 1.45; }
.fh * { box-sizing: border-box; }
.fh button, .fh input, .fh select, .fh textarea { font: inherit; }
.fh .btn { min-height: 44px; border-radius: 12px; font-weight: 700; }
.fh .btn.primary { background: var(--fh-teal); border-color: var(--fh-teal); color: #fff; }
.fh-lab { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fh-teal); }

/* hero */
.fh-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; padding: 30px 34px; color: #fff;
  background: linear-gradient(135deg, #062723, #0a3a34 48%, #0d2f3d); box-shadow: 0 30px 50px -34px #041e1bf2;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: start; }
.fh-hero::before { content: ''; position: absolute; z-index: -1; width: 620px; height: 620px; right: -180px; top: -300px; border-radius: 50%; background: radial-gradient(circle, #e9765b33, transparent 65%); }
.fh-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a9c4bc; }
.fh-h1 { margin: 8px 0 0; font-family: var(--fh-serif); font-size: clamp(38px, 5vw, 54px); font-weight: 600; letter-spacing: -.015em; line-height: 1.04; }
.fh-sub { margin: 8px 0 0; font-size: 20px; color: #dceae5; }
.fh-sub b { color: #fff; }
.fh-now { margin-top: 22px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 22px; background: #ffffff0f; border: 1px solid #ffffff29; }
.fh-now .fh-lab, .fh-hero-side .fh-lab { color: var(--fh-mint); }
.fh-now h2 { margin: 3px 0 0; font-size: 22px; line-height: 1.2; }
.fh-now p { margin: 3px 0 0; color: #cfe2dc; font-size: 15px; }
.fh .fh-mint { background: linear-gradient(180deg, #7be3cb, #4fd1b5); border: 0; color: var(--fh-ink); border-radius: 999px; min-height: 50px; padding: 0 22px; font-weight: 800; white-space: nowrap; }
.fh-hero-side { display: grid; gap: 10px; }
.fh-tools { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.fh .fh-ghost { background: transparent; border: 1px solid #ffffff4d; color: #fff; min-height: 38px; font-size: 14px; }
.fh .fh-ghost:hover { background: #ffffff14; }
.fh-soon { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid #ffffff24; background: #ffffff0d; color: #fff; cursor: pointer; }
.fh-soon:hover { background: #ffffff1a; }
.fh-soon span { font-size: 14px; color: #bfd3cc; }

/* faces */
.fh-face { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 800; font-size: 15px; color: #fff; background: hsl(var(--h) 42% 42%); }
.fh-face.fh-big { width: 56px; height: 56px; font-size: 18px; box-shadow: 0 0 0 3px #fff; }
.fh-now .fh-face.fh-big { box-shadow: 0 0 0 3px #ffffff2e; }

/* hub */
.fh-hub { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 22px; align-items: start; }
.fh-list, .fh-card { background: #fff; border: 1px solid var(--fh-line); border-radius: 24px; box-shadow: var(--fh-shadow); min-width: 0; }
.fh-list { padding: 18px 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.fh-list-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 6px; }
.fh-find input { width: 100%; min-height: 46px; border: 1.5px solid var(--fh-line); border-radius: 14px; padding: 0 14px; background: #fbfcfb; color: var(--fh-ink); }
.fh-find input:focus { outline: none; border-color: var(--fh-teal); box-shadow: 0 0 0 4px var(--fh-tealT); background: #fff; }
.fh-group { display: flex; justify-content: space-between; margin: 16px 6px 6px; }
.fh-group b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fh-teal); }
.fh-group span { font-size: 13px; color: var(--fh-ink3); font-weight: 700; }
.fh-fam { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 12px; margin-top: 4px; border-radius: 18px; border: 1.5px solid transparent; background: none; text-align: left; color: var(--fh-ink); cursor: pointer; }
.fh-fam[hidden] { display: none; }
.fh-fam:hover { background: var(--fh-faint); }
.fh-fam.on { border-color: var(--fh-teal); background: #fff; box-shadow: 0 0 0 4px var(--fh-tealT); }
.fh-fam-text { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.fh-fam-name { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.fh-fam-name small { font-size: 13px; color: var(--fh-ink3); font-weight: 700; white-space: nowrap; }
.fh-line { font-size: 14px; color: var(--fh-ink2); }
.fh-pill { display: inline-block; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; margin-top: 4px; background: var(--fh-faint); color: var(--fh-ink2); }
.fh-pill.fh-you, .fh-pill.fh-office, .fh-pill.fh-bcba { background: var(--fh-coralT); color: var(--fh-coralD); }
.fh-pill.fh-family { background: var(--fh-blueT); color: var(--fh-blueD); }
.fh-pill.fh-recorded { background: var(--fh-blueT); color: var(--fh-blueD); }
.fh-pill.fh-ready, .fh-pill.fh-done { background: var(--fh-tealT); color: var(--fh-tealD); }

/* one family */
.fh-card { overflow: hidden; }
.fh-head { padding: 24px 28px 0; background: linear-gradient(180deg, #f3f8f6, #fff); }
.fh-ident { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fh-stack { display: flex; }
.fh-stack .fh-face + .fh-face { margin-left: -14px; }
.fh-ident h2 { margin: 0; font-family: var(--fh-serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.fh-ident p { margin: 3px 0 0; color: var(--fh-ink2); font-size: 15px; }
.fh-adults { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.fh-adult { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; background: #fff; border: 1px solid var(--fh-line); font-size: 14px; color: var(--fh-ink3); }
.fh-adult .fh-face { width: 30px; height: 30px; font-size: 11px; }
.fh-adult b { color: var(--fh-ink); }
.fh .fh-add { border-style: dashed; border-radius: 99px; min-height: 40px; font-size: 14px; }
.fh-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--fh-line); overflow-x: auto; }
.fh-tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 800; font-size: 15px; color: var(--fh-ink3); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; }
.fh-tabs button.on { color: var(--fh-tealD); border-bottom-color: var(--fh-teal); }
.fh-dotless { margin-left: 8px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--fh-coralT); color: var(--fh-coralD); }
.fh-body { padding: 22px 28px 28px; display: grid; gap: 16px; }
.fh-fine { margin: 0; font-size: 14px; color: var(--fh-ink3); }
.fh-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }

.fh-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #0a3a34, #0d2f3d); }
.fh-lead .fh-lab { color: var(--fh-mint); }
.fh-lead h3 { margin: 4px 0 0; font-family: var(--fh-serif); font-size: 24px; font-weight: 600; line-height: 1.15; }
.fh-lead p:not(.fh-lab) { margin: 4px 0 0; color: #cfe2dc; font-size: 15px; }
.fh-lead-family { background: linear-gradient(135deg, #18305e, #1b3b54); }
.fh-lead-family .fh-lab { color: #a9c3f7; }
.fh-lead-ready, .fh-lead-done { background: linear-gradient(135deg, #0b5c52, #0a4f48); }

.fh-journey { list-style: none; margin: 0; padding: 0; display: grid; }
.fh-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding-bottom: 12px; }
.fh-step::before { content: ''; position: absolute; left: 20px; top: 42px; bottom: 0; width: 2px; background: var(--fh-line); }
.fh-step:last-child::before { display: none; }
.fh-step.fh-done::before { background: var(--fh-teal); }
.fh-num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; border: 2px solid var(--fh-line); color: var(--fh-ink3); position: relative; z-index: 1; }
.fh-done .fh-num { background: var(--fh-teal); border-color: var(--fh-teal); color: #fff; }
.fh-cur .fh-num { border-color: var(--fh-teal); color: var(--fh-tealD); box-shadow: 0 0 0 5px var(--fh-tealT); }
.fh-step details { border: 1px solid var(--fh-line); border-radius: 18px; background: #fff; min-width: 0; }
.fh-cur details { border-color: #bfe3da; box-shadow: 0 18px 32px -26px #0a4f48b3; }
.fh-step summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; cursor: pointer; }
.fh-step summary::-webkit-details-marker { display: none; }
.fh-step summary b { display: block; font-size: 17px; }
.fh-step summary span span { display: block; font-size: 15px; color: var(--fh-ink2); }
.fh-step summary .fh-pill { margin: 0; }
.fh-step-body { padding: 0 18px 16px; display: grid; gap: 10px; }
.fh-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px !important; border: 0 !important; border-radius: 14px; background: var(--fh-faint); }
.fh-row p { margin: 2px 0 0; font-size: 14px; color: var(--fh-ink3); }
.fh-forms { display: grid; gap: 8px; }
.fh-form { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--fh-faint); }
.fh-form p { margin: 0; font-size: 14px; color: var(--fh-ink3); }
.fh-tick { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; }
.fh-form.ok .fh-tick { background: var(--fh-tealT); color: var(--fh-tealD); font-weight: 800; }
.fh-form.review .fh-tick { background: var(--fh-coralT); color: var(--fh-coralD); font-weight: 800; }
.fh-form.review .fh-response-detail { color: var(--fh-coralD); }
.fh-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fh-mate { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--fh-faint); }
.fh-mate span span { display: block; font-size: 14px; color: var(--fh-ink3); }

/* the sections that were the old page, kept by class for their tests */
.fh-panel { background: #fff; border: 1px solid var(--fh-line); border-radius: 20px; padding: 22px; margin: 0; }
.fw-card h2 { margin: 0 0 10px; font-family: var(--fh-serif, 'Fraunces Variable', Georgia, "Times New Roman", serif); font-size: 26px; font-weight: 600; }
.fw-card h3 { margin: 8px 0; }
.fw-field { display: grid; gap: 7px; margin: 14px 0; font-weight: 700; }
.fw-field input, .fw-field textarea, .fw-field select, .fw-notice input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--fh-line, #95a89b); border-radius: 12px; font: inherit; font-weight: 400; background: white; color: var(--fh-ink, #183b31); }
.fw-field textarea { resize: vertical; }
.fw-field input:focus, .fw-field textarea:focus, .fw-field select:focus { outline: none; border-color: var(--fh-teal); box-shadow: 0 0 0 4px var(--fh-tealT); }
.fw-preview { padding: 18px; margin: 18px 0; border-radius: 14px; background: var(--fh-amberT, #eaf0e7); border: 1px solid #f3ddb0; }
.fw-item { padding: 16px 0; border-bottom: 1px solid var(--fh-faint, #d9dfd1); }
.fw-item p, .fw-preview p, .fw-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.fw-item .btn { margin-right: 8px; }
.fw-problem, .fw-notice { padding: 14px 18px; border-radius: 14px; margin: 0; background: var(--fh-coralT, #f9e6d8); }
.fw-notice { background: var(--fh-tealT, #eaf0e7); }
.fw-thread { max-height: 460px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #fbfcfb, #f6f9f7); }
.fw-message { max-width: 78%; align-self: flex-start; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: #fff; border: 1px solid var(--fh-line, #dce4e0); }
.fw-message p { margin: 4px 0; }
.fw-message.team { align-self: flex-end; background: var(--fh-teal, #0e6b61); color: #fff; border-color: transparent; border-radius: 20px 20px 6px 20px; }
.fw-message.team small { color: #d6ece6; }
.fw-page small { color: var(--fh-ink3, #52675b); }
.fw-page button:focus-visible, .fw-page input:focus-visible, .fw-page textarea:focus-visible, .fw-page select:focus-visible, .fw-page summary:focus-visible { outline: 3px solid #aa532e; outline-offset: 3px; }
.fw-source-preview { padding: 18px; margin: 18px 0; border-radius: 14px; min-height: auto; }
.fw-source-preview .pp-tablewrap { max-height: 480px; overflow: auto; }

/* invite sheet */
.fh-scrim { position: fixed; inset: 0; background: #06191673; backdrop-filter: blur(3px); z-index: 40; }
.fh-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(900px, 100%); background: #fff; z-index: 41; display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px #041e1b99; overflow: auto; }
.fh-sheet-head { display: flex; gap: 14px; align-items: start; justify-content: space-between; padding: 24px 26px 8px; background: linear-gradient(180deg, #f3f8f6, #fff); }
.fh-sheet-head h2 { margin: 0; font-family: var(--fh-serif); font-size: 28px; font-weight: 600; }
.fh-sheet-head p { margin: 2px 0 0; color: var(--fh-ink2); }
.fh-x { border: 0; background: #fff; box-shadow: 0 0 0 1px var(--fh-line); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; flex: none; }
.fh-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 8px 26px 28px; align-items: start; }
.fh-sheet-form { display: grid; gap: 4px; }
.fh-sheet-form > .btn { margin-top: 10px; min-height: 52px; font-size: 17px; }
.fh-letter { border: 1px solid var(--fh-line); border-radius: 20px; padding: 18px; box-shadow: 0 24px 40px -30px #10201cb3; display: grid; gap: 8px; }
.fh-letter h3 { margin: 0; font-family: var(--fh-serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.fh-letter p, .fh-letter ol { margin: 0; color: var(--fh-ink2); }
.fh-letter ol { padding-left: 20px; display: grid; gap: 3px; }

@media (max-width: 1080px) {
  .fh-hub { grid-template-columns: minmax(0, 1fr); }
  .fh-list { position: static; max-height: none; }
  .fh-sheet-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .fw-page.fh { padding: 14px 14px 80px; gap: 14px; }
  .fh-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; border-radius: 24px; gap: 12px; }
  .fh-tools { justify-content: flex-start; }
  .fh-now { grid-template-columns: 48px minmax(0, 1fr); }
  .fh-now .fh-face.fh-big { width: 48px; height: 48px; }
  .fh-now .btn { grid-column: 1 / -1; }
  .fh-head { padding: 18px 16px 0; }
  .fh-body { padding: 16px; }
  .fh-ident h2 { font-size: 25px; }
  .fh-lead { grid-template-columns: minmax(0, 1fr); }
  .fh-step { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .fh-num { width: 32px; height: 32px; font-size: 14px; }
  .fh-step::before { left: 15px; top: 32px; }
  .fh-step summary { grid-template-columns: minmax(0, 1fr); }
  .fh-step summary .fh-pill { justify-self: start; }
  .fw-message { max-width: 90%; }
}
/*
 * A learner's pages read only (an owner or admin on the BCBA's behavior plan or a program): no greyed control with no
 * reason beside it, and fields that read as the plan's words rather than as boxes to type in. The line at the top of the
 * page names who changes it (runtime/connected/learner-pages.ts).
 */
fieldset.ro button { display: none; }
fieldset.ro .inp, fieldset.ro textarea.inp, fieldset.ro select.inp { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink); padding-left: 0; resize: none; -webkit-appearance: none; appearance: none; opacity: 1; }
fieldset.ro input[type="checkbox"], fieldset.ro input[type="radio"] { opacity: .8; }
[data-learner-setup] .learner-setup-list { list-style: none; padding: 0; margin: 0; }
[data-learner-setup] .learner-setup-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
[data-learner-setup] .learner-setup-list h3 { margin: 0 0 .25rem; }
[data-learner-setup] .learner-setup-list p { margin: 0; max-width: 65ch; }
[data-learner-setup] .learner-setup-list button { flex-shrink: 0; }
@media (max-width: 720px) { [data-learner-setup] .learner-setup-list li { align-items: flex-start; flex-direction: column; } }
/* Connected Today uses the prototype's warning colors for a peer booking overlap. */
.wi-row [data-walkin-overlap] {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: var(--amberW);
  color: var(--amberD);
  font-weight: 700;
}
/* The connected role bar fits all views without widening a phone page. */
@media (max-width: 600px) {
  .connected-bar .seg {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .connected-bar .seg button {
    flex: 1 1 auto;
  }
}

/* A link button on a light page, not the dark bar: readable at full contrast (the RBT walkthrough found it nearly invisible). */
.linkbtn.on-page { color: #0E6B61; padding: 6px 0; }
/* The lock screen covers the whole page, opaque, above every drawer and dialog; nothing behind it shows or takes a tap. */
.idle-lock { position: fixed; inset: 0; z-index: 10000; overflow: auto; background: var(--ground); }
.idle-lock .ob { min-height: 100vh; }
/* The page behind does not scroll while it is covered. */
.idle-locked, .idle-locked body { overflow: hidden; }

.idle-help{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:16px 0}.idle-help summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--teal);font-weight:700}.idle-help dt{font-weight:700;margin-top:12px}.idle-help dd{margin:6px 0 12px;font-size:14px;line-height:1.5}
.ac-main > .adm { width: 100%; max-width: none; margin: 0; padding: 0; }
/* A learner's Documents tab and the bulk upload (runtime/connected/documents-view.ts): the prototype's own cards,
   tables and chips, with these few additions. */
.doc-card { grid-template-columns: 170px minmax(0, 1fr) auto; }
.doc-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.doc-acts { justify-content: flex-end; }
.doc-card .doc-form { margin-top: 12px; }
.doc-discharged { display: flex; align-items: center; gap: 10px; }
.doc-drop { border: 2px dashed var(--teal); border-radius: 14px; padding: 18px 20px; background: var(--tealW); display: flex; flex-direction: column; gap: 6px; }
.doc-drop p { margin: 0; }
.doc-drop.over { background: #D2ECE5; }
.up-scroll { overflow-x: auto; margin-top: 12px; }
.up-tbl td { vertical-align: top; }
.up-tbl td .inp { min-width: 0; width: 100%; }
.up-tbl .up-learner { min-width: 205px; }
.up-tbl .up-type { min-width: 165px; }
/* Wide enough for the longest month written out ("September 2026") at 1280. */
.up-tbl .up-when { min-width: 175px; }
.up-tbl .up-when .up-date { padding-left: 10px; padding-right: 10px; }
.up-tbl .up-state { min-width: 140px; }
.up-tbl td:first-child { min-width: 160px; overflow-wrap: anywhere; }
.up-tbl .up-learner .btn { margin-top: 6px; }
.up-tbl .up-current { text-align: center; }
.up-confirm { margin-top: 12px; }
.up-acts { margin-top: 18px; }
@media (max-width: 1100px) { .doc-card { grid-template-columns: minmax(0, 1fr); } }
.doc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Finish staff records (finish-records.ts; mocks/finish-staff-records). */
.fr { display: flex; flex-direction: column; gap: 18px; }
.fr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fr-meter { min-width: 240px; }
.fr-n { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.fr-n small { font-family: var(--sans); font-size: 15px; color: var(--ink2); }
.fr-bar { height: 10px; border-radius: 99px; background: var(--faint); overflow: hidden; margin-top: 8px; }
.fr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #4FD1B5); border-radius: 99px; transition: width .4s ease; }
.fr-known { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--tealT); color: var(--tealD); }
.fr-known b { color: var(--ink); }
.fr-list { padding: 0; overflow: hidden; }
.fr-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 150px minmax(130px, 1fr) 160px minmax(140px, 1fr) 32px; gap: 8px 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--faint); }
.fr-row:last-child { border-bottom: 0; }
.fr-head { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink2); border-bottom: 1px solid var(--line); }
.fr-ok { background: var(--tealW); }
.fr-who b { display: block; }
.fr-who span { font-size: 13px; color: var(--ink2); }
.fr-fld { position: relative; }
.fr-fld .inp { width: 100%; }
.fr-mono { font-family: var(--mono); }
.fr-bad { border-color: #B3412C !important; }
.fr-hint { display: block; font-size: 12px; color: #B3412C; min-height: 0; }
.fr-hint:empty { display: none; }
.fr-auto { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--tealD); background: var(--tealT); border-radius: 99px; padding: 2px 8px; pointer-events: none; }
.fr-have { color: var(--ink2); font-size: 15px; }
.fr-have small { display: block; font-size: 12px; color: var(--ink2); opacity: .8; }
.fr-tick { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; font-weight: 800; }
.fr-ok .fr-tick { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.fr-extra { grid-column: 1 / -1; margin: 0; }
.fr-aff { display: inline-block; width: auto; min-height: 36px; margin-left: 6px; }
.fr-source { padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.fr-source label { display: block; font-size: 14px; color: var(--ink2); margin-bottom: 6px; }
.fr-source .inp { width: 100%; }
.fr-links { display: flex; gap: 16px; margin: 10px 0 0; font-size: 14px; flex-wrap: wrap; }
.fr-links a { color: var(--tealD); font-weight: 700; }
.fr-clear { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fr-big { font-family: var(--serif); font-size: 56px; color: var(--teal); line-height: 1; }
@media (max-width: 900px) {
  .fr-head { display: none; }
  .fr-row { grid-template-columns: 1fr 1fr; padding: 18px 16px; }
  .fr-who { grid-column: 1 / -1; }
  .fr-tick { display: none; }
  .fr-fld::before { content: attr(data-l); display: block; font-size: 11px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
  .fr-source { grid-template-columns: 1fr; }
}
/* Approve programs (approve-programs.ts; mocks/finish-staff-records/approve-programs.html). */
.ap-page { display: flex; flex-direction: column; gap: 18px; padding-bottom: 96px; }
.ap-learners { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-chip { border: 1px solid var(--line); background: #FFFFFF; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--ink2); cursor: pointer; }
.ap-chip span { opacity: .7; margin-left: 6px; font-weight: 500; }
.ap-chip.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ap-note { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--tealT); color: var(--tealD); }
.ap-list { padding: 0; overflow: hidden; }
.ap-prog { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; padding: 20px 24px; border-bottom: 1px solid var(--faint); }
.ap-prog:last-child { border-bottom: 0; }
.ap-head h3 { margin: 0; font-size: 18px; }
.ap-head .help { margin: 2px 0 0; }
.ap-tag { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; margin-left: 8px; vertical-align: 2px; }
.ap-tag.new { background: #E6EEFD; color: #2D5BC2; }
.ap-tag.chg { background: #FCF1DF; color: #8A5A0F; }
.ap-acts { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ap-facts { grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 6px 28px; font-size: 15px; color: var(--ink2); }
.ap-facts b { display: block; color: var(--ink2); opacity: .8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ap-facts del { color: #A2402C; }
.ap-facts ins { color: var(--tealD); text-decoration: none; font-weight: 700; }
.ap-block { grid-column: 1; }
.ap-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(8px); }
.ap-foot .help { margin: 0; }
.ap-empty { padding: 40px 20px; text-align: center; }
@media (max-width: 760px) {
  .ap-prog { grid-template-columns: 1fr; padding: 18px 16px; }
  .ap-acts { grid-row: auto; grid-column: 1; flex-direction: row; flex-wrap: wrap; }
  .ap-facts { grid-template-columns: 1fr 1fr; }
  .ap-foot { flex-direction: column; align-items: stretch; }
}
/* The team board (team-board.ts; mocks/team-board/team-board.html, round 2). Every rule is scoped to .tb. */
.tb { --tb-r: 24px; --tb-gap: 22px; --tb-ink3: #66756F; --tb-mint: #4FD1B5; --tb-blueT: #E8EFFD; --tb-blueD: #23458F;
  --tb-shadow: 0 1px 0 rgba(16,32,28,.04), 0 18px 36px -28px rgba(16,32,28,.45); --tb-ease: cubic-bezier(.2,.8,.2,1);
  max-width: 1240px; margin: 0 auto; padding: 20px 28px 90px; display: grid; gap: var(--tb-gap); font-size: 17px; line-height: 1.45; color: var(--ink); }
.tb button { font: inherit; color: inherit; cursor: pointer; }
.tb .tb-num { font-variant-numeric: tabular-nums; }
.tb .tb-ink3 { color: var(--tb-ink3); }
@keyframes tb-rise { from { opacity: 0; transform: translateY(8px); } }
.tb.settled .tb-hero, .tb.settled .tb-card, .tb.settled .tb-win, .tb.settled .tb-todo li { animation: none; }

.tb-top { display: flex; align-items: center; gap: 12px; }
.tb-back { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; min-height: 44px; padding: 0 14px; font-weight: 800; color: var(--tealD); }
.tb-back:hover { border-color: var(--teal); }
.tb-crumb { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.tb-grow { flex: 1; }
.tb-link { border: 0; background: none; color: var(--tealD); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }

/* hero: the climb */
.tb-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 28px 32px 24px; color: #fff; background: radial-gradient(120% 90% at 80% 0%, #10463F 0%, #072A26 45%, #061B22 100%); box-shadow: 0 30px 50px -34px rgba(4,30,27,.95), inset 0 1px 0 rgba(255,255,255,.08); display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; animation: tb-rise .5s var(--tb-ease) both; }
.tb-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A9C4BC; }
.tb-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .1em; color: #062723; background: var(--tb-mint); padding: 3px 9px 3px 8px; border-radius: 99px; }
.tb-live i { width: 7px; height: 7px; border-radius: 50%; background: #062723; animation: tb-blink 1.4s infinite; }
@keyframes tb-blink { 50% { opacity: .25; } }
.tb-h1 { margin: 10px 0 0; font-family: var(--serif); font-size: 40px; font-weight: 600; letter-spacing: -.015em; line-height: 1.06; }
.tb-sub { margin: 10px 0 0; font-size: 18px; color: #DCEAE5; }
.tb-sub b { color: #fff; }
.tb-bignum { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-bignum b { font-family: var(--serif); font-size: 72px; line-height: .9; font-weight: 600; letter-spacing: -.02em; }
.tb-bignum span { font-size: 16px; color: #A9C4BC; font-weight: 700; }
.tb-nextcamp { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; }
.tb-nextcamp svg { width: 54px; height: 54px; }
.tb-nextcamp .l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--tb-mint); }
.tb-nextcamp .t { font-weight: 800; font-size: 17px; }
.tb-nextcamp .s { font-size: 14px; color: #BFD5CE; }
.tb-hbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.tb-hb { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px; border-radius: 14px; border: 1.5px solid rgba(79,209,181,.6); background: rgba(79,209,181,.12); color: #fff !important; font-weight: 800; font-size: 15px; transition: .2s; }
.tb-hb:hover { background: rgba(79,209,181,.24); }
.tb-hb .n { font-family: var(--mono); color: var(--tb-mint); }
.tb-hb.ghost { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.05); }
.tb-hchart { position: relative; min-width: 0; display: flex; flex-direction: column; }
.tb-hleg { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: #BFD5CE; }
.tb-hleg span { display: inline-flex; align-items: center; gap: 8px; }
.tb-hleg i { width: 22px; height: 0; border-top: 3px solid var(--tb-mint); }
.tb-hleg i.g { border-top: 2px dashed var(--amber); }
.tb-hleg i.l { border-top: 2px solid rgba(255,255,255,.35); }
.tb-hsvgwrap { position: relative; flex: 1; }
#tb-hsvg { width: 100%; height: auto; display: block; overflow: visible; margin-top: 6px; }
#tb-hsvg .tb-ridge { transition: transform .6s var(--tb-ease); }
#tb-hsvg .tb-flag { transform-box: fill-box; transform-origin: 50% 100%; animation: tb-flagup .6s var(--tb-ease) both; }
@keyframes tb-flagup { from { transform: scaleY(0); opacity: 0; } }
#tb-hsvg .tb-wstar { cursor: pointer; outline: none; }
.tb-bubble { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: #fff; color: var(--ink); border-radius: 14px; padding: 9px 12px; font-size: 14px; font-weight: 600; width: max-content; max-width: 260px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 4; }
.tb-bubble.on { opacity: 1; }
.tb-bubble b { font-weight: 800; }
.tb-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.tb-replay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 6px; }
.tb-replay button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; }
.tb-replay input { width: 100%; accent-color: var(--tb-mint); }
.tb-replay span { font-size: 14px; font-weight: 800; color: #BFD5CE; min-width: 92px; text-align: right; }
.tb-ticker { margin-top: 10px; height: 44px; position: relative; overflow: hidden; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); }
.tb-ticker div { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; color: #DCEAE5; animation: tb-tick .5s var(--tb-ease) both; white-space: nowrap; overflow: hidden; }
.tb-ticker div span { overflow: hidden; text-overflow: ellipsis; }
.tb-ticker div b { color: #fff; }
.tb-ticker div em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-mint); flex: none; }
@keyframes tb-tick { from { transform: translateY(100%); opacity: 0; } }
.tb-rays { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 70; }
.tb-rays i { position: absolute; left: 0; top: 0; width: 3px; height: 30px; border-radius: 3px; background: linear-gradient(var(--c, #4FD1B5), transparent); transform-origin: 50% 0; animation: tb-ray 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tb-ray { 0% { opacity: 0; transform: rotate(var(--a)) translateY(10px) scaleY(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d, 90px)) scaleY(1); } }
.tb-float { position: fixed; pointer-events: none; font-size: 22px; z-index: 70; color: #E9A23B; animation: tb-floatup 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tb-floatup { to { transform: translate(var(--x), -90px) scale(1.3); opacity: 0; } }

/* cards */
.tb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--tb-r); box-shadow: var(--tb-shadow); padding: 26px 28px; display: flex; flex-direction: column; min-width: 0; animation: tb-rise .55s var(--tb-ease) both; }
.tb-card h2 { margin: 2px 0 0; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; }
.tb-card p { margin: 0; }
.tb-empty, .tb-wait { gap: 10px; }
.tb-wait p, .tb-empty p { color: var(--ink2); max-width: 70ch; }
.tb-ch { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.tb-ch .k { font-size: 13px; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; color: var(--teal); }
.tb-ch .aside { font-size: 15px; color: var(--tb-ink3); font-weight: 600; }
.tb-fine { margin: 14px 0 0 !important; font-size: 14px; color: var(--tb-ink3); }
.tb-quiet { color: var(--tb-ink3); font-size: 15px; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--teal); background: #fff; color: var(--tealD) !important; font-weight: 800; font-size: 15px; white-space: nowrap; transition: .15s; }
.tb-btn:hover { background: var(--tealT); }
.tb-btn.solid { background: var(--teal); color: #fff !important; }
.tb-btn.solid:hover { background: var(--tealD); }
.tb-btn[disabled] { opacity: .6; cursor: progress; }

/* rewards */
.tb-rew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.tb-camps { list-style: none; margin: 0; padding: 0; position: relative; align-self: start; }
.tb-camps::before { content: ''; position: absolute; left: 21px; top: 32px; bottom: 32px; width: 3px; border-radius: 3px; background: var(--faint); }
.tb-fill { position: absolute; left: 21px; top: 32px; width: 3px; height: calc((100% - 64px) * var(--fill, 0)); border-radius: 3px; background: linear-gradient(var(--tb-mint), var(--teal)); transition: height 1s var(--tb-ease); z-index: 0; }
.tb-camp { position: relative; display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; }
.tb-camp .ic { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); position: relative; z-index: 1; transition: .3s; }
.tb-camp.got .ic { background: var(--teal); border-color: var(--teal); }
.tb-camp .ic svg { width: 22px; height: 22px; }
.tb-camp .nm { font-weight: 800; }
.tb-camp .nm small { display: block; font-weight: 600; color: var(--tb-ink3); font-size: 14px; }
.tb-camp .st { font-size: 14px; font-weight: 800; color: var(--tb-ink3); }
.tb-camp.got .st { color: var(--teal); }
.tb-vote h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.tb-vote > p { margin: 4px 0 12px; color: var(--ink2); font-size: 15px; }
.tb-opts { display: grid; gap: 8px; }
.tb-opt { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; transition: border-color .2s, background .2s; }
.tb-opt:hover { border-color: var(--teal); }
.tb-opt.mine { border-color: var(--teal); background: var(--tealT); }
.tb-opt .e { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amberT); color: var(--amberD); font-family: var(--serif); font-weight: 700; font-size: 18px; }
.tb-opt .t { font-weight: 800; }
.tb-opt .t small { display: block; color: var(--tb-ink3); font-weight: 600; font-size: 13px; }
.tb-opt .c { font-family: var(--mono); font-weight: 700; color: var(--tealD); font-size: 15px; }
.tb-opt .c small { font-family: var(--sans); font-size: 12px; color: var(--tb-ink3); font-weight: 700; margin-left: 4px; }

/* wheel */
.tb-wheelrow { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: center; }
#tb-wsvg { width: 100%; height: auto; display: block; overflow: visible; }
#tb-wsvg .tb-petal { cursor: pointer; transition: opacity .2s; outline: none; }
#tb-wsvg .tb-petal .grow { transform-origin: 210px 210px; animation: tb-bloom .9s var(--tb-ease) both; }
.tb.settled #tb-wsvg .tb-petal .grow { animation: none; }
@keyframes tb-bloom { from { transform: scale(.35); opacity: 0; } }
#tb-wsvg .tb-petal:not(.on) { opacity: .72; }
#tb-wsvg .tb-petal.on .grow { stroke: #10201C; stroke-width: 2.5; }
#tb-wsvg .tb-petal:hover, #tb-wsvg .tb-petal:focus-visible { opacity: 1; }
.tb-wdet h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 600; }
.tb-wdet .tb-bar { margin: 6px 0 0; font-size: 16px; color: var(--ink2); }
.tb-wdet .tb-bar b { color: var(--ink); }
.tb-todo { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.tb-todo li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--faint); font-size: 15px; animation: tb-rise .4s var(--tb-ease) both; }
.tb-todo li i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: #fff; color: var(--ink2); border: 1.5px solid var(--line); }
.tb-todo li span small { color: var(--tb-ink3); margin-left: 6px; font-size: 13px; }
.tb-todo li em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--tb-ink3); }
.tb-todo li.mine { background: var(--amberT); }
.tb-todo li.mine em { color: var(--amberD); }
.tb-quest { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--teal); background: #fff; font-size: 15px; color: var(--ink2); }
.tb-quest > span:first-child { font-size: 22px; }
.tb-quest b { color: var(--ink); }

/* measures */
.tb-count { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; }
.tb-mlist { display: flex; flex-direction: column; gap: 4px; }
.tb-m { text-align: left; border: 0; background: none; border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; transition: background .2s; position: relative; }
.tb-m:hover { background: var(--faint); }
.tb-m.on { background: var(--tealT); }
.tb-m.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--teal); }
.tb-m .nm { font-weight: 800; font-size: 16px; }
.tb-m .v { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.tb-m .d { grid-column: 1 / -1; font-size: 14px; color: var(--tb-ink3); }
.tb-m .d b { color: var(--tealD); }
.tb-m .d b.dn { color: var(--amberD); }
.tb-grp { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--tb-ink3); margin: 12px 14px 2px; }
.tb-grp:first-child { margin-top: 0; }
.tb-detail { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 26px; }
.tb-detail h3 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.tb-detail .why { margin: 8px 0 0; color: var(--ink2); font-size: 16px; max-width: 60ch; }
.tb-detail .read { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--faint); font-size: 15px; color: var(--ink2); }
.tb-detail .read b { color: var(--ink); }
.tb-dchart { position: relative; margin-top: 14px; }
.tb-dchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tb-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 11px; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, -110%); transition: opacity .15s; z-index: 5; }
.tb-tip.on { opacity: 1; }
.tb svg .tb-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tb-draw 1.3s var(--tb-ease) .15s forwards; }
@keyframes tb-draw { to { stroke-dashoffset: 0; } }
.tb svg .tb-fade { opacity: 0; animation: tb-fadein .6s ease .9s forwards; }
@keyframes tb-fadein { to { opacity: 1; } }

/* wins and the goal */
.tb-row2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--tb-gap); }
.tb-row2 > :only-child { grid-column: 1 / -1; }
.tb-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-win { border-radius: 16px; animation: tb-rise .5s var(--tb-ease) both; }
.tb-win .row { display: grid; grid-template-columns: 40px 22px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 10px 12px; border-radius: 16px; }
.tb-win .row:hover { background: var(--faint); }
.tb-win .day { font-size: 13px; font-weight: 800; color: var(--tb-ink3); padding-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
.tb-win .star { width: 22px; height: 22px; margin-top: 1px; }
.tb-win p { margin: 0; font-size: 16px; }
.tb-win p b { font-weight: 800; }
.tb-win p small { display: block; color: var(--tb-ink3); font-size: 14px; margin-top: 2px; }
.tb-clap { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 12px; font-weight: 800; font-size: 14px; color: var(--tealD) !important; display: inline-flex; gap: 6px; align-items: center; transition: .15s; min-height: 44px; }
.tb-clap:hover { border-color: var(--teal); }
.tb-clap.on { background: var(--tealT); border-color: var(--teal); }
.tb-clap .n { font-family: var(--mono); }
.tb-goalset .g { display: flex; align-items: baseline; gap: 10px; }
.tb-goalset .g b { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1; }
.tb-goalset .g span { color: var(--tb-ink3); font-weight: 700; }
.tb-slider { width: 100%; margin: 16px 0 4px; accent-color: var(--teal); height: 28px; }
.tb-gchart svg { width: 100%; height: auto; display: block; overflow: visible; margin-top: 8px; }
.tb-reach { margin: 12px 0 0 !important; padding: 12px 14px; border-radius: 14px; font-size: 15px; background: var(--tealT); color: var(--tealD); font-weight: 600; transition: background .3s, color .3s; }
.tb-reach.hard { background: var(--amberT); color: var(--amberD); }
.tb-reach.easy { background: var(--tb-blueT); color: var(--tb-blueD); }
.tb-gfoot { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.tb-gfoot .tb-fine { margin: 0 !important; }

.tb-mine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 24px; }
.tb-lock { width: 44px; height: 44px; border-radius: 14px; background: var(--faint); display: grid; place-items: center; }
.tb-mine p { font-size: 16px; color: var(--ink2); }
.tb-mine p b { color: var(--ink); }
.tb-whyno summary { cursor: pointer; font-weight: 800; font-size: 16px; color: var(--tealD); list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tb-whyno summary::-webkit-details-marker { display: none; }
.tb-whyno summary::before { content: '+'; width: 26px; height: 26px; border-radius: 8px; background: var(--tealT); display: grid; place-items: center; font-weight: 800; }
.tb-whyno details[open] summary::before { content: '\2212'; }
.tb-whyno ol { margin: 14px 0 0; padding-left: 22px; color: var(--ink2); font-size: 15px; display: grid; gap: 8px; max-width: 80ch; }

/* the entry on Today */
.tb-entry { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 16px 0; padding: 14px 18px; border-radius: 20px; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #10463F 0%, #072A26 55%, #061B22 100%); box-shadow: 0 20px 36px -30px rgba(4,30,27,.95); }
.tb-entry-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(79,209,181,.18); border: 1.5px solid rgba(79,209,181,.55); }
.tb-entry-t b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 700; }
.tb-entry-t span { color: #BFD5CE; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .tb *, .tb *::before, .tb *::after, .tb-rays i, .tb-float { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 1040px) {
  .tb-hero, .tb-count, .tb-row2, .tb-rew, .tb-wheelrow { grid-template-columns: 1fr; }
  .tb-detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  #tb-wsvg { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .tb { padding: 12px 16px 80px; gap: 16px; }
  .tb-hero { padding: 22px 18px 18px; border-radius: 24px; }
  .tb-h1 { font-size: 32px; }
  .tb-bignum b { font-size: 58px; }
  .tb-hleg { gap: 6px 14px; font-size: 13px; }
  .tb-card { padding: 20px 18px; }
  .tb-card h2 { font-size: 24px; }
  .tb-detail h3, .tb-wdet h3 { font-size: 24px; }
  .tb-win .row { grid-template-columns: 34px 22px minmax(0, 1fr); }
  .tb-win .row > .tb-clap { grid-column: 3; margin-top: 8px; justify-self: start; }
  .tb-mine { grid-template-columns: auto minmax(0, 1fr); padding: 16px 18px; }
  .tb-mine .tb-btn { grid-column: 1 / -1; }
  .tb-ticker div { font-size: 14px; }
  .tb-entry { grid-template-columns: 46px minmax(0, 1fr); }
  .tb-entry .btn { grid-column: 1 / -1; }
}
.tb svg .tb-serif { font-family: var(--serif); }
.followups .followup-row { align-items: flex-start; gap: 1rem; }
.followup-row h3 { margin: 0 0 .4rem; font-size: 1rem; overflow-wrap: anywhere; }
.followup-row p { margin: .35rem 0; }
.followup-row > div:first-child { min-width: 0; flex: 1; }
.followup-row > .drow { flex-shrink: 0; max-width: 42%; }
.followup-tabs { margin-bottom: .7rem; }
.followup-modal { max-width: 640px; max-height: 88vh; overflow-y: auto; }
.followup-modal .frow { margin: .9rem 0; }
.followup-modal label { display: block; margin-bottom: .3rem; }
.followup-modal .inp { width: 100%; }
.followup-modal pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
@media (max-width: 900px) { .followups .followup-row { flex-direction: column; } .followup-row > .drow { max-width: 100%; } }
.oa-page{max-width:1200px;margin:auto}.oa-page .oa-totals{display:flex;flex-wrap:wrap;gap:24px;padding:18px 0}.oa-totals span{display:grid;gap:3px}.oa-totals b{font-size:25px}.oa-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 24px}.oa-field{display:grid;gap:7px;align-content:start;min-width:0}.oa-field small{font-weight:400;color:var(--muted)}.oa-field .inp{width:100%;min-width:0}.oa-facts{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,3fr);gap:8px 18px;margin:18px 0}.oa-facts dt{font-weight:700}.oa-facts dd{margin:0;overflow-wrap:anywhere}.oa-claim{border-top:1px solid var(--line);padding:18px 0}.oa-claim>summary{cursor:pointer;font-weight:700;font-size:18px;line-height:1.5}.oa-claim-body{padding:10px 0 20px}.oa-claim h3{margin-top:26px}.oa-line{border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}.oa-line h4{margin:0 0 8px}.oa-holds{display:grid;gap:12px;padding-left:20px}.oa-holds li .btn{margin-left:8px}.oa-save{min-height:22px}.oa-page .btn:disabled{cursor:wait}.oa-page input:focus,.oa-page select:focus{outline:3px solid var(--accent);outline-offset:2px}@media(max-width:700px){.oa-fields{grid-template-columns:1fr}.oa-facts{grid-template-columns:1fr}.oa-facts dd{margin-bottom:8px}.oa-totals{gap:16px}.oa-line{padding:14px}}
/* The treatment plan's Plan pages tab (runtime/connected/plan-document.ts): the plan laid out as the clinic's own plan
   prints, on a letter page, with the clinic's seal and title and the Probe-ably-Fine seal at the top of every page; the
   pages one by one, to print; and the window that crops a graph or a screenshot into it.
   The page is set in Calibri 11 pt at 1.5 lines, as a word processor sets it. Carlito has Calibri's letter widths and
   stands in where Calibri is not installed, so lines and pages break in the same places (SIL Open Font License 1.1). */
@font-face { font-family: 'Plan Calibri'; font-style: normal; font-weight: 400; font-display: swap; src: local('Calibri'), url('./carlito-latin-400-normal-R-CeALMm.woff2') format('woff2'); }
@font-face { font-family: 'Plan Calibri'; font-style: normal; font-weight: 700; font-display: swap; src: local('Calibri Bold'), local('Calibri-Bold'), url('./carlito-latin-700-normal-DQ6DOkPk.woff2') format('woff2'); }
@font-face { font-family: 'Plan Calibri'; font-style: italic; font-weight: 400; font-display: swap; src: local('Calibri Italic'), local('Calibri-Italic'), url('./carlito-latin-400-italic-BiMes9J5.woff2') format('woff2'); }
@font-face { font-family: 'Plan Calibri'; font-style: italic; font-weight: 700; font-display: swap; src: local('Calibri Bold Italic'), local('Calibri-BoldItalic'), url('./carlito-latin-700-italic-Ckstd88m.woff2') format('woff2'); }

.tpp-bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 14px 0 12px; }
.tpp-bar p { margin: 0 0 4px; max-width: 64ch; }

/* The desk the page sits on, and the page: 8.5 inches wide, 1-inch margins. */
.tpp-desk { background: #E4E7E9; border-radius: 12px; padding: 28px 16px 40px; overflow-x: auto; }
.tpp-sheet, .tpp-page {
  background: #fff; color: #000; font-family: 'Plan Calibri', Calibri, Carlito, Arial, sans-serif; font-size: 11pt; font-weight: 400;
  line-height: 20.14pt; letter-spacing: 0; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tpp-sheet *, .tpp-page * { box-sizing: border-box; }
.tpp-sheet { width: 8.5in; max-width: 100%; min-height: 11in; margin: 0 auto; padding: .28in 1in 1in; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .12); }

/* The top of every page: the clinic's seal, its title line in blue, the Probe-ably-Fine seal. */
.tpp-hd { display: grid; grid-template-columns: .64in minmax(0, 1fr) .64in; align-items: center; column-gap: .15in; height: .64in; margin: 0 0 .28in; }
.tpp-hd img { display: block; width: .64in; height: .64in; object-fit: contain; margin: 0; border: 0; }
.tpp-hdt { margin: 0; color: #1F4E78; font-weight: 700; font-size: 11pt; line-height: 14pt; text-align: center; }

/* A part: one bordered table. Its title on gray, each question lettered with its codes beside it, its answer under it. */
.tpp-t { display: block; width: 100%; margin: 0 0 .33in; border: 1.5pt solid #000; background: #fff; }
.tpp-t.tpp-cont { border-top-width: .75pt; }
.tpp-r { display: block; margin: 0; }
.tpp-r + .tpp-r, .tpp-t > p + .tpp-r, .tpp-r + p { border-top: .75pt solid #000; }
.tpp-g { display: grid; grid-template-columns: 4.86in minmax(0, 1fr); }
.tpp-g > * { min-width: 0; margin: 0; padding: 4.5pt 5.5pt 10.5pt; }
.tpp-g > .e { border-left: .75pt solid #000; text-align: center; }
.tpp-hr { background: #808080; color: #fff; }
.tpp-h { margin: 0; padding: 4.5pt 5.5pt 10.5pt; font: inherit; color: inherit; text-transform: uppercase; letter-spacing: 0; }
.tpp-g > .tpp-h { padding: 4.5pt 5.5pt 10.5pt; }
.tpp-hr .e { text-transform: uppercase; }
.tpp-hform .tpp-h { color: #1F4E78; font-weight: 700; }
.tpp-pr > .q { padding: 4.5pt 5.5pt 10.5pt .33in; }
.tpp-pr:not(.tpp-g) > .q { display: block; }
.tpp-hang { display: block; margin: 0; padding-left: .25in; text-indent: -.25in; }
.tpp-lt { display: inline-block; width: .25in; text-indent: 0; }
.tpp-in { display: grid; grid-template-columns: 2.33in minmax(0, 1fr); }
.tpp-in > div { min-width: 0; margin: 0; padding: 4.5pt 5.5pt 10.5pt; }
.tpp-in > .l { padding-left: .33in; }
.tpp-in > .v { border-left: .75pt solid #000; }
.tpp-cc { margin: 0; padding: 4.5pt 5.5pt 12pt; min-height: calc(20.14pt + 16.5pt); }
.tpp-t > p { margin: 0; padding: 4.5pt 5.5pt 10.5pt; }
.tpp-p, .tpp-cc p { display: block; margin: 0 0 6pt; padding: 0; font-size: 11pt; line-height: 20.14pt; color: #000; }
.tpp-cc > :last-child { margin-bottom: 0; }
.tpp-cc b { font-weight: 700; }
.tpp-cc h3, .tpp-cc h4 { margin: 0 0 6pt; font: inherit; font-weight: 700; color: #1F4E78; }
.tpp-none { color: #6B7378; font-style: italic; }
.tpp-cc .help { color: #4A4A4A; font-size: 10pt; line-height: 14pt; margin: 0 0 6pt; }
.tpp-cc .sub2 { display: block; color: #4A4A4A; }

/* A table a record fills (goals, services): a blue header row, every other row gray. */
.tpp-cc table, .tpp-n { width: 100%; margin: 2pt 0 10pt; border-collapse: collapse; border: .75pt solid #000; }
.tpp-cc table th, .tpp-cc table td { border: .75pt solid #000; padding: 4.5pt 5.5pt 10.5pt; font-size: 11pt; line-height: 20.14pt; vertical-align: top; text-align: left; color: #000; background: #fff; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tpp-cc table th { background: #1F4E78; color: #fff; font-weight: 700; text-align: center; }
.tpp-cc table tbody tr:nth-child(even) td, .tpp-cc table tr.z td { background: #F2F2F2; }
.tpp-cc .tblwrap { overflow: visible; margin: 0; border: 0; }

/* Pictures: the cell's full width, a numbered caption in italic under each. */
.tpp-figs { display: block; margin: 2pt 0 0; }
.tpp-fig { display: block; margin: 2pt 0 10pt; padding: 0; break-inside: avoid; }
.tpp-fig img { display: block; width: 100%; height: auto; max-height: 7in; object-fit: contain; margin: 0 auto; }
.tpp-cap { display: block; margin: 4pt 0 0; padding: 0; font-size: 10pt; line-height: 14pt; font-style: italic; text-align: center; color: #000; }
.tpp-capedit { display: flex; gap: 4px; align-items: baseline; justify-content: center; }
.tpp-capedit input { flex: 0 1 auto; field-sizing: content; min-width: 2.4in; max-width: 5.6in; font: inherit; font-style: italic; text-align: center; border: 0; border-bottom: 1px dashed #A9B2B8; background: transparent; padding: 1px 2px; color: #000; }
.tpp-capedit input:focus { outline: none; border-bottom-color: #1F4E78; background: #F3F7FB; }
.tpp-figedit { display: flex; gap: 6px; justify-content: center; margin-top: 6px; font-family: var(--sans, system-ui, sans-serif); }
.tpp-noimg { border: 1px dashed #c3cad0; border-radius: 6px; padding: 22px; text-align: center; color: #56616b; font-size: 10pt; }

/* Writing on the page: the box looks like the page's own text until it is touched. */
.tpp-words { display: block; width: 100%; min-height: calc(20.14pt * 2); margin: 0 0 6pt; padding: 0 3px; font: inherit; line-height: 20.14pt; color: #000;
  background: transparent; border: 0; border-radius: 3px; resize: none; overflow: hidden; field-sizing: content; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background .15s; }
.tpp-words.tpp-line { min-height: 20.14pt; margin: 0; }
.tpp-words::placeholder { color: #8A949A; font-style: italic; }
.tpp-words:hover { background: #F7F9FB; box-shadow: inset 0 0 0 1px #D5DCE1; }
.tpp-words:focus { outline: none; background: #F3F7FB; box-shadow: inset 0 0 0 1.5px #1F4E78; }
.tpp-add { margin: 2pt 0 0; }
.tpp-addbtn { appearance: none; border: 1px dashed #9AA6AE; background: #FAFBFC; color: #1F4E78; border-radius: 6px; padding: 6px 12px; font: 600 13px/1.3 var(--sans, system-ui, sans-serif); cursor: pointer; }
.tpp-addbtn:hover, .tpp-addbtn:focus-visible { border-style: solid; border-color: #1F4E78; background: #F3F7FB; }

/* The signatures: a line to sign on, SIGNATURE and DATE under it, then who signs. */
.tpp-sigs { margin: .4in 0 0; }
.tpp-sig { margin: 0 0 .5in; break-inside: avoid; }
.tpp-sl { width: 6.07in; max-width: 100%; height: .55in; border-bottom: 1pt solid #000; }
.tpp-slb { display: flex; margin: 8pt 0 6pt; font-weight: 700; }
.tpp-slb > span:first-child { width: 3.07in; }
.tpp-sigs .help { color: #4A4A4A; }

/* The pages one by one, over the app, ready to print. */
.tpp-page { position: relative; display: block; width: 8.5in; height: 11in; margin: 0; padding: 0; overflow: hidden; }
.tpp-page > .tpp-hd { position: absolute; left: 1in; right: 1in; top: .28in; margin: 0; }
.tpp-body { position: absolute; left: 1in; top: 1.2in; width: 6.5in; height: 8.9in; overflow: hidden; }
.tpp-ft { position: absolute; right: 1in; top: 10.12in; margin: 0; font-size: 11pt; line-height: 14pt; }
#tpp-measure { position: absolute; left: -20000px; top: 0; visibility: hidden; pointer-events: none; }
#tpp-view { position: fixed; inset: 0; z-index: 1000; font-family: var(--sans, system-ui, sans-serif); display: flex; flex-direction: column; background: #33393C; color: #fff; }
.tpp-viewbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: #1F2427; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tpp-viewt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpp-viewt b { font-size: 16px; line-height: 1.25; }
.tpp-viewt span { font-size: 13px; color: #C3CCC8; }
.tpp-viewacts { flex: none; display: flex; gap: 10px; }
.tpp-vbtn { appearance: none; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 10px; background: transparent; color: #fff; font: 600 14px/1.2 var(--sans, system-ui, sans-serif); cursor: pointer; }
.tpp-vbtn:hover { background: rgba(255, 255, 255, .1); }
.tpp-vbtn.tpp-vpri { background: #F3C44F; border-color: #F3C44F; color: #1F2427; }
.tpp-vbtn:disabled { opacity: .5; cursor: default; }
.tpp-vbtn:focus-visible { outline: 3px solid #9FD9CB; outline-offset: 2px; }
.tpp-viewscroll { flex: 1; overflow: auto; padding: 24px 16px 56px; overscroll-behavior: contain; }
.tpp-pagewrap { width: 8.5in; height: 11in; margin: 0 auto 24px; background: #fff; box-shadow: 0 3px 18px rgba(0, 0, 0, .5); overflow: hidden; }
.tpp-viewnote { text-align: center; margin: 40px 0; color: #E3E8E6; }

/* The crop window. */
.tpp-crop { position: fixed; inset: 0; background: rgba(16, 24, 32, .55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.tpp-cropin { width: 100%; max-width: 920px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tpp-cropin h3, .tpp-cropin h4 { margin: 0; }
.tpp-cropin h4 { margin-top: 6px; font-size: 14px; }
.tpp-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.tpp-source { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line, #d8dde1); border-radius: 10px; background: #fff; cursor: pointer; }
.tpp-source:hover, .tpp-source:focus-visible { border-color: var(--teal, #0E6B61); }
.tpp-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; user-select: none; touch-action: none; cursor: crosshair; border: 1px solid var(--line, #d8dde1); border-radius: 6px; background: #fff; }
/* The whole page fits in the window, so the box can be drawn without scrolling. */
.tpp-stage img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; pointer-events: none; }
.tpp-box { position: absolute; border: 2px solid var(--teal, #0E6B61); box-shadow: 0 0 0 9999px rgba(16, 24, 32, .38); cursor: move; }
.tpp-box::before { content: ''; position: absolute; inset: 12px; cursor: crosshair; }
.tpp-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--teal, #0E6B61); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; }
.tpp-close { justify-content: flex-end; }

@media (max-width: 900px) {
  .tpp-desk { padding: 12px 8px 24px; }
  .tpp-sheet { padding: 16px 14px 28px; min-height: 0; }
  .tpp-g { grid-template-columns: minmax(0, 1fr) minmax(64px, 28%); }
  .tpp-in { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .tpp-pagewrap { zoom: .45; }
  .tpp-viewbar { flex-direction: column; align-items: stretch; padding: 12px 16px; }
  .tpp-viewacts { justify-content: flex-end; }
}

/* Printing: only the pages, each its own sheet of letter paper. */
body.tpp-viewing { overflow: hidden; }
@media print {
  html.tpp-printing body > *:not(#tpp-view) { display: none !important; }
  html.tpp-printing body { overflow: visible !important; background: #fff !important; margin: 0 !important; }
  html.tpp-printing #tpp-view { position: static; display: block; background: #fff; }
  html.tpp-printing .tpp-viewbar { display: none; }
  html.tpp-printing .tpp-viewscroll { overflow: visible; padding: 0; }
  html.tpp-printing .tpp-pagewrap { width: 8.5in; height: 11in; margin: 0; box-shadow: none; zoom: 1; break-after: page; }
  html.tpp-printing .tpp-pagewrap:last-child { break-after: auto; }
}