/* Kidisthenics Operations Portal. Themes: light (default), dark, contrast. Density: comfortable (default), compact. */
:root {
  --brand: #2B661A; --brand-600: #22521a; --brand-700: #1b4214;
  --brand-50: #eef6ea; --brand-100: #d9ebd0; --brand-200: #b9d9a9;
  --ink: #17201a; --ink-2: #445047; --ink-3: #6f7a71; --ink-4: #98a29a;
  --line: #e4e8e2; --line-2: #eef1ec;
  --bg: #f4f6f2; --bg-2: #fafbf9; --card: #ffffff; --side: #ffffff;
  --red: #c0352b; --red-50: #fdeeec; --amber: #a35d00; --amber-50: #fff4e2; --blue: #1f63b0; --blue-50: #e9f2fc; --violet: #6b45b5; --violet-50: #f2edfb;
  --shadow-sm: 0 1px 2px rgba(16, 24, 14, .05); --shadow: 0 1px 3px rgba(16, 24, 14, .06), 0 6px 16px -8px rgba(16, 24, 14, .08); --shadow-lg: 0 18px 48px -12px rgba(16, 24, 14, .28);
  --radius: 14px; --radius-sm: 10px;
  --pad: 20px; --gap: 16px; --row: 12px; --ctl: 40px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --loc-1: #2B661A; --loc-2: #1f63b0; --loc-3: #b4561a; --loc-4: #6b45b5; --loc-5: #0f7d79; --loc-6: #a8327a;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand: #6cc04a; --brand-600: #82cf62; --brand-700: #9bd981; --brand-50: #1d2a19; --brand-100: #25381f; --brand-200: #345a29;
  --ink: #e9eee7; --ink-2: #bcc6bd; --ink-3: #8e998f; --ink-4: #66706a;
  --line: #2a322c; --line-2: #222924; --bg: #111613; --bg-2: #161c18; --card: #1a211c; --side: #151b17;
  --red: #ff7b6e; --red-50: #3a1e1b; --amber: #f2b45a; --amber-50: #36290f; --blue: #7cb4f5; --blue-50: #172a40; --violet: #b69cf0; --violet-50: #271f3a;
  --shadow-sm: none; --shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 18px 48px -12px rgba(0,0,0,.7);
  --loc-1: #6cc04a; --loc-2: #7cb4f5; --loc-3: #f0a35e; --loc-4: #b69cf0; --loc-5: #4fd1c5; --loc-6: #f28cc7;
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --brand: #14450a; --brand-600: #0e3307; --brand-50: #e3f1dc; --brand-100: #c9e4bb;
  --ink: #000; --ink-2: #111; --ink-3: #2b2b2b; --ink-4: #444; --line: #6b6b6b; --line-2: #9a9a9a;
  --bg: #fff; --bg-2: #fff; --card: #fff; --side: #fff; --red: #9b0000; --amber: #6b3c00; --blue: #00337a;
  --shadow: none; --shadow-sm: none;
}
:root[data-density="compact"] { --pad: 14px; --gap: 12px; --row: 7px; --ctl: 34px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.005em; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
.muted { color: var(--ink-3); } .small { font-size: 12.5px; }
svg.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); border-right: 1px solid var(--line); padding: 18px 12px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 18px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, var(--brand), var(--brand-700)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.brand-name { font-weight: 800; letter-spacing: .08em; color: var(--brand); font-size: 13.5px; line-height: 1.1; }
.brand-sub { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.brand-text { min-width: 0; }
.nav-group { margin: 6px 0 10px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); padding: 6px 12px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px; color: var(--ink-2); font-weight: 500; margin-bottom: 1px; position: relative; }
.nav a:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.nav a.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav .count { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.side-foot .who { flex: 1; min-width: 0; }
.side-foot .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main { padding: 26px 34px 70px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mobile-bar, .tabbar { display: none; }
.page-sub { color: var(--ink-3); margin-top: 4px; }

/* ---------- Avatars, chips, badges ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; letter-spacing: .02em; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line-2); color: var(--ink-2); white-space: nowrap; line-height: 1.6; }
.badge.green { background: var(--brand-50); color: var(--brand); } .badge.red { background: var(--red-50); color: var(--red); }
.badge.amber { background: var(--amber-50); color: var(--amber); } .badge.blue { background: var(--blue-50); color: var(--blue); }
.badge.violet { background: var(--violet-50); color: var(--violet); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- Cards, stats, grids ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pad); }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-hd h2 { margin: 0; }
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { padding: 16px 18px; display: flex; gap: 14px; align-items: center; text-decoration: none !important; color: inherit; }
.stat .tile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; }
.stat .tile svg { width: 21px; height: 21px; }
.stat .n { font-size: 26px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.stat .l { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.stat.alert .tile { background: var(--red-50); color: var(--red); } .stat.alert .n { color: var(--red); }
.stat.warn .tile { background: var(--amber-50); color: var(--amber); } .stat.warn .n { color: var(--amber); }
.stat.info .tile { background: var(--blue-50); color: var(--blue); }
a.card:hover, .stat:hover { border-color: var(--brand-200); }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty svg { width: 34px; height: 34px; stroke: var(--ink-4); margin-bottom: 8px; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: var(--row) 0; border-bottom: 1px solid var(--line-2); }
.list-row:last-child { border-bottom: none; }
.list-row .lead { display: flex; gap: 11px; align-items: center; min-width: 0; }
.list-row .lead > div { min-width: 0; }
.welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--radius); margin-bottom: var(--gap);
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; box-shadow: var(--shadow); }
.welcome h1 { color: #fff; } .welcome .page-sub { color: rgba(255,255,255,.82); }
.welcome button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.welcome button:hover { background: rgba(255,255,255,.22); }
.chart-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 120px; }
.chart-bars .bar { display: flex; flex-direction: column-reverse; border-radius: 6px; overflow: hidden; min-height: 2px; background: var(--line-2); }
.chart-bars .seg { width: 100%; }
.chart-x { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; font-size: 10.5px; color: var(--ink-3); text-align: center; margin-top: 6px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.meter { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.meter > div { height: 100%; background: var(--brand); border-radius: 99px; }

/* ---------- Controls ---------- */
button, .btn { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-height: var(--ctl); padding: 0 14px; border-radius: 10px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none !important; transition: background .12s, border-color .12s; }
button:hover, .btn:hover { background: var(--bg); }
button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
:root[data-theme="dark"] button.primary { color: #0c1a07; }
button.primary:hover { background: var(--brand-600); }
button.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
button.ghost { border-color: transparent; background: transparent; }
button.sm, .btn.sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; min-height: var(--ctl); background: var(--card); color: var(--ink); width: 100%; }
textarea { padding: 10px 12px; min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 1px; border-color: var(--brand); }
label.f { display: block; margin-bottom: 14px; }
label.f > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.toolbar input, .toolbar select { width: auto; min-width: 160px; }
.check { display: flex; gap: 8px; align-items: center; }
input[type=checkbox], input[type=radio], .toolbar input[type=checkbox], .toolbar input[type=radio] { width: 18px; height: 18px; min-height: 0; min-width: 0; padding: 0; margin: 0; accent-color: var(--brand); flex: none; }
.seg-ctl { display: inline-flex; background: var(--line-2); border-radius: 11px; padding: 3px; gap: 2px; }
.seg-ctl button { border: none; background: transparent; min-height: calc(var(--ctl) - 6px); padding: 0 12px; border-radius: 8px; color: var(--ink-3); font-weight: 600; }
.seg-ctl button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.search { position: relative; } .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.search input { padding-left: 36px; }

/* ---------- Tables (become cards on phones) ---------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); white-space: nowrap; position: sticky; top: 0; }
td { padding: var(--row) 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--bg-2); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 0 14px; color: var(--ink-3); white-space: nowrap; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Schedule ---------- */
.week { display: grid; grid-template-columns: 56px repeat(var(--days, 7), minmax(110px, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.week .hd { position: sticky; top: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 10px 6px; font-weight: 650; font-size: 12px; text-align: center; z-index: 2; color: var(--ink-2); }
.week .hd.today { color: var(--brand); } .week .hd.today b { background: var(--brand); color: #fff; border-radius: 8px; padding: 1px 6px; }
.week .hours { border-right: 1px solid var(--line); }
.week .hour { height: 56px; font-size: 11px; color: var(--ink-4); text-align: right; padding: 2px 6px 0 0; }
.week .col { position: relative; border-right: 1px solid var(--line-2); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--line-2) 55px, var(--line-2) 56px); }
.ev { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px; font-size: 12px; line-height: 1.25; overflow: hidden; cursor: pointer; border-left: 3px solid var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 12%, var(--card)); color: var(--ink); }
.ev:hover { filter: brightness(.97); }
.ev.Completed { opacity: .72; } .ev.Cancelled { opacity: .55; text-decoration: line-through; } .ev.NoShow { --c: var(--red); }
.ev b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.month .mh { padding: 8px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.month .md { min-height: 108px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 6px; }
.month .md.out { background: var(--bg-2); color: var(--ink-4); }
.month .md .num { font-size: 12px; font-weight: 650; margin-bottom: 4px; display: inline-block; }
.month .md.today .num { background: var(--brand); color: #fff; border-radius: 6px; padding: 0 6px; }
.month .pill { display: flex; gap: 5px; align-items: center; font-size: 11.5px; padding: 2px 5px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month .pill:hover { background: var(--bg); }
.agenda-day { margin-bottom: 18px; }
.agenda-day h3 { position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 1; display: flex; gap: 8px; align-items: center; }
.agenda-item { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--brand)); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); }
.agenda-item .time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 74px; }

/* ---------- Client cards and board ---------- */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ccard { cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.ccard:hover { border-color: var(--brand-200); transform: translateY(-1px); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.board .lane { background: var(--line-2); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.board .lane h3 { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.board .ccard { padding: 12px; margin-bottom: 8px; }

/* ---------- Drawer, toast ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 16, 9, .42); z-index: 40; backdrop-filter: blur(2px); animation: fade .15s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: var(--card); z-index: 41; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(24px); opacity: .6; } } @keyframes fade { from { opacity: 0; } }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-bd { padding: 20px; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.drawer-ft { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); max-width: 400px; font-weight: 500; }
.toast.err { background: var(--red); color: #fff; }
.alert-box { padding: 11px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; }
.alert-box.red { background: var(--red-50); color: var(--red); } .alert-box.amber { background: var(--amber-50); color: var(--amber); }
dl.kv { display: grid; grid-template-columns: 170px 1fr; gap: 9px 14px; margin: 0; }
dl.kv dt { color: var(--ink-3); font-size: 13px; } dl.kv dd { margin: 0; }
.menu { position: absolute; bottom: 58px; left: 12px; right: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 5; }
.menu a, .menu button { display: flex; width: 100%; justify-content: flex-start; border: none; background: none; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-weight: 500; gap: 10px; min-height: 0; }
.menu a:hover, .menu button:hover { background: var(--bg); text-decoration: none; }

/* ---------- Sign in ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 22px; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, var(--brand-50), transparent), var(--bg); }
.signin .card { width: min(420px, 100%); padding: 32px; text-align: center; }
.signin .brand { justify-content: center; }
.signin .who { text-align: left; margin-top: 16px; max-height: 380px; overflow: auto; }

/* ---------- Handbook text ---------- */
.md h2 { font-size: 20px; margin: 22px 0 8px; } .md h3 { font-size: 16px; margin: 18px 0 6px; } .md h4, .md h5 { font-size: 14px; margin: 14px 0 6px; }
.md p { margin: 0 0 10px; } .md ul, .md ol { margin: 0 0 12px; padding-left: 22px; } .md li { margin-bottom: 4px; }
.md blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--brand); background: var(--brand-50); border-radius: 0 8px 8px 0; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; } .md > :first-child { margin-top: 0; }
td:first-child { white-space: nowrap; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-lg); padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .side.open { transform: none; }
  .side-scrim { position: fixed; inset: 0; background: rgba(10,16,9,.4); z-index: 49; }
  .mobile-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .mobile-bar .title { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); border: none; background: none; min-height: 48px; padding: 4px 0; text-decoration: none; position: relative; }
  .tabbar svg.ico { width: 23px; height: 23px; }
  .tabbar .on { color: var(--brand); }
  .tabbar .count { position: absolute; top: 2px; left: 54%; background: var(--red); color: #fff; font-size: 10px; border-radius: 9px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
  .main { padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
  h1 { font-size: 21px; }
  .topbar { margin-bottom: 14px; }
  .toolbar { width: 100%; } .toolbar > * { flex: 1 1 auto; } .toolbar input, .toolbar select { min-width: 0; width: 100%; flex: 1 1 140px; }
  .g2, .g3, .g4, .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; gap: 10px; } .stat .tile { width: 36px; height: 36px; } .stat .n { font-size: 22px; }
  dl.kv { grid-template-columns: 1fr; gap: 2px; } dl.kv dd { margin-bottom: 8px; }
  input, select, textarea { font-size: 16px; } /* stops iPhone zooming into fields */
  button, .btn { min-height: 44px; } button.sm, .btn.sm { min-height: 38px; }
  .drawer { width: 100vw; top: env(safe-area-inset-top); border-radius: 16px 16px 0 0; animation: rise .2s ease-out; }
  @keyframes rise { from { transform: translateY(30px); opacity: .6; } }
  .welcome { padding: 18px; flex-direction: column; align-items: flex-start; }
  .toasts { left: 14px; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .chart-bars { height: 90px; gap: 3px; } .chart-x { gap: 3px; font-size: 9px; }
  /* Tables become stacked cards. */
  .table-wrap.stack { background: none; border: none; box-shadow: none; overflow: visible; }
  .table-wrap.stack table, .table-wrap.stack tbody, .table-wrap.stack tr, .table-wrap.stack td { display: block; width: 100%; }
  .table-wrap.stack thead { display: none; }
  .table-wrap.stack tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
  .table-wrap.stack td { border: none; padding: 4px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; white-space: normal; text-align: right; }
  .table-wrap.stack td::before { content: attr(data-label); color: var(--ink-3); font-size: 12px; font-weight: 600; text-align: left; flex: none; }
  .table-wrap.stack td:first-child { font-size: 15px; text-align: left; justify-content: flex-start; }
  .table-wrap.stack td:first-child::before { display: none; }
  .table-wrap.stack td:empty { display: none; }
  .month .md { min-height: 64px; padding: 3px; } .month .pill { font-size: 0; padding: 0; } .month .pill .dot { width: 7px; height: 7px; }
  .month .md .pills { display: flex; flex-wrap: wrap; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .side, .mobile-bar, .tabbar, .toolbar { display: none !important; } .shell { display: block; } }

/* Saved filter chips */
.chip { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 2px; }
.chip button { min-height: 28px; }
.count[hidden] { display: none !important; }
[hidden] { display: none !important; }

/* ---------- Client timeline ---------- */
.timeline { position: relative; }
.tl-day { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.tl-item::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; z-index: 1; }
.tl-item.act .tl-dot { background: var(--blue-50); color: var(--blue); }
.tl-dot svg { width: 16px; height: 16px; }
.tl-body { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; flex: 1; min-width: 0; box-shadow: var(--shadow-sm); }
.tl-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tl-text { white-space: pre-wrap; margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }

/* ---------- Org chart ---------- */
.org, .org ul { list-style: none; padding-left: 0; margin: 0; }
.org ul { padding-left: 22px; border-left: 2px solid var(--line-2); margin-left: 12px; }
.org li { margin: 6px 0; }
.org-node { display: inline-flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.org details summary { cursor: pointer; color: var(--ink-3); margin: 4px 0 0 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badges > * { flex: none; }

/* ---------- Charts (validated categorical order; see the design doc) ---------- */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --q1: #86b6ef; --q2: #3987e5; --q3: #1c5cab; --q4: #0d366b;
  --grid: #e1e0d9; --axis: #c3c2b7; --muted-ink: #898781;
}
:root[data-theme="dark"] {
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --q1: #184f95; --q2: #2a78d6; --q3: #5598e7; --q4: #9ec5f4;
  --grid: #2c2c2a; --axis: #383835;
}
.chart { position: relative; }
.chart svg { display: block; overflow: visible; max-width: 100%; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart text { fill: var(--muted-ink); font-size: 11px; font-family: inherit; }
.chart .hit { fill: transparent; cursor: default; }
.chart .mark { transition: opacity .12s; }
.chart.dim .mark:not(.hot) { opacity: .35; }
.chart .tip { position: absolute; pointer-events: none; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 140px; z-index: 5; }
.chart .tip b { display: block; margin-bottom: 4px; }
.chart .tip .r { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.chart .tip i, .legend i.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-head h2 { margin: 0; }
.chart-head .sub { color: var(--ink-3); font-size: 12px; }
.kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--gap); }
.kpi { padding: 14px 16px; }
.kpi .l { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.kpi .n { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 12px; margin-top: 2px; color: var(--ink-3); }
.rag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rag.red { color: var(--red); background: var(--red-50); } .rag.yellow { color: var(--amber); background: var(--amber-50); } .rag.green { color: var(--brand); background: var(--brand-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Month calendar (content calendar, events, anniversaries) ---------- */
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.mcal .dow { background: var(--bg-2); font-size: 12px; font-weight: 650; color: var(--ink-3); padding: 8px; text-align: center; border-bottom: 1px solid var(--line); }
.mcal .day { min-height: 108px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mcal .day:nth-child(7n) { border-right: none; }
.mcal .day.out { background: var(--bg-2); }
.mcal .day.out .num { color: var(--ink-4); }
.mcal .num { font-size: 12px; font-weight: 650; color: var(--ink-2); }
.mcal .day.today .num { color: #fff; background: var(--brand); border-radius: 8px; padding: 0 6px; align-self: flex-start; }
.mcal .mev { display: block; width: 100%; text-align: left; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; background: var(--bg-2); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; cursor: pointer; border-left: 3px solid var(--ev, var(--brand)); }
.mcal .mev:hover { border-color: var(--line); }
.mcal .mev.due { background: transparent; border-left-style: dashed; color: var(--ink-2); }
.mcal .more { font-size: 11px; color: var(--ink-3); }
.agenda .agenda-day { font-weight: 700; font-size: 13px; color: var(--ink-2); margin: 14px 0 6px; }
.agenda .agenda-day.today { color: var(--brand); }
.budget-bar { height: 18px; border-radius: 99px; background: var(--line-2); overflow: hidden; position: relative; }
.budget-bar > div { height: 100%; border-radius: 99px; transition: width .3s; }
.budget-big { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.delta { font-size: 12px; font-weight: 650; }
.delta.up { color: var(--brand); } .delta.down { color: var(--red); } .delta.flat { color: var(--ink-3); }
.pf { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 10px; font-weight: 750; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); letter-spacing: .02em; }
.pf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pfc); }
.pf.instagram { --pfc: var(--s5); } .pf.facebook { --pfc: var(--s1); } .pf.linkedin { --pfc: var(--s2); }
.board-cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.board-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.board-col > h3 { margin: 2px 4px 4px; font-size: 13px; color: var(--ink-2); display: flex; justify-content: space-between; }
.task-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.task-card:hover { border-color: var(--brand); }
.comment { border-left: 3px solid var(--line); padding: 4px 0 4px 10px; margin-bottom: 10px; }
.progress-line { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-top: 6px; }
.progress-line > div { height: 100%; background: var(--brand); width: 0; }
video.player { width: 100%; max-height: 70vh; border-radius: var(--radius); background: #000; }
@media (max-width: 900px) { .budget-big { font-size: 28px; } }

/* ---------- Field tools: check-off, coverage, progress ---------- */
.seg-pick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.seg-pick button { min-height: 40px; padding: 0 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-pick button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.checkoff h3 { margin: 18px 0 8px; }
.goal-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.goal-name { font-weight: 600; }
.progress-dots { display: flex; gap: 4px; margin-top: 6px; }
.progress-dots .pd { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.progress-dots .pd.practicing { background: var(--s1); } .progress-dots .pd.improving { background: var(--s4); } .progress-dots .pd.met { background: var(--s3); }
.today-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .seg-pick button { min-height: 44px; } }
.move-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
mark.current { background: #ffb020; box-shadow: 0 0 0 2px #ffb020; }
[data-theme="dark"] mark { background: #6b5a12; } [data-theme="dark"] mark.current { background: #a8741a; box-shadow: 0 0 0 2px #a8741a; }
.find-bar { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; margin-bottom: 8px; }

/* ---------- Search bar at the top of every page ---------- */
.main-col { min-width: 0; display: flex; flex-direction: column; }
.global-search { position: sticky; top: 0; z-index: 25; padding: 12px 34px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.gs-box { position: relative; max-width: 720px; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; box-shadow: var(--shadow); }
.gs-box > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.gs-box input { border: none; box-shadow: none; background: transparent; flex: 1; min-height: 42px; padding: 0; outline: none; }
.gs-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.gs-label { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; }
.gs-panel a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.gs-panel a .small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gs-panel a:hover, .gs-panel a.on { background: var(--brand-50); }
.gs-panel a.gs-more { border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--brand); font-weight: 600; }
.gs-empty { padding: 14px 10px; color: var(--ink-3); }
@media (max-width: 900px) {
  .global-search { display: none; padding: 10px 14px; top: calc(60px + env(safe-area-inset-top)); }
  .global-search.open { display: block; }
  .gs-box { max-width: none; }
}
@media print { .global-search { display: none !important; } }

/* ---------- KidiSpace ---------- */
.alert-box.blue { background: var(--blue-50); color: var(--blue); }
.grow { flex: 1; min-width: 0; }
.ks-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 10px; }
.ks-ico { width: 22px; text-align: center; flex: none; font-size: 16px; line-height: 1; }
.ks-ico.lg { width: auto; font-size: 26px; }
.ks-search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; box-shadow: var(--shadow-sm); max-width: 640px; }
.ks-search input { border: none; background: transparent; box-shadow: none; flex: 1; min-height: 44px; outline: none; }
.ks-results { margin-top: 10px; max-width: 760px; }
.ks-list { padding: 4px; }
.ks-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--ink); width: 100%; text-align: left; background: transparent; border: none; min-height: 44px; font-weight: 400; justify-content: flex-start; }
.ks-row:hover, .ks-row.on { background: var(--bg); text-decoration: none; }
.ks-row b { font-weight: 600; }
.ks-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ks-icard { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); box-shadow: var(--shadow-sm); min-height: 108px; transition: border-color .12s, transform .12s; }
.ks-icard:hover { border-color: var(--brand-200); text-decoration: none; transform: translateY(-1px); }
.ks-icard b { line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ks-sub { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ks-wsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ks-wscard { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--radius); color: var(--ink); box-shadow: var(--shadow); min-height: 140px; text-align: left; font-weight: 400; }
.ks-wscard:hover { text-decoration: none; border-color: var(--c); }
.ks-wscard-top { display: flex; gap: 12px; align-items: flex-start; }
.ks-wscard-top b { font-size: 15px; }
.ks-wscard-ft { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ks-wscard.ks-new { align-items: center; justify-content: center; flex-direction: row; border-style: dashed; border-top: 1px dashed var(--line); color: var(--ink-3); font-weight: 600; box-shadow: none; background: transparent; }
.ks-wsmark { --c: var(--brand); width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 800; font-size: 15px; flex: none; }
.ks-wsmark.lg { width: 42px; height: 42px; font-size: 21px; border-radius: 11px; }
.ks-wsmark.xl { width: 58px; height: 58px; font-size: 30px; border-radius: 14px; }
.ks-empty-hero { text-align: center; padding: 34px 20px; }
.ks-hero-ico { font-size: 44px; }
.ks-archived { margin-top: 26px; } .ks-archived summary { cursor: pointer; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; }

/* Menus, pickers and dialogs */
.ks-menu { position: absolute; z-index: 60; width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 5px; max-height: 70vh; overflow-y: auto; }
.ks-menu > button { display: flex; width: 100%; justify-content: flex-start; gap: 10px; border: none; background: transparent; min-height: 36px; padding: 0 10px; font-weight: 500; border-radius: 8px; text-align: left; }
.ks-menu > button:hover, .ks-menu > button:focus-visible { background: var(--bg); outline: none; }
.ks-menu > button.danger { color: var(--red); }
.ks-mi { width: 20px; text-align: center; flex: none; }
.ks-hint { margin-left: auto; font-size: 12px; color: var(--ink-4); font-weight: 400; }
.ks-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ks-menu.ks-emoji, .ks-menu.ks-colors { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 280px; }
.ks-menu.ks-emoji > button { justify-content: center; padding: 0; font-size: 18px; min-height: 32px; }
.ks-menu.ks-colors { grid-template-columns: repeat(5, 1fr); width: 210px; gap: 6px; padding: 10px; }
.ks-menu.ks-colors > button { min-height: 28px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); }
.ks-menu .ks-emoji-none { grid-column: 1 / -1; justify-content: center; font-size: 13px; color: var(--ink-3); background: var(--bg) !important; }
.ks-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ks-swatches button { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.ks-swatches button.on { border-color: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.ks-namerow { display: flex; gap: 8px; } .ks-namerow input { flex: 1; }
.ks-icbtn { width: var(--ctl); padding: 0; font-size: 18px; flex: none; }
.ks-picker { display: flex; flex-direction: column; gap: 8px; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ks-chips:empty { display: none; }
.ks-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-50); color: var(--brand); border-radius: 999px; padding: 3px 4px 3px 4px; font-weight: 600; font-size: 13px; }
.ks-chip button { min-height: 22px; width: 22px; padding: 0; border: none; background: transparent; color: inherit; font-size: 11px; }
.ks-pick-wrap { position: relative; }
.ks-pick-wrap input, .ks-pick-wrap textarea { width: 100%; }
.ks-pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; max-height: 260px; overflow-y: auto; }
.ks-pick-list button { display: flex; width: 100%; justify-content: flex-start; gap: 10px; border: none; background: transparent; min-height: 40px; font-weight: 400; text-align: left; }
.ks-pick-list button:hover { background: var(--bg); }
.ks-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ks-inline.end { justify-content: flex-end; }
.ks-inline select { width: auto; max-width: 100%; }
.ks-dialog-scrim { position: fixed; inset: 0; background: rgba(10, 16, 12, .42); z-index: 70; display: grid; place-items: center; padding: 16px; }
.ks-dialog { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; }
.ks-dialog h3 { margin: 0; } .ks-dialog p { margin: 0; }
.drawer.wide { width: min(1040px, 100vw); }

/* Layout */
.ks-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0; margin: -26px -34px -70px; min-height: calc(100vh - 60px); }
.ks-layout.focus { grid-template-columns: 0 minmax(0, 1fr); } .ks-layout.focus .ks-side { display: none; }
.ks-side { border-right: 1px solid var(--line); background: var(--bg-2); padding: 14px 10px; position: sticky; top: 69px; align-self: start; height: calc(100vh - 69px); overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.ks-side > input { min-height: 34px; font-size: 13px; }
.ks-main { padding: 22px 34px 70px; min-width: 0; }
.ks-tree-toggle { display: none; margin-bottom: 10px; }
.ks-back { color: var(--ink-3); padding: 2px 8px; }
.ks-wshead { display: flex; align-items: center; gap: 9px; padding: 4px 6px; }
.ks-wsname { font-weight: 700; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-newbtn { width: 100%; }
.ks-tree { flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.ks-pad { padding: 8px 10px; }
.ks-node { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding-left: calc(var(--d) * 14px); min-height: 32px; position: relative; }
.ks-node:hover { background: var(--line-2); }
.ks-node.active { background: var(--brand-50); } .ks-node.active .ks-node-title { color: var(--brand); font-weight: 600; }
.ks-node.dragging { opacity: .45; }
.ks-node.drop-in { box-shadow: inset 0 0 0 2px var(--brand); }
.ks-node.drop-before::before, .ks-node.drop-after::after { content: ''; position: absolute; left: calc(var(--d) * 14px + 8px); right: 4px; height: 2px; background: var(--brand); border-radius: 2px; }
.ks-node.drop-before::before { top: -1px; } .ks-node.drop-after::after { bottom: -1px; }
.ks-caret { width: 22px; min-height: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--ink-4); font-size: 11px; transition: transform .12s; flex: none; }
.ks-caret.open { transform: rotate(90deg); }
.ks-caret-sp { width: 22px; flex: none; }
.ks-node-link { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; color: var(--ink-2); padding: 5px 2px; }
.ks-node-link:hover { text-decoration: none; color: var(--ink); }
.ks-node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ks-node-more { min-height: 26px; width: 26px; padding: 0; border: none; background: transparent; color: var(--ink-3); opacity: 0; flex: none; font-size: 15px; }
.ks-node:hover .ks-node-more, .ks-node-more:focus-visible, .ks-wshead .ks-node-more { opacity: 1; }
.ks-side-ft { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; align-items: stretch; }
.ks-side-ft button { justify-content: flex-start; }

/* Pages */
.ks-page { max-width: 1060px; margin: 0 auto; }
.ks-cover { height: 84px; border-radius: var(--radius); background: linear-gradient(120deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); margin-bottom: -26px; }
.ks-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 6px; }
.ks-title { margin: 30px 0 4px; font-size: 28px; }
.ks-people { display: inline-flex; align-items: center; gap: 0; }
.ks-people .avatar { margin-left: -6px; border: 2px solid var(--card); }
.ks-people .avatar:first-child { margin-left: 0; }
.ks-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 6px 16px; }
.ks-section-bar, .ks-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ks-section-head .ks-h { margin: 26px 0 10px; }
.ks-itemhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ks-crumbs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); min-width: 0; }
.ks-crumbs a { color: var(--ink-3); } .ks-crumbs .sep { color: var(--ink-4); }
.ks-head-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ks-status { min-width: 0; margin-right: 4px; white-space: nowrap; }
.ks-status[data-s="connected"] { color: var(--brand); } .ks-status[data-s="offline"], .ks-status[data-s="closed"] { color: var(--amber); }
.ks-live-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring); }
.ks-star { font-size: 18px; color: var(--ink-3); } .ks-star.on { color: #e3a008; }
.ks-title-ico { font-size: 34px; min-height: 52px; width: 56px; padding: 0; border: none; background: transparent; }
.ks-title-ico:disabled { opacity: 1; cursor: default; }
.ks-title-input { flex: 1; min-width: 200px; font-size: 32px; font-weight: 800; letter-spacing: -.01em; border: none !important; background: transparent !important; box-shadow: none !important; padding: 4px 0; min-height: 52px; color: var(--ink); }
.ks-title-input:focus { outline: none; }
.ks-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; margin: 14px 0 6px; }
.ks-prop { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ks-prop.wide { grid-column: 1 / -1; }
.ks-prop-l { width: 70px; flex: none; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.ks-prop select, .ks-prop input[type=date] { width: auto; flex: 1; min-width: 0; }
.ks-prop input[type=range] { flex: 1; accent-color: var(--brand); }
.ks-pill { font-weight: 600; }
.ks-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .ks-bar i { display: block; height: 100%; background: var(--brand); }
.ks-file, .ks-link { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.ks-file-big { font-size: 56px; }
.ks-file-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; word-break: break-word; }
.ks-file-meta .btn { align-self: flex-start; }
.ks-img { max-width: 100%; max-height: 70vh; border-radius: 10px; display: block; }
.ks-foot { margin-top: 26px; }
.ks-member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.ks-member select { width: auto; max-width: 240px; }
.ks-share-vis { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ks-invite { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ks-danger { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ks-danger h3, .ks-danger p { width: 100%; margin: 0; }
.ks-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ks-tpl { flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; padding: 14px; min-height: 120px; height: auto; font-weight: 400; justify-content: flex-start; }
.ks-tpl b { font-weight: 700; }

/* The document */
.ks-docwrap { margin-top: 6px; }
.ks-toolbar { position: sticky; top: 76px; z-index: 20; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: 5px 6px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.ks-tb { min-height: 32px; min-width: 32px; padding: 0 6px; border: none; background: transparent; border-radius: 7px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.ks-tb:hover { background: var(--bg); color: var(--ink); }
.ks-tb.on { background: var(--brand-50); color: var(--brand); }
.ks-a { border-bottom: 3px solid var(--red); line-height: 1; padding: 0 2px; }
.ks-tb-sel { width: auto; min-height: 32px; height: 32px; padding: 0 26px 0 8px; font-size: 13px; border-color: transparent; background-color: transparent; max-width: 150px; }
.ks-tb-sel.narrow { max-width: 80px; }
.ks-tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ks-docgrid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 26px; align-items: start; }
.ks-paper { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 44px 56px; min-height: 60vh; }
.ks-outline { position: sticky; top: 150px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 100px); overflow-y: auto; }
.ks-outline[hidden] { display: none; }
.ks-docgrid:has(.ks-outline[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ks-outline-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.ks-outline button { border: none; background: transparent; justify-content: flex-start; text-align: left; min-height: 28px; padding: 3px 8px; font-weight: 500; color: var(--ink-3); border-radius: 6px; white-space: normal; line-height: 1.3; }
.ks-outline button:hover { background: var(--bg); color: var(--ink); }
.ks-outline .l2 { padding-left: 18px; } .ks-outline .l3 { padding-left: 28px; } .ks-outline .l4 { padding-left: 38px; }
.ks-doc-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 0 6px; }
.ks-slash { position: absolute; z-index: 60; width: 280px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 5px; }
.ks-slash button { display: flex; width: 100%; justify-content: flex-start; gap: 10px; border: none; background: transparent; min-height: 44px; padding: 4px 8px; text-align: left; font-weight: 400; }
.ks-slash button span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ks-slash button.on, .ks-slash button:hover { background: var(--brand-50); }
.ks-slash-ico { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--card); flex: none; }

.ks-prose { outline: none; font-size: 16px; line-height: 1.65; color: var(--ink); min-height: 50vh; word-wrap: break-word; caret-color: var(--brand); }
.ks-prose > * + * { margin-top: .6em; }
.ks-prose p { margin: 0; }
.ks-prose h1 { font-size: 30px; line-height: 1.2; margin: 1.1em 0 .2em; } .ks-prose h2 { font-size: 23px; line-height: 1.25; margin: 1.1em 0 .2em; }
.ks-prose h3 { font-size: 19px; margin: 1em 0 .2em; } .ks-prose h4 { font-size: 16px; margin: 1em 0 .2em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.ks-prose > :first-child { margin-top: 0; }
.ks-prose ul, .ks-prose ol { padding-left: 1.5em; margin: .4em 0; } .ks-prose li > p { margin: 0; }
.ks-prose ul[data-type="taskList"] { list-style: none; padding-left: .2em; }
.ks-prose ul[data-type="taskList"] li { display: flex; gap: 10px; align-items: flex-start; }
.ks-prose ul[data-type="taskList"] li > label { flex: none; margin-top: .25em; user-select: none; }
.ks-prose ul[data-type="taskList"] li > label input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.ks-prose ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.ks-prose ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--ink-4); text-decoration: line-through; }
.ks-prose blockquote { border-left: 4px solid var(--brand-200); background: var(--brand-50); margin: .8em 0; padding: 10px 16px; border-radius: 0 10px 10px 0; color: var(--ink-2); }
.ks-prose pre { background: #14201a; color: #e8f0ea; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font: 13.5px/1.55 ui-monospace, Menlo, Consolas, monospace; }
.ks-prose code { background: var(--line-2); border-radius: 5px; padding: 1px 5px; font: .9em ui-monospace, Menlo, Consolas, monospace; } .ks-prose pre code { background: none; padding: 0; }
.ks-prose hr { border: none; border-top: 2px solid var(--line); margin: 1.4em 0; }
.ks-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ks-prose mark { border-radius: 3px; padding: 0 2px; color: inherit; }
.ks-prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: .6em 0; }
.ks-prose img.ProseMirror-selectednode { outline: 3px solid var(--brand); }
.ks-prose .tableWrapper { overflow-x: auto; margin: .8em 0; }
.ks-prose table { border-collapse: collapse; width: 100%; table-layout: fixed; overflow: hidden; }
.ks-prose td, .ks-prose th { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; position: relative; min-width: 60px; box-sizing: border-box; }
.ks-prose th { background: var(--bg); font-weight: 700; text-align: left; text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--ink); white-space: normal; position: relative; top: auto; }
.ks-prose .selectedCell::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--brand) 14%, transparent); pointer-events: none; }
.ks-prose .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--brand); pointer-events: none; }
.ks-prose.resize-cursor { cursor: col-resize; }
.ks-prose p.is-editor-empty:first-child::before, .ks-prose .is-empty::before { content: attr(data-placeholder); color: var(--ink-4); float: left; height: 0; pointer-events: none; }
.ks-prose[contenteditable="false"] .is-empty::before { content: none; }
.collaboration-carets__caret { border-left: 2px solid; border-right: none; margin-left: -1px; margin-right: -1px; position: relative; word-break: normal; pointer-events: none; }
.collaboration-carets__label { position: absolute; top: -1.45em; left: -2px; font-size: 11.5px; font-weight: 700; line-height: 1; color: #fff; padding: 3px 6px; border-radius: 6px 6px 6px 0; white-space: nowrap; user-select: none; font-style: normal; }
.collaboration-carets__selection { border-radius: 2px; }

/* Comments and versions */
.ks-compose { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ks-compose textarea { width: 100%; }
.ks-thread { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ks-thread.resolved { opacity: .7; }
.ks-comment + .ks-comment { margin-top: 10px; }
.ks-comment.reply { margin-left: 22px; padding-left: 12px; border-left: 2px solid var(--line); }
.ks-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-c-quote { margin: 8px 0 0; padding: 4px 10px; border-left: 3px solid var(--amber); color: var(--ink-3); font-size: 13px; background: var(--amber-50); border-radius: 0 6px 6px 0; }
.ks-c-body { margin-top: 6px; white-space: pre-wrap; word-wrap: break-word; }
.ks-c-actions { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 4px; }
.ks-mention { color: var(--blue); font-weight: 600; background: var(--blue-50); border-radius: 4px; padding: 0 3px; }
.ks-vgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ks-versions { display: flex; flex-direction: column; gap: 2px; max-height: 75vh; overflow-y: auto; }
.ks-version-view { padding: 28px 32px; min-height: 50vh; }
.ks-version-view .ks-prose { min-height: 0; }

@media (max-width: 900px) {
  .ks-layout { grid-template-columns: minmax(0, 1fr); margin: -16px -14px -70px; }
  .ks-side { display: none; position: fixed; inset: 0 25% 0 0; top: 0; z-index: 45; height: 100vh; box-shadow: var(--shadow-lg); }
  .ks-layout.tree-open .ks-side { display: flex; }
  .ks-tree-toggle { display: inline-flex; }
  .ks-main { padding: 14px 14px 90px; }
  .ks-node-more { opacity: 1; }
  .ks-toolbar { top: calc(60px + env(safe-area-inset-top)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 0; margin: 0 -14px 12px; border-left: none; border-right: none; }
  .ks-tb-sel { max-width: 110px; flex: none; } .ks-tb { flex: none; min-height: 40px; min-width: 40px; }
  .ks-docgrid { grid-template-columns: minmax(0, 1fr); } .ks-outline { display: none; }
  .ks-paper { padding: 22px 18px; border-radius: 12px; }
  .ks-title-input { font-size: 25px; min-width: 0; }
  .ks-title-ico { font-size: 28px; width: 44px; }
  .ks-vgrid { grid-template-columns: minmax(0, 1fr); }
  .ks-hide-sm { display: none; }
  .ks-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-wsgrid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .ks-side, .ks-toolbar, .ks-itemhead, .ks-outline, .ks-doc-foot, .ks-tree-toggle, .ks-props select, .alert-box { display: none !important; }
  .ks-layout { display: block; margin: 0; } .ks-main { padding: 0; }
  .ks-paper { border: none; box-shadow: none; padding: 0; }
  .ks-title-input { font-size: 24pt; }
  .collaboration-carets__caret, .collaboration-carets__label { display: none; }
}
.ks-tb .ico { width: 18px; height: 18px; }
.ks-tb-sel { max-width: 132px; }

/* ---------- Contact administrator ---------- */
.ca-form { margin-bottom: 26px; max-width: 900px; }
.ca-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ca-listhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ca-listhead h2 { margin: 0; }
.ca-detail { max-width: 900px; }
.ca-msg { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.ca-msg.admin { background: var(--brand-50); margin: 0 calc(var(--pad) * -1); padding: 14px var(--pad); }
.ca-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ca-msg-body { white-space: pre-wrap; word-wrap: break-word; }
.ca-reply { margin-top: 16px; } .ca-reply textarea { width: 100%; }
.ks-feedback { justify-content: flex-start; }

/* ---------- OneDrive ---------- */
.od-head { display: flex; gap: 14px; align-items: center; }
.od-logo { font-size: 30px; } .od-logo.big { font-size: 52px; }
.od-connect { text-align: center; padding: 24px 8px; }
.od-pick { display: flex; flex-direction: column; gap: 12px; }
.od-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 13px; min-width: 0; }
.od-crumbs .sep { color: var(--ink-4); margin: 0 2px; }
.od-list { border: 1px solid var(--line); border-radius: 12px; max-height: 50vh; overflow-y: auto; padding: 4px; }
.od-row { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: 10px; border: none; background: transparent; min-height: 44px; font-weight: 500; text-align: left; border-radius: 8px; }
.od-row:hover, .od-row:focus-visible { background: var(--bg); }
.od-ico { width: 24px; text-align: center; flex: none; }
.od-pad { padding: 8px 10px; }
.od-save { display: grid; gap: 10px; }
.ks-tpl.card { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.ks-tpl-actions { margin-top: auto; padding-top: 6px; }

/* ---------- Ask Sensei ---------- */
.sz-form { max-width: 900px; margin-bottom: 22px; }
.sz-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sz-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 24px 0 10px; }
.sz-list { padding: 4px; max-width: 900px; }
.sz-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 9px; color: var(--ink); }
.sz-row:hover { background: var(--bg); text-decoration: none; }
.sz-row.unread b { color: var(--brand); }
.sz-client { margin-bottom: 16px; border-left: 4px solid var(--brand); }
.sz-client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 12px; }
.sz-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sz-sessions { display: grid; gap: 8px; }
.sz-sess { padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; }
.sz-tried { margin: 6px 0 4px; padding: 10px 12px; background: var(--amber-50); border-radius: 8px; }
.cp-help { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Profiles ---------- */
.avatar.photo { object-fit: cover; background: var(--line-2); padding: 0; }
.avatar.xl { width: 112px; height: 112px; font-size: 38px; }
.prof { max-width: 1100px; }
.pf-top { display: flex; justify-content: space-between; }
.pf-head { padding: 0; overflow: hidden; margin: 10px 0 18px; }
.pf-banner { height: 150px; background-size: cover; background-position: center; }
.pf-id { display: flex; align-items: flex-start; gap: 18px; padding: 0 24px; margin-top: -48px; flex-wrap: wrap; }
.pf-name, .pf-actions { margin-top: 58px; }
.pf-side dd { overflow-wrap: anywhere; }
.pf-photo .avatar { border: 5px solid var(--card); box-shadow: var(--shadow); }
.pf-name { flex: 1; min-width: 220px; padding-bottom: 6px; }
.pf-name h1 { margin: 0 0 2px; font-size: 26px; }
.pf-pronouns { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.pf-actions { padding-bottom: 10px; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px 18px; }
.pf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-weight: 650; font-size: 13px; border: 1px solid var(--brand-100); }
.pf-celebrate { margin: 0 24px 18px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(120deg, #fff4e2, #fdeeec); color: #7a3b00; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pf-main, .pf-side { display: flex; flex-direction: column; gap: 16px; }
.pf-bio { white-space: pre-wrap; font-size: 15px; line-height: 1.6; margin: 0; }
.pf-quote { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--brand-200); background: var(--brand-50); border-radius: 0 10px 10px 0; font-style: italic; color: var(--ink-2); }
.pf-prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pf-prompt { border-top: 4px solid var(--c, var(--brand)); }
.pf-prompt.c0 { --c: #2B661A; } .pf-prompt.c1 { --c: #1f63b0; } .pf-prompt.c2 { --c: #b4561a; } .pf-prompt.c3 { --c: #6b45b5; }
.pf-prompt-q { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
.pf-prompt-a { font-size: 17px; font-weight: 600; line-height: 1.4; white-space: pre-wrap; }
.pf-tags, .dir-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-tags { margin-top: 5px; }
.pf-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 13px; }
a.pf-tag:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pf-tag.sm { font-size: 11.5px; padding: 1px 8px; }
.pf-kudos { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.pf-kudos:last-child { border-bottom: none; }
.pf-kudos-body { margin-top: 3px; white-space: pre-wrap; }
.pf-emoji { font-size: 18px; margin-right: 6px; }
.pf-empty { text-align: center; padding: 30px; }
.pf-big { font-size: 48px; }
.pf-edit { display: flex; flex-direction: column; gap: 16px; }
.pf-edit-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pf-banners { display: grid; gap: 10px; }
.pf-banner-prev { height: 72px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.pf-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-welcome-note { text-align: left; }
.act-bar { position: sticky; top: 0; z-index: 45; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 14px; background: #6b3d00; color: #fff; font-weight: 600; font-size: 14px; }
.act-bar button { background: #fff; color: #6b3d00; border-color: #fff; }
.pf-bio, .pf-prompt-a { white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-edit textarea { resize: vertical; min-height: 44px; }
/* Picture framing */
.crop-scrim { position: fixed; inset: 0; background: rgba(10, 20, 10, .62); z-index: 80; display: grid; place-items: center; padding: 16px; }
.crop-box { background: var(--card); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); display: grid; gap: 10px; justify-items: center; }
.crop-box h2 { margin: 0; font-size: 18px; } .crop-box p { margin: 0; text-align: center; }
.crop-frame { position: relative; overflow: hidden; border-radius: 10px; background: #111; touch-action: none; cursor: grab; user-select: none; outline: none; }
.crop-frame:active { cursor: grabbing; } .crop-frame:focus-visible { box-shadow: 0 0 0 3px var(--brand); }
.crop-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); border-radius: 10px; }
.crop-frame.round .crop-mask { border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.9); }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; } .crop-zoom input { flex: 1; } .crop-zoom span { font-size: 18px; color: var(--muted); }
.crop-box .toolbar.end { justify-content: flex-end; width: 100%; }
.pf-swatch { width: 54px; height: 32px; min-height: 32px; border-radius: 8px; border: 3px solid transparent; padding: 0; }
.pf-swatch.on { border-color: var(--ink); }
.pf-ideas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pf-idea { min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border-style: dashed; }
.pf-prompt-edit { display: flex; flex-direction: column; gap: 10px; }
.pf-prompt-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.pf-prompt-row textarea { width: 100%; margin-top: 6px; }
.pf-prompt-row-hd { display: flex; justify-content: space-between; align-items: center; }
.pf-emoji-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-emoji-row button { font-size: 22px; min-height: 44px; width: 48px; padding: 0; }
.pf-emoji-row button.on { border-color: var(--brand); background: var(--brand-50); }
.pf-cel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(120deg, #fff4e2, #fdeeec); margin-bottom: 8px; }
.pf-cel a { color: inherit; text-decoration: none; }
.pf-soon { margin-top: 6px; }
.pf-soon-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: inherit; }
.pf-soon-row:hover { text-decoration: none; }
.dir-name { color: inherit; } .dir-name:hover { color: var(--brand); text-decoration: none; }
:root[data-theme="dark"] .pf-celebrate, :root[data-theme="dark"] .pf-cel { background: linear-gradient(120deg, #36290f, #3a1e1b); color: #f2b45a; }
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-banner { height: 110px; }
  .pf-id { padding: 0 16px; margin-top: -40px; }
  .pf-name { margin-top: 0; min-width: 100%; }
  .pf-actions { margin-top: 0; }
  .avatar.xl { width: 92px; height: 92px; }
  .pf-badges { padding: 12px 16px 16px; }
  .pf-celebrate { margin: 0 16px 16px; }
}
.pf-welcome { text-align: center; align-items: center; }
.pf-welcome .ks-inline { justify-content: center; }

/* ---------- Mission, KFC and Our family ---------- */
.brand-tag { font-size: 10.5px; color: var(--brand); font-style: italic; font-weight: 600; margin-top: 1px; }
.kfc { font-weight: 600; letter-spacing: .01em; color: var(--ink-2); font-size: 14px; }
.kfc b { color: var(--brand); font-weight: 800; font-size: 1.18em; }
.kfc .kfc-by { font-weight: 500; opacity: .85; }
.kfc.lg { font-size: 22px; }
.kfc.on-dark, .kfc.on-dark b { color: #fff; }
.kfc.on-dark b { text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.mission { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.mission-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 2px; }
.side-mission { display: block; margin: 14px 4px 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-50); color: inherit; }
.side-mission:hover { text-decoration: none; background: var(--brand-100); }
.signin-why { width: min(420px, 100%); text-align: center; }
.signin-why p { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.pf-welcome-why { margin: 0; font-weight: 600; color: var(--brand); line-height: 1.5; }

.welcome-text { flex: 1; min-width: 0; }
.welcome-why { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); max-width: 640px; }
.welcome-why p { margin: 4px 0 0; color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.45; }
.welcome-why p span { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; margin-right: 4px; color: rgba(255,255,255,.75); }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.welcome .btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.welcome .btn:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.welcome.has-photos { align-items: stretch; }
.fam-show { position: relative; flex: 0 0 min(42%, 420px); min-height: 190px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.18); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.fam-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0; transition: opacity .9s ease; }
.fam-show img.on { opacity: 1; }
.fam-show-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
@media (prefers-reduced-motion: reduce) { .fam-show img { transition: none; } }
@media (max-width: 900px) { .welcome.has-photos { align-items: stretch; } .fam-show { flex-basis: auto; width: 100%; min-height: 180px; } }

.fam-hero { text-align: center; padding: 34px 20px 28px; border-radius: var(--radius); margin-bottom: var(--gap); background: radial-gradient(900px 300px at 50% -40%, var(--brand-100), transparent), var(--card); border: 1px solid var(--line); }
.fam-hero-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.fam-hero-m { max-width: 560px; margin: 12px auto 16px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.fam-hero-m span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 3px; }
.fam-h { font-size: 17px; margin: 6px 0 12px; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fam-tile { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.fam-img { padding: 0; border: 0; border-radius: 0; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--bg); cursor: zoom-in; min-height: 0; }
.fam-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; transition: transform .3s; }
.fam-img:hover img { transform: scale(1.03); }
.fam-tile figcaption { display: flex; align-items: center; gap: 8px; padding: 9px 11px; min-height: 22px; }
.fam-tile figcaption .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fam-edit-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: var(--bg); }
.fam-lb { position: fixed; inset: 0; z-index: 90; background: rgba(8,12,8,.9); display: grid; place-items: center; padding: 24px 64px; }
.fam-lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fam-lb img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 8px; object-fit: contain; }
.fam-lb-cap { color: #fff; text-align: center; font-size: 14px; } .fam-lb-cap .muted { color: rgba(255,255,255,.7); }
.fam-lb button { position: absolute; color: #fff; background: rgba(255,255,255,.12); border-color: transparent; font-size: 22px; min-width: 44px; min-height: 44px; }
.fam-lb-x { top: 14px; right: 14px; } .fam-lb-nav.prev { left: 12px; top: 50%; } .fam-lb-nav.next { right: 12px; top: 50%; }
@media (max-width: 600px) { .fam-lb { padding: 60px 10px; } .fam-lb-nav { top: auto !important; bottom: 14px; } .kfc.lg { font-size: 18px; } .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.fam-hero-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fam-invite { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap); border-color: var(--brand-200); background: var(--brand-50); }
.fam-invite-ic { font-size: 28px; flex: none; }
.fam-invite .grow { flex: 1; min-width: 0; }
.fam-invite .small { margin-top: 2px; line-height: 1.45; }
.fam-tile.pending { opacity: .85; border-style: dashed; }
.fam-tile.pending .fam-img { cursor: default; }
.fam-reviews { display: grid; gap: 12px; margin-bottom: var(--gap); }
.fam-review { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 16px; padding: 14px; }
.fam-review .fam-img { border-radius: 10px; overflow: hidden; }
.fam-review-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fam-review-body .toolbar { justify-content: flex-end; margin-top: auto; }
@media (max-width: 700px) { .fam-invite { flex-wrap: wrap; } .fam-invite button { width: 100%; } .fam-review { grid-template-columns: 1fr; } }

/* ---------- Community ---------- */
.cm-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--gap); overflow-x: auto; }
.cm-tabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cm-tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.cm-tabs a:hover { text-decoration: none; color: var(--brand); }
.cm-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.cm-side { display: grid; gap: var(--gap); position: sticky; top: 76px; }
@media (max-width: 1100px) { .cm-two { grid-template-columns: 1fr; } .cm-side { position: static; } }
.cm-team { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; color: var(--team); background: color-mix(in srgb, var(--team) 12%, transparent); vertical-align: 1px; white-space: nowrap; }
:root[data-theme="dark"] .cm-team { color: color-mix(in srgb, var(--team) 55%, white); background: color-mix(in srgb, var(--team) 30%, transparent); }
.cm-compose { display: grid; gap: 10px; margin-bottom: var(--gap); }
.cm-compose textarea { width: 100%; resize: vertical; }
.cm-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg > button, .seg > a { min-height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; }
.seg > .on { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .seg > .on { color: #0c1a07; }
.cm-poll-opts { display: grid; gap: 6px; }
.cm-poll-opts input.opt { width: 100%; }
.cm-poll-extra { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cm-list { display: grid; gap: 12px; }
.cm-post { display: grid; gap: 10px; }
.cm-post.announcement { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--card) 90px); }
.cm-tag { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.cm-head { display: flex; gap: 10px; align-items: flex-start; }
.cm-head .grow { flex: 1; min-width: 0; }
.cm-name { font-weight: 700; color: var(--ink); }
.cm-menu { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.cm-menu button { color: var(--ink-3); }
.cm-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cm-react { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-react button { min-height: 30px; padding: 0 10px; border-radius: 99px; font-size: 14px; gap: 4px; }
.cm-react button span { font-size: 12px; font-weight: 700; }
.cm-react button.on { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand); }
.cm-comments { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.cm-comment { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.cm-comment .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-comment-box input { width: 100%; }
.cm-poll { display: grid; gap: 6px; }
.cm-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; min-height: 40px; }
.cm-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-100); z-index: 0; transition: width .4s; }
.cm-opt span, .cm-opt b { position: relative; z-index: 1; }
.cm-opt.mine { border-color: var(--brand); font-weight: 700; }
.cm-byteam table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cm-byteam th, .cm-byteam td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cm-more { width: 100%; margin-top: 12px; }
.cm-reports { margin-bottom: var(--gap); border-color: var(--amber, #c26a12); }
.cm-reports h3 { margin: 0 0 6px; }
.cm-quote { padding: 8px 10px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 6px; white-space: pre-wrap; font-size: 13px; }
.cm-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-wall { columns: 3 260px; column-gap: 12px; }
.cm-kudo { break-inside: avoid; margin-bottom: 12px; display: grid; gap: 10px; }
.cm-kudo-e { font-size: 28px; line-height: 1; }
.cm-kudo-body { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.cm-kudo-who { display: flex; gap: 8px; align-items: center; }
.cm-quiz { display: grid; gap: 14px; }
.cm-q { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cm-q legend { display: grid; gap: 2px; padding: 0; margin-bottom: 8px; }
.cm-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cm-a { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cm-a.pick { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.cm-a.pick:has(input:checked) { border-color: var(--brand); background: var(--brand-50); font-weight: 600; }
.cm-a.right { border-color: var(--brand); background: var(--brand-50); font-weight: 700; color: var(--brand); }
.cm-a.wrong { border-color: var(--red); background: var(--red-50); color: var(--red); }
.cm-score { display: flex; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cm-score-n { font-size: 34px; font-weight: 800; color: var(--brand); }
.cm-board h3 { margin: 0 0 10px; font-size: 15px; }
.cm-board-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.cm-board-row .grow { flex: 1; min-width: 0; }
.cm-board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cm-rank { width: 22px; flex: none; font-size: 16px; }
.cm-top { display: grid; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.cm-challenges { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.cm-challenge { display: grid; gap: 10px; }
.cm-challenge .cm-board { box-shadow: none; padding: 0; border: 0; }
.cm-ch-head { display: flex; gap: 8px; align-items: flex-start; }
.cm-ch-head .grow { flex: 1; min-width: 0; } .cm-ch-head h3 { margin: 0; }
.cm-log { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.cm-cta { display: flex; gap: 12px; align-items: center; color: inherit; }
.cm-cta:hover { text-decoration: none; }
.cm-ms .lead { min-width: 0; }
.cm-dash { display: grid; gap: 8px; }
.cm-dash-ann { display: block; padding: 10px 12px; border-radius: 10px; background: var(--brand-50); color: inherit; }
.cm-dash-ann:hover { text-decoration: none; }
.cm-dash-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cm-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.cm-clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .cm-answers { grid-template-columns: 1fr; } .cm-hero .kfc { display: none; } }
.cm-weeks { display: grid; gap: 8px; }
.cm-week { display: grid; grid-template-columns: 170px 1fr 1.3fr; gap: 14px; align-items: start; padding: 12px 16px; }
.cm-week.now { border-color: var(--brand-200); background: var(--brand-50); }
.cm-week-c { display: grid; gap: 4px; justify-items: start; }
@media (max-width: 800px) { .cm-week { grid-template-columns: 1fr; } }
.cm-tedit { display: grid; gap: 12px; }
.cm-qedit { display: grid; gap: 10px; margin: 10px 0; }
.cm-qrow { display: grid; gap: 8px; padding: 12px; }
.cm-qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cm-qopts input:first-child { border-color: var(--brand-200); background: var(--brand-50); }
.cm-theme { font-weight: 700; color: var(--brand); }
.cm-plan-pv { max-height: 50vh; overflow: auto; margin: 10px 0; }

/* ---------- Check-ins ---------- */
.ci-list { padding: 0; }
.ci-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: inherit; }
.ci-row:last-child { border-bottom: 0; } .ci-row:hover { background: var(--bg); text-decoration: none; }
.ci-row .grow { flex: 1; min-width: 0; }
.ci-stars { color: #d9a400; letter-spacing: 1px; white-space: nowrap; }
.ci-check, .ci-rate { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ci-check .grow, .ci-rate .grow { flex: 1; min-width: 0; }
.ci h3 { margin: 16px 0 4px; font-size: 14px; }
.ci-starbtns button { border: 0; background: none; font-size: 22px; color: var(--line); padding: 0 2px; min-height: 32px; min-width: 28px; cursor: pointer; }
.ci-starbtns button.on { color: #d9a400; }
.ci-note { margin-bottom: 12px; }
.ci .card .f { margin-bottom: 10px; } .ci .card .f textarea { width: 100%; }
@media (max-width: 600px) { .ci-check { flex-wrap: wrap; } }
/* Live weather field */
.wx { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; background: var(--panel, #fff); }
.wx.green { border-color: #2e8b57; } .wx.amber { border-color: #d98e04; } .wx.red { border-color: #c0392b; background: #fff4f2; }
.wx-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.wx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wx-stat { text-align: center; padding: 8px 4px; border-radius: 8px; background: rgba(0,0,0,.03); }
.wx-n { font-size: 22px; font-weight: 700; }
.wx-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
/* Communication: forms, quizzes, surveys */
.cf-icon { font-size: 22px; width: 36px; text-align: center; }
.cf-desc p { margin: 0 0 6px; }
.cf-qs { display: flex; flex-direction: column; gap: 18px; }
.cf-q-label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cf-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 12px; font-weight: 700; }
.cf-req { color: var(--red); font-weight: 700; }
.cf-help { margin: -2px 0 8px 30px; }
.cf-q input[type=text], .cf-q input[type=email], .cf-q input[type=tel], .cf-q input[type=number], .cf-q input[type=date], .cf-q input[type=time], .cf-q textarea, .cf-q select { width: 100%; max-width: 560px; }
.cf-opts { display: flex; flex-direction: column; gap: 6px; }
.cf-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.cf-opt:hover { background: var(--bg); }
.cf-opt input { width: 18px; height: 18px; margin: 0; }
.cf-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-scale-btns > button { min-width: 40px; border: 1px solid var(--line); background: var(--card); }
.cf-scale-btns > button.on, .seg > button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cf-section { border-top: 2px solid var(--brand-100); padding-top: 12px; margin-top: 6px; } .cf-section h3 { margin: 0 0 4px; }
.cf-info { background: var(--bg); border-radius: 10px; padding: 10px 14px; } .cf-info p { margin: 4px 0 0; white-space: pre-wrap; }
.cf-missing { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 8px; }
.cf-done { text-align: center; padding: 32px 20px; }
.cf-done-mark { width: 56px; height: 56px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 28px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.cf-score { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto; }
.cf-score-n { font-size: 40px; font-weight: 800; color: var(--brand); }
.cf-review { text-align: left; display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 0 auto; }
.cf-rv { padding: 8px 12px; border-radius: 10px; background: var(--brand-50); } .cf-rv.no { background: var(--red-50); }
.cf-title { font-size: 22px; font-weight: 700; width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -6px; }
.cf-title:focus { border-color: var(--line); background: var(--card); }
.cf-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-side { display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 12px; }
.cf-side .card h3 { margin: 0 0 10px; }
.cf-tog { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.cf-tog input { margin-top: 3px; } .cf-tog small { display: block; }
.cf-qlist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.cf-qcard { border-left: 4px solid var(--brand-200); } .cf-qcard.layout { border-left-color: var(--line); background: var(--bg-2); }
.cf-qhead { display: grid; grid-template-columns: 28px minmax(0, 1fr) 220px; gap: 8px; align-items: center; margin-bottom: 6px; }
.cf-qhead input { font-weight: 600; font-size: 15px; }
@media (max-width: 700px) { .cf-qhead { grid-template-columns: 28px 1fr; } .cf-qhead select { grid-column: 2; } }
.cf-qcard > input { width: 100%; margin-bottom: 8px; font-size: 13px; }
.cf-qbody { display: flex; flex-direction: column; gap: 8px; }
.cf-optlist { display: flex; flex-direction: column; gap: 6px; }
.cf-optrow { display: flex; align-items: center; gap: 8px; } .cf-optrow input[type=text], .cf-optrow input:not([type]) { flex: 1; }
.cf-dot { color: var(--ink-4); width: 18px; text-align: center; }
.cf-quiz { background: var(--amber-50); border-radius: 10px; padding: 10px 12px; }
.cf-cond { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cf-cond select { min-height: 32px; }
.cf-qfoot { display: flex; gap: 4px; align-items: center; margin-top: 8px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.cf-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; min-height: 30px; padding: 0 12px; font-size: 13px; }
.chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.cf-stat-n { font-size: 26px; font-weight: 800; }
.cf-bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-top: 6px; flex: 1; }
.cf-bar-fill { height: 100%; background: var(--brand); border-radius: 99px; }
.cf-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.cf-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cf-barrow { display: grid; grid-template-columns: minmax(60px, 160px) 1fr 32px; gap: 8px; align-items: center; font-size: 13px; }
.cf-barlab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-texts { margin: 8px 0 0; padding-left: 18px; font-size: 13px; } .cf-texts li { margin-bottom: 4px; }
.cf-ra { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
/* Timecards and payroll */
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: var(--gap); }
.tc-stat { padding: 12px 14px; } .tc-stat-n { font-size: 22px; font-weight: 800; } .tc-stat.amber .tc-stat-n { color: var(--amber); } .tc-stat.red .tc-stat-n { color: var(--red); }
.tc-day { padding: 0; margin-bottom: 10px; } .tc-dayhead { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius) var(--radius) 0 0; }
.tc-entry { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-2); } .tc-entry:last-child { border-bottom: 0; } .tc-entry.billing { opacity: .7; }
.tc-time { min-width: 150px; font-variant-numeric: tabular-nums; } .tc-hrs { font-weight: 700; min-width: 56px; text-align: right; } .tc-entry .grow { flex: 1; min-width: 0; }
.tc-reqs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tc-req { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--bg); } .tc-req.proposed { background: var(--blue-50); } .tc-req.manual { background: var(--amber-50); } .tc-req > div:first-child { flex: 1; }
.tc-confirm { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 2px solid var(--brand-200); }
.tc-person summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tc-person { padding: 10px 14px; margin-bottom: 8px; }
.tc-act.green { background: #e5f4e4; padding: 2px 8px; border-radius: 6px; } .tc-act.red { background: #fbebeb; padding: 2px 8px; border-radius: 6px; } .tc-act.redtext { color: var(--red); } .tc-act.yellow { background: #f9eeda; padding: 2px 8px; border-radius: 6px; }
.tc-comments { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .tc-comment { display: flex; gap: 10px; align-items: flex-start; } .tc-comment.done { opacity: .6; } .tc-comment .grow { flex: 1; }
.rb-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.rb-row { display: grid; grid-template-columns: 1fr 1fr 90px 1.4fr 1fr 32px; gap: 6px; align-items: center; } .rb-row.rb-exp { grid-template-columns: 1fr 1.3fr 90px 1fr 1fr auto 32px; }
@media (max-width: 800px) { .rb-row, .rb-row.rb-exp { grid-template-columns: 1fr 1fr; } }
.rb-total { font-weight: 700; margin-top: 8px; }
.lang-bar { margin: 0 auto 14px; display: flex; justify-content: center; }

/* Monthly operations report */
.rp .card { margin-bottom: var(--gap); } .rp h2 { font-size: 15px; margin: 0 0 10px; }
.rp-bars { display: grid; gap: 6px; } .rp-bar { display: grid; grid-template-columns: 160px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.rp-bar-t { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; } .rp-bar-f { display: block; height: 100%; background: var(--green); border-radius: 5px; }
.rp-list { margin: 0; padding-left: 18px; font-size: 13.5px; } .rp-list li { margin-bottom: 6px; }
@media (max-width: 600px) { .rp-bar { grid-template-columns: 110px 1fr 50px; } }
.rp .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 800px) { .rp .grid-2 { grid-template-columns: 1fr; } }

/* KidiSpace boards */
.kb { display: grid; gap: 14px; }
.kb-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .kb-toolbar input[type=search], .kb-toolbar select { width: auto; min-width: 160px; } .kb-toolbar input[type=search] { max-width: 280px; } .kb-toolbar .grow { flex: 1; }
.kb-note { margin: 0; }
.kb-group { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.kb-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 6px solid var(--kbc, var(--line-2)); font-weight: 700; }
.kb-group-head .kb-group-title { cursor: text; } .kb-caret { background: none; border: 0; padding: 0 4px; min-height: 0; font-size: 14px; color: var(--muted); }
.kb-scroll { overflow: auto; max-width: 100%; }
.kb-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: 14px; }
.kb-table th { position: sticky; top: 0; background: var(--bg-2); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.kb-table th .kb-colmenu { margin-left: 6px; }
.kb-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; max-width: 360px; }
.kb-table tr:last-child td { border-bottom: 0; }
.kb-th-name, .kb-td-name { position: sticky; left: 0; background: var(--card); z-index: 2; min-width: 220px; border-right: 1px solid var(--line); } .kb-table th.kb-th-name { z-index: 3; background: var(--bg-2); }
.kb-name { display: flex; align-items: center; gap: 8px; } .kb-name-t { font-weight: 600; }
.kb-open { background: none; border: 0; padding: 2px 6px; min-height: 0; font-size: 13px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; border-radius: 6px; } .kb-open:hover { background: var(--bg-2); } .kb-open b { font-size: 11px; }
.kb-td { cursor: text; min-height: 28px; } .kb-td:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .kb-td.editing { padding: 2px 4px; } .kb-td.editing input, .kb-td.editing select, .kb-td.editing textarea { margin: 0; min-height: 32px; }
.kb-td.t-checkbox, .kb-td.t-status { cursor: pointer; }
.kb-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--bg-2); color: var(--ink); white-space: nowrap; }
.kb-pill.c-green { background: var(--brand-50); color: var(--brand); } .kb-pill.c-red { background: var(--red-50); color: var(--red); } .kb-pill.c-amber { background: var(--amber-50); color: var(--amber); } .kb-pill.c-orange { background: #fdebd8; color: #9a4a00; } .kb-pill.c-blue { background: var(--blue-50); color: var(--blue); } .kb-pill.c-violet { background: var(--violet-50); color: var(--violet); } .kb-pill.c-pink { background: #fbe4f1; color: #a8327a; } .kb-pill.c-teal { background: #dff5f3; color: #0f7d79; } .kb-pill.c-gray { background: var(--bg-2); color: var(--muted); }
.kb-group-head.c-green { --kbc: #2B661A; } .kb-group-head.c-red { --kbc: #c0352b; } .kb-group-head.c-amber { --kbc: #a35d00; } .kb-group-head.c-orange { --kbc: #b4561a; } .kb-group-head.c-blue { --kbc: #1f63b0; } .kb-group-head.c-violet { --kbc: #6b45b5; } .kb-group-head.c-pink { --kbc: #a8327a; } .kb-group-head.c-teal { --kbc: #0f7d79; } .kb-group-head.c-gray { --kbc: #8a8f8a; }
.kb-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.kb-people { display: flex; gap: 6px; flex-wrap: wrap; } .kb-person { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.kb-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 6px; color: #fff; font-weight: 700; } .kb-check.on { background: var(--brand); border-color: var(--brand); }
.kb-num { font-variant-numeric: tabular-nums; } .kb-long { white-space: pre-line; }
.kb-colmenu { background: none; border: 0; padding: 0 4px; min-height: 0; color: var(--muted); border-radius: 6px; } .kb-colmenu:hover { background: var(--bg-2); color: var(--ink); }
.kb-addrow td { padding: 4px 10px; } .kb-addrow input { border: 0; background: transparent; min-height: 32px; width: 100%; } .kb-addrow input:focus { background: var(--bg-2); }
.kb-td-tools { width: 36px; } .kb-th-add { white-space: nowrap; }
.kb-menu { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); display: grid; min-width: 180px; padding: 6px; } .kb-menu button { background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 6px; min-height: 0; } .kb-menu button:hover { background: var(--bg-2); } .kb-menu button.danger { color: var(--red); }
.kb-multi { display: grid; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; min-width: 200px; }
.kb-pp { display: grid; gap: 6px; min-width: 240px; } .kb-pp-list { display: grid; gap: 2px; } .kb-pp-opt { display: flex; align-items: center; gap: 8px; background: none; border: 0; text-align: left; padding: 4px 6px; border-radius: 6px; min-height: 0; } .kb-pp-opt:hover { background: var(--bg-2); }
.kb-row { display: grid; gap: 14px; } .kb-fields { display: grid; gap: 6px; } .kb-field { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); } .kb-field-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kb-compose { display: grid; gap: 6px; } .kb-thread { display: grid; gap: 10px; }
.kb-update { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; } .kb-update.reply { margin-left: 34px; background: var(--bg-2); } .kb-update-body { white-space: pre-wrap; margin-top: 4px; } .kb-update-tools { display: flex; gap: 6px; margin-top: 4px; }
@media (max-width: 700px) { .kb-field { grid-template-columns: 1fr; gap: 2px; } .kb-th-name, .kb-td-name { min-width: 160px; } }

/* Cohorts */
.co-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.co-badge { display: grid; place-items: center; min-width: 96px; padding: 10px 12px; border-radius: 12px; color: #fff; font-weight: 800; background: #0f7d79; line-height: 1.1; } .co-badge small { font-weight: 600; font-size: 11px; opacity: .9; }
.co-badge.track-B { background: #1f63b0; }
.co-big { font-weight: 700; font-size: 17px; }
.co-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #0f7d79; margin-right: 8px; } .co-dot.track-B { background: #1f63b0; }
.co-deadlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.co-deadline { text-align: center; border-top: 4px solid #0f7d79; } .co-deadline.track-B { border-top-color: #1f63b0; } .co-due { font-size: 22px; font-weight: 800; }
.co-group { margin-bottom: 12px; }
.cf-row { flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .co-grid { grid-template-columns: 1fr; } }

/* Searchable select */
.ss { position: relative; } .ss .ss-input { padding-right: 32px; }
.ss-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; min-height: 0; padding: 4px 6px; color: var(--muted); border-radius: 6px; } .ss-clear:hover { background: var(--bg-2); color: var(--ink); }
.ss-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; }
.ss-opt { padding: 8px 10px; border-radius: 6px; cursor: pointer; } .ss-opt:hover, .ss-opt.act { background: var(--bg-2); } .ss-opt.sel { font-weight: 700; color: var(--brand); }
.ss-none { padding: 8px 10px; color: var(--muted); font-size: 13px; }

/* Repeating sessions */
.rp-box { display: grid; gap: 8px; padding: 10px 12px; background: var(--bg-2); border-radius: 10px; }
.rp-days { display: flex; gap: 6px; flex-wrap: wrap; } .rp-day { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; cursor: pointer; } .rp-day:has(input:checked) { background: var(--brand-50); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.rp-day input { margin: 0; width: auto; }
.co-stack { display: grid; gap: var(--gap, 14px); }

/* The in portal reader */
.rd-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; position: sticky; top: 0; z-index: 3; }
.rd-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.rd-search input { flex: 1; }
.rd-hits { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; max-height: 240px; overflow: auto; }
.rd-hit { display: flex; gap: 10px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; padding: 8px 10px; font-size: 13px; }
.rd-hit:last-child { border-bottom: none; }
.rd-hit mark { background: var(--amber-50); color: inherit; }
.rd-pages { --rd-zoom: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rd-page { width: min(100%, calc(820px * var(--rd-zoom))); margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.08); overflow: hidden; -webkit-user-select: none; user-select: none; }
.rd-page img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.rd-page figcaption { font-size: 11px; color: var(--ink-4); text-align: center; padding: 4px 0 6px; background: var(--bg); }
.rd-text { padding: 28px 32px; line-height: 1.6; color: #1d2a1b; -webkit-user-select: text; user-select: text; }
.rd-text h1, .rd-text h2, .rd-text h3 { margin: 18px 0 8px; }
.rd-text p { margin: 0 0 10px; }
.rd-table { overflow: auto; }
.rd-table table { border-collapse: collapse; font-size: 13px; }
.rd-table th, .rd-table td { border: 1px solid #d9ded6; padding: 4px 8px; white-space: nowrap; }
.rd-table th { background: #eef3ec; position: sticky; top: 0; }
@media (max-width: 700px) { .rd-page { width: calc(100% * var(--rd-zoom)); } .rd-text { padding: 16px; } }
@media print { .rd-pages { display: none; } .rd::after { content: 'Documents are read in the portal and are not printed.'; display: block; padding: 40px; text-align: center; } }
.global-search { display: flex; align-items: center; gap: 10px; }
.global-search .gs-box { flex: 1; }
.gs-back { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.gs-back:hover { background: var(--bg); }
@media (max-width: 900px) { .gs-back span { display: none; } .gs-back { padding: 0 10px; } }
.mb-back { min-height: 40px; padding: 0 8px; } .mb-back span { display: none; }

/* Boards: the table scrolls inside its box with a visible scrollbar; long text is clamped (open the row for all of it). */
.kb-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; width: 100%; }
.kb-scroll::-webkit-scrollbar { height: 10px; } .kb-scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 6px; } .kb-scroll::-webkit-scrollbar-track { background: var(--line-2); }
.kb-table td.t-long_text { max-width: 280px; } .kb-table td.t-long_text .kb-long { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.kb-table th { white-space: nowrap; }
/* Cards view */
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 12px; background: var(--bg-2); }
.kb-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.kb-card:hover { box-shadow: var(--shadow); }
.kb-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.kb-card-fields { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.kb-card-fields dt { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.kb-card-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kb-card-fields dd .kb-long { white-space: pre-wrap; }
.kb-card-add { cursor: default; display: flex; align-items: center; align-self: start; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .seg button { border: 0; border-radius: 0; background: var(--card); } .seg button.on { background: var(--brand-50); color: var(--brand); font-weight: 700; }
/* Wide content (boards, tables) scrolls inside its own box; the page itself never scrolls sideways. */
.main-col { overflow-x: clip; }
.kb, .kb > *, .kb-group { min-width: 0; max-width: 100%; }
.ks-main { overflow-x: clip; }
.table-wrap { max-width: 100%; }
button.co-deadline { display: block; width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: center; line-height: 1.35; min-height: 0; }
button.co-deadline:hover { box-shadow: var(--shadow-lg); } button.co-deadline.on { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Files */
.fl-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.fl-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.fl-search input { border: 0; box-shadow: none; background: transparent; flex: 1; min-height: 40px; padding: 0; outline: none; }
.fl-bar select { width: auto; }
.fl-dates { display: inline-flex; gap: 6px; align-items: center; } .fl-dates input { width: auto; }
.fl-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.fl-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; max-height: calc(100vh - 100px); overflow-y: auto; }
.fl-facet { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 7px 8px; min-height: 0; text-align: left; color: var(--ink-2); font-weight: 500; }
.fl-facet:hover { background: var(--bg); } .fl-facet.on { background: var(--brand-50); color: var(--brand); font-weight: 700; }
.fl-facet.sub { padding-left: 30px; font-size: 13px; }
.fl-facet-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-n { font-size: 12px; color: var(--ink-3); background: var(--bg); border-radius: 10px; padding: 0 7px; }
.fl-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fl-sec { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; }
.fl-sec h3 { margin: 10px 0 6px; font-size: 14px; }
.fl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.fl-row:last-child { border-bottom: 0; }
.fl-ico { font-size: 22px; width: 32px; text-align: center; flex: none; }
.fl-main { flex: 1; min-width: 0; }
.fl-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fl-meta { overflow-wrap: anywhere; }
.fl-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 900px) {
  .fl-layout { grid-template-columns: 1fr; }
  .fl-side { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding: 6px; }
  .fl-facet { width: auto; white-space: nowrap; } .fl-facet.sub { padding-left: 8px; }
  .fl-row { flex-wrap: wrap; } .fl-actions { width: 100%; justify-content: flex-start; padding-left: 44px; }
}
@media (max-width: 900px) {
  .fl-intro { display: none; }
  .fl-bar select { flex: 1; }
  .fl-dates { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fl-dates input { min-width: 0; width: 100%; }
}

/* Organizational chart */
.oc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.oc-bar .fl-search { max-width: 360px; }
.oc-scroll { overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; max-height: calc(100vh - 230px); scrollbar-width: thin; }
.oc-tree { width: max-content; min-width: 100%; }
.oc-tree ul { display: flex; justify-content: center; padding: 18px 0 0; margin: 0; position: relative; list-style: none; }
.oc-tree > ul { padding-top: 0; }
.oc-tree li { position: relative; padding: 18px 6px 0; display: flex; flex-direction: column; align-items: center; }
.oc-tree > ul > li { padding-top: 0; }
.oc-tree li::before, .oc-tree li::after { content: ''; position: absolute; top: 0; height: 18px; border-top: 2px solid var(--line); width: 50%; }
.oc-tree li::before { right: 50%; } .oc-tree li::after { left: 50%; border-left: 2px solid var(--line); }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { border-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border-top: 0; }
.oc-tree li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.oc-tree li:first-child::after { border-radius: 6px 0 0 0; }
.oc-tree li:only-child::after { border-radius: 0; }
.oc-tree > ul > li::before, .oc-tree > ul > li::after { display: none; }
.oc-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 18px; border-left: 2px solid var(--line); }
.oc-stack { display: flex; flex-direction: column; gap: 6px; }
.oc-card { display: flex; align-items: center; gap: 8px; width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); cursor: pointer; text-align: left; position: relative; }
.oc-card:hover, .oc-card:focus-visible { border-color: var(--brand); outline: none; }
.oc-card.me { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }
.oc-card.asst { background: var(--bg-2); }
.oc-card.hit { box-shadow: 0 0 0 3px var(--amber); }
.oc-card.drop { box-shadow: 0 0 0 3px var(--brand); } .oc-card.dragging { opacity: .4; }
.oc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.oc-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-text span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-loc { font-size: 11px !important; }
.oc-tog { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); min-height: 0; height: 20px; padding: 0 8px; font-size: 11px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); z-index: 1; }
.oc-list { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.oc-row { padding-left: calc(var(--d) * 22px); position: relative; }
.oc-row .oc-card { width: auto; max-width: 420px; }
.oc-row .oc-tog { position: static; transform: none; height: 24px; }
.oc-unplaced { margin-top: 16px; } .oc-unplaced-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.oc-unplaced-grid .oc-card { width: auto; }
.oc-drop-top { border: 2px dashed var(--brand); border-radius: 12px; padding: 10px; text-align: center; color: var(--brand); margin-bottom: 10px; }
.oc-person { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.oc-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.oc-perm.off { opacity: .55; }
.oc-requests { margin-bottom: 14px; border-left: 4px solid var(--amber); }
@media (max-width: 900px) { .oc-scroll { max-height: none; } }

/* Equipment requests (Amazon links) */
.eq-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.eq-list { display: grid; gap: 12px; }
.eq-card { display: grid; gap: 10px; }
.eq-card.eq-critical { border-left: 4px solid var(--red); }
.eq-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.eq-title { display: grid; gap: 2px; min-width: 0; } .eq-title b { font-size: 1.05rem; overflow-wrap: anywhere; }
.eq-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.eq-reason { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.eq-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eq-msg { background: var(--line-2); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.eq-msg.denied { background: var(--red-50); }
.eq-review { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.eq-seg { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.eq-review textarea { width: 100%; }
.eq-review > button { justify-self: start; }
.eq-form { display: grid; gap: 14px; }
.eq-field { display: grid; gap: 5px; } .eq-field > span:first-child { font-weight: 600; }
.eq-field input:not([type=radio]), .eq-field select, .eq-field textarea { width: 100%; }
.eq-urg-opt input[type=radio] { width: auto; min-height: 0; flex: none; margin: 3px 0 0; }
.eq-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; }
.eq-urg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eq-urg-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.eq-urg-opt > span { display: grid; gap: 2px; }
.eq-urg-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.eq-urg-opt.red:has(input:checked) { border-color: var(--red); background: var(--red-50); }
@media (max-width: 600px) { .eq-row, .eq-urg { grid-template-columns: 1fr; } }

/* Org chart layout choices: rows lower (with the connector carried down), people on the same line, labels */
.oc-ghost { position: relative; display: flex; justify-content: center; padding-bottom: 36px; }
.oc-ghost::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--line); transform: translateX(-1px); }
.oc-ph { visibility: hidden; box-shadow: none; }
.oc-tree li > .oc-ghost + .oc-ghost { margin-top: 0; }
.oc-pair { display: flex; gap: 28px; position: relative; }
.oc-pair > .oc-card + .oc-card::before { content: ''; position: absolute; left: -29px; width: 28px; top: 50%; border-top: 2px solid var(--line); }
.oc-sub > ul.oc-nested { padding-top: 0; }
.oc-sub > ul.oc-nested::before { display: none; }
.oc-sub > ul.oc-nested > li { padding-top: 0; }
.oc-sub > ul.oc-nested > li::before, .oc-sub > ul.oc-nested > li::after { display: none; }
.oc-stack.two { display: grid; grid-template-columns: repeat(2, 210px); gap: 6px; }
.oc-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--brand-50); color: var(--brand); font-size: 10px; font-weight: 600; }
.oc-h4 { margin: 16px 0 4px; font-size: .95rem; }

/* Sent emails (administrators) */
.el-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.el-stat { display: grid; gap: 2px; } .el-stat b { font-size: 1.6rem; }
.el-group { border-top: 1px solid var(--line); padding: 8px 0; } .el-group summary, .el-mail summary { cursor: pointer; }
.el-items { max-height: 420px; overflow: auto; }
.el-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 10px; }
.el-person { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--line-2); }
.el-mail { border-top: 1px solid var(--line); padding: 8px 0; }
.el-mail summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.el-time { min-width: 64px; } .el-subj { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .el-stats { grid-template-columns: 1fr; } }
.el-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .el-bar input { width: auto; }

/* View switch (people who are also Movement Specialists) */
.view-switch { margin-top: 6px; display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.view-switch button { min-height: 28px !important; padding: 0 8px; font-size: 11.5px; }

/* Training opened to staff (MS1 research onboarding) */
.tr-head { display: grid; gap: 10px; margin-bottom: 14px; }
.tr-head.done { border-color: var(--brand); }
.tr-bar { height: 8px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.tr-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .3s; }
.tr-team { margin-bottom: 14px; } .tr-team summary { cursor: pointer; }
.tr-row { flex-wrap: wrap; gap: 8px; }
.tr-open { align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.tr-ack { margin-top: 14px; display: grid; gap: 10px; justify-items: start; }
.tr-ack.locked { opacity: .75; }
.tr-ack.done { border-color: var(--brand); background: var(--brand-50); }
.tr-check { align-items: flex-start; gap: 10px; font-weight: 600; }
.tr-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* Research Admin section */
.ra-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ra-widget { display: grid; gap: 10px; color: inherit; text-decoration: none !important; border-top: 4px solid var(--brand); transition: transform .12s, box-shadow .12s; }
.ra-widget:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ra-widget > b { font-size: 1.05rem; }
.ra-nums { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-3); font-size: .9rem; }
.ra-nums strong { color: var(--ink); font-size: 1.25rem; margin-right: 3px; }
.ra-tile { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none !important; }
.ra-tile > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ra-tile.off { opacity: .85; } .ra-tile-ic { font-size: 22px; line-height: 1; }
.ra-group { margin-bottom: 12px; border-left: 4px solid var(--line); }
.ra-group.red { border-left-color: var(--red); } .ra-group.amber { border-left-color: var(--amber); } .ra-group.violet { border-left-color: #784bd1; } .ra-group.blue { border-left-color: var(--blue); } .ra-group.green { border-left-color: var(--brand); }
.ra-rows { display: grid; gap: 6px; }
.ra-row { display: grid; grid-template-columns: minmax(180px, 2.2fr) 1fr 1fr .8fr 1.6fr 1.1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--card); }
.ra-row:hover { border-color: var(--brand); }
.ra-main { min-width: 0; } .ra-main b { overflow-wrap: anywhere; }
.ra-cell { display: grid; gap: 1px; min-width: 0; } .ra-cell > .small.muted { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.ra-notes .small:last-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ra-status { width: 100%; min-height: 34px; }
.ra-late { color: var(--red); font-weight: 600; }
.ra-log { cursor: pointer; }
.ra-form { display: grid; gap: 12px; } .ra-form input, .ra-form select, .ra-form textarea { width: 100%; }
.ra-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ra-hist { border-top: 1px solid var(--line); padding: 6px 0; }
.ra-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.ra-filters .f { min-width: 150px; } .ra-filters select, .ra-filters input { width: 100%; }
.ra-resp { cursor: pointer; } .ra-resp.unread b::before { content: '● '; color: var(--blue); }
.ra-done { margin-top: 14px; opacity: .92; }
.ra-qa { border-top: 1px solid var(--line); padding: 8px 0; display: grid; gap: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ra-h2 { font-size: 1.05rem; margin: 6px 0 10px; }
.ra-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ra-qc { display: grid; gap: 4px; border-top: 3px solid var(--brand); padding: 12px; }
.ra-lit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ra-paper { cursor: pointer; display: grid; gap: 6px; align-content: start; }
.ra-gls { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ra-gl ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .ra-gl p { margin: 0 0 8px; }
@media (max-width: 900px) {
  .ra-row { grid-template-columns: 1fr 1fr; } .ra-main, .ra-notes { grid-column: 1 / -1; }
  .ra-two { grid-template-columns: 1fr; }
  .ra-gls, .ra-lit { grid-template-columns: 1fr; }
}
.eq-bar select { width: auto; min-width: 180px; }
.rr-as { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; } .rr-as .seg-ctl { flex-wrap: wrap; } .rr-as .seg-ctl a { text-decoration: none; border: 0; background: transparent; min-height: 30px; } .rr-as .seg-ctl a.on { background: var(--card); box-shadow: var(--shadow-sm); }

/* Side menu folders and the customize editor */
button.nav-label { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; min-height: 0; cursor: pointer; border-radius: 6px; text-align: left; }
button.nav-label:hover { color: var(--ink-2); background: var(--bg); }
.nav-caret { font-size: 10px; opacity: .7; }
.nav-group.closed { margin-bottom: 2px; }
.nav-custom { display: flex; align-items: center; gap: 9px; width: 100%; justify-content: flex-start; background: none; border: 1px dashed var(--line); color: var(--ink-3); font-weight: 500; font-size: 12.5px; min-height: 34px; margin: 8px 0 4px; }
.nav-custom:hover { color: var(--brand); border-color: var(--brand); }
.sb-ed { display: grid; gap: 12px; }
.sb-folder { border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 4px; background: var(--bg); }
.sb-fhead { display: flex; gap: 6px; align-items: center; }
.sb-ftitle { flex: 1; font-weight: 700; }
.sb-item { display: grid; grid-template-columns: auto auto 1fr auto auto 120px auto; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 4px 6px; cursor: grab; }
.sb-item.off { grid-template-columns: auto auto 1fr 140px; opacity: .85; }
.sb-item input { min-height: 32px; padding: 0 8px; }
.sb-item select { min-height: 32px; font-size: 12px; }
.sb-grip { color: var(--ink-4); font-size: 12px; letter-spacing: -2px; }
.sb-empty { padding: 6px; }
.sb-hidden h3 { margin: 6px 0 2px; font-size: .95rem; } .sb-hidden { display: grid; gap: 4px; }
@media (max-width: 600px) { .sb-item { grid-template-columns: auto 1fr auto auto; } .sb-item .sb-move { grid-column: 2 / 4; } .sb-item > svg, .sb-grip { display: none; } }

/* Notepad */
.np-search { margin-bottom: 10px; } .np-search input { max-width: 420px; }
.np { display: grid; grid-template-columns: 220px 300px 1fr; gap: 12px; align-items: start; min-height: calc(100vh - 240px); }
.np-secs, .np-list { display: grid; gap: 4px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; max-height: calc(100vh - 220px); overflow: auto; }
.np-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; background: none; border: 0; min-height: 34px; padding: 0 10px; border-radius: 8px; font-weight: 500; text-align: left; }
.np-sec.on { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.np-secrow { display: flex; align-items: center; gap: 2px; } .np-secrow .np-sec { flex: 1; }
.np-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; margin-right: -2px; }
.np-sec.c-green .np-dot, .np-sw.c-green { background: #2B661A; color: #2B661A; } .np-sec.c-blue .np-dot, .np-sw.c-blue { background: #1f63b0; }
.np-sec.c-teal .np-dot, .np-sw.c-teal { background: #0f7d79; } .np-sec.c-violet .np-dot, .np-sw.c-violet { background: #6b45b5; }
.np-sec.c-orange .np-dot, .np-sw.c-orange { background: #b4561a; } .np-sec.c-pink .np-dot, .np-sw.c-pink { background: #a8327a; }
.np-sec.c-amber .np-dot, .np-sw.c-amber { background: #b8860b; } .np-sec.c-gray .np-dot, .np-sw.c-gray { background: #7a7f78; }
.np-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 10px 10px 2px; }
.np-add { margin-top: 6px; } .np-new { width: 100%; margin-bottom: 4px; }
.np-page { display: grid; gap: 2px; text-align: left; width: 100%; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; min-height: 0; font-weight: 400; justify-items: start; }
.np-page:hover { background: var(--bg); } .np-page.on { border-color: var(--brand); background: var(--brand-50); }
.np-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.np-ed { display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; align-content: start; }
.np-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .np-bar select { width: auto; }
.np-title { font-size: 1.3rem; font-weight: 700; border: 0; padding: 4px 0; background: transparent; }
.np-body { min-height: 52vh; resize: vertical; line-height: 1.55; font-size: 15px; }
.np-swatches { display: flex; gap: 6px; } .np-sw { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; } .np-sw.on { border-color: var(--ink); }
@media (max-width: 1100px) { .np { grid-template-columns: 1fr; } .np-secs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .np-label { display: none; } }
/* Meetings */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mt-card { display: grid; gap: 6px; color: inherit; text-decoration: none !important; border-top: 4px solid var(--brand); } .mt-card.off { opacity: .6; }
.mt-people { display: grid; gap: 2px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; margin-top: 6px; }
.mt-head { display: grid; gap: 6px; margin-bottom: 12px; }
.mt-add { display: grid; gap: 8px; margin-bottom: 14px; justify-items: start; } .mt-add textarea, .mt-add .f { width: 100%; } .mt-add input[type=date] { width: auto; }
.mt-log { display: grid; gap: 10px; }
.mt-note { display: grid; gap: 8px; } .mt-note h3 { margin: 0; }
.mt-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.mt-actions { background: var(--brand-50); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; }

/* My tasks by organization, and the combined timeline */
.mt-orgs { margin-bottom: 10px; flex-wrap: wrap; } .mt-orgs a { text-decoration: none; border: 0; background: transparent; min-height: 30px; } .mt-orgs a.on { background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); }
.tl { display: grid; gap: 10px; }
.tl-day { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; }
.tl-date { font-weight: 700; font-size: .9rem; padding-top: 6px; } .tl-day.late .tl-date { color: var(--red); }
.tl-items { display: grid; gap: 6px; border-left: 2px solid var(--line); padding-left: 12px; }
.tl-item { display: flex; gap: 8px; align-items: center; width: 100%; justify-content: flex-start; text-align: left; min-height: 36px; font-weight: 500; }
@media (max-width: 600px) { .tl-day { grid-template-columns: 1fr; } }

/* Data and Research: the to-dos widget */
.td-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.td-col { display: grid; gap: 6px; align-content: start; background: var(--bg); border-radius: 12px; padding: 10px; border-top: 4px solid var(--brand); min-height: 180px; }
.td-col.t-blue { border-top-color: var(--blue); } .td-col.t-violet { border-top-color: #6b45b5; }
.td-head { display: flex; justify-content: space-between; align-items: baseline; color: inherit; text-decoration: none !important; font-size: 1.02rem; }
.td-head:hover b { color: var(--brand); }
.td-add { min-height: 34px; font-size: 13px; }
.td-row { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; }
.td-row a { color: inherit; } .td-row input { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .td-cols { grid-template-columns: 1fr; } }

/* Team access (Data and Research leads) */
.dra-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.dra-card { display: grid; gap: 8px; align-content: start; }
.dra-big { align-items: flex-start; gap: 10px; } .dra-big input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.dra-perms { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.dra-add { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; max-width: 620px; } .dra-add > :first-child { flex: 1; }

/* Customize dashboard: each widget's own name and width */
.dz-top { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2, var(--bg)); margin-bottom: 10px; }
.dz-top label { display: grid; gap: 4px; }
.dz-top label.check { display: flex; }
.dz-h { margin: 12px 0 4px; font-size: 14px; }
.dz-row { align-items: center; gap: 8px; }
.dz-main { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dz-main .check { flex: none; }
.dz-name { flex: 1; min-width: 0; }
.dz-size { width: auto !important; }
.dz-title { margin: 0 0 8px; }
@media (max-width: 640px) { .dz-row { flex-wrap: wrap; } }

/* Full screen editors (Assessments form editor, Research Admin pages) */
body.fe-open { overflow: hidden; }
.fe-scrim { position: fixed; inset: 0; z-index: 39; background: var(--bg); display: flex; }
.fe { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
.fe-top b { font-size: 17px; }
.fe-main { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.fe-main.fe-form { grid-template-columns: 300px minmax(0, 1fr) minmax(320px, 420px); }
.fe-main.fe-form.no-preview { grid-template-columns: 300px minmax(0, 1fr); }
.fe-main.fe-form.no-preview .fe-preview { display: none; }
.fe-side, .fe-mid, .fe-preview, .fe-body, .fe-tabs { overflow: auto; padding: 16px; min-height: 0; }
.fe-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.fe-side .card h3, .fe-body .card h3 { margin: 0 0 8px; font-size: 14px; }
.fe-preview { border-left: 1px solid var(--line); background: var(--bg-2); }
.fe-mid { display: flex; flex-direction: column; gap: 10px; }
.fe-midbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fe-qs { display: flex; flex-direction: column; gap: 10px; }
.fe-q { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--brand); }
.fe-q.fe-sec { border-left-color: var(--ink-3); background: var(--bg-2); }
.fe-qtools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fe-qtools select { width: auto; }
.fe-qnum { font-weight: 700; font-size: 12px; color: var(--ink-3); min-width: 34px; }
.fe-qlabel { font-size: 16px; font-weight: 600; width: 100%; }
.fe-sec .fe-qlabel { font-size: 18px; }
.fe-help, .fe-ph { width: 100%; font-size: 13px; }
.fe-collapsed .fe-help { display: none; }
.fe-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fe-inline label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fe-inline input, .fe-inline select { width: auto; max-width: 140px; }
.fe-scale-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fe-scale-labels label { display: flex; align-items: center; gap: 6px; }
.fe-opts { display: flex; flex-direction: column; gap: 4px; }
.fe-opt { display: flex; align-items: center; gap: 6px; }
.fe-opt input { flex: 1; }
.fe-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--card); }
.fe-ic { display: inline-block; min-width: 18px; font-weight: 700; color: var(--brand); }
.fe-checks { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.danger-text { color: var(--red); }
.fe-tabs { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: var(--card); }
.fe-tabs button { text-align: left; justify-content: flex-start; border: 0; background: transparent; }
.fe-tabs button.on { background: var(--brand-50, var(--bg-2)); color: var(--brand); font-weight: 700; }
.fe-body { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.fe-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.fe-row-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fe-row-tools { width: auto; flex-wrap: nowrap; }
.fe-share-scrim { position: fixed; inset: 0; z-index: 42; background: rgba(10, 16, 9, .42); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fe-share { width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.fe-share-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0; }
.fe-share-opts h3 { margin: 0 0 4px; font-size: 14px; }
.fe-url { word-break: break-all; margin: 6px 0; }
@media (max-width: 900px) {
  .fe-main, .fe-main.fe-form, .fe-main.fe-form.no-preview { grid-template-columns: 1fr; overflow: auto; }
  .fe-side, .fe-mid, .fe-preview, .fe-body, .fe-tabs { overflow: visible; border: 0; }
  .fe-tabs { flex-direction: row; flex-wrap: wrap; }
  .fe-share-opts { grid-template-columns: 1fr; }
  .fe-row { flex-direction: column; }
}

/* Filling a form */
.fr { display: flex; flex-direction: column; gap: 14px; }
.fr-section h3 { margin: 10px 0 2px; color: var(--brand); }
.fr-section p { margin: 0; }
.fr-q { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; transition: background .2s; }
.fr-q.fr-missing { background: color-mix(in srgb, var(--red) 12%, transparent); outline: 2px solid var(--red); outline-offset: 4px; }
.fr-label { font-weight: 600; }
.fr-req { color: var(--red); }
.fr-help { margin-top: -2px; }
.fr-choices, .fr-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--card); }
.fr-chip input { width: auto; margin: 0; }
.fr-scale .fr-chip { flex-direction: column; border-radius: 10px; min-width: 52px; text-align: center; }
.fr-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-50, var(--bg-2)); }

/* SOP editor bar */
.sop-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--card); }
.ks-file .sop-bar { width: 100%; }
.rt-embed > .topbar h1 { display: none; }
.fe-q textarea.fe-help { min-height: 40px; height: 40px; resize: vertical; }

/* Research Resources widgets for Movement Specialists */
.hub-wrap { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.hub-overview { border-left: 4px solid var(--brand); }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-w { display: flex; flex-direction: column; gap: 8px; }
.hub-items { display: flex; flex-direction: column; gap: 6px; }
.hub-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.hub-item > :nth-child(3) { grid-column: 2; justify-self: start; width: auto; }
.hub-item.off { opacity: .65; grid-template-columns: 26px 1fr; }
.hub-ic { font-size: 20px; text-align: center; }
.hub-links { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* Book view (flip through a handbook) */
.bk-stage { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 12px; }
.bk-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(1180px, calc(100vw - 420px)); min-width: 560px; perspective: 2400px; background: var(--card); border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.bk-book::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10) 48%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.10) 52%, rgba(0,0,0,0)); pointer-events: none; }
.bk-book.bk-single { grid-template-columns: 1fr; width: min(640px, calc(100vw - 110px)); min-width: 0; }
.bk-book.bk-single::after, .bk-book.bk-single .bk-right { display: none; }
.bk-page { cursor: pointer; overflow: hidden; background: #fff; min-height: 200px; }
.bk-page img, .bk-face img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.bk-blank { width: 100%; height: 100%; background: var(--bg-2); }
.bk-cover .bk-left { background: transparent; cursor: default; }
.bk-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.3,1); z-index: 3; pointer-events: none; }
.bk-leaf.fwd { left: 50%; transform-origin: left center; }
.bk-leaf.back { left: 0; transform-origin: right center; }
.bk-leaf.fwd.go { transform: rotateY(-180deg); }
.bk-leaf.back.go { transform: rotateY(180deg); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; background: #fff; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.12); }
.bk-back { transform: rotateY(180deg); }
.bk-nav { flex: none; width: 46px; height: 46px; border-radius: 999px; font-size: 26px; line-height: 1; padding: 0; }
.bk-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.bk-slider { width: min(420px, 70vw) !important; }
@media (max-width: 820px) { .bk-nav { width: 38px; height: 38px; } }

/* Filling out a form: full screen */
.ff-body { flex: 1; overflow: auto; padding: 24px 16px 40px; }
.ff-card { max-width: 820px; margin: 0 auto; padding: 28px 32px; }
.ff-title { margin: 0 0 6px; font-size: 26px; }
.ff-client { margin: 6px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.ff-foot { justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.ff .fr-q { font-size: 15px; }
@media (max-width: 640px) { .ff-card { padding: 18px 16px; } .ff-body { padding: 12px 8px 30px; } }

/* Every panel opens full screen (Ryan, Nov 9): the content sits in a readable centered column. */
.drawer, .drawer.wide { left: 0; right: 0; width: 100vw; border-radius: 0; animation: fade .15s ease-out; }
.drawer-hd { padding: 14px max(20px, calc((100vw - 1000px) / 2)); }
.drawer-bd { padding: 24px max(20px, calc((100vw - 1000px) / 2)) 32px; }
.drawer-ft { padding-left: max(20px, calc((100vw - 1000px) / 2)); padding-right: max(20px, calc((100vw - 1000px) / 2)); }
.drawer-hd h2 { font-size: 22px; }
@media (max-width: 760px) { .drawer, .drawer.wide { top: 0; border-radius: 0; } }

/* Literature entry: the review steps to check off */
.ra-steps { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.ra-step { align-items: flex-start; gap: 10px; line-height: 1.4; }
.ra-step input { margin-top: 3px; flex: none; }
.ra-step { display: flex !important; }
.ra-step input[type=checkbox] { width: 18px !important; height: 18px; min-height: 0; padding: 0; }
.ra-step > span { flex: 1; min-width: 0; }

/* Research Admin Glossary */
.gl-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-700, #1b4214), var(--brand, #2B661A)); color: #fff; margin-bottom: 14px; }
.gl-hero h1 { margin: 2px 0 6px; color: #fff; font-size: 30px; }
.gl-hero p { margin: 0; max-width: 680px; opacity: .92; }
.gl-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.gl-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gl-tools input { min-width: 240px; background: #fff; }
.gl-tools button { background: #fff; color: var(--brand-700, #1b4214); border-color: transparent; }
.gl-tools button.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.gl-jump { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-jump a { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.gl-jump a:hover { border-color: var(--brand); color: var(--brand); }
.gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .gl-grid { grid-template-columns: 1fr; } }
.gl-card { border-top: 4px solid var(--brand); scroll-margin-top: 90px; }
.gl-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gl-hd h2 { margin: 0; flex: 1; font-size: 18px; }
.gl-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--brand-50, var(--bg-2)); flex: none; }
.gl-what { margin: 6px 0; line-height: 1.5; }
.gl-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.gl-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gl-edit-top { display: flex; gap: 8px; align-items: center; }
.gl-edit-top input { flex: 1; font-weight: 600; }
.gl-icon-pick { width: 72px !important; font-size: 18px; }

/* Cohort onboarding readiness */
.cr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); font-weight: 500; }
.cr-chip.on { border-color: var(--brand); background: var(--brand-50, var(--bg-2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.cr-count { margin-left: 6px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.cr-card { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.cr-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cr-hd h2 { margin: 0 0 2px; }
.cr-big { text-align: right; } .cr-big b { display: block; font-size: 28px; color: var(--brand); line-height: 1; }
.cr-need { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cr-need-chip { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--amber, #c98a00) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--amber, #c98a00) 35%, transparent); }
.cr-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cr-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.cr-table th { position: sticky; top: 0; background: var(--bg-2); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); padding: 9px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.cr-table td { padding: 8px; border-bottom: 1px solid var(--line-2); text-align: center; }
.cr-table tr:last-child td { border-bottom: 0; }
.cr-table .cr-name { text-align: left; position: sticky; left: 0; background: var(--card); min-width: 170px; z-index: 1; border-right: 1px solid var(--line-2); }
.cr-table th.cr-name { background: var(--bg-2); z-index: 2; }
.cr-cell input { width: 20px !important; height: 20px; min-height: 0; padding: 0; cursor: pointer; accent-color: var(--brand); }
.cr-cell.ok { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.cr-prog { position: relative; display: inline-flex; width: 74px; height: 18px; border-radius: 999px; background: var(--bg-2); overflow: hidden; vertical-align: middle; }
.cr-prog > span { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--brand) 35%, transparent); }
.cr-prog.full > span { background: var(--brand); }
.cr-prog em { position: relative; width: 100%; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; }
.cr-prog.full em { color: #fff; }
.cr-table .cr-last-h { min-width: 230px; text-align: left; }
.cr-table .cr-last { text-align: left; min-width: 230px; max-width: 320px; }
.cr-last-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.cr-last .sm { margin-top: 4px; }