/* People page kit (Richard, 2026-10-29: "a full on redesign of every page, of
   every sub tab, sub page, every single little piece of this people tab").

   Every People page is built from the same parts so the tab reads as one
   product instead of twenty pages from different years:
     .pp-head      page header: section name, title, one line of help, buttons
     .pp-tabs      sub-tabs under the header
     .pp-toolbar   search box + filter chips + the page's own buttons
     .pp-pager     "1-25 of 312" with Previous / Next
     .pp-menu      one "..." menu per row (defined in people.html, with the
                   Directory that introduced it)
     .pp-section   a titled card that groups related settings
     .pp-split     a page with its own small menu on the left (Reports,
                   Training settings)
     .pp-empty     a real empty state: what is missing and what to do

   Loaded AFTER the page's own <style> block, so at equal specificity these
   win: the old shared classes (.hr-card, table.hr-table, .btn, .tc-subtabs,
   .modal, .empty-state) get the new look on every page at once. Tokens only,
   both themes, no shadows on cards (design-system-v2.md 4). */

/* ---- Base: the old shared classes, new look ----------------------------- */
.hr-content { font-size: var(--text-base); }
.hr-panel .hr-card {
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-4); border: 1px solid var(--line-2); background: var(--panel);
}
.hr-panel .hr-card h2 { font-size: var(--text-xl); line-height: var(--lh-tight); margin: 0 0 var(--s-2); }
.hr-panel .hr-card h3 { font-size: var(--text-lg); line-height: var(--lh-snug); margin: 0 0 var(--s-3); gap: var(--s-3); }
.hr-panel .hr-card p.help, .hr-panel p.help { color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-normal); }

.hr-panel .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 38px; padding: 0 var(--s-4); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.hr-panel .btn.sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--text-xs); }
.hr-panel .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-brand, #fff); }
.hr-panel .btn.ghost { color: var(--ink-2); }
.hr-panel .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* `.btn` sets display: inline-flex, which beats the browser's [hidden]
   (ledger L145). */
.hr-panel .btn[hidden] { display: none; }

.hr-panel .chip { padding: 2px var(--s-2); font-size: var(--text-xs); line-height: 1.5; }
.hr-panel .status-pill { padding: 2px var(--s-3); font-size: var(--text-xs); line-height: 1.5; white-space: nowrap; }

.hr-panel table.hr-table { font-size: var(--text-sm); }
.hr-panel table.hr-table th {
  padding: var(--s-3) var(--s-4); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.hr-panel table.hr-table th:first-child { border-top-left-radius: var(--r-md); }
.hr-panel table.hr-table th:last-child { border-top-right-radius: var(--r-md); }
.hr-panel table.hr-table td { padding: var(--s-3) var(--s-4); vertical-align: middle; line-height: var(--lh-snug); }
.hr-panel table.hr-table tr:hover td { background: var(--surface-2); }
.hr-panel table.hr-table td.num, .hr-panel table.hr-table th.num { text-align: right; }
.hr-panel table.hr-table .nowrap, .hr-panel table.hr-table td.num { white-space: nowrap; }
.hr-panel table.hr-table td.pp-menu-cell { width: 1%; text-align: right; white-space: nowrap; }
.hr-panel .pp-table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.hr-panel .pp-table-wrap table.hr-table tr:last-child td { border-bottom: 0; }

/* Old sub-tabs (Team clock, Time off, Policies) get the same look as .pp-tabs. */
.hr-panel .tc-subtabs, .pp-tabs {
  display: flex; gap: var(--s-1); flex-wrap: wrap; border-bottom: 1px solid var(--line-2);
  margin: 0 0 var(--s-5); padding: 0;
}
.hr-panel .tc-subtabs button, .pp-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4); margin-bottom: -1px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.hr-panel .tc-subtabs button:hover:not(.active), .pp-tab:hover:not(.is-active) { color: var(--ink); }
.hr-panel .tc-subtabs button.active, .pp-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.hr-panel .tc-subtabs button:focus-visible, .pp-tab:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; border-radius: var(--r-sm); }
.pp-tab-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700;
}
.pp-tab-count.is-alert { background: var(--danger); color: var(--on-brand, #fff); }

/* Dialogs: a title, quiet help text, roomy fields. */
.modal-back .modal { border-radius: var(--r-lg); padding: var(--s-6); border: 1px solid var(--line-2); }
.modal-back .modal h3 { font-size: var(--text-xl); margin: 0 0 var(--s-4); }
.modal-back .modal .help, .modal-back .modal .field-help { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-normal); margin: var(--s-1) 0 0; }
.modal-back .modal .actions { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }

.hr-panel .empty-state { padding: var(--s-8) var(--s-4); }

/* ---- Page header -------------------------------------------------------- */
.pp-head-text { min-width: 0; }
.pp-head-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ---- Toolbar: search, filter chips, buttons ----------------------------- */
.pp-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.pp-toolbar .pp-grow { flex: 1 1 auto; }
.pp-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.pp-search svg {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-3); pointer-events: none;
}
.pp-search input {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 var(--s-3) 0 36px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.pp-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pp-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 34px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--panel);
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.pp-chip:hover { border-color: var(--accent); color: var(--ink); }
.pp-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-brand, #fff); }
.pp-chip:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.pp-chip .pp-chip-n { opacity: .8; }
.pp-toolbar select, .pp-toolbar input[type="date"] {
  min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm);
}
.pp-result-count { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }

/* ---- Pager -------------------------------------------------------------- */
.pp-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-3);
}
.pp-pager-btns { display: flex; gap: var(--s-2); }
.pp-pager[hidden] { display: none; }

/* ---- Person cell: face + name + second line ----------------------------- */
.pp-person { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.pp-person-text { display: flex; flex-direction: column; min-width: 0; }
.pp-person-name { font-weight: 600; color: var(--ink); }
.pp-person-sub { font-size: var(--text-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.pp-avatar.is-sm { width: 28px; height: 28px; font-size: 11px; }

/* ---- Section card (settings pages) -------------------------------------- */
.pp-section { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); margin-bottom: var(--s-4); }
.pp-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6) var(--s-4); border-bottom: 1px solid var(--line-2);
}
.pp-section-head h3 { margin: 0; font-size: var(--text-lg); line-height: var(--lh-snug); }
.pp-section-head p { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-normal); max-width: 70ch; }
.pp-section-body { padding: var(--s-5) var(--s-6); }
.pp-section-body > :last-child { margin-bottom: 0; }
.pp-badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--s-2); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.pp-badge.is-live { background: var(--success-soft); color: var(--success-ink, var(--success)); }
.pp-badge.is-warn { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.pp-badge[hidden] { display: none; }

/* A setting row: what it is on the left, the control on the right. */
.pp-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px); gap: var(--s-4) var(--s-6); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.pp-setting:first-child { border-top: 0; padding-top: 0; }
.pp-setting:last-child { padding-bottom: 0; }
.pp-setting-label { font-weight: 600; color: var(--ink); }
.pp-setting-help { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--muted); line-height: var(--lh-normal); }
.pp-setting-control input:not([type="checkbox"]):not([type="radio"]), .pp-setting-control select {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit;
}
.pp-setting-control input:focus, .pp-setting-control select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; cursor: pointer; font-weight: 600; }
.pp-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
/* A checkbox drawn as an on/off switch. Still a real checkbox: label clicks,
   Space and .checked all behave as before. */
.pp-toggle {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; cursor: pointer;
  width: 44px; height: 24px; margin: 8px 0; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--line-2); transition: background var(--dur-fast, .12s) var(--ease, ease);
}
.pp-toggle::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line-2); transition: transform var(--dur-fast, .12s) var(--ease, ease);
}
.pp-toggle:checked { background: var(--accent); border-color: var(--accent); }
.pp-toggle:checked::before { transform: translateX(20px); border-color: var(--accent); }
.pp-toggle:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.pp-setting-control .pp-toggle { width: 44px; min-height: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { .pp-toggle, .pp-toggle::before { transition: none; } }
@media (max-width: 760px) { .pp-setting { grid-template-columns: 1fr; } }

/* ---- Split page: its own small menu on the left ------------------------- */
.pp-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.pp-subnav { position: sticky; top: var(--s-4); display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); padding: var(--s-2); }
.pp-subnav-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); text-align: left; cursor: pointer;
}
.pp-subnav-item:hover { background: var(--surface-2); color: var(--ink); }
.pp-subnav-item.is-active { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
.pp-subnav-item:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; }
.pp-subnav-item > span:first-child { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 0; }
.pp-subnav-sub { font-size: var(--text-xs); font-weight: 500; color: var(--ink-3); }
@media (max-width: 900px) {
  .pp-split { grid-template-columns: 1fr; }
  .pp-subnav { position: static; flex-direction: row; overflow-x: auto; }
  .pp-subnav-item { flex: 0 0 auto; }
}

/* ---- Stat tiles (report summaries, balances) ---------------------------- */
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.pp-stat { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--panel); padding: var(--s-4); }
.pp-stat-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); }
.pp-stat-value { margin-top: var(--s-1); font-size: var(--text-2xl); font-weight: 700; color: var(--ink); line-height: var(--lh-tight); }
.pp-stat-sub { margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }

/* ---- Empty state -------------------------------------------------------- */
.pp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-10) var(--s-4); color: var(--ink-3); }
.pp-empty svg { width: 32px; height: 32px; color: var(--ink-3); opacity: .7; }
.pp-empty-title { font-size: var(--text-md, var(--text-base)); font-weight: 700; color: var(--ink); }
.pp-empty-text { max-width: 46ch; font-size: var(--text-sm); line-height: var(--lh-normal); }
.pp-empty .btn { margin-top: var(--s-2); }

/* ===== Page styles. One region per area; keep each area's rules inside its
   own region so parallel work never edits the same lines. ================ */

/* --- area: team-clock, time off, team calendar --- */
/* These pages sit straight on the page background (no wrapping card), so
   every table, grid and list carries its own panel surface. */
#panel-team-clock .pp-table-wrap,
#panel-pto-review .pp-table-wrap { background: var(--panel); }
.hr-panel .btn.sm.tcs-nav-btn,
.hr-panel .btn.sm.tcal-nav-btn { width: 38px; padding: 0; }

/* Team clock > Now: one status card per person. The left edge says the
   state at a glance; the pill says it in words. */
.tcn-status-bar { margin-top: calc(-1 * var(--s-2)); }
.tcn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.tcn-card {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--s-4); border: 1px solid var(--line-2); border-left: 4px solid var(--line-2);
  border-radius: var(--r-lg); background: var(--panel);
}
.tcn-card.is-in { border-left-color: var(--success); }
.tcn-card.is-break, .tcn-card.is-lunch { border-left-color: var(--warn); }
.tcn-card.is-out { border-left-color: var(--accent); }
.tcn-card.is-absent { border-left-color: var(--danger); }
.tcn-top { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.tcn-who { flex: 1 1 auto; min-width: 0; }
.tcn-name-row { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; min-width: 0; }
.tcn-name {
  max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--text-base); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcn-meta { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcn-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--surface-3); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.tcn-status.is-in { background: var(--success-soft); color: var(--success-ink, var(--success)); }
.tcn-status.is-break, .tcn-status.is-lunch { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.tcn-status.is-out { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
.tcn-status.is-absent, .tcn-status.is-over { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }
.tcn-times {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2);
  margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2);
}
.tcn-times div { min-width: 0; }
.tcn-times dt { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.tcn-times dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.tcn-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.tcn-shift { min-width: 0; font-size: var(--text-xs); color: var(--ink-3); }
.tcn-actions { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; }

/* Team clock > Shift schedule: a week of compact time pills. The policy name
   is said once, under the person; today is a quiet tint, the weekend is not
   painted, an empty day is blank. The name column stays put on a sideways
   scroll. */
.tcs-week-nav { display: inline-flex; align-items: center; gap: var(--s-1); }
.tcs-week-label { min-width: 132px; text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
.tcs-scroll { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); }
.tcs-grid { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.tcs-grid th, .tcs-grid td { padding: var(--s-2); border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.tcs-grid tbody tr:last-child > * { border-bottom: 0; }
.tcs-grid thead th { background: var(--surface-2); color: var(--ink-3); font-weight: 600; }
.tcs-grid thead th.tcs-day { min-width: 84px; border-bottom: 2px solid transparent; }
.tcs-day-name { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.tcs-day-num { display: block; font-size: var(--text-lg); font-weight: 700; line-height: var(--lh-tight); color: var(--ink); }
.tcs-grid thead th.is-weekend .tcs-day-num { color: var(--ink-3); }
.tcs-grid thead th.is-today { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-bottom-color: var(--accent); }
.tcs-grid thead th.is-today .tcs-day-name,
.tcs-grid thead th.is-today .tcs-day-num { color: var(--accent-ink, var(--accent)); }
.tcs-grid td.is-today { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.tcs-grid th.tcs-emp {
  position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 260px;
  text-align: left; font-weight: 400; background: var(--panel); border-right: 1px solid var(--line-2);
}
.tcs-grid thead th.tcs-emp { z-index: 2; background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.tcs-grid th.tcs-emp .pp-person-sub { max-width: 170px; }
.tcs-grid td.tcs-cell { padding: 4px; }
.tcs-cell-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--r-md); background: transparent;
  font: inherit; color: inherit; cursor: pointer;
}
.tcs-cell-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tcs-cell-btn:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; }
.tcs-cell-in { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.tcs-pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s-2); border: 1px solid transparent;
  border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink, var(--accent));
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.tcs-pill.is-other { background: var(--surface-3); color: var(--ink); }
.tcs-pill.is-override { border-style: dashed; border-color: currentColor; }
.tcs-off { font-size: var(--text-xs); color: var(--ink-3); }
.tcs-add { font-size: var(--text-lg); line-height: 1; color: var(--ink-3); opacity: 0; }
.tcs-cell-btn:hover .tcs-add, .tcs-cell-btn:focus-visible .tcs-add { opacity: 1; }
.tcs-help { margin: var(--s-2) 0 0; font-size: var(--text-xs); }

/* Team clock > Exceptions: one card per issue, the fix right on it. */
.tce-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-3); }
.tce-card {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--s-4); border: 1px solid var(--line-2); border-left: 4px solid var(--ink-3);
  border-radius: var(--r-lg); background: var(--panel);
}
.tce-card.is-open-entry { border-left-color: var(--danger); }
.tce-card.is-overtime-pending, .tce-card.is-missing-lunch { border-left-color: var(--warn); }
.tce-card.is-out-of-shift-pending { border-left-color: var(--info, var(--accent)); }
.tce-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.tce-who { flex: 1 1 auto; min-width: 0; }
.tce-name { font-weight: 700; color: var(--ink); }
.tce-sub { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-3); }
.tce-type {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--s-2); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700;
}
.tce-type.is-open-entry { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }
.tce-type.is-overtime-pending, .tce-type.is-missing-lunch { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.tce-type.is-out-of-shift-pending { background: var(--info-soft, var(--accent-soft)); color: var(--info, var(--accent)); }
.tce-desc { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--ink-2); }
.tce-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tce-note { margin: 0; }
.tce-dismiss {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -6px -6px 0 0; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.tce-dismiss svg { width: 16px; height: 16px; }
.tce-dismiss:hover { background: var(--surface-2); color: var(--ink); }
.tce-dismiss:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; }

/* Team clock > Entries: filters, the table, a pager. */
.tcx-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.tcx-row { cursor: pointer; }
.tcx-row:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; }
.tcx-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: var(--success); vertical-align: middle; }
.tcx-open { font-weight: 600; color: var(--success-ink, var(--success)); }
.tcx-status, .tcx-flag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--s-2); margin: 2px 4px 2px 0;
  border-radius: var(--r-full); background: var(--surface-3); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.tcx-flag.is-warn { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.tcx-flag.is-danger { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }

/* Time-off requests: policy dot + name, dates that never wrap, one
   "Decided" column, quiet notes. */
.pto-policy, .pto-bal { --pc-dot: var(--pc, var(--ink-3)); }
.pto-policy { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pto-policy::before, .pto-bal::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-dot); }
.pto-when { font-weight: 600; color: var(--ink); }
.pto-sub { display: flex; align-items: center; gap: var(--s-1) var(--s-3); flex-wrap: wrap; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-3); }
.pto-by { font-size: var(--text-xs); color: var(--ink-3); }
.pto-muted { color: var(--ink-3); }
.pto-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 260px; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--ink-3);
}
.pto-chips { display: inline-flex; gap: var(--s-1); flex-wrap: wrap; }
.pto-decide { display: inline-flex; gap: var(--s-2); white-space: nowrap; }
.pto-decide-col { width: 1%; }
.pto-person-line { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pto-bals { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pto-bal {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface);
  font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap;
}
.pto-bal strong { color: var(--ink); }
.hr-panel .pto-table .status-pill.cancelled { background: var(--surface-3); color: var(--ink-3); }
.pto-adjust-row { padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line-2); }
.pto-adjust-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pto-adjust-preview { min-height: 1em; margin-top: var(--s-1); font-size: var(--text-xs); }
.pto-adjust-preview.is-bad { color: var(--danger); }
#pto-hist-search, [data-hist-policy] { min-width: 0; }

/* Team calendar (its own page and the Time-off Calendar tab). */
.tcal-nav { display: inline-flex; align-items: center; gap: var(--s-1); }
.tcal-title { margin: 0; font-size: var(--text-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--ink); white-space: nowrap; }
.tcal-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: calc(-1 * var(--s-1)) 0 var(--s-3); font-size: var(--text-xs); color: var(--ink-3); }
.tcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tcal-key { display: inline-block; width: 18px; height: 12px; border-radius: 3px; box-sizing: border-box; }
.tcal-key.is-approved { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-left: 3px solid var(--accent); }
.tcal-key.is-pending { border: 1px dashed var(--accent); }
.tcal-key.is-holiday { background: var(--brand-mint-soft, var(--success-soft)); border-left: 3px solid var(--brand-mint, var(--success)); }
.tcal-key.is-event { background: var(--surface-3); }
.tcal { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.tcal-head, .tcal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tcal-dow {
  padding: var(--s-2) var(--s-3); background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3);
}
.tcal-day {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 116px; padding: var(--s-2);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.tcal-body > .tcal-day:nth-child(7n) { border-right: 0; }
.tcal-body > .tcal-day:nth-last-child(-n+7) { border-bottom: 0; }
.tcal.is-week .tcal-day { min-height: 280px; }
.tcal-day.is-other { background: var(--surface-2); }
.tcal-day.is-other .tcal-num { color: var(--ink-3); }
.tcal-day.is-today { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.tcal-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px;
  border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.tcal-day.is-today .tcal-num { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 700; }
.tcal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcal-pill {
  display: block; width: 100%; box-sizing: border-box; min-height: 24px; padding: 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink);
  font: inherit; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.tcal-pill { cursor: pointer; }
button.tcal-pill:hover { border-color: var(--accent); }
.tcal-pill:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 1px; }
.tcal-pill.is-approved { background: color-mix(in srgb, var(--pc, var(--accent)) 20%, var(--panel)); border-left: 3px solid var(--pc, var(--accent)); }
.tcal-pill.is-pending { background: transparent; border: 1px dashed var(--pc, var(--accent)); color: var(--ink-2); }
.tcal-pill.is-holiday {
  background: var(--brand-mint-soft, var(--success-soft)); border-left: 3px solid var(--brand-mint, var(--success));
  /* --ink, not the mint ink: that one is a dark green that vanished on the
     dark theme's mint wash. */
  color: var(--ink);
}
.tcal-pill.is-event { background: var(--surface-3); color: var(--ink-2); }
.tcal-more {
  align-self: flex-start; min-height: 24px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--accent-ink, var(--accent)); cursor: pointer;
}
.tcal-more:hover { text-decoration: underline; }
.tcal-more:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 1px; }
.tcal-loading { padding: var(--s-6) 0; text-align: center; }
@media (max-width: 760px) {
  .tcal-day { min-height: 84px; padding: 4px; }
  .tcal-dow { padding: var(--s-2) 2px; text-align: center; }
  .tcal-pill { padding: 1px 3px; }
}
/* The day list and the request card open in a dialog (outside .hr-panel). */
.tcal-daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tcal-daylist li { border-top: 1px solid var(--line-2); }
.tcal-daylist li:first-child { border-top: 0; }
.tcal-dl-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 52px;
  padding: var(--s-2); border: 0; border-radius: var(--r-md); background: none; font: inherit; color: var(--ink); text-align: left;
}
button.tcal-dl-row { cursor: pointer; }
button.tcal-dl-row:hover { background: var(--surface-2); }
.tcal-dl-row .tcal-pill { width: auto; max-width: 60%; }
.tcal-pop { display: flex; flex-direction: column; gap: var(--s-3); }
.tcal-pop-tags { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tcal-pop-type { width: auto; display: inline-block; }
.tcal-pop-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; }
.tcal-pop-kv dt { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.tcal-pop-kv dd { margin: 2px 0 0; color: var(--ink); }
.tcal-pop-notes { margin: 0; font-size: var(--text-sm); color: var(--ink-3); white-space: pre-wrap; }
.tcal-pop-note { margin-top: var(--s-3); }
/* --- end area: team-clock, time off, team calendar --- */


/* --- area: directory, disciplinary, reports --- */
/* Directory, Disciplinary (+ the File strike dialog), Reports, and the
   employee profile the Directory opens. Tokens only, both themes. */

/* A link that looks like a button (Directory: "Add a person"). */
.hr-panel a.btn, .hr-panel a.btn:hover { text-decoration: none; }
.hr-panel .pp-table-wrap[hidden] { display: none; }
/* A second line under a cell's main text (offense, cert type). */
.hr-table td > .pp-person-sub { display: block; max-width: 340px; }
.strk-offense { display: block; font-weight: 600; color: var(--ink); }

/* ---- Directory ---------------------------------------------------------- */
.dir-name-line { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dir-name-line .chip { margin-left: 0; }
.dir-more { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); margin-left: var(--s-1); }
.dir-inactive { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hr-panel table.dir-table tr.is-inactive td { color: var(--ink-3); }
.hr-panel table.dir-table tr.is-inactive .pp-avatar { opacity: .6; }

/* ---- Disciplinary ------------------------------------------------------- */
.hr-panel table.hr-table tr.is-draft td { background: var(--warn-soft); }
.strk-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.strk-detail-text { margin: 0 0 var(--s-4); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.strk-links { margin: 0 0 var(--s-2); padding-left: var(--s-5); font-size: var(--text-sm); overflow-wrap: anywhere; }
.strk-links li + li { margin-top: var(--s-1); }

/* Facts as a definition list in two columns: small muted label over the
   value. Used by the profile tabs and the strike details dialog. */
.emp-kv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6);
  margin: 0 0 var(--s-4); font-size: var(--text-sm); align-items: start;
}
.emp-section .emp-kv { margin-bottom: 0; }
.emp-kv-item { min-width: 0; }
.emp-kv-item dt { margin: 0 0 2px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.emp-kv-item dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) { .emp-kv { grid-template-columns: 1fr; } }

/* ---- File strike dialog: four short groups ------------------------------ */
.fs-form { display: flex; flex-direction: column; gap: var(--s-5); }
.fs-group { display: flex; flex-direction: column; gap: var(--s-3); }
.fs-group + .fs-group { padding-top: var(--s-5); border-top: 1px solid var(--line-2); }
.fs-group-title {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3);
}
.fs-form .fs-group-title { margin-bottom: 0; }
.fs-form .form-grid { margin-bottom: 0; align-items: start; }
.fs-form .field { margin-bottom: 0; gap: var(--s-1); }
.fs-form .field[hidden] { display: none; }
.fs-form .field label, .fs-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.fs-form .field input:not([type="checkbox"]):not([type="radio"]), .fs-form .field select {
  width: 100%; box-sizing: border-box; min-height: 40px;
}
.fs-form .field textarea { width: 100%; box-sizing: border-box; }
.fs-form .help { margin: 0; }
.fs-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 24px; }
.fs-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--s-1);
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--accent);
}
.fs-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fs-link:hover { text-decoration: underline; }
.fs-link:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.fs-req, .fs-opt {
  display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: middle;
}
.fs-req { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }
.fs-opt { background: var(--surface-3); color: var(--ink-3); }
.fs-form .field .fs-switch { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.fs-form .field .fs-switch input { width: 18px; height: 18px; padding: 0; margin: 0; border: 0; }
.fs-person {
  display: flex; align-items: center; min-height: 40px; padding: var(--s-1) var(--s-3); box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
}
.fs-form .field-counter { font-size: var(--text-xs); color: var(--ink-3); }
.fs-form .field-counter.warn { color: var(--danger); }
.fs-grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* The certification dialogs' error line. */
.form-err { min-height: 1.2em; margin-top: var(--s-2); font-size: var(--text-sm); color: var(--danger); }

/* ---- Reports: one report at a time -------------------------------------- */
.rpt-range { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.rpt-custom { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.rpt-custom label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.rpt-custom input[type="date"] {
  min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm);
}
.rpt-custom input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rpt-split { grid-template-columns: 250px minmax(0, 1fr); }
.rpt-subnav .pp-subnav-item {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 52px; padding: var(--s-2) var(--s-3);
}
.rpt-nav-label { font-weight: 600; }
.rpt-subnav .pp-subnav-item.is-active .pp-subnav-sub { color: var(--accent-ink, var(--accent)); }
.rpt-main { min-width: 0; }
.rpt-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.rpt-title-text { min-width: 0; }
.rpt-title-row h3 { margin: 0; font-size: var(--text-xl); line-height: var(--lh-tight); color: var(--ink); }
.rpt-when { margin-left: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.rpt-title-row .help { margin: var(--s-1) 0 0; max-width: 72ch; }
.rpt-loading {
  padding: var(--s-10) var(--s-4); text-align: center; font-size: var(--text-sm); color: var(--ink-3);
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
}
.rpt-cap { margin: 0 0 var(--s-3); }
.hr-panel table.hr-table th.rpt-th { padding: 0; }
.rpt-sort {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; padding: 0 var(--s-4);
  border: 0; background: transparent; cursor: pointer; text-align: left; white-space: nowrap;
  font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
th.num .rpt-sort { justify-content: flex-end; }
.rpt-sort:hover, .rpt-sort.is-on { color: var(--ink); }
.rpt-sort svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rpt-sort:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; border-radius: var(--r-sm); }
@media (max-width: 900px) {
  .rpt-split { grid-template-columns: 1fr; }
  .rpt-subnav .pp-subnav-sub { display: none; }
  .rpt-subnav .pp-subnav-item { min-height: 40px; }
  .rpt-range { align-items: stretch; }
  .rpt-custom { justify-content: flex-start; }
}

/* ---- Employee profile (the Directory's dialog) -------------------------- */
.emp-drawer-head { gap: var(--s-4); padding: var(--s-5) var(--s-6); }
.emp-avatar { width: 56px; height: 56px; display: block; background: none; }
.emp-avatar .pp-avatar { width: 100%; height: 100%; font-size: var(--text-lg); }
.emp-drawer-who { min-width: 0; }
.emp-name-line { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.emp-name { font-size: var(--text-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--ink); }
.emp-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--ink-3); }
.emp-status:empty { display: none; }
.emp-drawer-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: var(--r-md); color: var(--ink-3);
}
.emp-drawer-close svg { width: 20px; height: 20px; }
.emp-drawer-close:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.emp-drawer .emp-drawer-tabs.pp-tabs {
  flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0 var(--s-4);
  background: var(--panel); scrollbar-width: thin;
}
.emp-drawer .emp-tab.pp-tab { flex: 0 0 auto; padding: 0 var(--s-4); font-size: var(--text-sm); }
.emp-drawer-body { padding: var(--s-5) var(--s-6); background: var(--surface-2); }
@media (max-width: 640px) { .emp-drawer-head, .emp-drawer-body { padding-left: var(--s-4); padding-right: var(--s-4); } }

.emp-section {
  margin-bottom: var(--s-4); padding: var(--s-5); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); background: var(--panel);
}
.emp-section:last-child { margin-bottom: 0; }
.emp-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.emp-section-head .help { margin: 2px 0 0; color: var(--muted); font-size: var(--text-xs); }
.emp-section-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.emp-section h4 {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0;
  font-size: var(--text-md, var(--text-base)); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.emp-section .pp-empty { padding: var(--s-6) var(--s-4); }
.emp-section .pp-stats { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.emp-section .pp-stat-value { font-size: var(--text-xl); }
.emp-balances .pp-stat-label { display: flex; align-items: center; letter-spacing: 0; text-transform: none; font-size: var(--text-sm); color: var(--ink-2); }
.emp-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.emp-dept { display: inline-flex; align-items: center; margin-right: var(--s-3); }
.emp-note { margin: 0; }
.emp-loading { padding: var(--s-8) var(--s-4); text-align: center; font-size: var(--text-sm); color: var(--ink-3); }

.emp-checklist { list-style: none; margin: 0; padding: 0; }
.emp-check { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: var(--s-3) 0; border-top: 1px solid var(--line-2); }
.emp-check:first-child { border-top: 0; padding-top: 0; }
.emp-check:last-child { padding-bottom: 0; }
.emp-check-text { display: flex; flex-direction: column; min-width: 0; }
.emp-check-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.emp-check-sub { font-size: var(--text-xs); color: var(--ink-3); }
.emp-check.is-missing .pp-badge { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }

.emp-strike-text { display: block; max-width: 56ch; margin-top: var(--s-1); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--ink-2); white-space: pre-wrap; }
.emp-doc-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.emp-doc-link svg { width: 14px; height: 14px; }

.emp-audit-list { list-style: none; margin: 0; padding: 0; gap: 0; }
.emp-audit-row { padding: var(--s-3) 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: transparent; }
.emp-audit-row:first-child { border-top: 0; padding-top: 0; }

/* The profile sits outside .hr-panel, so it gets the kit's table and button
   look here. */
.emp-drawer table.hr-table { font-size: var(--text-sm); }
.emp-drawer table.hr-table th {
  padding: var(--s-2) var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.emp-drawer table.hr-table td { padding: var(--s-3); vertical-align: middle; line-height: var(--lh-snug); }
.emp-drawer table.hr-table td.num, .emp-drawer table.hr-table th.num { text-align: right; }
.emp-drawer table.hr-table .nowrap { white-space: nowrap; }
.emp-drawer table.hr-table td.pp-menu-cell { width: 1%; text-align: right; white-space: nowrap; }
.emp-drawer .pp-table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.emp-drawer .pp-table-wrap table.hr-table tr:last-child td { border-bottom: 0; }
.emp-drawer .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 36px; white-space: nowrap; }
.emp-drawer .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- end area: directory, disciplinary, reports --- */


/* --- area: my clock, my time off, my strikes, my profile --- */
/* The four pages every employee sees. A CSR or tech uses these daily, so
   they stay calm: one hero per page, quiet help, one blue button. */

/* Shared by the four pages */
.me-label {
  margin: 0 0 var(--s-2); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3);
}
.me-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); padding: var(--s-2) var(--s-6); margin-bottom: var(--s-4); }
.me-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .me-cols { grid-template-columns: 1fr; } }
.me-notice {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border: 1px solid var(--line-2); border-left: 4px solid var(--warn); border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--warn-ink, var(--ink)); font-size: var(--text-sm); line-height: var(--lh-normal);
}
.me-notice > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.me-notice-text { flex: 1 1 18rem; min-width: 0; }
.me-notice-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.me-icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-md); background: transparent; color: inherit; cursor: pointer;
}
.me-icon-btn:hover { background: var(--panel); }
.me-icon-btn:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.me-icon-btn svg { width: 18px; height: 18px; }
.hr-panel .pp-stat.is-danger .pp-stat-value { color: var(--danger); }
.me-list { list-style: none; margin: 0; padding: 0; }
.me-list > li {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px;
  padding: var(--s-3) 0; border-top: 1px solid var(--line-2);
}
.me-list > li:first-child { border-top: 0; }
.me-card > .me-list > li:first-child { padding-top: var(--s-3); }
.me-list > li.is-past { opacity: .6; }
.me-list-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-list-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-list-sub { font-size: var(--text-xs); color: var(--ink-3); }
.me-date {
  flex: 0 0 48px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--panel); line-height: 1.1;
}
.me-date-mon { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--danger); }
.me-date-day { font-size: var(--text-lg); font-weight: 700; color: var(--ink); }

/* My time clock: the punch card is the hero */
.mc-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--s-6); align-items: center;
  padding: var(--s-8) var(--s-8) var(--s-6); margin-bottom: var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--panel);
}
.mc-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line-2); }
.mc-hero.is-in { background: linear-gradient(135deg, var(--success-soft), var(--panel) 65%); }
.mc-hero.is-in::before { background: var(--success); }
.mc-hero.is-break { background: linear-gradient(135deg, var(--warn-soft), var(--panel) 65%); }
.mc-hero.is-break::before { background: var(--warn); }
.mc-hero-main { min-width: 0; }
.mc-state {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3);
  border-radius: var(--r-full); background: var(--surface-3); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.mc-hero.is-in .mc-state { background: var(--success-soft); color: var(--success-ink, var(--success)); }
.mc-hero.is-in .mc-dot { background: var(--success); }
.mc-hero.is-break .mc-state { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.mc-hero.is-break .mc-dot { background: var(--warn); }
.mc-timer-label { margin-top: var(--s-4); font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.mc-elapsed {
  margin-top: var(--s-1); font-size: var(--text-4xl); font-weight: 700; line-height: 1.05;
  letter-spacing: var(--tracking-tight); color: var(--ink);
}
.mc-elapsed.is-over { color: var(--danger); }
.mc-title { margin-top: var(--s-4); font-size: var(--text-3xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
.mc-sub { margin-top: var(--s-2); font-size: var(--text-base); color: var(--ink-2); }
.mc-shift { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--ink-3); }
.mc-actions { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hr-panel .mc-actions .btn.mc-main { width: 100%; min-height: 56px; border-radius: var(--r-lg); font-size: var(--text-md, var(--text-base)); }
.mc-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.hr-panel .mc-actions-row .btn { min-height: 44px; }
.mc-note label { display: block; margin-bottom: var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.mc-note-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--text-sm);
}
.mc-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mc-punches .mc-punch-hours { flex: 0 0 auto; font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 760px) {
  .mc-hero { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) var(--s-5) var(--s-5); }
  .mc-elapsed { font-size: var(--text-3xl); }
  .mc-title { font-size: var(--text-2xl); }
}

/* My time clock: the Timesheet tab (the old .tw-* week view, new look) */
.mc-week { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); padding: var(--s-5) var(--s-6); }
.mc-week-bar { margin-bottom: var(--s-4); }
.mc-week-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
#panel-my-clock .tw-range-label { min-width: 132px; text-align: center; font-size: var(--text-base); font-weight: 700; color: var(--ink); white-space: nowrap; }
#panel-my-clock .tw-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--panel); color: var(--ink-2);
  font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer;
}
#panel-my-clock .tw-nav-btn:hover { border-color: var(--accent); color: var(--ink); background: var(--panel); }
#panel-my-clock .tw-nav-btn svg { width: 16px; height: 16px; }
.mc-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
#panel-my-clock .tw-view-btn {
  min-height: 36px; padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
#panel-my-clock .tw-view-btn:hover { color: var(--ink); background: transparent; }
#panel-my-clock .tw-view-btn.active { background: var(--panel); border-color: var(--line-2); color: var(--ink); }
#panel-my-clock .pp-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
#panel-my-clock .tw-week-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
#panel-my-clock .tw-day-row {
  grid-template-columns: 96px minmax(0, 1fr) 72px; gap: var(--s-4); min-height: 60px;
  padding: var(--s-3) var(--s-4); border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: var(--panel);
}
#panel-my-clock .tw-day-row:first-child { border-top: 0; }
#panel-my-clock .tw-day-row.today { background: var(--accent-soft); box-shadow: none; }
#panel-my-clock .tw-day-row.weekend { background: var(--surface-2); }
#panel-my-clock .tw-day-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--ink-3); }
#panel-my-clock .tw-day-label .dow { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
#panel-my-clock .tw-day-label .dnum { font-size: var(--text-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
#panel-my-clock .tw-day-row.today .tw-day-label .dow,
#panel-my-clock .tw-day-row.today .tw-day-label .dnum {
  display: block; min-width: 0; padding: 0; border-radius: 0; background: none; text-align: left; color: var(--accent-ink, var(--accent));
}
#panel-my-clock .tw-bar-wrap { height: 28px; border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
#panel-my-clock .tw-day-row.weekend .tw-bar-wrap { background: var(--surface-3); }
#panel-my-clock .tw-bar-wrap:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
#panel-my-clock .tw-bar-wrap:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
#panel-my-clock .tw-bar-wrap.is-list {
  height: auto; min-height: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  padding: var(--s-1) var(--s-2); background: transparent; font-size: var(--text-sm); color: var(--ink-2);
}
#panel-my-clock .tw-bar-wrap.is-list .muted { font-size: var(--text-sm); }
#panel-my-clock .tw-punch { white-space: nowrap; }
#panel-my-clock .tw-bar-shift { background: var(--accent-soft); border-left: 1px dashed var(--accent); border-right: 1px dashed var(--accent); }
#panel-my-clock .tw-bar-actual { top: 7px; bottom: 7px; border-radius: 3px; background: var(--success); }
#panel-my-clock .tw-bar-actual.open { background: var(--warn); }
#panel-my-clock .tw-bar-dot { width: 10px; height: 10px; border: 2px solid var(--panel); box-shadow: none; }
#panel-my-clock .tw-bar-dot.in { background: var(--success); }
#panel-my-clock .tw-bar-dot.out { background: var(--danger); }
#panel-my-clock .tw-bar-empty { font-size: var(--text-xs); color: var(--ink-3); }
#panel-my-clock .tw-bar-tag { font-size: var(--text-xs); font-weight: 700; padding: 1px var(--s-2); border-radius: var(--r-full); }
#panel-my-clock .tw-bar-tag.weekend { background: transparent; color: var(--ink-3); }
#panel-my-clock .tw-bar-tag.holiday { background: var(--info-soft); color: var(--accent-ink, var(--info)); }
#panel-my-clock .tw-bar-tag.pto { background: var(--success-soft); color: var(--success-ink, var(--success)); }
#panel-my-clock .tw-bar-tag.absent { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }
#panel-my-clock .tw-day-hours .h { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
#panel-my-clock .tw-day-hours .l { font-size: var(--text-xs); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
#panel-my-clock .tw-late {
  display: inline-flex; margin: 2px 0 0; padding: 1px var(--s-2); border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--warn-soft); color: var(--warn-ink, var(--warn));
}
#panel-my-clock .tw-late.is-edited { background: var(--info-soft); color: var(--accent-ink, var(--info)); }
.mc-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--text-xs); color: var(--ink-3); }
.mc-legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.mc-swatch { display: inline-block; width: 16px; height: 8px; border-radius: 2px; background: var(--success); }
.mc-swatch.is-shift { height: 12px; background: var(--accent-soft); border: 1px dashed var(--accent); box-sizing: border-box; }
.mc-swatch.is-open { background: var(--warn); }
.hr-panel p.help.mc-week-help { margin: var(--s-2) 0 0; font-size: var(--text-xs); }
.hr-panel p.help.mc-loading { margin: 0; padding: var(--s-6) 0; text-align: center; }
@media (max-width: 640px) {
  .mc-week { padding: var(--s-4); }
  #panel-my-clock .tw-day-row { grid-template-columns: 72px minmax(0, 1fr) 52px; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
}

/* My time off */
.mt-tabbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line-2);
}
.hr-panel .mt-tabbar .pp-tabs { margin: 0; border-bottom: 0; }
.mt-year { display: flex; align-items: center; gap: var(--s-1); padding-bottom: var(--s-1); }
#panel-my-timeoff .pto-year-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--panel); color: var(--ink-2);
  font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer;
}
#panel-my-timeoff .pto-year-btn:hover { border-color: var(--accent); color: var(--ink); background: var(--panel); }
#panel-my-timeoff .pto-year-btn svg { width: 16px; height: 16px; }
#panel-my-timeoff .pto-year-label { min-width: 56px; padding: 0; text-align: center; font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.mt-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; vertical-align: 1px; }
.hr-panel .pp-setting-control.mt-num { text-align: right; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.hr-panel .pp-setting-control.mt-num.is-danger { color: var(--danger); }
#panel-my-timeoff .me-cols .pp-setting { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hr-panel p.help.mt-more { margin: var(--s-3) 0 0; }
.mt-reason { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mt-note { margin-top: 2px; max-width: 420px; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--ink-3); }

/* The request dialog (openRequestDialog). It lives in a .modal on <body>,
   so these hang off .mt-req, not the panel. */
.mt-req .mt-span { grid-column: 1 / -1; }
.mt-req .mt-required { color: var(--danger); }
.mt-req .mt-label-hint { font-weight: 400; font-size: var(--text-xs); color: var(--ink-3); }
.mt-req .field .help { margin: var(--s-1) 0 0; }
.mt-req > .help { margin: 0 0 var(--s-2); }
.mt-req .mt-hint {
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-normal);
}
.mt-req .mt-hint.is-warn { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.mt-req .mt-hint.is-danger { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }
.mt-req .mt-hint.mt-onbehalf { margin: 0 0 var(--s-3); }
.mt-req .mt-hint-sub { margin-top: var(--s-1); font-size: var(--text-xs); opacity: .85; }
.mt-req .mt-preview { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--ink-2); }
.mt-req .mt-staged { margin-top: var(--s-3); }
.mt-req .mt-staged .help { margin: 0 0 var(--s-1); }
.mt-req .mt-staged-list { display: flex; flex-direction: column; gap: var(--s-1); }
.mt-req .mt-staged-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--text-sm); }
.mt-req .mt-add-period { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line-2); }
.mt-req .mt-add-period .help { margin: var(--s-1) 0 0; }
/* .field and flex rows set display, which beats the browser's [hidden]. */
.mt-req [hidden] { display: none; }

/* My strikes */
.ms-ack-wrap {
  margin-bottom: var(--s-4); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-2); border-left: 4px solid var(--danger); border-radius: var(--r-lg); background: var(--panel);
}
.ms-ack-wrap > h3 { margin: 0 0 var(--s-1); font-size: var(--text-lg); line-height: var(--lh-snug); }
.hr-panel .ms-ack-wrap > p.help { margin: 0; max-width: 70ch; }
.ms-ack { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.ms-ack-title { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.ms-ack-num { margin-right: var(--s-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.ms-ack-meta { margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.ms-ack-details {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.ms-ack-evidence { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); }
.ms-ack-field { margin-top: var(--s-3); }
.ms-ack-field label { display: block; margin-bottom: var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.hr-panel .ms-ack-field p.help { margin: var(--s-1) 0 0; font-size: var(--text-xs); }
.ms-ack textarea, .ms-ack input[type="text"] {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--text-sm);
}
.ms-ack textarea { resize: vertical; }
.ms-ack textarea:focus, .ms-ack input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-ack-sign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: end; }
.ms-ack-confirm { font-weight: 500; }
.ms-ack-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 640px) { .ms-ack-sign { grid-template-columns: 1fr; } .ms-ack-wrap { padding: var(--s-4); } }

/* My profile */
.mp-id {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: var(--s-4); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel);
}
.mp-face {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-size: var(--text-2xl); font-weight: 700;
}
.mp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-id-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-name { font-size: var(--text-2xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
.mp-role { font-size: var(--text-base); color: var(--ink-2); }
.mp-email { font-size: var(--text-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.mp-photo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.mp-photo-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hr-panel .mp-photo p.help { margin: 0; font-size: var(--text-xs); }
#panel-my-profile .pp-setting { grid-template-columns: minmax(140px, 1fr) minmax(240px, 2fr); }
@media (max-width: 760px) { #panel-my-profile .pp-setting { grid-template-columns: 1fr; gap: var(--s-2); } }
#panel-my-profile .pp-setting-label { display: block; }
#panel-my-profile .pp-setting-help { font-size: var(--text-xs); }
.hr-panel .mp-switch { min-height: 40px; margin-top: var(--s-2); font-weight: 500; }
.mp-readonly { min-height: 40px; display: flex; align-items: center; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.mp-savebar {
  position: sticky; bottom: 0; z-index: var(--z-sticky, 10);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-2); padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel);
}
.mp-save-state { margin-right: auto; font-size: var(--text-sm); color: var(--ink-3); }
.mp-save-state.is-dirty { color: var(--warn-ink, var(--warn)); font-weight: 600; }
.mp-save-state.is-saved { color: var(--success-ink, var(--success)); font-weight: 600; }
@media (max-width: 640px) { .mp-id { padding: var(--s-4); } .mp-face { width: 72px; height: 72px; } }
/* --- end area: my clock, my time off, my strikes, my profile --- */


/* --- area: settings pages and audit log --- */
/* Departments, PTO policies, Shift policies, Disciplinary types, Holidays,
   Notification rules, Audit log (SettingsList mockup). One table per page,
   group header rows inside it, readable rows, one "..." menu. */
.pps-wrap { background: var(--panel); border-radius: var(--r-lg); }
.hr-panel .pps-table td { padding-top: var(--s-3); padding-bottom: var(--s-3); height: 52px; }
.hr-panel .pps-table tr.pps-group:hover th { background: var(--surface-2); }
.hr-panel .pps-table tr.pps-group th {
  padding: var(--s-2) var(--s-4); background: var(--surface-2); border-top: 1px solid var(--line-2);
  font-size: var(--text-sm); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink-2); text-align: left;
  border-radius: 0;
}
.pps-group-n { margin-left: var(--s-1); font-weight: 500; color: var(--ink-3); }
.hr-panel .pps-table tr.pps-row-off td { color: var(--ink-3); }
.hr-panel .pps-table tr.pps-row-off .pps-title { color: var(--ink-2); }

/* Name cell: optional colour dot, bold name, small second line. */
.pps-name { display: inline-flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.pps-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pps-title { font-size: var(--text-base); font-weight: 600; color: var(--ink); line-height: var(--lh-snug); }
.pps-title .pp-badge { margin-left: var(--s-1); vertical-align: 1px; }
.pps-main { display: block; color: var(--ink); }
.pps-sub { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-3); line-height: var(--lh-normal); }
.pps-muted { color: var(--ink-3); }
.pps-dot { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 5px; border-radius: var(--r-full); background: var(--ink-3); border: 1px solid var(--line-2); }

/* Severity badges (Disciplinary types). */
.pp-badge.pps-sev-medium { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.pp-badge.pps-sev-severe { background: var(--danger-soft); color: var(--danger-ink, var(--danger)); }

/* PTO policies: the secondary balance tools under the table, the caps grid. */
.pps-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel);
}
.pps-tools-text { flex: 1 1 320px; min-width: 0; }
.pps-tools-title { font-weight: 700; color: var(--ink); }
.hr-panel .pps-tools .help { margin: var(--s-1) 0 0; }
.hr-panel p.help.pps-lead { margin: 0 0 var(--s-3); }
.pps-cap-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 0; }
.pps-savebar { display: flex; justify-content: flex-end; margin-top: var(--s-2); }

/* Shift policies: Mon-Sun day chips. */
.pps-days { display: inline-flex; gap: 3px; }
.pps-day {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.pps-day.is-on { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }

/* Holidays: year navigation and the calendar badge. */
.pps-yearnav { display: inline-flex; align-items: center; gap: var(--s-2); }
.pps-yearnav .btn { min-width: 40px; min-height: 40px; padding: 0; }
.pps-year { min-width: 4ch; text-align: center; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.hr-panel .pps-table td.pps-cal-cell { width: 1%; padding-right: 0; }
.pps-cal {
  display: inline-flex; flex-direction: column; align-items: center; width: 44px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
}
.pps-cal-m { width: 100%; padding: 1px 0; text-align: center; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.pps-cal-d { padding: 2px 0 3px; font-size: var(--text-lg); font-weight: 700; color: var(--ink); line-height: 1.1; }
.pps-row-off .pps-cal-m { background: var(--surface-2); color: var(--ink-3); }

/* Notification rules: the sentence row and its on/off switch. */
.pps-rule-text { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-normal); max-width: 80ch; }
.pps-switch { font-weight: 600; color: var(--ink-2); }

/* Audit log: toolbar fields and the sentence rows. */
.pps-field { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.pps-audit-bar .pp-search { flex: 1 1 240px; }
.pps-audit-line { display: flex; align-items: flex-start; gap: var(--s-3); }
.pps-audit-body { min-width: 0; flex: 1 1 auto; }
.pps-audit-text { color: var(--ink-2); line-height: var(--lh-snug); }
.pps-audit-text strong { color: var(--ink); font-weight: 600; }
.hr-panel .pps-table td.pps-audit-when { width: 1%; color: var(--ink-3); vertical-align: top; }
.pps-audit-more { margin-top: var(--s-1); }
/* The area and the Details link share one line; open details take the full width. */
.pps-audit-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin-top: 2px; }
.pps-audit-meta .pps-sub { margin-top: 0; }
.pps-audit-meta .pps-audit-more { margin-top: 0; }
.pps-audit-meta .pps-audit-more[open] { flex-basis: 100%; }
.pps-audit-more summary {
  display: inline-flex; align-items: center; min-height: 40px; margin: -8px 0 -6px; cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; color: var(--accent);
}
.pps-audit-more summary:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; border-radius: var(--r-sm); }
.pps-audit-more dl {
  margin: var(--s-2) 0 0; padding: var(--s-3); display: grid; gap: var(--s-1);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--text-xs);
}
.pps-audit-more dl > div { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: var(--s-3); }
.pps-audit-more dt { color: var(--ink-3); font-weight: 600; }
.pps-audit-more dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; font-family: var(--font-mono, monospace); }
[data-audit-list][aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* Dialogs: fields grouped under short headings, quiet help. */
.modal-back .modal .pps-fieldset { margin: 0 0 var(--s-4); padding: 0 0 var(--s-4); border: 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.modal-back .modal .pps-fieldset:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.modal-back .modal .pps-fieldset legend {
  padding: 0; margin: 0 0 var(--s-3); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3);
}
.modal-back .modal .pps-fieldset .form-grid { margin-bottom: var(--s-2); }
.modal-back .modal .pps-fieldset .pp-switch + .help { margin: 0 0 var(--s-2); }
.modal .form-grid .pps-span { grid-column: 1 / -1; }
.modal-back .modal .pps-help-list { margin: var(--s-2) 0 0; padding-left: var(--s-4); display: grid; gap: var(--s-1); }
.pps-check-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pps-check-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface);
  font-size: var(--text-sm); color: var(--ink-2); cursor: pointer;
}
.modal-back .modal .field label.pps-check-chip { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
.pps-check-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
.pps-check-chip input { accent-color: var(--accent); }
.pps-check-row { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.pps-note { padding: var(--s-3); border-radius: var(--r-md); font-size: var(--text-sm); margin-top: var(--s-2); }
.pps-note.is-warn { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.pps-req { color: var(--danger); }
.modal-back .modal select.pps-multi { min-height: 120px; }
.modal-back .modal textarea[data-field="recipient_emails"] { resize: vertical; font-family: inherit; }

/* Shift policy dialog: one card per day, breaks inside it. */
.pps-day-row { margin-bottom: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.pps-day-row.is-off { background: var(--surface-2); }
.pps-day-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pps-day-toggle { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 64px; min-height: 40px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pps-day-fields { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; flex-wrap: wrap; }
.pps-day-fields[hidden], .pps-day-off[hidden], .pps-breaks[hidden] { display: none; }
.pps-day-off { font-style: italic; }
.pps-copy-to { margin-left: auto; font-size: var(--text-xs); }
.pps-time { width: 116px; font-family: inherit; }
.pps-breaks { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.pps-break-row {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--text-sm);
}
.pps-break-ico { display: inline-flex; color: var(--ink-3); }
.pps-break-ico svg { width: 18px; height: 18px; }
.pps-break-label { width: 140px; }
.pps-inline { align-items: center; gap: var(--s-2); }
.pps-inline-check { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-xs); color: var(--ink-2); }
.pps-num { width: 72px; }
.pps-break-type { font-size: var(--text-xs); }
.pps-break-del { margin-left: auto; }

@media (max-width: 760px) {
  .pps-audit-bar .pps-field { flex: 1 1 140px; }
  .pps-audit-bar .pps-field select, .pps-audit-bar .pps-field input { flex: 1 1 auto; min-width: 0; }
  .pps-audit-more dl > div { grid-template-columns: 1fr; gap: 0; }
  .pps-copy-to { margin-left: 0; }
}
/* --- end area: settings pages and audit log --- */


/* --- area: training --- */
/* Settings > Training: the shell (header + three tabs), the Settings view
   (sections with their own menu) and the course page (board 6). */
#panel-settings-training .lms-admin > .pp-tabs { margin-top: calc(-1 * var(--s-1)); }
.lms-set-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.lms-set-main .pp-section { margin-bottom: 0; }
.lms-set-main .lms-settings { display: flex; flex-direction: column; gap: var(--s-4); }
.lms-set-main .lms-settings[hidden], .lms-set-section[hidden] { display: none; }
.lms-set-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2);
}
.lms-set-bar .help { margin: 0; max-width: 62ch; }
.lms-set-main [data-lms-storage] > h3 { margin-top: 0; font-size: var(--text-lg); }
.lms-set-main [data-lms-storage] .btn { margin: var(--s-2) 0; }

/* The course page */
.lms-crumbs { margin-bottom: var(--s-3); }
.lms-course-head .pp-section-body, .lms-course-head { padding: var(--s-6); }
.lms-course-head { display: flex; flex-direction: column; gap: var(--s-4); }
.lms-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.lms-course-titles { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lms-course-titles .pp-title { margin: 0; font-size: var(--text-2xl); }
.lms-course-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.lms-course-chips .chip { font-size: var(--text-xs); padding: 3px var(--s-3); }
.lms-course-for { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.lms-course-desc { margin: 0; max-width: 90ch; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-normal); }
.lms-course-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); }
.lms-fact {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
}
.lms-fact-value { font-size: var(--text-xl); font-weight: 700; color: var(--ink); line-height: var(--lh-tight); }
.lms-fact-label { font-size: var(--text-xs); color: var(--ink-3); }

.lms-course-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: var(--s-5); align-items: start; }
.lms-course-main { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.lms-course-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.lms-course-sechead h3 { margin: 0; font-size: var(--text-lg); }
.lms-course-sechead .help { margin: var(--s-1) 0 0; max-width: 64ch; }

.lms-mod { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.lms-mod.is-open { border-color: var(--accent-soft); }
.lms-mod-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); }
.lms-mod-num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 700; font-size: var(--text-sm);
}
.lms-mod.is-open .lms-mod-num { background: var(--accent); color: var(--on-brand, #fff); }
#panel-settings-training .lms-mod-toggle {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-md); background: transparent;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
#panel-settings-training .lms-mod-toggle:hover { background: var(--surface-2); }
#panel-settings-training .lms-mod-toggle:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: -2px; }
.lms-mod-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lms-mod-title { font-size: var(--text-md, var(--text-base)); font-weight: 700; }
.lms-mod-meta { font-size: var(--text-xs); color: var(--ink-3); }
#panel-settings-training .lms-mod-caret { font-size: var(--text-sm); color: var(--ink-3); }
.lms-mod-body { border-top: 1px solid var(--line-2); padding: var(--s-2) var(--s-4) var(--s-4); }
.lms-mod-body[hidden] { display: none; }
.lms-mod-desc, .lms-mod-empty { margin: var(--s-2) 0; }
.lms-lessons { list-style: none; margin: 0; padding: 0; }
.lms-lesson-row {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 0 0 var(--s-2);
  border-bottom: 1px solid var(--line-2);
}
.lms-lesson-n { flex: 0 0 40px; font-size: var(--text-xs); font-weight: 700; color: var(--ink-3); }
.lms-lesson-name {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-2));
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
}
.lms-lesson-name:hover { color: var(--accent); text-decoration: underline; }
.lms-lesson-name:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 0; }
.lms-lesson-cards {
  flex: 0 0 auto; padding: 2px var(--s-2); border-radius: var(--r-full); background: var(--surface-3);
  color: var(--ink-2); font-size: var(--text-xs); white-space: nowrap;
}
.lms-lesson-min { flex: 0 0 76px; text-align: right; font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }
.lms-lesson-min .muted { font-size: inherit; }
.lms-mod-adds { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.hr-panel .btn.lms-add { border-style: dashed; border-color: var(--accent); color: var(--accent); background: var(--panel); }
.hr-panel .btn.lms-add:hover { background: var(--accent-soft); }

#panel-settings-training .lms-quiz-line {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md); background: var(--accent-soft);
}
.lms-quiz-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); }
.lms-quiz-ico svg { width: 20px; height: 20px; display: block; }
.lms-quiz-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lms-quiz-text .help { margin: 0; font-size: var(--text-xs); }

.lms-course-aside { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.lms-aside-card { margin-bottom: 0; }
.lms-aside-card .pp-section-body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.lms-aside-title { margin: 0; font-size: var(--text-md, var(--text-base)); }
.lms-aside-card .help { margin: 0; }
.lms-final { border-top: 3px solid var(--accent); }
.lms-final .lms-quiz-line { margin-top: 0; background: transparent; padding: 0; }
.lms-wrong { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lms-wrong li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line-2); }
.lms-wrong li:first-child { border-top: 0; }
.lms-wrong-q { font-size: var(--text-sm); color: var(--ink); }
.lms-wrong-meta { grid-column: 1; font-size: var(--text-xs); color: var(--ink-3); }
.lms-wrong .lms-cell-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.lms-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lms-people li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line-2); }
.lms-people li:first-child { border-top: 0; }
.lms-people .pp-person { flex: 1 1 auto; }
.lms-people .pp-person-sub { max-width: 180px; }

/* Team progress: a face beside each name, and a fixed chips column so the
   bars line up whether or not a row has a "late" chip. */
.lms-person-id.lms-person-face { flex-direction: row; align-items: center; gap: var(--s-3); }
.lms-person-idtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (min-width: 761px) {
  #panel-settings-training .lms-person-open { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 180px 180px 24px; }
}
@media (max-width: 1100px) { .lms-course-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .lms-lesson-row { flex-wrap: wrap; padding: var(--s-2) 0; }
  .lms-lesson-min { flex-basis: auto; }
}
/* The lesson editor dialog: wide, the writing area first, the lesson's
   settings beside it. */
.modal-back .modal.lms-le-modal { max-width: min(1240px, 96vw); }
.lms-le { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
.lms-le-main { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lms-le-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.lms-le-main .lms-le-label:not(:first-child) { margin-top: var(--s-3); }
.lms-le-title {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--text-lg); font-weight: 600;
}
.lms-le-title:focus, .lms-le-box input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lms-le-side { display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: 0; }
.lms-le-box { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.lms-le-box .help { margin: 0; font-size: var(--text-xs); }
.lms-le-box input[type="number"] {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit;
}
.lms-le-switch { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.lms-le-switch .pp-toggle { margin: 0; }
@media (max-width: 900px) {
  .lms-le { grid-template-columns: 1fr; }
  .lms-le-side { position: static; }
}
/* --- end area: training --- */


/* --- area: activity (People > Activity) --- */
.act-datebar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.act-datebar input[type="date"] { min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.act-note { margin-top: var(--s-4); }
.act-person { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.act-person:hover .pp-person-name { color: var(--accent); text-decoration: underline; }
.act-last { display: flex; flex-direction: column; gap: 2px; }
.act-last .help { margin: 0; font-size: var(--text-xs); }
.act-share { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.act-share-text { white-space: nowrap; }
.act-bar { display: block; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.act-bar-fill { display: block; height: 100%; background: var(--accent); width: 0; }
.act-bar-fill.p10 { width: 10%; } .act-bar-fill.p20 { width: 20%; } .act-bar-fill.p30 { width: 30%; }
.act-bar-fill.p40 { width: 40%; } .act-bar-fill.p50 { width: 50%; } .act-bar-fill.p60 { width: 60%; }
.act-bar-fill.p70 { width: 70%; } .act-bar-fill.p80 { width: 80%; } .act-bar-fill.p90 { width: 90%; } .act-bar-fill.p100 { width: 100%; }
.act-strip-cell { min-width: 220px; }
.act-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2px, 1fr); gap: 1px; height: 18px; min-width: 200px; }
.act-strip.is-big { height: 34px; }
.act-cell { border-radius: 2px; background: var(--surface-3); }
.act-cell.l1 { background: color-mix(in srgb, var(--accent) 35%, var(--surface-3)); }
.act-cell.l2 { background: color-mix(in srgb, var(--accent) 65%, var(--surface-3)); }
.act-cell.l3 { background: var(--accent); }
.act-cell.off { opacity: .35; }
.act-strip-none { font-size: var(--text-xs); color: var(--ink-3); }
.act-strip-axis { display: flex; justify-content: space-between; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.act-h { margin: 0 0 var(--s-3); font-size: var(--text-md, var(--text-base)); }
.act-open { font-size: var(--text-xs); margin-left: var(--s-2); }
/* --- end area: activity --- */
