/* ===========================================================================
   hr/assets/portal.css — the staff portal, on the same design as the rest.

   clock.php carries its own 740-line stylesheet and keeps every screen it
   draws; this says what those names mean in the board's language. The token
   set is hr.css's — the same one the admin side uses — so the two halves of
   the system are one drawing rather than two that resemble each other.

   Dark comes from html[data-theme="dark"], which theme.php resolves before
   first paint. No prefers-color-scheme query: it would override a stated
   choice of Light on a dark machine.
   =========================================================================== */

:root { --wash-1: rgba(63,122,167,.22); --wash-2: rgba(85,41,158,.14); }
html[data-theme="dark"] { --wash-1: rgba(63,122,167,.26); --wash-2: rgba(85,41,158,.20); }

body { background: var(--bg); color: var(--ink);
       font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---- the brand, wherever the portal shows it --------------------------- */
.brandlogo { display: inline-flex; align-items: center; }
.brandlogo img { display: block; height: var(--bl-h, 34px); width: auto; max-width: 100%; }
.brandlogo .bl-dk { display: none; }
html[data-theme=dark] .brandlogo .bl-lt { display: none; }
html[data-theme=dark] .brandlogo .bl-dk { display: block; }
/* theme-dark.css plates every logo image so the black artwork survives a dark
   card; the lifted copy needs no plate, and the plate read as a border. */
html[data-theme=dark] .brandlogo img, html[data-theme=dark] .brandlogo .bl-dk {
  background: none; padding: 0; border-radius: 0; }
.brandlogo.is-raw { background: #fff; border-radius: 10px; padding: 6px 10px; }

/* ---- sign-in, matching the admin screen ------------------------------- */
.clock-wrap { max-width: 440px; padding: 36px 16px 56px; }
body:has(> .clock-wrap) { background:
    radial-gradient(760px 520px at 15% -8%, var(--wash-1), transparent 62%),
    radial-gradient(680px 480px at 88% 108%, var(--wash-2), transparent 60%),
    var(--bg); }
.clock-brand { margin-bottom: 22px; display: flex; flex-direction: column;
               align-items: center; gap: 10px; }
.clock-brand h1 { font-size: 23px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.clock-brand .sub { font-size: 13px; color: var(--muted); }
.clock-brand-logo { max-height: 52px; }

/* ---- cards ------------------------------------------------------------- */
.cl-card, .sp-topbar, .cl-topbar, .lv-type-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm); }
.cl-card { padding: 18px 20px; margin-bottom: 14px; }
.cl-card h2 { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; }
.sp-topbar, .cl-topbar { padding: 14px 18px; border-radius: 14px; }
.lv-type-card { border-radius: 12px; box-shadow: none; }

/* ---- buttons ----------------------------------------------------------- */
.cl-btn {
  background: var(--cta); color: var(--cta-fg); border: 0; border-radius: 10px;
  padding: 0 18px; height: 42px; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(16,24,32,.12), 0 8px 18px -10px rgba(63,122,167,.9);
  transition: filter .12s ease, box-shadow .12s ease, transform .08s ease; }
.cl-btn:hover { background: var(--cta); filter: brightness(1.07); }
.cl-btn:active { transform: translateY(1px); }
.cl-btn:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.cl-btn.secondary { background: var(--surface); color: var(--ink-2);
                    border: 1px solid var(--border); box-shadow: none; font-weight: 600; }
.cl-btn.secondary:hover { background: var(--surface-2); border-color: var(--border); }
.cl-btn.danger  { background: var(--red-i); }
.cl-btn.success { background: var(--green-i); }

/* ---- the punch buttons -------------------------------------------------
   These are the one place a gradient earns its keep: they are the reason the
   portal exists. The colours keep their meaning — in, out, break — and lose
   the glassy sheen for the board's flatter fill. */
.cl-punch-btn { border-radius: 14px; font-size: 18px; font-weight: 800; padding: 18px 30px;
                letter-spacing: -.2px; box-shadow: 0 1px 2px rgba(16,24,32,.12),
                0 10px 22px -12px rgba(16,24,32,.5); }
.cl-punch-btn.in      { background: #0b6342; }
.cl-punch-btn.out     { background: #a3243a; }
.cl-punch-btn.brk     { background: #15605e; font-size: 16px; padding: 15px 24px; }
.cl-punch-btn.breakin { background: #155a86; }
.cl-punch-btn:disabled, .cl-punch-btn.done {
  background: var(--surface-2); color: var(--muted); box-shadow: none; }
.cl-punch-divider::before, .cl-punch-divider::after { background: var(--border); }

.cl-time { color: var(--muted); }
.cl-time .big { font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.cl-status-line .cl-stat strong { color: var(--ink); }
.cl-status-line .cl-stat .lbl { color: var(--muted); }

/* ---- the sidebar ------------------------------------------------------- */
.sp-shell { background: var(--bg); }
.sp-sidebar { width: 244px; background: var(--surface); border-right: 1px solid var(--border);
              padding: 18px 0; }
.sp-brand { padding: 0 18px 18px; border-bottom: 1px solid var(--hair);
            display: flex; justify-content: center; }
.sp-brand-logo { max-height: 40px; }
.sp-brand strong, .sp-brand small { display: none; }
.sp-nav { padding: 14px 12px; gap: 3px; }
.sp-nav-item { border-left: 0; border-radius: 11px; padding: 10px 12px; gap: 11px;
               color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.sp-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.sp-nav-item.active { background: var(--cta); color: var(--cta-fg); border-left: 0;
                      box-shadow: 0 8px 18px -8px rgba(63,122,167,.8); }
.sp-nav-icon svg { stroke: currentColor; }
.sp-sidebar-foot { border-top: 1px solid var(--hair); padding: 14px 18px 0; }
.sp-me strong { font-size: 14px; color: var(--ink); }
.sp-me small { color: var(--muted); }
.sp-foot-link { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.sp-main { padding: 22px 26px 56px; max-width: 980px; }

/* ---- messages ---------------------------------------------------------- */
.cl-flash { border-radius: 12px; border-left: 0; padding: 12px 15px; font-weight: 600;
            font-size: 13.5px; }
.cl-flash.success { background: var(--green-t); color: var(--green-i); }
.cl-flash.error   { background: var(--red-t);   color: var(--red-i); }
.cl-flash.info    { background: var(--blue-t);  color: var(--brand-ink); }
.cl-logout-bar { background: var(--amber-t); color: var(--amber-i); }

/* ---- the attendance table ---------------------------------------------- */
.cl-history th { background: transparent; border-bottom: 1px solid var(--border);
                 font-size: 11px; letter-spacing: .06em; color: var(--muted);
                 font-weight: 700; padding: 0 12px 11px; }
.cl-history td { border-top: 1px solid var(--hair); padding: 11px 12px; color: var(--ink); }
.cl-history tr.today td { background: var(--amber-t); font-weight: 600; }
.cl-history .badge { border-radius: 20px; font-size: 11px; font-weight: 700; padding: 3px 10px; }
.cl-history .b-present    { background: var(--green-t);  color: var(--green-i); }
.cl-history .b-half_day   { background: var(--amber-t);  color: var(--amber-i); }
.cl-history .b-absent,
.cl-history .b-unpaid     { background: var(--red-t);    color: var(--red-i); }
.cl-history .b-paid_leave { background: var(--blue-t);   color: var(--blue-i); }
.cl-history .b-holiday    { background: var(--violet-t); color: var(--violet-i); }

/* ---- leave, profile, passes -------------------------------------------- */
.cl-leave-balance { border-radius: 14px; border: 1px solid transparent; font-size: 13.5px; }
.cl-leave-balance.cl-lvb-ok        { background: var(--green-t); color: var(--green-i); }
.cl-leave-balance.cl-lvb-low       { background: var(--amber-t); color: var(--amber-i); }
.cl-leave-balance.cl-lvb-ineligible{ background: var(--red-t);   color: var(--red-i); }
.cl-pass-tracker { border-radius: 14px; border: 1px solid transparent; }
.cl-pass-tracker.cl-pass-ok       { background: var(--blue-t);  color: var(--blue-i); }
.cl-pass-tracker.cl-pass-low      { background: var(--amber-t); color: var(--amber-i); }
.cl-pass-tracker.cl-pass-depleted { background: var(--red-t);   color: var(--red-i); }
.lv-section-h, .profile-section-h { font-size: 11px; letter-spacing: .06em; font-weight: 700;
                                    color: var(--muted); text-transform: uppercase; }
.profile-dl dt { color: var(--muted); font-size: 12px; }
.profile-dl dd { color: var(--ink); }
.profile-dl > div { border-bottom: 1px solid var(--hair); }
.profile-dl-total dd strong { color: var(--ink); }
.lv-type-name { color: var(--ink); font-weight: 700; }
.lv-type-desc, .lv-type-eg, .lv-hint, .profile-hint, .cl-notes-hint { color: var(--muted); }

/* ---- fields ------------------------------------------------------------ */
.cl-login-form .field input, .cl-form-row textarea, .cl-notes-grid .cl-field textarea,
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.cl-login-form input:focus, .cl-form-row textarea:focus,
.cl-notes-grid .cl-field textarea:focus, #leaveForm input:focus, select:focus {
  outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(63,122,167,.22); }
.cl-login-form label, .cl-form-row label, .cl-notes-grid .cl-field label {
  font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ---- the passkey route and the notice on the sign-in card -------------- */
.cl-passkey { width: 100%; margin-bottom: 4px; text-decoration: none; }
.cl-orline { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px;
             font-size: 12px; font-weight: 600; color: var(--muted); }
.cl-orline::before, .cl-orline::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cl-warncard { max-width: 480px; margin: 16px auto 0; background: var(--red-t);
               border: 1px solid transparent; box-shadow: none; }
.cl-warncard h2 { display: flex; align-items: center; gap: 8px; font-size: 12px;
                  text-transform: uppercase; letter-spacing: .08em; color: var(--red-i);
                  margin: 0 0 8px; }
/* Five paragraphs set entirely in red is a shout; the heading and the one
   sentence that matters carry the colour, the rest reads as text. */
.cl-warncard p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 8px; }
.cl-warncard p:last-child { margin-bottom: 0; }
.cl-warncard strong { color: var(--red-i); font-weight: 700; }

/* ---- the "desktop only" screen, which is its own little page ----------- */
body > .box { background: var(--surface); border: 1px solid var(--border);
              border-radius: 20px; box-shadow: var(--shadow-sm); padding: 30px 28px; }
body > .box h1 { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
body > .box p { color: var(--ink-2); font-size: 14px; }
body > .box .brandlogo { margin: 0 auto 14px; }
body > .box .warn { background: var(--red-t); border: 1px solid transparent;
                    border-radius: 14px; }
body > .box .warn h2 { font-size: 12px; letter-spacing: .08em; color: var(--red-i); }
body > .box .warn p { color: var(--ink-2); font-size: 12.5px; }
body > .box .warn strong { color: var(--red-i); }

/* ---- the phone --------------------------------------------------------- */
@media (max-width: 860px) {
  .sp-main { padding: 16px 14px 48px; }
  .cl-card { padding: 15px 15px; border-radius: 14px; }
  .sp-topbar, .cl-topbar { padding: 12px 14px; }
  .cl-time .big { font-size: 32px; }
  .cl-punch-btn { width: 100%; font-size: 17px; padding: 16px 20px; }
  .cl-history th, .cl-history td { padding-left: 9px; padding-right: 9px; }
}

/* ── the shapes the board draws, for the portal's own names ─────────────── */
/* Cards, as everywhere else: 16px and a shadow that sits rather than floats. */
.cl-card, .sp-topbar, .cl-topbar { border-radius: 16px; box-shadow: var(--shadow-sm);
                                   border: 1px solid var(--border); }
.cl-card { padding: 18px 20px; }

/* ── the rail ──────────────────────────────────────────────────────────────
   The admin's rail, for the portal's nine destinations: a column of icon
   tiles, the one you are on filled, and the name alongside on hover. They are
   flat rather than grouped, so the flyout carries one name instead of a list —
   the same gesture, the same shape. */
/* The rail paints above the page, or the flyout opens behind the first card
   it meets — which is what the names were disappearing into. */
.sp-sidebar { width: 64px; align-items: center; padding: 12px 0 14px;
              background: var(--rail); border-right: 1px solid var(--border);
              position: sticky; top: 0; height: 100vh; z-index: 60; overflow: visible;
              -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sp-shell { align-items: flex-start; }
.sp-home { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
           background: var(--cta); color: var(--cta-fg); font-weight: 800; font-size: 13px;
           letter-spacing: .04em; margin-bottom: 10px; text-decoration: none; flex: none; }
.sp-home:hover { text-decoration: none; filter: brightness(1.06); }
.sp-home.has-ico { background: none; padding: 0; overflow: hidden; }
.sp-home.has-ico img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.sp-nav { padding: 0; gap: 5px; align-items: center; }
.sp-nav-item { position: relative; width: 46px; height: 46px; padding: 0; margin: 0;
               border: 0; border-left: 0; border-radius: 13px; justify-content: center;
               gap: 0; color: var(--muted); }
.sp-nav-item:hover { background: var(--surface-2); color: var(--ink-2); }
.sp-nav-item.active { background: var(--cta); color: var(--cta-fg); border-left: 0;
                      box-shadow: 0 8px 18px -8px rgba(63,122,167,.8); }
.sp-nav-icon svg { stroke: currentColor; }
/* the name, alongside rather than inside */
.sp-nav-label { position: absolute; left: calc(100% + 6px); top: 4px; z-index: 70; display: none;
                background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
                padding: 9px 13px; box-shadow: var(--shadow-sm); white-space: nowrap;
                font-size: 13px; font-weight: 600; color: var(--ink); }
.sp-nav-item:hover > .sp-nav-label, .sp-nav-item:focus-visible > .sp-nav-label { display: block; }
/* the unread badge rides the tile's corner, as the rail's does */
.sp-nav-item > span[style] { position: absolute; top: 2px; right: 2px; margin: 0 !important; }
/* the foot: the reader, then the links they rarely need */
.sp-sidebar-foot { margin-top: auto; width: 100%; padding: 12px 6px 0;
                   border-top: 1px solid var(--hair);
                   display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-you { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
          background: var(--blue-t); color: var(--blue-i); font-weight: 700; font-size: 12px; }
.sp-foot-link { position: relative; width: 40px; height: 36px; display: grid; place-items: center;
                border-radius: 10px; background: none; border: 0; padding: 0; cursor: pointer;
                color: var(--muted); }
.sp-foot-link svg { width: 18px; height: 18px; }
.sp-foot-link:hover { background: var(--surface-2); color: var(--ink-2); }
.sp-foot-link:hover > .sp-nav-label, .sp-foot-link:focus-visible > .sp-nav-label { display: block; }
.sp-foot-link > .sp-nav-label { top: -1px; }

/* ── the rail, widened ─────────────────────────────────────────────────────
   Icons are the default and stay the default; this is for whoever would
   rather read the words than learn nine pictures. The name stops being a
   flyout and becomes the row it is written in — same text, same markup, so
   what a screen reader hears does not change with the width.

   The foot keeps its icons in both states. Those four are rarely wanted and
   spelling them out at this width turns a quiet strip into a second menu.

   <html data-rail="wide"> is written before the first paint from what was
   stored, so the portal never opens narrow and jumps. */
@media (min-width: 721px) {
  :root[data-rail="wide"] .sp-sidebar { width: 222px; align-items: stretch; padding: 12px 10px 14px; }
  :root[data-rail="wide"] .sp-home { margin-left: 2px; }
  :root[data-rail="wide"] .sp-nav { align-items: stretch; }
  :root[data-rail="wide"] .sp-nav-item { width: 100%; height: 42px; padding: 0 11px;
                                         justify-content: flex-start; gap: 11px; }
  :root[data-rail="wide"] .sp-nav-item > .sp-nav-label {
      position: static; display: block; background: none; border: 0; box-shadow: none;
      padding: 0; font-size: 13.5px; font-weight: 600; color: inherit; }
  /* The unread count comes off the tile's corner and sits at the end of the
     row. The badge carries its own inline style, which is why the corner rule
     above needs !important and why putting it back does too. */
  :root[data-rail="wide"] .sp-nav-item > span[style] {
      position: static; margin: 0 0 0 auto !important; }
  /* The control widens with the rest of the menu, in the place it already
     occupies. It carries .sp-nav-item, so the width and the label come from
     the rules above; only the rule under it needs saying. */
  :root[data-rail="wide"] .sp-railsep { width: 100%; }
  /* Four squares in a row rather than a tower, with room to spare at 222px. */
  :root[data-rail="wide"] .sp-sidebar-foot { flex-direction: row; flex-wrap: wrap;
                                             justify-content: flex-start; gap: 6px;
                                             padding: 12px 2px 0; }
}
/* The width control wears .sp-nav-item so it is the same square in the same
   column as a destination, and its name behaves the same at both widths. Only
   the things a <button> does not inherit are set here. */
/* flex: none because this one is a direct child of the sidebar column, unlike
   the destinations inside .sp-nav — without it the column squeezes it to 31px
   and it stops matching the tiles it sits above. */
.sp-railwide { background: none; border: 0; cursor: pointer; font: inherit; flex: none; }
/* The rule under it: what changes the menu, above; what is in the menu, below. */
.sp-railsep { width: 26px; height: 1px; background: var(--border); flex: none; margin: 3px 0 4px; }
/* The portal's foot carries five controls where the admin's carries three,
   and nine destinations above them. Measured on a 768px-tall laptop the column
   ran 21px past the bottom of the screen, and since the rail does not scroll —
   it must not, or the hovered name is clipped instead of overlapping the page —
   the last control simply was not reachable. Collapsed, the foot tightens by
   enough to bring it back inside with room to spare. Widened, it wraps into
   rows and has its own. */
:root:not([data-rail="wide"]) .sp-sidebar-foot { gap: 5px; padding-top: 10px; }
:root:not([data-rail="wide"]) .sp-foot-link { height: 32px; }
/* The width control and its rule add another row to a column that was already
   at the bottom of a 768px screen — measured 769px, with sign-out a pixel past
   the edge. The space comes back from above the control rather than from the
   rule around it, which needs the air to read as a divider. */
:root:not([data-rail="wide"]) .sp-home { margin-bottom: 6px; }
:root:not([data-rail="wide"]) .sp-railsep { margin: 2px 0 3px; }

/* Buttons: the one that lifts on press. */
.cl-btn { height: 42px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 700;
          background: var(--cta); color: var(--cta-fg); border: 0;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          box-shadow: 0 1px 2px rgba(16,24,32,.12), 0 8px 18px -10px rgba(63,122,167,.9);
          transition: filter .12s ease, box-shadow .12s ease, transform .08s ease; }
.cl-btn:hover { background: var(--cta); filter: brightness(1.07); }
.cl-btn:active { transform: translateY(1px); }
.cl-btn.secondary { background: var(--surface); color: var(--ink-2); font-weight: 600;
                    border: 1px solid var(--border); box-shadow: none; }
.cl-btn.secondary:hover { background: var(--surface-2); }
.cl-btn.danger  { background: var(--red-i); }
.cl-btn.success { background: var(--green-i); }

/* What HR has said, and the grace notice: tinted, not outlined. */
.cl-card .cl-flash, .cl-flash { border-radius: 12px; border-left: 0; font-weight: 600; }
.cl-notes-block, .cl-pass-tracker, .cl-leave-balance { border-radius: 14px; border: 1px solid transparent; }

/* The clock itself is the reason the page exists. */
.cl-time .big { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; color: var(--ink); }
.cl-punch-btn { border-radius: 14px; font-weight: 800; letter-spacing: -.2px;
                box-shadow: 0 1px 2px rgba(16,24,32,.12), 0 10px 22px -12px rgba(16,24,32,.5); }

/* Tables, as the board sets them. */
.cl-history th { background: transparent; border-bottom: 1px solid var(--border);
                 font-size: 11px; letter-spacing: .06em; color: var(--muted); font-weight: 700;
                 padding: 0 12px 11px; }
.cl-history td { border-top: 1px solid var(--hair); padding: 11px 12px; }
.cl-history .badge { border-radius: 20px; font-size: 11px; font-weight: 700; padding: 3px 10px; }

/* ── the page head, as the admin side has it ────────────────────────────── */
.sp-phead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sp-ptitle { min-width: 0; }
.sp-crumb { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sp-phead h1 { margin: 3px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px;
               color: var(--ink); }
.sp-psub { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.sp-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px;
                   font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .sp-topbar-right .sp-date { display: none; }
                            .sp-phead h1 { font-size: 20px; } }

/* ── the company structure ─────────────────────────────────────────────────
   The staff see the admin's tree, drawn the same way: the dashed rails, the
   avatars, name, rank, department and tier. What they do not see is the Edit
   and Delete on each row, the add-a-position form or the gender split — those
   are the admin's, and this page never had them. The tab carries its own
   class names, so this is what they mean in the board's language. */
.sotree ul { margin-left: 22px; padding-left: 7px; border-left: 1px dashed var(--border); }
.sorow { gap: 10px; padding: 7px 10px; border-radius: 12px; margin: 3px 0; }
.sorow:hover { background: var(--surface-2); }
.soava { width: 34px; height: 34px; }
.soava-i { background: var(--blue-t); color: var(--blue-i); font-size: 13px; font-weight: 800; }
.soname { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sorank, .sodept { font-size: 12px; color: var(--muted); }
.solevel { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
           text-transform: uppercase; border-radius: 20px; padding: 3px 10px;
           background: var(--blue-t); color: var(--blue-i); }
.sotog { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 13px;
         width: 20px; }
/* The reader's own row, which is the one thing they are looking for. */
.sorow.is-you { background: var(--blue-t); }
.sorow.is-you .soname { color: var(--blue-i); }
.soyou { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
         background: var(--surface); color: var(--blue-i); border-radius: 20px; padding: 3px 9px; }

/* ===========================================================================
   The portal's own components, from the approved boards
   (design/tools/_portal.css and design/tools/pages/y*.css).

   Only the shell was carried over when the portal was first rebuilt — the rail,
   the top bar, the page head. These are the pieces the tab bodies are drawn
   from, so without them the tabs kept their old .cl-card markup and the screens
   never matched the design. Tokens are hr.css's own.
   ======================================================================== */

/* Messages from HR, on the punch tab. */
.msg { border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
       padding: 13px 15px; margin-bottom: 10px; }
.msg b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.msg p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.msg time { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }

/* A tinted explanatory strip. The colours come from the caller, because the
   same shape carries both "you are fine" and "watch out". */
.note { display: flex; gap: 11px; align-items: flex-start; border-radius: 14px;
        padding: 13px 16px; font-size: 12.5px; line-height: 1.6; }

/* The clock itself. */
.bigclock { text-align: center; padding: 10px 0 4px; }
.bigclock .dd { font-size: 12.5px; color: var(--muted); }
.bigclock .tt { font-size: 42px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.1;
                font-variant-numeric: tabular-nums; margin: 8px 0 14px; }
.punchbtn { height: 56px; min-width: 230px; padding: 0 30px; border: 0; border-radius: 15px;
            font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.punchbtn[disabled] { opacity: .55; cursor: not-allowed; }
.inout { display: flex; justify-content: center; gap: 56px; margin-top: 18px;
         padding-top: 16px; border-top: 1px solid var(--hair); }
.inout div { text-align: center; }
.inout .l { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--muted); font-weight: 700; }
.inout .v { font-size: 16px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* The portal's tables and its key/value lists. */
table.ptab { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.ptab th { padding: 0 10px 11px; font-size: 10.5px; letter-spacing: .07em;
                text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; }
table.ptab td { padding: 11px 10px; font-size: 12.5px; border-top: 1px solid var(--hair); }
table.ptab th:first-child, table.ptab td:first-child { padding-left: 18px; }
table.ptab th:last-child, table.ptab td:last-child { padding-right: 18px; }
table.ptab tfoot td { border-top: 1px solid var(--border); background: var(--surface-2);
                      font-weight: 700; padding-top: 12px; padding-bottom: 12px; }
.kv2 { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv2 td { padding: 9px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
.kv2 tr:first-child td { border-top: 0; }
.kv2 .k { width: 44%; color: var(--muted); }
.kv2 .v { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* A card's small tinted icon, and the two-column pairing used on Profile
   and Performance. */
.ci { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.two > .card { min-width: 0; }
.secthead { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--muted); font-weight: 700; }

/* An amount the reader has to ask for. */
.hidden-amt { filter: blur(5px); user-select: none; }
.tapto { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
         color: var(--muted); margin-top: 2px; }

/* Leave types. */
.lvtypes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lvtype { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px;
          display: flex; flex-direction: column; gap: 3px; }
.lvtype .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lvtype .ds { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.lvtype .eg { font-size: 11px; color: var(--muted); font-style: italic; }

/* Announcements, and the numbered company rules. */
.post { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.post:first-child { border-top: 0; padding-top: 2px; }
.post .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 7px; }
.post .body { min-width: 0; }
.post .top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.post h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.post time { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.post p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.rule { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.rule:first-child { border-top: 0; padding-top: 2px; }
.rule .n { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
           font-size: 12px; font-weight: 800; flex: none; }
.rule h3 { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.rule p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }

/* Column widths, per tab. A ptab is fixed-layout, so these decide the shape. */
.ptab .c-d { width: 16%; } .ptab .c-i { width: 10%; } .ptab .c-o { width: 10%; }
.ptab .c-s { width: 11%; } .ptab .c-b { width: 10%; } .ptab .c-w { width: 11%; }
.ptab .c-st { width: 13%; } .ptab .c-l { width: 9%; } .ptab .c-ot { width: 10%; }
.ptab .l-f { width: 14%; } .ptab .l-t { width: 14%; } .ptab .l-y { width: 16%; }
.ptab .l-d { width: 9%; } .ptab .l-w { width: 32%; } .ptab .l-s { width: 15%; }
.ptab .s-m { width: 22%; } .ptab .s-n { width: 22%; } .ptab .s-s { width: 16%; }
.ptab .s-p { width: 20%; } .ptab .s-a { width: 20%; }
.ptab .r-p { width: 22%; } .ptab .r-b { width: 24%; } .ptab .r-s { width: 12%; } .ptab .r-n { width: 42%; }

/* At phone width the portal is one column: tiles stack two-up, the two-card
   pairings become one, and a ptab scrolls inside its own card. */
@media (max-width: 720px) {
  .two, .lvtypes { grid-template-columns: 1fr; }
  .inout { gap: 30px; }
  .bigclock .tt { font-size: 34px; }
  .punchbtn { min-width: 0; width: 100%; }
}

/* The signed-out screen: one narrow column, the brand above it, and the
   standing warning underneath, as the PortalLogin board draws it. */
.sp-eyebrow { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 700;
              letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.signwarn { margin-top: 16px; background: var(--red-t); border-color: transparent; }
.signwarn h2 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--red-i); }
.signwarn .lead { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--red-i); font-weight: 700; }
.signwarn p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.signwarn p:last-child { margin-bottom: 0; }
.signwarn { max-width: 480px; margin-left: auto; margin-right: auto; }