:root {
  --amber: #f0a63c;
  --amber-dark: #d98e26;
  --ink: #1b1b1b;
  --ink-2: #3a3a3a;
  --muted: #76808a;
  --panel: #ffffff;
  --app-bg: #f3f4f6;
  --bot: #ffffff;
  --line: #e2e6ea;
  --danger: #c0392b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--ink);
  color: var(--ink);
  overscroll-behavior: none;
}
.screen { height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ---------- Login ---------- */
#login { align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(120% 120% at 50% 0%, #2b2b2b 0%, #141414 70%); }
.login-card {
  width: 100%; max-width: 360px; text-align: center;
  background: var(--panel); border-radius: 20px; padding: 30px 24px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.login-card .brand-logo { width: 220px; max-width: 80%; height: auto; margin: 4px auto 6px; display: block; }
.sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.setpin-hint { color: var(--muted); font-size: 13px; line-height: 1.4; margin: -10px 0 18px; }
#login-form, #setpin-form { display: flex; flex-direction: column; gap: 12px; }
input, textarea, button { font: inherit; }
input {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; outline: none; background: #fbfcfd;
}
input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.18); }
#login-btn {
  background: var(--amber); color: var(--ink); border: none;
  border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer;
}
#login-btn:active { transform: translateY(1px); }
.error { color: var(--danger); font-size: 14px; margin: 4px 0 0; }

/* ---------- Chat ---------- */
#chat { background: var(--app-bg); }
.bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: #fff;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 3px solid var(--amber);
}
/* hamburger — only shown on narrow screens (see media query) */
.nav-toggle {
  display: none; background: none; border: none; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 8px;
  margin: -6px -8px -6px 0; border-radius: 8px;
}
.nav-toggle:active { background: rgba(255,255,255,.12); }
/* When the enterprise shell is on (always, once signed in) the drawer is opened
   by the topbar hamburger (#fx-topbar-toggle). Retire the legacy chat-bar
   hamburger at ALL widths so a phone never shows two hamburgers (the old rule
   only hid it ≥721px, leaving a duplicate on mobile / 641–720px tablets). */
body.fx-shell-on #nav-toggle { display: none !important; }
.bar .bar-icon { height: 26px; width: 26px; border-radius: 7px; }
.bar .bar-name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.who { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; }
.role-chip {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--amber); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.link { background: none; border: none; color: var(--amber); font-size: 14px; cursor: pointer; font-weight: 600; }

.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 85%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--amber); color: var(--ink); border-bottom-right-radius: 5px; font-weight: 500; }
.msg.bot { align-self: flex-start; background: var(--bot); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.msg.bot code { background: #f1f3f5; padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.msg.bot strong { color: var(--ink); }
.hint { align-self: center; color: var(--muted); font-size: 13px; text-align: center; max-width: 92%; margin: 4px 0 2px; line-height: 1.4; }
.typing { color: var(--muted); font-style: italic; }
.tools { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.msg.bot a.doclink, a.doclink {
  display: inline-block; margin: 2px 0; color: var(--amber-dark); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(217,142,38,.4);
}
.msg.bot a.doclink:active { color: var(--ink); }

/* ---------- in-app document viewer (PDF / image) ---------- */
.docview {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--ink);
}
.docview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: #fff;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 3px solid var(--amber);
}
.docview-title {
  color: #fff; font-weight: 600; font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docview-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.docview-bar { position: relative; z-index: 2; }
.docview-frame {
  flex: 1; width: 100%; border: none; background: #fff; position: relative; z-index: 0;
}
#docview-close { font-size: 16px; font-weight: 700; padding: 4px 6px; }
/* Floating, always-reachable exit — sits above the embedded PDF (which on iOS can
   overlay the top bar). Thumb-reachable at the bottom, clear of the home bar. */
.docview-done {
  position: fixed; z-index: 1001; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--amber); color: var(--ink); border: none; border-radius: 999px;
  padding: 13px 30px; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.docview-done:active { transform: translateX(-50%) translateY(1px); }
body.docview-on { overflow: hidden; }

/* Stands in for the iframe when a document is too large to preview (openDoc).
   Sits in the same flex slot so the bar and the Done button are unchanged. */
.docview-large {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 24px 24px 96px;
  background: var(--ink); color: #fff; text-align: center;
}
.docview-large__ico { font-size: 44px; line-height: 1; opacity: .9; }
.docview-large__sub {
  margin: 0; max-width: 32em; font-size: 15px; line-height: 1.5; color: #d7d7d7;
}
.docview-large__btn {
  background: var(--amber); color: var(--ink); border-radius: 999px;
  padding: 13px 26px; font-size: 16px; font-weight: 700; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.docview-large__btn:active { transform: translateY(1px); }

/* quick-action chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px 4px 6px; }
.chip {
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 999px; padding: 8px 13px; font-size: 13px; cursor: pointer; line-height: 1.2;
}
.chip:active { background: #fff4e2; border-color: var(--amber); }

.focus-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--panel);
  border-top: 1px solid var(--line);
}
.focus-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); flex: none;
}
#focus-job {
  flex: 1; min-width: 0; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd;
  color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2376808a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
#focus-job:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.16); }
#focus-job.focused {
  border-color: var(--amber); background-color: #fff7ec; font-weight: 600;
}
.composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; resize: none; max-height: 120px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 18px; font-size: 16px; outline: none; background: #fbfcfd;
}
.composer textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.16); }
.composer button {
  width: 46px; height: 46px; border-radius: 50%; padding: 0; flex: none;
  background: var(--amber); color: var(--ink); border: none; font-size: 18px; font-weight: 700; cursor: pointer;
}
.composer button:disabled { opacity: .45; }

/* ---------- Audit (admin) ---------- */
#audit { background: var(--app-bg); }
.bar-actions { display: flex; align-items: center; gap: 14px; }
.role-chip.mini { font-size: 9px; padding: 1px 6px; margin-left: 6px; }
.audit-filters {
  display: flex; gap: 8px; padding: 10px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.audit-filters input { flex: 1; padding: 9px 12px; font-size: 14px; }
.audit-filters button {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 0 16px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.audit-count { padding: 8px 16px 0; color: var(--muted); font-size: 12px; }
.audit-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.audit-row {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; box-shadow: 0 1px 2px rgba(0,0,0,.04); font-size: 14px;
}
.audit-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.audit-who { font-weight: 700; color: var(--ink); display: flex; align-items: center; }
.audit-at { color: var(--muted); font-size: 11px; white-space: nowrap; }
.audit-q { color: var(--ink); font-weight: 500; line-height: 1.4; }
.audit-tools {
  margin-top: 6px; font-size: 11px; color: var(--ink-2); background: #f1f3f5;
  border-radius: 6px; padding: 5px 8px; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.audit-a { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.audit-list code { background: #f1f3f5; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.audit-toggle {
  margin-top: 8px; background: none; border: none; padding: 2px 0; cursor: pointer;
  color: var(--amber-ink, #8a5a00); font-weight: 700; font-size: 12px;
}
.audit-toggle:hover { text-decoration: underline; }
.audit-convo {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.convo-msg { display: flex; flex-direction: column; gap: 2px; }
.convo-who {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.convo-body {
  font-size: 13px; line-height: 1.45; color: var(--ink); border-radius: 10px;
  padding: 7px 10px; word-break: break-word;
}
.convo-u .convo-body { background: #eef3fb; }
.convo-a .convo-body { background: #f4f6f8; }

/* ---------- Company chat ---------- */
#space { background: var(--app-bg); }
.smsg { display: flex; flex-direction: column; max-width: 85%; }
.smsg.me { align-self: flex-end; align-items: flex-end; }
.smsg.them { align-self: flex-start; align-items: flex-start; }
.smsg-who { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 2px 10px; }
.smsg-body {
  padding: 9px 13px 7px; border-radius: 16px; font-size: 15px; line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word; position: relative;
}
.smsg.me .smsg-body { background: var(--amber); color: var(--ink); border-bottom-right-radius: 5px; }
.smsg.them .smsg-body { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.smsg-at { display: block; margin-top: 3px; font-size: 10px; opacity: .6; text-align: right; }
.smsg-body code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; font-size: 13px; }

/* ---------- Field log ---------- */
#field { background: var(--app-bg); }
.field-form {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.field-form input, .field-form select, .field-form textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; outline: none; background: #fbfcfd; width: 100%;
}
.field-form textarea { resize: none; }
.field-form input:focus, .field-form select:focus, .field-form textarea:focus {
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.16);
}
.kind-tabs { display: flex; gap: 6px; }
.kind-tab {
  flex: 1; padding: 8px; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.kind-tab.active { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.f-row { display: flex; gap: 8px; align-items: center; }
.f-lab { font-size: 13px; color: var(--muted); white-space: nowrap; }
#f-submit {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
#f-submit:disabled { opacity: .5; }
.field-count, .audit-count { padding: 8px 16px 0; color: var(--muted); font-size: 12px; }
.field-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.field-row {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.field-row.kind-material { border-left-color: #2e7d32; }
.field-row.kind-equipment { border-left-color: #1565c0; }
.field-row.kind-note { border-left-color: var(--amber); }
.field-row.kind-issue { border-left-color: #c62828; }
.field-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kind-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; color: #fff;
}
.kind-badge.note { background: var(--amber-dark); }
.kind-badge.material { background: #2e7d32; }
.kind-badge.equipment { background: #1565c0; }
.kind-badge.issue { background: #c62828; }
.issue-sev {
  display: inline-block; font-size: 11px; font-weight: 700; margin-top: 2px;
  padding: 2px 8px; border-radius: 999px; background: #f1f3f5; color: var(--ink-2);
}
.issue-sev.sev-urgent { background: #fdecea; color: var(--danger); }
.issue-sev.sev-normal { background: #fff4e2; color: #8a5a00; }
.issue-sev.sev-low { background: #eef1f4; color: var(--muted); }
.field-job { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }
.field-state {
  font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--muted);
  background: #f1f3f5; padding: 2px 7px; border-radius: 999px;
}
.field-state.s-verified { background: #e3f2fd; color: #1565c0; }
.field-state.s-approved, .field-state.s-actioned { background: #e8f5e9; color: #2e7d32; }
.field-state.s-rejected { background: #fdecea; color: var(--danger); }
.field-item { font-size: 15px; font-weight: 600; color: var(--ink); }
.field-body { font-size: 14px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; white-space: pre-wrap; }
.field-meta { font-size: 11px; color: var(--muted); margin-top: 5px; }
.field-tagged { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.field-shared { color: #2e7d32; font-weight: 600; }
/* tag picker: dropdown + printed removable chips */
.f-tagged-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px; }
.tagged-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--ink); background: #fff4e2;
  border: 1px solid #f0c97a; border-radius: 999px; padding: 4px 6px 4px 11px;
}
.tagged-x {
  background: none; border: 0; color: #8a5a00; font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 999px;
}
.tagged-x:active { background: rgba(0,0,0,.08); }
.f-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.f-check input:disabled { opacity: .5; }
.field-need { color: var(--danger); font-weight: 600; margin-left: 4px; }
.field-order { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.field-instr { font-size: 12px; color: #8a5a00; margin-top: 2px; }
.field-missing {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700;
  color: #8a5a00; background: #fff4e2; border: 1px solid #f0c97a;
  padding: 2px 8px; border-radius: 999px;
}
.f-missing {
  font-size: 13px; color: #8a5a00; background: #fff4e2; border: 1px solid #f0c97a;
  border-radius: 8px; padding: 9px 11px; line-height: 1.4;
}
.f-missing .link { color: var(--amber-dark); font-weight: 700; padding: 0; }
.rv-detail-wrap:empty { display: none; }
.rv-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rv-detail input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fbfcfd;
}
.rv-detail .f-row { display: flex; gap: 6px; }
.d-save {
  background: var(--ink); color: #fff; border: none; border-radius: 8px;
  padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ---------- Outbox (admin) ---------- */
#outbox { background: var(--app-bg); }
.outbox-entry {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: opacity .3s, transform .3s;
}
.outbox-entry.decided { opacity: 0; transform: translateX(40px); }
.ob-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 15px; }
.ob-actions { display: flex; flex-direction: column; gap: 8px; }
.act-card { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 9px; padding: 9px 11px; background: #fbfcfd; }
.act-card.act-po { border-left-color: #2e7d32; }
.act-card.act-email { border-left-color: #1565c0; }
.act-card.act-knowify { border-left-color: #6a1b9a; }
.act-card.act-alert { border-left-color: var(--amber-dark); }
.act-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.act-kind { font-weight: 700; font-size: 13px; }
.act-status { font-size: 10px; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #f1f3f5; color: var(--muted); }
.act-status.s-sent { background: #e8f5e9; color: #2e7d32; }
.act-status.s-skipped { background: #fdecea; color: var(--danger); }
.act-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.act-email { white-space: pre-wrap; word-wrap: break-word; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 8px; margin: 6px 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; max-height: 220px; overflow-y: auto; }
.act-mailto { display: inline-block; margin-top: 2px; }
.act-actions { display: flex; gap: 8px; margin-top: 8px; }
.act-actions button { flex: 1; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.act-actions button:disabled { opacity: .5; }
.act-send { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.act-skip { background: #fff; color: var(--muted); }
.act-resolved { font-size: 11px; color: var(--muted); margin-top: 5px; }
#outbox-list { gap: 12px; }

/* ---------- Review queue (admin) ---------- */
.review-card { transition: opacity .3s, transform .3s; }
.review-card.decided { opacity: 0; transform: translateX(40px); }
.rv-check-wrap { margin-top: 8px; }
.rv-check { border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.rv-check.rv-pending { background: #f1f3f5; color: var(--muted); font-style: italic; }
.rv-check.rv-ok { background: #e8f5e9; color: #235c27; }
.rv-check.rv-flag { background: #fff4e2; color: #8a5a00; border: 1px solid #f0c97a; }
.rv-sum { font-weight: 600; }
.rv-conf { font-weight: 400; opacity: .75; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.rv-act { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.rv-flags { margin: 5px 0 0; padding-left: 18px; }
.rv-flags li { margin: 2px 0; }
.rv-actions { display: flex; gap: 8px; margin-top: 10px; }
.rv-actions button { flex: 1; padding: 10px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.rv-actions button:disabled { opacity: .5; }
.rv-approve { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.rv-reject { background: #fff; color: var(--danger); border-color: #e3b4ae; }

/* ---------- Users (admin) ---------- */
.users-add { padding: 12px 16px 0; }
.users-add button {
  background: var(--amber); color: var(--ink); border: none;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 14px; }
.user-form { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px 4px; }
.user-form .user-form-actions { display: flex; gap: 8px; }
.user-form .user-form-actions button[type=submit] {
  background: var(--amber); color: var(--ink); border: none; padding: 10px 16px;
  border-radius: 10px; font-weight: 700; cursor: pointer; }
.chk { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.chk input { width: auto; }
.mock-crew { margin: 12px 16px 0; padding: 12px 14px; background: #fff; border: 1px dashed var(--line); border-radius: 12px; }
.mock-crew-title { font-weight: 700; color: var(--ink); }
.mock-crew-note { color: var(--ink-2); font-size: 13px; line-height: 1.4; margin: 4px 0 0; }
.mock-crew-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.mock-crew-actions button:not(.link) {
  background: var(--amber); color: var(--ink); border: none;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 14px; }
.mock-crew-actions button:disabled { opacity: .5; }
.mock-crew-result { margin-top: 10px; padding: 10px 12px; background: #e6f4ea; border-radius: 10px; color: var(--ink); font-size: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mock-crew-result[hidden] { display: none; }
.mock-crew-pin { font-size: 22px; letter-spacing: 3px; font-variant-numeric: tabular-nums; user-select: all; }
.mock-crew-msg { color: #2e7d32; font-size: 14px; margin: 8px 0 0; }
.users-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.user-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.user-card.inactive { opacity: .6; }
.user-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-name { font-weight: 700; color: var(--ink); }
.user-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ubadge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.b-admin { background: var(--amber); color: var(--ink); }
.b-crew { background: #eef1f4; color: var(--ink-2); }
.b-ext { background: #e8eefb; color: #3b5bdb; }
.b-off { background: #f1d6d2; color: var(--danger); }
.b-grant { background: #e6f4ea; color: #2e7d32; }
.b-perm { background: #efe7fb; color: #6d3bd6; }
.b-quar { background: #fbe3de; color: #b23b26; border: 1px solid #e0a89e; }
.user-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.user-actions .danger { color: var(--danger); }
.role-select { font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--line, #d4d9de); border-radius: 6px; background: #fff; color: var(--ink); }

/* ---------- share files (upload) ---------- */
#upload { background: var(--app-bg); overflow-y: auto; }
.upload-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.upload-form .hint { margin: 0; }
.up-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px; text-align: center; cursor: pointer;
  background: var(--panel); border: 2px dashed var(--line); border-radius: 14px;
  color: var(--muted); transition: border-color .15s, background .15s;
}
.up-drop:hover, .up-drop.drag { border-color: var(--amber); background: #fffdf5; }
.up-drop-icon { font-size: 26px; color: var(--ink-2); }
.up-drop-text { font-size: 14px; }
.up-filelist { display: flex; flex-direction: column; gap: 6px; }
.up-file {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink);
}
.up-file span { color: var(--muted); flex: none; }
.up-progress { font-size: 14px; color: var(--ink-2); text-align: center; padding: 8px; }
.up-result { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.up-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #2e9e5b;
  border-radius: 12px; padding: 12px 14px;
}
.up-card-h { font-size: 14px; color: var(--ink); }
.up-card-b { font-size: 13px; color: var(--muted); margin-top: 4px; }
.up-card-e { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }

/* ---------- Personal journal (private) ---------- */
.journal-privacy {
  margin: 0; padding: 10px 14px; background: #fff6e7;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.45;
}
.j-row2 { display: flex; gap: 8px; }
.j-row2 input { flex: 1; min-width: 0; }
.j-share { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.j-share-hint { margin: -4px 0 2px; font-size: 12px; color: var(--muted); }
.jentry {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.jentry-head { display: flex; align-items: center; gap: 8px; }
.jentry-title { font-weight: 600; font-size: 14.5px; flex: 1; }
.jdel { margin-left: auto; color: var(--muted); font-size: 13px; }
.jbadge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--muted);
}
.jb-failure { background: var(--danger); }
.jb-near_miss { background: #e07b39; }
.jb-challenge { background: var(--amber-dark); }
.jb-win { background: #2e8b57; }
.jb-note { background: var(--muted); }
.jentry-body { margin: 8px 0 6px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--ink); }
.jentry-meta { font-size: 12px; color: var(--muted); }

/* ---------- 3D model portal ---------- */
#iso { background: var(--app-bg); }
.iso-pane { flex: 1; min-height: 0; display: flex; }
#iso-locked, #iso-pending { align-items: center; justify-content: center; padding: 24px; }
.iso-card {
  width: 100%; max-width: 460px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 24px; box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.iso-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.iso-card .iso-sub { color: var(--muted); font-size: 13.5px; line-height: 1.5;
  text-transform: none; letter-spacing: 0; margin: 0 0 18px; }
.iso-note { color: #2e8b57; font-size: 13px; margin: 0 0 14px; font-weight: 600; }
.iso-card button {
  background: var(--amber); color: #1b1b1b; border: 0; border-radius: 12px;
  padding: 13px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.iso-card button:disabled { opacity: .6; cursor: default; }
.iso-msg { margin-top: 14px; color: var(--danger); font-size: 13px; }

/* the streaming viewer */
#iso-live { background: #0f1115; }
.iso-viewer { position: relative; flex: 1; min-height: 0; display: flex; }
#iso-screen { width: 100%; height: 100%; object-fit: contain;
  cursor: grab; user-select: none; -webkit-user-drag: none; background: #0f1115;
  touch-action: none; -webkit-touch-callout: none; }
#iso-screen.grabbing { cursor: grabbing; }
/* crisp, stable overlay of the control panel (it only changes on toggle, so it
   shouldn't blur with every low-quality motion frame). Clicks pass through. */
.iso-panel-ovl { position: absolute; display: none; pointer-events: none;
  user-select: none; -webkit-user-drag: none; z-index: 2; }
.iso-vstatus { position: absolute; left: 12px; bottom: 10px; color: #cbd2dc;
  font-size: 12px; background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 6px;
  transition: opacity .5s; pointer-events: none; }
.iso-vstatus.fade { opacity: 0; }
.iso-expiry { position: absolute; left: 54px; top: 11px; color: #e5e7eb;
  font-size: 12px; background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 999px;
  pointer-events: none; }
.iso-fsbtn { position: absolute; left: 12px; top: 10px; width: 34px; height: 30px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  color: #e5e7eb; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; cursor: pointer; line-height: 1; }
.iso-fsbtn:hover { background: rgba(0,0,0,.72); }
.iso-viewer:fullscreen { background: #0f1115; }
.iso-viewer:-webkit-full-screen { background: #0f1115; }
.iso-viewer:fullscreen #iso-screen { width: 100%; height: 100%; }

/* model picker (per-model gated 3D assets) */
.iso-models { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 0; background: var(--panel); }
.iso-model { background: var(--app-bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; line-height: 1; }
.iso-model.on { border-color: var(--amber); background: #fff7e9; color: var(--ink); box-shadow: 0 0 0 1px var(--amber) inset; }
.iso-row-model { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; background: var(--app-bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; }

/* admin queue + allowlist — collapsed by default so the viewer gets the full screen;
   toggled open from the bar, and drag the grip to resize it. */
.iso-baractions { display: flex; align-items: center; gap: 14px; }   /* iso bar actions (own class — must NOT collide with the chat nav .bar-actions, which fx-shell hides) */
.iso-admin { border-top: 1px solid var(--line); background: var(--panel);
  padding: 0 16px 22px; overflow-y: auto; height: 320px; position: relative; flex: none; }
.iso-admin[hidden] { display: none; }
.iso-grip { position: sticky; top: 0; z-index: 4; height: 15px; margin: 0 -16px 8px;
  cursor: ns-resize; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; touch-action: none; }
.iso-grip::before { content: ""; width: 46px; height: 4px; border-radius: 999px;
  background: var(--line); }
.iso-grip:hover::before { background: var(--muted); }
.iso-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 14px 0 8px; }
.iso-admin .iso-sub { color: var(--muted); font-size: 12.5px; margin: -4px 0 10px; }
.iso-list { display: flex; flex-direction: column; gap: 6px; }
.iso-row { display: flex; align-items: center; gap: 10px;
  background: var(--app-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; }
.iso-row-name { font-weight: 600; font-size: 14px; }
.iso-row-when { color: var(--muted); font-size: 12px; }
.iso-row-act { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.iso-row-act button { background: var(--amber); color: #1b1b1b; border: 0;
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.iso-row-act button.link { background: none; color: var(--muted); padding: 6px 4px; font-weight: 500; }
.iso-row-act button.danger { color: var(--danger); }
.iso-empty { color: var(--muted); font-size: 13px; padding: 4px 2px; }
.iso-allow { display: flex; gap: 8px; margin-bottom: 10px; }
.iso-allow input { flex: 1; padding: 10px 12px; font-size: 14px; }
.iso-allow button { background: var(--amber); color: #1b1b1b; border: 0; border-radius: 10px;
  padding: 0 16px; font-weight: 600; cursor: pointer; }
.iso-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.iso-chip { display: inline-flex; align-items: center; gap: 6px;
  background: var(--app-bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 6px 5px 12px; font-size: 13px; }
.iso-chip button { background: none; border: 0; color: var(--muted); font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0 4px; }
.iso-chip-perm { border-color: #2e8b57; background: #eaf6ef; }

/* ===================================================================
   MOBILE OPTIMIZATION (phones / narrow viewports)
   Collapses the crowded header nav into a tap-friendly ☰ menu and
   enlarges small controls so labels are readable on a phone.
   =================================================================== */
@media (max-width: 640px) {
  /* header nav -> dropdown menu */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .bar-actions {
    display: none; position: absolute; top: 100%; right: 8px;
    z-index: 50; flex-direction: column; align-items: stretch;
    min-width: 200px; max-width: 78vw; gap: 0;
    background: #232323; border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px; padding: 6px; margin-top: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
  }
  .bar-actions.open { display: flex; }
  .bar-actions .link {
    width: 100%; text-align: left; font-size: 16px; font-weight: 600;
    color: #fff; padding: 13px 14px; border-radius: 8px;
  }
  .bar-actions .link:active { background: rgba(255,255,255,.10); }
  .bar-actions #logout { color: var(--amber); }

  /* the brand can shrink so the ☰ always has room */
  .bar .bar-name { font-size: 15px; }
  .who { min-width: 0; }
  .bar .bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* kind tabs: 2-up and bigger so 4–5 labels stay readable */
  .kind-tabs { flex-wrap: wrap; gap: 6px; }
  .kind-tab {
    flex: 1 1 calc(50% - 3px); min-height: 46px; padding: 11px 8px;
    font-size: 14.5px; border-radius: 11px;
  }

  /* bigger tap targets / readable text on the small controls */
  .chip { font-size: 14.5px; padding: 10px 15px; }
  .field-form input, .field-form select, .field-form textarea { font-size: 16px; }
  .tagged-chip { font-size: 14.5px; padding: 6px 8px 6px 13px; }
  .tagged-x { font-size: 16px; }
  .f-check, .j-share { font-size: 14.5px; }
  #f-submit { padding: 14px; font-size: 16px; }
  .rv-actions button, .act-actions button { padding: 13px; font-size: 15px; }
  .iso-row-act button { padding: 9px 14px; font-size: 14px; }

  /* back/refresh links in sub-screen headers a touch larger */
  .bar > .link, .who > .link, .bar-actions ~ .link, #field-refresh,
  #iso-refresh, #journal-refresh, #review-refresh { font-size: 15.5px; }
}

/* ---------- human resources ---------- */
.hr-tabs {
  display: flex; gap: 6px; padding: 10px 12px 0;
  /* On a phone the tab strip (7 tabs for an admin) is wider than the viewport;
     scroll it horizontally instead of overflowing/clipping. Desktop is
     unaffected (only scrolls when the tabs don't fit). */
  overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hr-tabs::-webkit-scrollbar { display: none; }
.hr-tab {
  padding: 7px 14px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;   /* keep tab size; scroll rather than squish */
}
.hr-tab.active { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.hr-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hr-toolbar {
  display: flex; gap: 8px; padding: 12px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.hr-toolbar input[type="search"] { flex: 1; }
.hr-toolbar input, .hr-toolbar select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; background: #fbfcfd; outline: none;
}
.hr-toolbar input:focus, .hr-toolbar select:focus {
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.16);
}
#hr-add-btn {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 0 16px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hr-form-head { font-weight: 700; color: var(--ink); }
#he-save {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
#he-save:disabled { opacity: .5; }
.hr-row { border-left: 3px solid var(--muted); }
.hr-row.st-ACTIVE { border-left-color: #2e7d32; }
.hr-row.st-INACTIVE { border-left-color: #b08900; }
.hr-row.st-TERMINATED { border-left-color: #b0b6bd; opacity: .82; }
.hr-name { font-weight: 700; color: var(--ink); flex: 1; }
.hr-row-actions { margin-top: 6px; }
.hr-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--muted);
}
.hr-status.s-ACTIVE { background: #2e7d32; }
.hr-status.s-INACTIVE { background: #b08900; }
.hr-status.s-TERMINATED { background: #8a9099; }
/* My HR self card */
.hr-self { flex: 1; overflow-y: auto; padding: 16px; }
.hr-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; max-width: 520px; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.hr-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hr-card h2 { margin: 0; font-size: 20px; color: var(--ink); }
.hr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.hr-pref-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.hr-pref-form input { flex: 1 1 160px; min-width: 0; }
.hr-dl dt { color: var(--muted); font-size: 13px; }
.hr-dl dd { margin: 0; color: var(--ink-2); font-size: 14px; }

/* HR self-service detail sections (withholding, accrued leave, advances) */
.hr-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hr-section h3 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.hr-sub { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 6px 0 3px; }
.hr-adv {
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; margin-bottom: 8px;
}
.hr-adv-top { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hr-adv-b { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.hr-pill {
  font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
}
.hr-pill.open { background: #fff4e2; color: #8a5a00; }
.hr-pill.done { background: #e8f5e9; color: #2e7d32; }
.hr-stublist { display: flex; flex-direction: column; gap: 6px; }
.hr-stub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px;
}
.hr-stub:active { background: #fff4e2; border-color: var(--amber); }
.hr-stub-date { font-size: 14px; font-weight: 600; color: var(--ink); }
.hr-stub-date::before { content: "📄 "; }
.hr-stub-net { font-size: 14px; font-weight: 700; color: #2e7d32; }
.hr-stub-net::after { content: " ›"; color: var(--muted); font-weight: 400; }

/* HR requests (employee submit + admin queue) */
.hr-badge {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 4px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center;
}
/* pending-request count on the HR button in the main nav */
.nav-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 2px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  vertical-align: middle;
}
.hr-newreq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.hr-newreq select, .hr-newreq input, .hr-newreq textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; background: #fbfcfd; width: 100%; outline: none;
}
.hr-newreq .f-row { display: flex; gap: 8px; align-items: center; }
.hr-newreq textarea { resize: none; }
#hr-req-submit {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
#hr-req-submit:disabled { opacity: .5; }
.hr-reqlist { display: flex; flex-direction: column; gap: 8px; }
.hr-req, .hr-req-card {
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.hr-req-card { background: #fff; }
.hr-req-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.hr-req-b { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.hr-req-dn { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hr-req-st {
  margin-left: auto; font-size: 10px; text-transform: uppercase; font-weight: 700;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: #f1f3f5; color: var(--muted);
}
.hr-req-st.s-pending { background: #fff4e2; color: #8a5a00; }
.hr-req-st.s-approved { background: #e8f5e9; color: #2e7d32; }
.hr-req-st.s-denied { background: #fdecea; color: var(--danger); }
.hr-req-st.s-paid { background: #e3f2fd; color: #1565c0; }
.rq-actions { display: flex; gap: 8px; margin-top: 10px; }
.rq-actions button {
  flex: 1; padding: 10px; border-radius: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line);
}
.rq-approve, .rq-verify { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.rq-deny, .rq-noreach { background: #fff; color: var(--danger); border-color: #e3b4ae; }
.rq-paid { background: #1565c0; color: #fff; border-color: #1565c0; }
.hr-req-st.s-verified { background: #e8f5e9; color: #2e7d32; }
.hr-req-st.s-unreachable { background: #fdecea; color: var(--danger); }

/* Call-in: employee "can't make it in" quick action */
.hr-callin-card {
  margin: 14px 0; padding: 14px; border-radius: 12px;
  background: #fff7ec; border: 1px solid #f3d199;
}
.hr-callin-card h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.hr-callin-form { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.hr-callin-form textarea, .hr-callin-form input[type=date] {
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; background: #fff; font-family: inherit;
}
.hr-callin-btn {
  padding: 13px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--danger); color: #fff; font-size: 15px; font-weight: 700;
}
.hr-callin-btn:active { background: #a5311f; }
.hr-callin-btn:disabled { opacity: .6; cursor: default; }
.hr-callin-ok { color: #2e7d32; font-weight: 600; font-size: 14px; margin: 0; }

/* Supervisor "call-ins to verify" notification panel */
.hr-team-callins { margin: 4px 0 14px; }
.hr-callin-inbox {
  padding: 12px 14px; border-radius: 12px;
  background: #fdf3f1; border: 1px solid #f0c8c0;
}
.hr-callin-inbox h3 {
  margin: 0 0 2px; font-size: 16px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.hr-callin-count {
  font-size: 12px; font-weight: 800; color: #fff; background: var(--danger);
  min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px;
}
.hr-callin-row {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
}
.hr-callin-row.done { opacity: .7; }
.hr-callin-who { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.hr-callin-meta { font-size: 14px; color: var(--ink-2); margin: 4px 0 8px; }
.hr-callin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hr-callin-tel {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  padding: 9px 14px; border-radius: 9px; font-weight: 700; font-size: 14px;
  background: #2e7d32; color: #fff;
}
.hr-callin-actions button {
  padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line); background: #fff;
}
.hr-callin-verify { color: #2e7d32; border-color: #a5d6a7 !important; }
.hr-callin-noreach { color: var(--danger); border-color: #e3b4ae !important; }

/* Phone notifications toggle */
.hr-notify-on {
  padding: 12px 16px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--amber); color: var(--ink); font-size: 15px; font-weight: 700;
}
.hr-notify-on:disabled { opacity: .6; cursor: default; }
.hr-notify-actions { display: flex; gap: 8px; margin-top: 8px; }
.hr-notify-actions button {
  padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.hr-notify-off { color: var(--danger); border-color: #e3b4ae !important; }

/* HR document vault */
.hr-doclist { display: flex; flex-direction: column; gap: 6px; }
.hr-doc {
  display: flex; align-items: center; gap: 8px;
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.hr-doc-open {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-doc-open:active { color: var(--amber-dark); }
.hr-doc-cat, .hr-doc-co, .hr-doc-adminonly {
  flex: none; font-size: 10px; text-transform: uppercase; font-weight: 700;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
}
.hr-doc-cat { background: #eef1f4; color: var(--ink-2); }
.hr-doc-co { background: #e3f2fd; color: #1565c0; }
.hr-doc-adminonly { background: #fdecea; color: #b3261e; }
.hr-doc-del { flex: none; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 4px; }
.hr-doc-del:active { color: var(--danger); }
.hr-docup {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.hr-docup input[type=text], .hr-docup select {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: #fbfcfd;
}
.hr-docup input[type=file] { font-size: 13px; }
#hr-doc-upload {
  background: var(--ink); color: #fff; border: none; border-radius: 9px;
  padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
}
#hr-doc-upload:disabled { opacity: .5; }

/* HR directory: name-only clickable bubble */
.hr-row { padding: 12px 14px; }
.hr-name-btn {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--ink); padding: 0; font-family: inherit;
}
.hr-name-btn:hover { color: var(--amber-dark); }
.hr-name-btn::after { content: " ›"; color: var(--muted); font-weight: 400; }
/* HR internal profile (admin) */
.hr-profile { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.hr-profile-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel);
}
#hr-profile-edit {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
#hr-profile-body { padding: 16px; }

/* HR pay history + record-adjustment form */
.hr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#hr-payadj-btn {
  background: var(--amber); color: var(--ink); border: none; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hr-payadj-form {
  display: flex; flex-direction: column; gap: 8px; margin: 10px 0;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd;
}
.hr-payadj-form input, .hr-payadj-form select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff; outline: none;
}
.hr-payadj-form input:focus, .hr-payadj-form select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,166,60,.16); }
#pa-save { background: var(--amber); color: var(--ink); border: none; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
#pa-save:disabled { opacity: .5; }
.hr-payadj-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hr-payadj { border: 1px solid var(--line); border-left: 3px solid #2e7d32; border-radius: 10px; padding: 8px 12px; background: #fff; }
.hr-payadj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hr-payadj-eff { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hr-payadj-reason { color: var(--ink-2); font-size: 13px; margin-top: 2px; }


/* time tracking */
.time-status { padding: 12px; }
.time-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.time-card.off { color: var(--muted); }
.time-card.on { border-left: 4px solid #2e7d32; }
.time-on-top { font-weight: 700; color: #2e7d32; }
.time-elapsed { font-size: 34px; font-weight: 800; color: var(--ink); margin: 6px 0; font-variant-numeric: tabular-nums; }
.time-on-job { color: var(--ink-2); font-weight: 600; }
.time-out-btn { margin-top: 12px; width: 100%; background: #c0392b; color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.time-out-btn:disabled { opacity: .6; }
#t-clockin-btn { background: #2e7d32; color: #fff; border: none; border-radius: 10px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
#t-clockin-btn:disabled { opacity: .6; }
.time-geo-hint { color: var(--muted); font-size: 12px; margin: 0; }
.time-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.time-row { border-left: 3px solid var(--muted); }
.time-row.s-open { border-left-color: #2e7d32; }
.time-row.s-approved { border-left-color: #1565c0; }
.time-dur { font-weight: 700; color: var(--ink); }
.time-row-actions { margin-top: 6px; }
.time-phase-row { display: flex; align-items: center; justify-content: space-between; }


/* time approval */
.time-mine { padding: 0 12px 12px; }
.time-status-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--muted, #76808a); color: #fff; }
.tsc-closed { background: #b08900; }
.tsc-submitted { background: #1565c0; }
.tsc-supervisor_approved { background: #6a1b9a; }
.tsc-payroll_approved { background: #2e7d32; }
.tsc-flagged { background: #c0392b; }
.tsc-open { background: #76808a; }
.time-flag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 8px; margin: 2px 4px 0 0; }
.tfl-info { background: #eef2f6; color: #46535f; }
.tfl-warning { background: #fff3d6; color: #8a6d00; }
.tfl-alert { background: #fdecea; color: #b0241a; border: 1px solid #f3b7b1; font-weight: 600; }
.tfl-blocking { background: #fdecea; color: #b0241a; }
.tfl-critical { background: #b0241a; color: #fff; }
.time-row-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.time-row-actions button { font-size: 13px; border-radius: 8px; border: 1px solid var(--line); background: #fff; padding: 6px 12px; cursor: pointer; }
.time-row-actions .approve { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.time-row-actions .payroll { background: #6a1b9a; color: #fff; border-color: #6a1b9a; }
.time-row-actions .reject { background: #c0392b; color: #fff; border-color: #c0392b; }
.tm-submit { background: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; }


/* ---------- Progress dashboard (admin) ---------- */
#progress { background: var(--app-bg); }
.prog-tabs { display: flex; gap: 6px; padding: 12px 12px 0; }
.prog-tab {
  flex: 1; padding: 9px 14px; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.prog-tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.prog-windows {
  display: flex; gap: 4px; padding: 10px 12px 4px; overflow-x: auto;
}
.prog-win {
  flex: 1; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums;
}
.prog-win.is-on { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.prog-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.prog-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prog-kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 10px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.prog-kpi.acc { border-bottom: 3px solid var(--amber); }
.pk-n { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.pk-l { font-size: 11px; color: var(--muted); margin-top: 6px; }

.prog-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pc-name { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.pc-count {
  font-size: 12px; font-weight: 700; color: var(--ink-2); background: #eef1f4;
  padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 9px;
  padding: 7px 0; border-top: 1px solid #f1f3f5; font-size: 13.5px;
}
.pc-list li:first-child { border-top: 0; }
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-top: 6px; }
.pc-dot.mem { background: #6a1b9a; }
.pc-txt { color: var(--ink); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.pc-txt b { color: var(--ink); }
.pc-at { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }

.prog-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .prog-mgrid { grid-template-columns: repeat(2, 1fr); } }
.pm { background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.pm-n { display: block; font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-l { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

.k-pill {
  flex: none; align-self: start; margin-top: 2px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--muted);
  padding: 2px 7px; border-radius: 999px;
}
.k-chat { background: var(--amber-dark); } .k-field { background: #2e7d32; }
.k-team { background: #1565c0; } .k-journal { background: #6a1b9a; }
.k-orders { background: #8a5a00; } .k-admin { background: #76808a; }

.prog-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 2px 4px 8px; }

/* Operations Center — owner's morning grid (Production headline) */
.ops-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.ops-title { font-weight: 800; font-size: 16px; color: var(--ink); }
.ops-now { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ops-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 12px; padding: 13px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ops-card.attn { border-left-color: var(--amber); }
.ops-card.clear { border-left-color: #2e7d32; }
.ops-card.muted { opacity: .55; }
.ops-dept { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ops-n { font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 6px; }
.ops-card.muted .ops-n { color: var(--muted); }
.ops-label { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.ops-sub { font-size: 11px; color: var(--amber-dark); margin-top: 4px; font-weight: 600; }

@media (max-width: 900px) { .ops-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .prog-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FX-AD-UI-0001 — Enterprise UI redesign (Builder candidate)
   Phase 1 (design system) + Phase 2 (nav shell). ADDITIVE / REVERSIBLE.
   Provenance: docs/redesign/02-design-system.md, 03-nav-and-ia.md.
   Gold hue = ratified amber (OD-1). Delete this whole block to revert.
   ========================================================================== */
:root {
  /* --- semantic color (02 §1.1) --- */
  --gold: var(--amber);              /* OD-1 ratified: keep deployed amber */
  --gold-hover: var(--amber-dark);
  --gold-soft: rgba(240,166,60,.14);
  --bg: #f7f8fa;  --surface: #fff;  --surface-2: #f2f3f5;  --border: #e3e6ea;
  --text: #111827;  --text-2: #374151;  --text-muted: #6b7280;
  --success: #2e7d32;  --warning: #b7791f;  --danger-2: #c53030;  --info: #2563eb;
  --shell-bg: #171a21;  --shell-bg-2: #0f1115;
  --shell-text: #e5e7eb;  --shell-text-muted: #9aa3af;  --shell-active: var(--gold);
  /* --- type scale (02 §1.2) --- */
  --fs-page-title: 22px; --lh-page-title: 28px; --fw-page-title: 600;
  --fs-section: 16px; --fw-section: 600;
  --fs-card-title: 15px; --fw-card-title: 600;
  --fs-body: 13px; --lh-body: 20px;
  --fs-meta: 12px; --fw-meta: 400;
  --fs-table: 13px; --fs-btn: 13px; --fw-btn: 600;
  /* --- geometry (02 §1.3) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --pad-page: 22px; --pad-card: 16px;
  --h-input: 38px; --h-btn: 36px; --h-row: 40px;
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-2: 0 4px 12px rgba(16,24,40,.10);
  --sidebar-w: 232px; --sidebar-w-collapsed: 56px; --topbar-h: 52px;
}
@media (max-width: 720px) {
  :root { --h-input: 44px; --h-btn: 44px; --h-row: 44px; --pad-page: 16px; }
}

/* ---------- Buttons (02 §2.1) ---------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-btn); padding: 0 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); color: var(--text); transition: background .12s, border-color .12s;
}
.fx-btn:hover { background: #e9ebee; }
.fx-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.fx-btn--primary { background: var(--gold); color: #1b1b1b; border-color: var(--gold); }
.fx-btn--primary:hover { background: var(--gold-hover); }
.fx-btn--secondary { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.fx-btn--secondary:hover { background: var(--surface-2); }
.fx-btn--danger { background: transparent; color: var(--danger-2); border-color: #f0c9c9; }
.fx-btn--danger:hover { background: #fdecec; }
.fx-btn--success { background: var(--success); color: #fff; border-color: var(--success); }
.fx-btn--success:hover { filter: brightness(.95); }
.fx-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.fx-btn--ghost:hover { background: var(--surface-2); }
.fx-btn-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Badges (02 §2.2) ---------- */
.fx-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border: 1px solid transparent; white-space: nowrap;
}
.fx-badge--read-only,.fx-badge--reversible,.fx-badge--idle,.fx-badge--inactive { background:#eef0f2; color:#5b6572; }
.fx-badge--recommend,.fx-badge--running { background:#e7effe; color:#1d4ed8; }
.fx-badge--human,.fx-badge--pending { background:#fdf2e0; color:#9a6410; }
.fx-badge--collision,.fx-badge--failed,.fx-badge--rejected { background:#fdecec; color:#b42318; }
.fx-badge--approved,.fx-badge--passed,.fx-badge--active { background:#e7f4e8; color:#276a2b; }
.fx-badge--terminated { background:#f3e8e8; color:#8a4a4a; }
.fx-badge--running::before { content:""; width:6px; height:6px; margin-right:5px; border-radius:50%;
  background: currentColor; animation: fxpulse 1.2s ease-in-out infinite; }
@keyframes fxpulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ---------- Card (02 §2.3) ---------- */
.fx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: var(--pad-card); }
.fx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-card__title { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-card-title); color: var(--text); }
.fx-card__meta { color: var(--text-muted); font-size: var(--fs-meta); margin: 4px 0 8px; }
.fx-card__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.fx-card__actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Table (02 §2.4) ---------- */
.fx-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.fx-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-muted);
  text-align: left; font-weight: 600; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .03em;
  padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fx-table__row { border-bottom: 1px solid var(--border); }
.fx-table__row:nth-child(even) { background: #fafbfc; }
.fx-table td { padding: 0 12px; height: var(--h-row); color: var(--text-2); vertical-align: middle; }

/* ---------- Menu (02 §2.5) ---------- */
.fx-menu { position: relative; display: inline-block; }
.fx-menu__list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 4px; margin: 0; list-style: none; }
.fx-menu__list li { padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-body);
  color: var(--text-2); cursor: pointer; }
.fx-menu__list li:hover { background: var(--surface-2); }
.fx-menu__list li.is-danger { color: var(--danger-2); }

/* ---------- Page header (02 §2.6) ---------- */
.fx-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: var(--pad-page) var(--pad-page) 0; }
.fx-page-title { margin: 0; font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: var(--fw-page-title); color: var(--text); }
.fx-page-header__sub { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--text-muted); }
.fx-page-header__actions { display: flex; gap: 8px; align-items: center; }

/* ---------- KPI stat (02 §2.7) ---------- */
.fx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.fx-stat__num { display: block; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.fx-stat__label { font-size: var(--fs-meta); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fx-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: var(--pad-page); }

/* ==========================================================================
   Phase 2 — Navigation shell (03-nav-and-ia.md). Sidebar (OD-2 ratified).
   ========================================================================== */
.fx-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 60;
  background: var(--shell-bg); color: var(--shell-text); display: flex; flex-direction: column;
  border-right: 1px solid #000; transition: width .15s ease, transform .2s ease;
}
.fx-sidebar__head { display: flex; align-items: center; gap: 8px; height: var(--topbar-h); padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.07); flex: none; }
.fx-sidebar__logo { width: 24px; height: 24px; flex: none; }
.fx-sidebar__brand { font-weight: 700; font-size: 14px; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.fx-sidebar__collapse { margin-left: auto; background: transparent; border: 0; color: var(--shell-text-muted);
  cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; }
.fx-sidebar__collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.fx-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 8px 16px; }
.fx-nav__group-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--shell-text-muted);
  padding: 14px 10px 6px; }
.fx-nav__group + .fx-nav__group .fx-nav__group-label { border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; }
.fx-nav__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 1px 0;
  background: transparent; border: 0; border-radius: 7px; color: var(--shell-text); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; position: relative; }
.fx-nav__item:hover { background: rgba(255,255,255,.06); }
.fx-nav__item.is-active { background: var(--gold-soft); color: #fff; }
.fx-nav__item.is-active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background: var(--gold); }
.fx-nav__icon { width: 18px; height: 18px; flex: none; opacity: .9; }
.fx-nav__icon svg { width: 100%; height: 100%; display: block; }
.fx-nav__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.fx-nav__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold);
  color: #1b1b1b; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fx-sidebar__foot { flex: none; border-top: 1px solid rgba(255,255,255,.07); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px; }
.fx-sidebar__user { font-size: 12px; color: var(--shell-text-muted); flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-sidebar__foot .fx-btn { color: var(--shell-text); }
.fx-sidebar__foot .fx-btn:hover { background: rgba(255,255,255,.08); }
.fx-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }

/* collapsed (desktop icon-only) */
body.fx-collapsed .fx-sidebar { width: var(--sidebar-w-collapsed); }
body.fx-collapsed .fx-sidebar__brand,
body.fx-collapsed .fx-nav__label,
body.fx-collapsed .fx-nav__group-label,
body.fx-collapsed .fx-nav__badge,
body.fx-collapsed .fx-sidebar__user { display: none; }
body.fx-collapsed .fx-sidebar__foot { justify-content: center; }
body.fx-collapsed .fx-nav__item { justify-content: center; padding: 8px 0; }
body.fx-collapsed .fx-sidebar__head { justify-content: center; padding: 0; }
body.fx-collapsed .fx-sidebar__collapse { margin-left: 0; }

/* desktop: shell pushes screen content right; old flat nav retired */
@media (min-width: 721px) {
  body.fx-shell-on section.screen:not(#login):not(#setpin) { padding-left: var(--sidebar-w); transition: padding-left .15s ease; }
  body.fx-shell-on.fx-collapsed section.screen:not(#login):not(#setpin) { padding-left: var(--sidebar-w-collapsed); }
  body.fx-shell-on .bar-actions { display: none !important; }
  body.fx-shell-on #nav-toggle { display: none; }
  .fx-scrim { display: none; }
}
/* mobile: sidebar is an off-canvas drawer opened by #nav-toggle */
@media (max-width: 720px) {
  .fx-sidebar { transform: translateX(-100%); width: min(82vw, 300px); box-shadow: var(--shadow-2); }
  body.fx-drawer-open .fx-sidebar { transform: none; }
  body.fx-drawer-open { overflow: hidden; }   /* lock page scroll behind the drawer */
  body:not(.fx-drawer-open) .fx-scrim { display: none; }
  body.fx-shell-on .bar-actions { display: none !important; }
}
/* FX-AD-UI-0001 end */

/* ==========================================================================
   Mobile optimization pass (2026-07-13) — additive, reversible. Fixes surfaced
   by a full 375px audit across every role/screen.
   ========================================================================== */
@media (max-width: 720px) {
  /* iOS zooms the page when a focused form control is < 16px. Force 16px on
     mobile so tapping any field never triggers the jarring zoom-in. */
  input, select, textarea { font-size: 16px; }
  /* Wide admin tables that aren't inside an .fx-table-wrap (payroll register,
     estimating settings): let them scroll horizontally instead of pushing the
     whole page sideways on a phone. */
  .pr-table, .pr-register, table.est-cfg {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
}

/* ==========================================================================
   FX-AD-UI-0001 Phase 3a — fxConfirm modal (02 §3). ADDITIVE / REVERSIBLE.
   Provenance: docs/redesign/02-design-system.md §3 (fxConfirm), §2.1 (buttons).
   ========================================================================== */
.fx-modal-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(15,17,21,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fx-modal {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 20px;
}
.fx-modal__msg { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); margin: 0 0 16px; }
.fx-modal__input {
  width: 100%; height: var(--h-input); padding: 0 12px; margin: 0 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--fs-body); color: var(--text); box-sizing: border-box;
}
.fx-modal__input:focus { outline: none; border-color: var(--amber); }
.fx-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }
/* FX-AD-UI-0001 P3a css end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·2 — Review queue → fx-queue-card. ADDITIVE / REVERSIBLE.
   Provenance: docs/redesign/04-page-specs.md §5. Compact card + one-line
   recommendation (fixes "recommendation block dominates"). Delete to revert.
   ========================================================================== */
.fx-queue-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: var(--pad-card); margin: 0 0 10px; }
.fx-qc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-qc-title { font-size: var(--fs-card-title); font-weight: var(--fw-card-title); color: var(--text); }
.fx-qc-meta { font-size: var(--fs-meta); color: var(--text-muted); margin: 3px 0 6px; }
.fx-qc-detail { color: var(--text-2); }
.fx-qc-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); margin: 2px 0 6px; }
/* confidence chip — a review-local level cue, NOT the governance badge enum */
.fx-qc-conf { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-left: 4px; }
.fx-qc-conf.conf-high { background: #e7f4e8; color: #276a2b; }
.fx-qc-conf.conf-medium { background: #fdf2e0; color: #9a6410; }
.fx-qc-conf.conf-low { background: #fdecec; color: #b42318; }
.fx-qc-rec { font-size: var(--fs-meta); color: var(--text-2); margin-left: 6px; }
.fx-qc-missing { font-size: var(--fs-meta); color: var(--text-2); margin-top: 4px; }
.fx-qc-missing-l { font-weight: 700; color: var(--warning); text-transform: uppercase; font-size: 10px;
  letter-spacing: .04em; margin-right: 5px; }
.fx-qc-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.fx-queue-card .rv-check { margin-top: 6px; font-size: var(--fs-body); color: var(--text-2); }
.fx-queue-card .rv-check .rv-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fx-queue-card .rv-pending { color: var(--text-muted); }
.fx-queue-card .rv-detail-wrap:not(:empty) { margin-top: 8px; }
.fx-queue-card.decided { opacity: 0; transform: translateX(40px); }  /* keep the decide() exit animation */
/* FX-AD-UI-0001 P3b·2 end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·3 — Field Log recent entries -> fx-table. ADDITIVE.
   Provenance: docs/redesign/04-page-specs.md §2. Delete block to revert.
   ========================================================================== */
#field-list .fx-table td { vertical-align: top; }
#field-list .fx-ft-summary { color: var(--text-2); max-width: 380px; }
#field-list .fx-ft-summary .field-need { display: block; color: var(--text-muted); font-size: var(--fs-meta); margin-top: 2px; }
#field-list .fx-ft-date { white-space: nowrap; color: var(--text-muted); }
#field-list .fx-table .kind-badge { text-transform: capitalize; }
#field-list .fx-table .field-state { font-size: var(--fs-meta); }
/* FX-AD-UI-0001 P3b·3 end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·4 — Governance operations cockpit -> fx-tables. ADDITIVE.
   Provenance: docs/redesign/04-page-specs.md §4 (job-runner cockpit rows).
   Only the two cockpit lists are migrated; pixel-stream board + share links
   untouched. Delete block to revert.
   ========================================================================== */
#gov-ctl .fx-table-wrap { margin: 6px 0 4px; }
#gov-ctl .fx-table td { vertical-align: middle; }
#gov-ctl .gov-purpose { max-width: 360px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gov-ctl .gov-act-cell { text-align: right; white-space: nowrap; }
#gov-ctl .fx-ft-date { white-space: nowrap; color: var(--text-muted); }
/* FX-AD-UI-0001 P3b·4 end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·5 — Global top bar. ADDITIVE / REVERSIBLE.
   Provenance: docs/redesign/03-nav-and-ia.md §1. Sits over the CONTENT area
   (sidebar stays full-height, untouched). Module label + global search
   (routes to Assistant) + user menu + mobile drawer toggle. Delete to revert.
   ========================================================================== */
.fx-topbar { position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--topbar-h); z-index: 55;
  background: var(--shell-bg-2); border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; transition: left .15s ease; }
body.fx-collapsed .fx-topbar { left: var(--sidebar-w-collapsed); }
.fx-topbar__toggle { display: none; background: transparent; border: 0; color: var(--shell-text); font-size: 20px; cursor: pointer; padding: 4px 6px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.fx-topbar__module { color: var(--shell-text); font-weight: 600; font-size: 14px; white-space: nowrap; }
.fx-topbar__search { flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
.fx-topbar__search input { width: 100%; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: var(--shell-text); padding: 0 12px; font-size: 13px; outline: none; }
.fx-topbar__search input::placeholder { color: var(--shell-text-muted); }
.fx-topbar__search input:focus { border-color: var(--gold); background: rgba(255,255,255,.10); }
.fx-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fx-topbar__user { background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--shell-text);
  height: 30px; border-radius: 8px; padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fx-topbar__user:hover { background: rgba(255,255,255,.08); }
.fx-topbar .fx-menu__list { background: var(--surface); }
/* content clears the top bar whenever the shell is on */
body.fx-shell-on section.screen:not(#login):not(#setpin) { padding-top: var(--topbar-h); }
@media (max-width: 720px) {
  .fx-topbar { left: 0; }
  .fx-topbar__toggle { display: inline-flex; }
  .fx-topbar__module { font-size: 13px; }
  .fx-topbar__search { max-width: none; }
}
/* FX-AD-UI-0001 P3b·5 end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·6 — Governance derived stat strip (AD-UI-10 / 04b §3).
   Dark-panel tint of fx-stat; text-value modifier + danger. ADDITIVE.
   ========================================================================== */
#gov-stat.fx-stat-row { padding: 0 0 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
#gov-ctl .fx-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
#gov-ctl .fx-stat__num { color: var(--shell-text); }
#gov-ctl .fx-stat__num--sm { font-size: 15px; font-weight: 600; }
#gov-ctl .fx-stat__num--danger { color: #ff6b6b; }
#gov-ctl .fx-stat__label { color: var(--shell-text-muted); }
/* FX-AD-UI-0001 P3b·6 end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·B — Review four-action row: clarify inline form. ADDITIVE.
   Provenance: docs/redesign/05b §4.4. Delete block to revert.
   ========================================================================== */
.rv-clarify-wrap:not(:empty) { display: flex; gap: 8px; margin: 8px 0 2px; }
.rv-clarify-wrap .rv-clarify-q { flex: 1 1 auto; height: 34px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 10px; font-size: var(--fs-body); outline: none; background: var(--surface); }
.rv-clarify-wrap .rv-clarify-q:focus { border-color: var(--gold); }
/* FX-AD-UI-0001 P3b·B end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·C — Field-log respond-to-clarification. ADDITIVE.
   Provenance: docs/redesign/05b §4.4. Delete block to revert.
   ========================================================================== */
#field-list .fx-needs-info td { background: #fff8ec; }
#field-list .fx-ft-ask { margin-top: 3px; font-size: var(--fs-meta); color: var(--warning); font-weight: 600; }
#field-list .field-respond-row td { background: #fff8ec; padding: 8px 12px 12px; }
#field-list .field-respond { display: flex; flex-direction: column; gap: 6px; }
#field-list .field-respond-q { font-size: var(--fs-meta); color: var(--text-2); }
#field-list .field-respond-note { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; font-size: var(--fs-body); resize: vertical; outline: none; background: var(--surface); }
#field-list .field-respond-note:focus { border-color: var(--gold); }
#field-list .field-respond-actions { display: flex; align-items: center; gap: 10px; }
/* FX-AD-UI-0001 P3b·C end */

/* ==========================================================================
   Field entry discussion thread — reply WITHOUT closing the entry (2026-07-27).
   Used in two places with the same markup: an expanded row under the Field Log
   table, and the .rv-thread-wrap panel inside a Review card. ADDITIVE.
   ========================================================================== */
.fx-thread { display: flex; flex-direction: column; gap: var(--sp-2); }
.fx-thread-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding: 2px 0; }
.fx-thread-msg { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm);
  padding: 6px 9px; background: var(--surface); }
.fx-thread-msg.mine { border-left-color: var(--gold); }
.fx-thread-msg.is-ask { border-left-color: var(--warning); background: #fff8ec; }
.fx-thread-who { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-meta);
  font-weight: 600; color: var(--text-2); }
.fx-thread-when { font-weight: 400; color: var(--text-3, var(--text-2)); }
.fx-thread-ask { font-weight: 600; color: var(--warning); text-transform: uppercase;
  letter-spacing: .03em; }
.fx-thread-body { font-size: var(--fs-body); white-space: pre-wrap; word-break: break-word; }
.fx-thread-note { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; font-size: var(--fs-body); resize: vertical; outline: none;
  background: var(--surface); }
.fx-thread-note:focus { border-color: var(--gold); }
.fx-thread-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-thread-askbox { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta);
  color: var(--text-2); cursor: pointer; }
.fx-thread-note-hint { font-size: var(--fs-meta); }
.fx-thread-dot { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px;
  border-radius: 8px; background: var(--warning); color: #fff; font-size: 11px; line-height: 16px;
  text-align: center; font-weight: 700; }
#field-list .field-thread-btn { margin-left: 6px; }
#field-list .fx-has-unread td { background: #fffbf2; }
#field-list .field-thread-row td { background: var(--surface-2, #fafafa); padding: 8px 12px 12px; }
.review-card .rv-thread-wrap:not(:empty) { margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px dashed var(--border); }
/* thread end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·D — Field Log entry-form density (04 §2 / FL1). CSS-ONLY.
   Restyles the #field entry form to the token scale (compact inputs, tighter
   spacing). Inputs use --h-input so mobile keeps the 44px touch floor
   (AD-UI-07). No markup/logic change. Delete block to revert.
   ========================================================================== */
#field .field-form { gap: var(--sp-2); padding: var(--pad-card); }
#field .field-form input, #field .field-form select {
  height: var(--h-input); padding: 0 12px; font-size: var(--fs-body);
  border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface);
}
#field .field-form textarea {
  min-height: 54px; padding: 8px 12px; font-size: var(--fs-body);
  border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); line-height: var(--lh-body);
}
#field .field-form input:focus, #field .field-form select:focus, #field .field-form textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
#field .kind-tabs { gap: 6px; }
#field .kind-tab { height: 32px; padding: 0 10px; font-size: 12px; border-radius: var(--radius-sm); border-color: var(--border); }
#field .kind-tab.active { background: var(--gold); border-color: var(--gold); color: #1b1b1b; }
#field .f-lab { font-size: var(--fs-meta); }
#field #f-submit { height: var(--h-btn); border-radius: var(--radius-sm); font-size: var(--fs-btn); font-weight: var(--fw-btn); }
@media (max-width: 720px) {
  #field .kind-tab { height: 40px; }   /* touch floor for the segmented kind tabs */
}
/* FX-AD-UI-0001 P3b·D end */

/* ==========================================================================
   FX-AD-UI-0001 P3b·E — top-bar badges (AD-UI-13). ADDITIVE.
   ========================================================================== */
.fx-topbar__badges { display: flex; align-items: center; gap: 8px; }
.fx-topbar__reviewbadge { height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--gold); color: #1b1b1b; border: 0; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fx-topbar__reviewbadge:hover { background: var(--gold-hover); }
.fx-topbar__bell { height: 30px; padding: 0 10px; border-radius: 8px; background: transparent;
  border: 1px solid rgba(255,255,255,.14); color: var(--shell-text); font-size: 13px; cursor: pointer; }
.fx-topbar__bell:hover { background: rgba(255,255,255,.08); }
@media (max-width: 720px) { .fx-topbar__reviewbadge { display: none; } }  /* keep the bell on mobile, drop the wider chip */
/* FX-AD-UI-0001 P3b·E end */

/* HR payroll reports (read-only: admin + accountant) */
.hr-rep-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.hr-rep-controls .f-lab { margin: 0 2px 0 4px; }
.hr-rep-controls select { min-width: 0; }
.hr-rep-controls #hr-rep-csv { margin-left: auto; white-space: nowrap; }
.hr-rep-table th, .hr-rep-table td { white-space: nowrap; }
.hr-rep-table td:first-child, .hr-rep-table th:first-child { white-space: normal; }

/* Payroll report agent (HR Reports) */
.hr-ask { border: 1px solid var(--line, #2a2a33); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--card, rgba(255,255,255,.02)); }
.hr-ask-head { font-weight: 600; margin-bottom: 8px; }
.hr-ask-tag { display: inline-block; font-weight: 400; font-size: 11px; opacity: .6; margin-left: 6px; }
.hr-ask-row { display: flex; gap: 8px; align-items: stretch; }
.hr-ask-row textarea { flex: 1; resize: vertical; min-height: 40px; padding: 8px 10px; border-radius: 8px; }
.hr-ask-row #hr-ask-send { white-space: nowrap; align-self: stretch; padding: 0 18px; }
.hr-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hr-ask-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line, #2a2a33); background: transparent; color: inherit; cursor: pointer; opacity: .85; }
.hr-ask-chip:hover { opacity: 1; background: rgba(255,255,255,.06); }
.hr-ask-out:not(:empty) { margin-top: 12px; }
.hr-ask-thinking { opacity: .6; font-style: italic; }
.hr-ask-answer p { margin: 0 0 8px; }
.hr-ask-tools { font-size: 11px; opacity: .5; margin-top: 6px; }
.hr-rep-browse { margin-top: 6px; }
.hr-rep-browse > summary { cursor: pointer; opacity: .75; font-size: 13px; padding: 6px 0; }

/* Accountant paystub rows: figures only, non-clickable (no PDF — PII) */
.hr-stub--static { cursor: default; opacity: .95; }

/* Payroll actuals: coverage line + admin importer (HR Reports) */
.hr-pay-coverage { margin: 8px 0 4px; font-size: 13px; }
.hr-pay-cov-ok { color: var(--good, #3fb950); }
.hr-pay-import { border: 1px dashed var(--line, #2a2a33); border-radius: 10px; padding: 10px 12px; margin: 6px 0 12px; }
.hr-pay-import-lab { font-size: 13px; margin-bottom: 8px; }
.hr-pay-import-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hr-pay-import-out:not(:empty) { margin-top: 8px; font-size: 13px; }

/* Payroll report totals row */
.hr-rep-total td { font-weight: 700; border-top: 2px solid var(--line, #2a2a33); }

/* --- collapsible profile sections (employee page declutter, 2026-07-09) --- */
.hr-acc { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0;
  background: #fff; overflow: hidden; }
.hr-acc > summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; list-style: none; user-select: none; }
.hr-acc > summary::-webkit-details-marker { display: none; }
.hr-acc > summary:hover { background: #fffaf1; }
.hr-acc-title { font-weight: 700; font-size: 14.5px; }
.hr-acc-meta { color: #8a7a5c; font-size: 12.5px; margin-left: auto; text-align: right; }
.hr-acc-chev { color: #bbb; font-size: 12px; transition: transform .15s ease; }
.hr-acc[open] > summary { border-bottom: 1px solid var(--line); background: #faf7f0; }
.hr-acc[open] .hr-acc-chev { transform: rotate(180deg); }
.hr-acc-body { padding: 12px 14px; }
.hr-acc-body .hr-section { border: none; padding: 0; margin: 0; }

/* project-list scope pills (Active / Recent / All) — shared by the Projects
   page and every job picker */
.job-scope { border-bottom: none; margin: 0 0 6px; gap: 6px; display: flex; }
.job-scope .hr-tab { padding: 5px 14px; font-size: 12.5px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; }
.job-scope .hr-tab.active { background: var(--amber); border-color: var(--amber-dark);
  color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--amber-dark); }

/* skills matrix — sticky name column, level-tinted cells */
.sk-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sk-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.sk-table th { background: #faf8f4; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: #998a6d; padding: 8px 6px; border-bottom: 2px solid var(--line);
  white-space: nowrap; }
.sk-table th.sk-col { max-width: 86px; white-space: normal; text-align: center; }
.sk-name { position: sticky; left: 0; background: #fff; font-weight: 600;
  padding: 7px 10px; border-right: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.sk-table th.sk-name { background: #faf8f4; text-align: left; }
.sk-cell { text-align: center; padding: 7px 6px; border-bottom: 1px solid #f0ece4;
  min-width: 56px; font-weight: 700; color: #999; }
.sk-cell.sk-edit { cursor: pointer; }
.sk-cell.sk-edit:hover { outline: 2px solid var(--amber); outline-offset: -2px; }
.sk-l1 { background: #f2f2f2; color: #777; }
.sk-l2 { background: #e7f0fe; color: #1a56b0; }
.sk-l3 { background: #fff4e0; color: #8a5a00; }
.sk-l4 { background: #e8f5e9; color: #2e7d32; }

/* ---------- New Project form ---------- */
#np-form textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line, #d9d9e0);
  border-radius: 10px;
  background: var(--card, #fff);
  color: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.np-row { display: flex; gap: 10px; }
.np-col { flex: 1 1 0; min-width: 0; }
.np-col--grow { flex: 2 1 0; }
.np-col--state { flex: 0 0 88px; }
.np-req { color: #c0392b; }
.hint-inline { color: var(--muted, #8a8a94); font-weight: 400; font-size: .85em; }
.np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.np-chip {
  font: inherit; font-size: .85rem; line-height: 1;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #d9d9e0);
  background: var(--card, #fff); color: var(--muted, #6b6b76);
}
.np-chip.is-on {
  background: var(--accent, #2f6f4f); border-color: var(--accent, #2f6f4f);
  color: #fff;
}

/* New Project — billing type selector */
.np-billing { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.np-billopt {
  flex: 1 1 200px; display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line, #d9d9e0); border-radius: 10px;
  background: var(--card, #fff); cursor: pointer;
}
.np-billopt:has(input:checked) { border-color: var(--accent, #2f6f4f); background: var(--accent-soft, rgba(47,111,79,.08)); }
.np-billopt input { margin-top: 3px; }
.np-billopt span { display: flex; flex-direction: column; line-height: 1.25; }
.np-billopt small { color: var(--muted, #8a8a94); font-size: .8em; }

/* ==========================================================================
   iOS PWA safe-area fix (2026-09-02). ADDITIVE / REVERSIBLE — delete to revert.
   black-translucent + viewport-fit=cover extends the page under the iPhone
   status bar/notch, so the fixed .fx-topbar (and its drawer toggle) rendered
   BENEATH the clock — untappable; users couldn't navigate without relaunching.
   Grow the topbar + drawer head by the top inset; env() is 0 everywhere else
   (desktop, Android, Safari tab), so this is a no-op off iOS PWAs.
   ========================================================================== */
.fx-topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.fx-sidebar__head {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
body.fx-shell-on section.screen:not(#login):not(#setpin) {
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}

/* --- BOTTOM inset (2026-09-02, second pass). The block above covered only the
   TOP. Nothing except .composer and .docview-done reserved the home-indicator
   band, so on a notched iPhone the drawer's Sign out button sat inside the
   swipe strip (swipe-home fires instead of the tap) and every module screen
   ended flush against the indicator. Same no-op-off-iOS property. --- */

/* Sign out / admin toggle live here, pinned to the drawer's bottom: 0. */
.fx-sidebar__foot {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* #chat and #space are excluded: they end in a .composer that already carries
   its own inset (app.css:159), and padding here would double it. */
body.fx-shell-on section.screen:not(#login):not(#setpin):not(#chat):not(#space) {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bottom-pinned toasts — legible above the indicator rather than under it.
   .docview-done (app.css:121) already did this correctly; these three did not.
   !important because each sets its own `bottom` in its own later stylesheet. */
.hh-saved, .sb-toast, .exp-toast {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

/* time clock: Switch job beside Clock out on the clocked-in card */
.time-period-total,.time-period-summary{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.time-period-total,.time-period-summary-head,.time-period-person{display:flex;justify-content:space-between;gap:12px}.time-period-person{padding:5px 0}
.time-card-actions { display: flex; gap: 10px; margin-top: 10px; }
.time-card-actions > button { flex: 1; }
.time-switch-btn {
  padding: 12px 10px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600;
  background: #e8edf2; color: #1b2430; cursor: pointer;
}
/* lunch: pauses the clock; the window running out turns the card red */
.time-lunch-btn {
  margin-top: 10px; width: 100%; padding: 14px; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700; background: #f0a500; color: #1b2430; cursor: pointer;
}
.time-lunch-btn:disabled { opacity: .6; }
.time-card.lunch { border-left: 4px solid #f0a500; }
.time-card.lunch.over { border-left-color: #c0392b; }
.time-card.lunch.over .time-elapsed { color: #c0392b; }
.time-back-btn {
  padding: 14px 10px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
  background: #2e7d32; color: #fff; cursor: pointer;
}
.tl-row.over { border-left: 4px solid #c0392b; }
.tl-row .tl-adjust { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.tl-row .tl-adjust input { width: 90px; }

/* timesheets: inline hours editor (time_editor grant) */
.time-edit-form { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; }
.time-edit-form label.wide, .time-edit-form .time-edit-total, .time-edit-form .error, .time-edit-form .time-row-actions { grid-column: 1 / -1; }
.time-edit-form input { font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.time-edit-total { font-size: 13px; font-weight: 600; }
.time-edit-form select { font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; width: 100%; box-sizing: border-box; }
#ts-add-slot .time-edit-form { margin: 0 0 12px; }
.time-pending { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; }
.time-pending b { font-weight: 600; }
@media (max-width: 480px) { .time-edit-form { grid-template-columns: 1fr; } }

/* time clock: the whole page scrolls (the review tabs used to get only the
   leftover strip at the bottom of the viewport). Lists grow to their content;
   the tab strip sticks to the top while you scroll a long timesheet. */
.time-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.time-self { max-width: 640px; margin: 0 auto; width: 100%; }
#time .hr-pane, #time .time-pane { flex: none; min-height: auto; min-width: 0; }
#time .field-list { flex: none; overflow: visible; }
#time #time-tabs { position: sticky; top: 0; z-index: 3; background: var(--bg, #f7f8fa); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#time .hr-toolbar { flex-wrap: wrap; }
#time .hr-toolbar input, #time .hr-toolbar select { flex: 1 1 150px; min-width: 0; }
#time .hr-toolbar button { flex: 0 0 auto; }
/* Toolbar buttons were browser defaults; a phone drew them faint and hard to read. */
#time .hr-toolbar button, #time #tr-refresh {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 15px; font-weight: 600;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); cursor: pointer;
}
#time #ts-add { background: var(--amber); border-color: var(--amber-dark, var(--amber)); color: var(--ink); font-weight: 700; }
#time #ts-totals { padding: 8px 12px; }
.time-more { align-self: center; padding: 8px 12px; }
@media (min-width: 1000px) {
  .time-body { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; gap: 0 8px; max-width: 1400px; margin: 0 auto; width: 100%; }
  .time-body > .time-self { max-width: none; position: sticky; top: 0; }
  .time-body > #time-admin[hidden] { display: none; }
  .time-body:has(> #time-admin[hidden]) { display: block; }
  .time-body:has(> #time-admin[hidden]) > .time-self { max-width: 640px; position: static; }
}
#time #t-job { font-size: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; width: 100%; box-sizing: border-box; background: #fff; }
.time-tab-clock { display: none; }
/* Phones and tablets: admin tabs ride at the top with "My clock" first, instead
   of hiding under the clock and My recent time. */
@media (max-width: 999px) {
  .time-body { display: flex; flex-direction: column; }
  .time-body > #time-admin:not([hidden]) { display: contents; }
  #time #time-tabs { order: -1; flex: none; }
  .time-tab-clock { display: inline-block; }
  .time-body:has(> #time-admin:not([hidden])):not([data-mtab="clock"]) > .time-self { display: none; }
}
@media (max-width: 720px) {
  #time .hr-toolbar input, #time .hr-toolbar select { flex: 1 1 100%; }
  #time .hr-toolbar input[type="date"] { flex: 1 1 130px; }
  #time .hr-toolbar button { flex: 1 1 auto; min-height: 44px; }
}

/* Field log on a phone: the form folds behind "+ New entry" and each entry is a
   card. The six-column table was 555px wide in a 343px window, in a ~200px strip. */
.field-new { display: none; }
@media (max-width: 720px) {
  #field .field-new {
    display: block; margin: 10px 12px 0; min-height: 44px; -webkit-appearance: none; appearance: none;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
    background: var(--amber); border: 1px solid var(--amber-dark, var(--amber)); border-radius: 10px;
  }
  #field.field-form-open .field-new { background: #fff; border-color: var(--line); font-weight: 600; }
  #field:not(.field-form-open) #field-form { display: none; }
  #field.field-form-open #field-form { overflow-y: auto; flex: 0 1 auto; min-height: 0; }
  #field.field-form-open #field-count, #field.field-form-open #field-list { display: none; }
  #field-list .fx-table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
  #field-list .fx-table, #field-list .fx-table tbody { display: block; width: 100%; }
  #field-list .fx-table thead { display: none; }
  #field-list .fx-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center;
    padding: 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  }
  #field-list .fx-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; height: auto; min-height: 0; }
  #field-list .fx-table td:nth-child(1) { grid-area: 1 / 1; }
  #field-list .fx-table td:nth-child(4) { grid-area: 1 / 2; font-weight: 600; font-size: 14px; }
  #field-list .fx-table td:nth-child(5) { grid-area: 1 / 3; font-size: 12px; color: var(--text-muted, #6b7280); white-space: nowrap; }
  #field-list .fx-table td:nth-child(2) { grid-area: 2 / 1 / 3 / -1; font-size: 13px; color: var(--text-muted, #6b7280); }
  #field-list .fx-table td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  #field-list .fx-table td:nth-child(6) { grid-area: 4 / 1 / 5 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #field-list .fx-table td[colspan] { grid-area: 1 / 1 / 2 / -1; }
}

/* Dashboard Project Leads on a phone: each job is a card. The six-column table was
   419px wide in a 309px wrapper, so Back-up B and Edit sat off-screen behind a
   sideways swipe nothing hinted at. Same pattern as the Field log cards above. */
@media (max-width: 720px) {
  #fxl-assign .fx-table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
  #fxl-assign .fx-table, #fxl-assign .fx-table tbody { display: block; width: 100%; }
  #fxl-assign .fx-table thead { display: none; }
  #fxl-assign .fx-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center;
    padding: 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  }
  #fxl-assign .fx-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto !important; height: auto; min-height: 0; }
  #fxl-assign .fx-table td:nth-child(1) { grid-area: 1 / 1; }
  #fxl-assign .fx-table td:nth-child(2) { grid-area: 1 / 2; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
  #fxl-assign .fx-table td:nth-child(6) { grid-area: 1 / 3; }
  #fxl-assign .fx-table td[data-label] { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
  #fxl-assign .fx-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 76px; font-size: 12px; color: var(--text-muted, #6b7280);
  }
  #fxl-assign .fxl-edit { min-height: 36px; padding: 6px 12px; }
}

/* Phones: lock the page horizontally (Rob: on an iPhone the screen floats). Nothing
   may pan the page sideways; the off-canvas sidebar sits left of the viewport. The
   Time Clock tabs wrap so every tab fits instead of scrolling off the right edge. */
@media (max-width: 999px) {
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
  #time #time-tabs { flex-wrap: wrap; overflow-x: visible; gap: 6px; }
  #time #time-tabs .hr-tab { flex: 1 1 30%; min-height: 44px; white-space: nowrap; touch-action: manipulation; }
}

/* ---------- Checks (iPhone QC loop) ----------
   qc.js renders unstyled divs/buttons with no CSS of its own (Michael 2026-09-22:
   couldn't find the Fail control — the buttons were bare browser defaults with no
   gap, no color, no padding, against an otherwise styled app). Mirrors the
   .rv-actions / .act-actions pass/reject button language already in this file. */
.qc-run { padding: 14px; }
.qc-run-title { margin: 0 0 2px; font-size: 17px; font-weight: 700; }
.qc-run-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.qc-step {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  margin-bottom: 12px; background: #fff;
}
.qc-step-text { font-size: 15px; font-weight: 600; line-height: 1.4; }
.qc-step-expect { font-size: 13px; color: var(--muted); margin-top: 4px; }
.qc-step-buttons { display: flex; gap: 8px; margin-top: 10px; }
.qc-step-buttons button {
  flex: 1; min-height: 44px; border-radius: 9px; font-size: 15px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line); -webkit-appearance: none; appearance: none;
}
.qc-btn-pass { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.qc-btn-fail { background: #fff; color: var(--danger); border-color: #e3b4ae; }
.qc-note {
  width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.qc-shot-wrap { margin-top: 8px; }
.qc-shot-input { font-size: 13px; }
.qc-step-status { font-size: 13px; font-weight: 600; margin-top: 6px; min-height: 16px; }
.qc-submit {
  display: block; width: 100%; min-height: 46px; margin-top: 4px; padding: 10px;
  border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--amber); color: #1b1b1b; border: 0; -webkit-appearance: none; appearance: none;
}
.qc-submit-status { font-size: 13px; color: var(--muted); margin-top: 8px; }
.np-site { margin: 8px 0; padding: 8px 0 0; border-top: 1px dashed var(--line, #ccc); }
.np-site .np-s-rm { margin-top: 4px; }
#np-addsite { margin: 6px 0 10px; }
.np-col--zip { flex: 0 0 96px; }
.np-sitetoggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.fp-ov{margin-bottom:12px}.fp-site{padding:4px 0}.fp-site b{display:inline-block;min-width:88px;color:var(--fx-muted,#666)}.fp-fact{padding:3px 0}.fp-fact span{display:inline-block;min-width:170px;color:var(--fx-muted,#666)}.fp-lead{display:flex;align-items:center;gap:10px}.fp-lead>span{min-width:88px;color:var(--fx-muted,#666)}.fp-lead select{min-width:150px;padding:7px 9px;border:1px solid var(--fx-border,#d9e0e7);border-radius:7px;background:var(--fx-surface,#fff);color:var(--fx-text,#1b2733)}.fp-lead small{min-width:54px;color:var(--fx-muted,#666)}.fp-scope{margin-top:8px;line-height:1.5}.fp-doclist{margin:0;padding-left:18px}.fp-doclist li{padding:2px 0}
.fp-worklist{display:flex;flex-direction:column;gap:8px}.fp-workitem{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--fx-border,#e3e8ee)}.fp-workitem:last-child{border-bottom:0}.fp-workitem span,.fp-workitem small{color:var(--fx-muted,#666);font-size:12px}
.fp-sitepick{display:flex;align-items:center;gap:10px;margin:10px 0}.fp-sitepick>span{font-size:12px;font-weight:600;color:var(--fx-muted,#666)}.fp-sitepick select{max-width:min(100%,520px);padding:7px 9px;border:1px solid var(--fx-border,#d9e0e7);border-radius:7px;background:var(--fx-surface,#fff);color:var(--fx-text,#1b2733)}.fp-sitecurrent{margin:10px 0;color:var(--fx-muted,#666)}.fp-sitecurrent b{margin-right:8px;color:var(--fx-text,#1b2733)}

/* ---- Clock screens: one quiet type scale, fluid spacing (phone -> desktop) ----
   14px body, 12px labels, tabular numerals. Scoped to #time so no other screen moves. */
#time {
  --t-gap: clamp(8px, 1.2vw + 4px, 16px);
  --t-pad: clamp(10px, 1vw + 6px, 16px);
  --t-r: 10px;
  --t-hair: #e8ecf0;
  font-size: 14px; line-height: 1.45; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#time .time-body { padding: var(--t-pad); gap: var(--t-gap); }
#time .time-self { display: flex; flex-direction: column; gap: var(--t-gap); }
#time .time-status, #time .time-mine { padding: 0; }
#time .time-card { text-align: left; padding: var(--t-pad); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,30,40,.04); }
#time .time-card.on { border-left: 3px solid #2e7d32; }
#time .time-on-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #2e7d32; }
#time .t-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,.16); }
#time .time-elapsed { font-size: clamp(26px, 2.2vw + 14px, 34px); font-weight: 600; letter-spacing: -.01em; margin: 4px 0 2px; }
#time .time-on-job { font-size: 14px; font-weight: 500; color: var(--ink); }
#time .time-on-job b { font-weight: 700; }
#time .time-on-phase { font-size: 13px; color: var(--ink-2); }
#time .time-since { font-size: 12px; color: var(--muted); margin-top: 2px; }
#time .time-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--t-gap); }
#time .time-switch-btn, #time .time-out-btn, #time .time-lunch-btn, #time .time-back-btn {
  margin: 0; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-sizing: border-box;
}
#time .time-switch-btn, #time .time-lunch-btn { background: #fff; color: var(--ink); border: 1px solid var(--line); }
#time .time-switch-btn:hover, #time .time-lunch-btn:hover { background: #f5f7f9; }
#time .time-out-btn { background: #c0392b; color: #fff; border: 1px solid #c0392b; }
#time .time-back-btn { background: #2e7d32; color: #fff; border: 1px solid #2e7d32; }
#time .time-lunch-btn { margin-top: 8px; border-left: 3px solid #f0a500; }
#time .time-period-total { margin: 0; padding: 10px var(--t-pad); border-radius: var(--t-r); align-items: baseline; }
#time .time-period-total span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
#time .time-period-total strong { font-size: 15px; font-weight: 600; }
#time #time-clockin { display: flex; flex-direction: column; gap: 8px; padding: 0; }
#time #time-clockin select, #time #time-clockin input { font-size: 14px; min-height: 40px; padding: 8px 10px; border-radius: 8px; }
#time #t-job { font-size: 14px; padding: 8px 10px; border-radius: 8px; }
#time #t-clockin-btn { min-height: 42px; font-size: 14px; font-weight: 600; border-radius: 8px; }
#time .time-geo-hint { font-size: 12px; }
#time .hr-section-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
#time .hr-section-head h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* tabs: compact segmented strip */
#time #time-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 10px; }
#time .hr-tab { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; }

/* toolbars and selects */
#time .hr-toolbar { gap: 8px; padding: 0 0 var(--t-gap); }
#time .hr-toolbar input, #time .hr-toolbar select { font-size: 14px; min-height: 38px; padding: 6px 10px; border-radius: 8px; }
#time .hr-toolbar button, #time #tr-refresh { font-size: 14px; font-weight: 600; min-height: 38px; padding: 6px 14px; border-radius: 8px; }

/* pay-period summary: hairline list, two columns once there is room */
#time .time-period-summary { margin: 0 0 var(--t-gap); padding: var(--t-pad); border-radius: 12px; }
#time .time-period-summary-head { align-items: baseline; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--t-hair); }
#time .time-period-summary-head span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#time .time-period-summary-head strong { font-size: 13px; font-weight: 600; }
#time #tr-period-totals { display: block; }
#time .time-period-person { padding: 7px 0; border-bottom: 1px solid var(--t-hair); font-size: 14px; }
#time .time-period-person span { color: var(--ink); }
#time .time-period-person strong { font-weight: 600; }
@media (min-width: 720px) {
  #time #tr-period-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: clamp(16px, 3vw, 32px); }
  #time #tr-period-totals .time-period-summary-head, #time #tr-period-totals > p { grid-column: 1 / -1; }
}

/* entry cards */
#time .field-list { gap: 8px; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1100px) { #time #tr-list, #time #ts-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--t-gap); } }
#time .time-row { padding: 12px var(--t-pad); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--t-r); background: #fff; box-shadow: none; }
#time .time-row .field-top { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
#time .time-row .hr-name { font-size: 14px; font-weight: 600; margin-right: auto; }
#time .time-row .time-dur { font-size: 14px; font-weight: 600; }
#time .time-row .field-item { font-size: 13px; color: var(--ink); }
#time .time-row .field-item b { font-weight: 600; }
#time .time-phase-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; font-size: 12px; color: var(--ink-2); background: #f1f3f5; border-radius: 999px; }
#time .time-row .field-body, #time .time-row .field-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
#time .time-row .field-body a, #time .time-row .field-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
#time .time-status-chip { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px; }
#time .time-row-actions { gap: 6px; margin-top: 10px; }
#time .time-row-actions button { min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 600; border-radius: 8px; }
#time .time-row-actions .reject { background: #fff; color: #c0392b; border-color: #e3b5af; }
#time .time-flag { font-size: 12px; }
#time .time-edit-form input, #time .time-edit-form select { font-size: 14px; }
@media (max-width: 480px) {
  #time .time-row-actions button { flex: 1 1 auto; min-height: 38px; }
}

/* T&M materials at clock-out (2026-10-19) */
.tm-co-pending { margin: 10px 0; padding: 12px; border: 1px solid #f0a500; border-left-width: 4px; border-radius: 14px; background: #fffaf0; }
.tm-co-head { font-weight: 600; margin-bottom: 6px; }
.tm-co-item { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-top: 6px; color: var(--ink); cursor: pointer; }
.tm-co-item span { display: block; font-size: .85em; color: var(--muted); margin-top: 2px; }
.tm-co-modal { max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; }
.tm-co-modal h3 { margin: 0 0 8px; }
.tm-co-row { display: grid; grid-template-columns: 1fr 64px 72px; gap: 6px; margin-bottom: 6px; }
.tm-co-row input { min-width: 0; height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; box-sizing: border-box; }
.tm-co-add { margin: 2px 0 10px; }
.tm-co-recent { margin: 0 0 10px; font-size: .9em; color: var(--muted); }
.tm-co-actions { flex-wrap: wrap; }