/* ══════════════════════════════════════════════════════════════════
   Paper Slate — component layer.
   Requires ps-tokens.css to have loaded first.

   Order: reset → shell → nav → typography → cards → list rows → pills →
          buttons → forms → tables → states → launcher → login.

   Rules enforced here so pages never have to think about them:
     · one background (--ps-bg), one surface (--ps-surface)
     · one primary (--ps-accent); green/amber/red/violet are STATUS ONLY
     · radius only from the 8/12/16/18/26/999 scale
     · min touch target 44px; secondary text never lighter than --ps-text-2
   ══════════════════════════════════════════════════════════════════ */

/* ── reset ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ps-bg);color:var(--ps-text-1);
  font-family:var(--ps-font);font-size:var(--ps-fs-base);line-height:1.5;
  text-wrap:pretty;
}
a{color:var(--ps-accent);text-decoration:none}
a:hover{color:var(--ps-accent-hover)}
:focus-visible{outline:2px solid var(--ps-accent);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}

/* ── shell ─────────────────────────────────────────── */
.ps-page{
  max-width:var(--ps-content);margin:0 auto;
  padding:0 20px calc(var(--ps-bottomnav-h) + 26px);
}
.ps-topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 0 14px;background:var(--ps-bg);
  position:sticky;top:0;z-index:60;
}
.ps-topbar h1{font-size:var(--ps-fs-xl);font-weight:800;letter-spacing:-.02em;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-topbar .ps-sub{font-size:var(--ps-fs-xs);font-weight:600;color:var(--ps-text-2);margin-top:3px}
.ps-icon-btn{
  width:38px;height:38px;flex:none;border-radius:var(--ps-r-pill);
  background:var(--ps-surface);border:1px solid var(--ps-border);
  color:var(--ps-ink);cursor:pointer;display:grid;place-items:center;
  position:relative;
}
.ps-avatar{
  width:38px;height:38px;flex:none;border-radius:var(--ps-r-pill);
  background:var(--ps-gold);color:var(--ps-ink);font-weight:800;font-size:13px;
  display:grid;place-items:center;overflow:hidden;text-decoration:none;
}
.ps-avatar img{width:100%;height:100%;object-fit:cover}
.ps-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:var(--ps-r-pill);
  background:var(--ps-danger);border:2px solid var(--ps-bg)}

/* ── bottom nav + hub ─────────────────────────────── */
.ps-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ps-surface);border-top:1px solid var(--ps-border);
  padding:10px 18px calc(14px + env(safe-area-inset-bottom,10px));
  display:flex;align-items:center;justify-content:space-around;
}
.ps-tab{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:var(--ps-tap);width:62px;background:none;border:0;cursor:pointer;
  font:700 11px var(--ps-font);color:var(--ps-text-2);text-decoration:none;
  justify-content:center;
}
.ps-tab i{font-size:16px}
.ps-tab.is-active,.ps-tab.is-active i{color:var(--ps-accent)}
.ps-hub{
  position:absolute;left:50%;transform:translateX(-50%);top:-24px;
  width:60px;height:60px;border-radius:var(--ps-r-pill);
  background:var(--ps-accent);color:#fff;border:4px solid var(--ps-bg);
  font-size:18px;cursor:pointer;box-shadow:0 10px 24px rgba(15,76,74,.32);
}
@media (min-width:1000px){                       /* desktop: nav becomes a rail */
  .ps-bottomnav{
    top:0;bottom:0;right:auto;width:96px;flex-direction:column;
    justify-content:flex-start;gap:6px;padding:22px 0;
    border-top:0;border-right:1px solid var(--ps-border);
  }
  .ps-hub{position:static;transform:none;margin-bottom:14px}
  .ps-page{padding-left:120px;padding-bottom:40px;max-width:calc(var(--ps-content) + 120px)}
}

/* ── typography helpers ───────────────────────────── */
.ps-eyebrow{
  font-size:var(--ps-fs-eyebrow);font-weight:700;letter-spacing:var(--ps-track-eyebrow);
  text-transform:uppercase;color:var(--ps-text-2);margin:22px 0 10px;
}
.ps-num{font-size:20px;font-weight:800;line-height:1}
.ps-meta{font-size:var(--ps-fs-xs);font-weight:500;color:var(--ps-text-2)}

/* ── cards ────────────────────────────────────────── */
.ps-card{
  background:var(--ps-surface);border:1px solid var(--ps-border);
  border-radius:var(--ps-r-xl);padding:var(--ps-pad-card);
}
.ps-card-lg{border-radius:var(--ps-r-2xl);padding:22px;box-shadow:var(--ps-sh-md)}
.ps-card-dark{background:var(--ps-accent);color:#fff;border:0;border-radius:22px;padding:20px}
.ps-card-dark .ps-meta,.ps-card-dark .ps-eyebrow{color:#B9D6D2}
.ps-grid{display:grid;gap:var(--ps-gap)}
.ps-grid-2{grid-template-columns:repeat(2,1fr)}
.ps-grid-3{grid-template-columns:repeat(3,1fr)}
.ps-grid-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* Fixed column counts overflow a narrow phone — three columns on a 360px screen
   leaves ~110px per card, which pushes the page sideways. Collapse them. */
@media (max-width:560px){
  .ps-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:400px){
  .ps-grid-2,.ps-grid-3{grid-template-columns:1fr}
}
.ps-stack{display:flex;flex-direction:column;gap:var(--ps-gap)}
.ps-row{display:flex;align-items:center;gap:12px}

/* ── list row (the table replacement) ─────────────── */
.ps-listrow{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--ps-surface);border:1px solid var(--ps-border);
  border-radius:var(--ps-r-xl);padding:13px 15px;min-height:var(--ps-tap);
  cursor:pointer;color:inherit;font:inherit;
}
.ps-listrow:hover{border-color:#D8CBAE}
.ps-listrow .ps-ini{
  width:40px;height:40px;flex:none;border-radius:var(--ps-r-pill);
  background:var(--ps-bg);color:var(--ps-ink);font-weight:800;font-size:13px;
  display:grid;place-items:center;
}
.ps-listrow .ps-body{flex:1;min-width:0}
.ps-listrow .ps-title{font-weight:700;font-size:var(--ps-fs-base);display:block}
.ps-listrow .ps-title + .ps-meta{margin-top:2px;display:block}

/* ── status pill (ONE definition, replaces all 5) ─── */
.ps-pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 10px;border-radius:var(--ps-r-pill);
  font-size:var(--ps-fs-eyebrow);font-weight:700;white-space:nowrap;
}
.ps-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.65}
.ps-pill-plain::before{display:none}
.ps-pill-green {background:var(--ps-green); color:var(--ps-green-ink)}
.ps-pill-amber {background:var(--ps-amber); color:var(--ps-amber-ink)}
.ps-pill-red   {background:var(--ps-red);   color:var(--ps-red-ink)}
.ps-pill-violet{background:var(--ps-violet);color:var(--ps-violet-ink)}
.ps-pill-slate {background:var(--ps-slate); color:var(--ps-slate-ink)}

/* ── buttons ──────────────────────────────────────── */
.ps-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ps-tap);padding:13px 18px;border-radius:var(--ps-r-md);
  font:700 var(--ps-fs-base)/1 var(--ps-font);cursor:pointer;border:1.5px solid transparent;
  text-decoration:none;
}
.ps-btn-primary{background:var(--ps-accent);color:#fff;box-shadow:0 6px 16px rgba(15,76,74,.22)}
.ps-btn-primary:hover{background:var(--ps-accent-hover);color:#fff}
.ps-btn-secondary{background:var(--ps-surface);color:var(--ps-ink);border-color:var(--ps-border)}
.ps-btn-ghost{background:transparent;color:var(--ps-text-2);border-color:transparent}
.ps-btn-danger{background:var(--ps-surface);color:var(--ps-danger);border-color:var(--ps-danger-border)}
.ps-btn-danger-solid{background:var(--ps-danger);color:#fff}
.ps-btn-lg{min-height:54px;border-radius:var(--ps-r-lg);font-size:14.5px}
.ps-btn-block{width:100%}
.ps-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
/* approve/reject pair — approve is PRIMARY, not green */
.ps-decide{display:flex;gap:10px}
.ps-decide .ps-btn-danger{flex:1}
.ps-decide .ps-btn-primary{flex:1.6}

/* ── forms ────────────────────────────────────────── */
.ps-field{display:block;margin-bottom:var(--ps-gap-lg)}
.ps-label{display:block;font-size:var(--ps-fs-eyebrow);font-weight:700;
  letter-spacing:var(--ps-track-eyebrow);text-transform:uppercase;
  color:var(--ps-text-2);margin-bottom:8px}
.ps-input,.ps-select,.ps-textarea{
  width:100%;min-height:var(--ps-tap);padding:13px 15px;
  background:var(--ps-surface);border:1.5px solid var(--ps-border);
  border-radius:var(--ps-r-md);font:500 14px var(--ps-font);color:var(--ps-ink);
}
.ps-textarea{min-height:92px;line-height:1.6;resize:vertical}
.ps-select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B5D4C' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.ps-input:focus,.ps-select:focus,.ps-textarea:focus{
  outline:none;border-color:var(--ps-accent);box-shadow:0 0 0 3px rgba(15,76,74,.14)}
.ps-input[aria-invalid="true"]{border-color:var(--ps-danger);box-shadow:0 0 0 3px rgba(166,58,46,.12)}
.ps-help{font-size:var(--ps-fs-xs);font-weight:500;color:var(--ps-text-2);margin-top:7px}
.ps-error{font-size:var(--ps-fs-xs);font-weight:700;color:var(--ps-danger);margin-top:7px}
/* choice chips (leave type, filters) */
.ps-chips{display:flex;flex-wrap:wrap;gap:9px}
.ps-chip{min-height:48px;padding:0 16px;border-radius:var(--ps-r-lg);
  background:var(--ps-surface);border:1.5px solid var(--ps-border);
  font:700 13px var(--ps-font);color:var(--ps-text-2);cursor:pointer}
.ps-chip.is-on{background:var(--ps-accent);border-color:var(--ps-accent);color:#fff}
/* search */
.ps-search{display:flex;align-items:center;gap:10px;background:var(--ps-surface);
  border:1px solid var(--ps-border);border-radius:var(--ps-r-pill);padding:0 16px;
  min-height:var(--ps-tap)}
/* The input must fill the pill, not just sit in it: a bare input is ~19px tall,
   so tapping the padding would miss the field and not focus it. */
.ps-search input{flex:1;align-self:stretch;min-height:var(--ps-tap);
  border:0;outline:none;background:none;font:500 13px var(--ps-font)}
/* segmented tabs */
.ps-tabs{display:flex;gap:3px;background:var(--ps-surface-sunk);
  border-radius:var(--ps-r-lg);padding:4px;margin:14px 0}
.ps-tabs a,.ps-tabs button{flex:1;min-height:40px;border:0;background:none;border-radius:var(--ps-r-md);
  font:700 11.5px var(--ps-font);color:var(--ps-text-2);cursor:pointer;display:grid;place-items:center;
  text-decoration:none}
.ps-tabs .is-active{background:var(--ps-surface);color:var(--ps-accent);box-shadow:var(--ps-sh-sm)}

/* ── tables: desktop table, mobile cards ──────────── */
.ps-table{width:100%;border-collapse:collapse;background:var(--ps-surface);
  border:1px solid var(--ps-border);border-radius:var(--ps-r-xl);overflow:hidden}
.ps-table thead th{
  text-align:left;background:var(--ps-surface);          /* ONE header colour, forever */
  font-size:var(--ps-fs-eyebrow);font-weight:700;letter-spacing:var(--ps-track-eyebrow);
  text-transform:uppercase;color:var(--ps-text-2);
  padding:13px 16px;border-bottom:1px solid var(--ps-border-soft);white-space:nowrap;
}
.ps-table tbody td{padding:14px 16px;border-bottom:1px solid var(--ps-border-soft);vertical-align:middle}
/* Bulk-select checkboxes: a bare one renders ~13px, well under the 44px minimum,
   and these sit on the approval screens where a mis-tap is expensive. Scale the
   box and let the cell padding carry the rest of the target. */
.ps-table input[type=checkbox]{width:20px;height:20px;accent-color:var(--ps-accent);cursor:pointer}
.ps-table th:has(> input[type=checkbox]),
.ps-table td:has(> input[type=checkbox]){padding-top:12px;padding-bottom:12px}
.ps-table tbody tr:last-child td{border-bottom:0}
.ps-table tbody tr:hover{background:#FAF7EF}
.ps-table .ps-num-col{text-align:right;font-variant-numeric:tabular-nums}

/* Between the card-reflow breakpoint (760px) and a roomy desktop there is a band
   — tablets, split-screen windows — where a many-column table still renders as a
   table but does not fit. Without this it pushes the whole page sideways, which
   the design law forbids. Scrolling the table inside its own box keeps the page
   itself fixed. Below 760px the reflow takes over and this does nothing. */
@media (min-width:761px){
  .ps-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:var(--ps-r-lg);max-width:100%}
  /* No min-width: a table that fits still fills its box and never scrolls.
     One that does not fit scrolls inside the wrap instead of moving the page. */
}
@media (max-width:760px){
  .ps-table,.ps-table tbody,.ps-table tr,.ps-table td{display:block;width:100%}
  .ps-table{border:0;background:none;border-radius:0}
  .ps-table thead{display:none}
  .ps-table tbody tr{
    background:var(--ps-surface);border:1px solid var(--ps-border);
    border-radius:var(--ps-r-xl);padding:6px 4px;margin-bottom:10px;
  }
  .ps-table tbody td{
    display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    border:0;padding:8px 14px;
  }
  .ps-table tbody td::before{            /* label comes from data-label */
    content:attr(data-label);flex:none;
    font-size:var(--ps-fs-eyebrow);font-weight:700;letter-spacing:var(--ps-track-eyebrow);
    text-transform:uppercase;color:var(--ps-text-2);
  }
  .ps-table tbody td[data-label=""]::before{display:none}
  .ps-table .ps-num-col{text-align:right}
}

/* ── compact table reflow ──────────────────────────────
   The generic reflow gives every cell its own full-width label/value row,
   which is right for 3-4 wide columns but turns a 5-column log into a
   screen-per-row. .ps-table-compact keeps the same markup and instead lays
   the cells out as a wrapped two-column grid, so one record stays one card.
   Add the class to the table; nothing else changes. */
@media (max-width:760px){
  .ps-table-compact tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:12px 14px;
  }
  .ps-table-compact tbody td{
    display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 0;
  }
  .ps-table-compact tbody td::before{
    font-size:9.5px;letter-spacing:.08em;opacity:.85;
  }
  /* first cell (the date) spans the row as the card's heading */
  .ps-table-compact tbody td:first-child{
    grid-column:1 / -1;border-bottom:1px solid var(--ps-border-soft);
    padding-bottom:7px;margin-bottom:3px;font-weight:800;
  }
  .ps-table-compact .ps-num-col{text-align:left}
}

/* ── roster week strip (the ONLY sanctioned h-scroller) ── */
.ps-weekstrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.ps-weekstrip::-webkit-scrollbar{height:0}
.ps-day{flex:none;width:56px;border-radius:var(--ps-r-lg);padding:11px 0;text-align:center;
  background:var(--ps-surface);border:1.5px solid var(--ps-border);color:var(--ps-text-2);cursor:pointer}
.ps-day .dow{font:700 9.5px var(--ps-font);letter-spacing:.08em}
.ps-day .dd{font:800 17px var(--ps-font);margin-top:4px;display:block}
.ps-day.is-on{background:var(--ps-accent);border-color:var(--ps-accent);color:#fff}

/* ── states: alert / empty / skeleton / toast / sheet ── */
.ps-alert{display:flex;gap:9px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--ps-r-md);font-size:var(--ps-fs-sm);font-weight:600;line-height:1.5;margin-bottom:14px}
.ps-alert-success{background:var(--ps-green);border:1px solid var(--ps-green-ink);color:var(--ps-green-ink)}
.ps-alert-warn{background:var(--ps-warn-bg);border:1px solid var(--ps-warn-border);color:var(--ps-warn-ink)}
.ps-alert-error{background:var(--ps-danger-bg);border:1px solid var(--ps-danger-border);color:var(--ps-danger)}
.ps-alert-info{background:var(--ps-slate);border:1px solid var(--ps-border);color:var(--ps-text-2)}

.ps-empty{text-align:center;padding:70px 30px}
.ps-empty i{width:72px;height:72px;border-radius:var(--ps-r-pill);display:grid;place-items:center;
  margin:0 auto;background:var(--ps-accent-soft);color:var(--ps-accent);font-size:26px}
.ps-empty h3{font-size:21px;font-weight:800;margin:18px 0 0}
.ps-empty p{font-size:var(--ps-fs-sm);color:var(--ps-text-2);margin:8px auto 0;max-width:34ch;line-height:1.6}
.ps-empty .ps-btn{margin-top:20px}

.ps-skel{background:linear-gradient(90deg,#EFE7D8 25%,#F7F2E7 37%,#EFE7D8 63%);
  background-size:400% 100%;animation:ps-sk 1.3s linear infinite;border-radius:var(--ps-r-sm);height:14px}
@keyframes ps-sk{0%{background-position:100% 0}100%{background-position:0 0}}

.ps-toast{position:fixed;left:20px;right:20px;bottom:calc(var(--ps-bottomnav-h) + 20px);
  z-index:120;background:var(--ps-accent);color:#fff;border-radius:var(--ps-r-lg);
  padding:14px 17px;font-weight:600;font-size:var(--ps-fs-sm);display:none;
  align-items:center;gap:10px;box-shadow:var(--ps-sh-lg)}
.ps-toast.is-on{display:flex;animation:ps-rise .2s ease}
@keyframes ps-rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

.ps-scrim{position:fixed;inset:0;background:rgba(42,33,24,.5);z-index:100;display:none}
.ps-scrim.is-on{display:block}
.ps-sheet{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--ps-surface);
  border-radius:var(--ps-r-2xl) var(--ps-r-2xl) 0 0;padding:24px 22px 30px;display:none}
.ps-sheet.is-on{display:block;animation:ps-rise .26s cubic-bezier(.3,1.1,.5,1)}
.ps-sheet .grab{width:38px;height:4px;border-radius:var(--ps-r-pill);background:#D8CBAE;margin:0 auto 18px}
@media (min-width:760px){
  .ps-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:460px;border-radius:var(--ps-r-2xl)}
  .ps-sheet .grab{display:none}
}

/* ── launcher ─────────────────────────────────────── */
.ps-launcher{position:fixed;inset:0;z-index:90;background:var(--ps-bg);
  overflow-y:auto;padding:26px 20px 40px;display:none}
.ps-launcher.is-on{display:block;animation:ps-rise .25s ease}
.ps-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:760px){.ps-launcher-grid{grid-template-columns:repeat(6,1fr)}}
.ps-mod{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  min-height:88px;padding:14px 8px;background:var(--ps-surface);
  border:1px solid var(--ps-border);border-radius:var(--ps-r-xl);
  font:600 11px/1.3 var(--ps-font);color:var(--ps-ink);text-align:center;cursor:pointer;
  text-decoration:none;justify-content:center}
.ps-mod i{font-size:17px;color:var(--ps-accent)}
.ps-mod .ps-badge{position:absolute;top:8px;right:8px;background:var(--ps-danger);color:#fff;
  border-radius:var(--ps-r-pill);padding:1px 6px;font:800 9.5px var(--ps-font)}

/* ── key/value list ───────────────────────────────── */
/* A read-only profile field is not tabular data, so it should not be faked with
   a single-cell table. Promoted from the two employee view.php pages, where it
   had been duplicated — the same drift that a page-local ps-* rule causes. */
.ps-kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--ps-border-soft);font-size:var(--ps-fs-sm)}
.ps-kv:last-of-type{border-bottom:0}
.ps-kv > span:last-child{font-weight:700;color:var(--ps-ink);
  text-align:right;word-break:break-word}

/* ── profile avatar (56px) ────────────────────────── */
/* Photo or initial, used by every employee/manager profile header. Was
   duplicated in both view.php files. */
.ps-face{width:56px;height:56px;border-radius:var(--ps-r-pill);object-fit:cover;flex:none}
.ps-face-ini{width:56px;height:56px;border-radius:var(--ps-r-pill);flex:none;
  display:grid;place-items:center;background:var(--ps-accent-soft);
  color:var(--ps-accent);font-weight:800;font-size:20px}

/* ── meter (progress / balance bar) ───────────────── */
/* Promoted from owner/employees/view.php: a proportion bar is a real component,
   and leaving it page-local invited a ps-* name being redefined per page. */
.ps-meter{background:var(--ps-surface-sunk);border-radius:var(--ps-r-pill);
  height:8px;margin:10px 0 6px;overflow:hidden}
.ps-meter > span{display:block;background:var(--ps-accent);
  border-radius:var(--ps-r-pill);height:8px}

/* ── login (folded in from style.css) ─────────────── */
.ps-login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--ps-bg)}
.ps-login .ps-card-lg{width:100%;max-width:400px;padding:28px 24px}
.ps-login-brand{text-align:center;margin-bottom:24px}
.ps-login-brand h1{font-size:var(--ps-fs-2xl);font-weight:800;color:var(--ps-ink);margin:0 0 2px}
.ps-login-brand .ps-meta{margin:0}
.ps-login-mark{display:inline-grid;place-items:center;width:54px;height:54px;margin-bottom:13px;
  border-radius:var(--ps-r-lg);background:var(--ps-accent-soft);
  color:var(--ps-accent);font-size:22px}
.ps-login .ps-btn-block{margin-top:4px}
.ps-login-foot{text-align:center;margin:18px 0 0;font-size:var(--ps-fs-sm);color:var(--ps-text-2)}
.ps-login-foot a{color:var(--ps-accent);font-weight:700;text-decoration:none}
.ps-login-foot a:hover{text-decoration:underline}

/* checkbox row — 44px tap target without moving the box off the text baseline */
.ps-check{display:flex;align-items:center;gap:10px;min-height:var(--ps-tap);
  margin-bottom:var(--ps-gap);cursor:pointer;user-select:none}
.ps-check input[type=checkbox]{width:19px;height:19px;flex:none;cursor:pointer;
  accent-color:var(--ps-accent)}
.ps-check span{font-size:var(--ps-fs-sm);font-weight:500;color:var(--ps-text-2)}
.ps-check input:focus-visible{outline:2px solid var(--ps-accent);outline-offset:2px}

/* ── time picker (replaces the native type=time wheel) ───────────── */
/* Three selects sharing one input-shaped shell. The shell carries the
   border so the group reads as a single field; the selects inside are
   borderless and size to their content. */
/* The original input stays in the DOM and in the form, but invisible.
   NOT display:none and NOT type=hidden — either would exempt it from
   `required` validation and let an empty time submit. */
.ps-timepick-src{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;min-height:0!important;
  opacity:0!important;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.ps-timepick{display:inline-flex;align-items:center;gap:2px;width:100%;
  min-height:var(--ps-tap);padding:6px 8px;box-sizing:border-box;
  background:var(--ps-surface);border:1.5px solid var(--ps-border);
  border-radius:var(--ps-r-md)}
.ps-timepick:focus-within{border-color:var(--ps-accent);
  box-shadow:0 0 0 3px rgba(15,76,74,.14)}
.ps-timepick.is-disabled{background:var(--ps-surface-sunk);opacity:.7}
.ps-timepick select{flex:0 1 auto;min-width:0;min-height:36px;
  padding:4px 22px 4px 8px;appearance:none;
  background:transparent no-repeat right 6px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B5D4C' stroke-width='2'/></svg>");
  border:0;border-radius:var(--ps-r-sm);
  font:600 14px var(--ps-font);color:var(--ps-ink);cursor:pointer}
.ps-timepick select:hover{background-color:var(--ps-border-soft)}
.ps-timepick select:focus{outline:none}
.ps-timepick select:focus-visible{outline:2px solid var(--ps-accent);outline-offset:-1px}
.ps-timepick select:disabled{cursor:default;background-image:none}
.ps-timepick-sep{font-weight:700;color:var(--ps-text-2);margin:0 1px}
/* AM/PM sits just after the minutes, not shoved to the far edge — it
   reads as part of the same time, and stays close on a wide field. */
.ps-timepick-mer{margin-left:6px}
/* The field's own class is copied onto the wrapper so page-local sizing
   still applies; neutralise the parts that would double up the shell. */
.ps-timepick.ps-input{padding:6px 8px;border-width:1.5px;font-weight:500}