/* ============================================================================
   XcodeFix HRMS — application additions to the Graphite design system.
   styles.css owns the visual language; this file only adds patterns the static
   prototype did not need (auth, wizard, flash, dropdowns, admin tables).
   Tokens come from styles.css :root so re-theming stays a single change.
   ========================================================================== */

/* --- icons ---------------------------------------------------------------
   icon() emits <svg class="icon"> with no width/height attributes. An SVG
   without intrinsic dimensions falls back to 300x150px, so this default is what
   keeps every inline icon the size of the text it sits beside. Variants
   (.nav-icon, .flash-icon, .dd-icon) override it.
   ------------------------------------------------------------------------- */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: -0.18em;
}
.btn .icon, .btn-link .icon { width: 15px; height: 15px; }
.icon-btn .icon { width: 18px; height: 18px; }
.section-label .icon, .overline .icon { width: 15px; height: 15px; vertical-align: -0.15em; }

/* --- flash messages ------------------------------------------------------ */
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px; border: 1px solid;
  font-size: 14px; line-height: 1.5;
}
.flash-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.flash span { flex: 1; }
.flash-close {
  background: none; border: 0; padding: 2px; cursor: pointer; color: inherit;
  opacity: .6; border-radius: 4px; line-height: 0;
}
.flash-close:hover { opacity: 1; }
.flash-close svg { width: 16px; height: 16px; }
.flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.flash-error   { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.flash-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.flash-info    { background: #f0f9ff; border-color: #bae6fd; color: #0c4a6e; }

/* --- stacked form spacing -------------------------------------------------
   The design system spaces fields through the gap on .form-row / .form-grid.
   Forms that simply stack fields (sign-in, wizard steps, admin panels) need
   their own rhythm, or an inline error runs straight into the next label.
   The grid rules re-zero it so spacing is never applied twice.
   ------------------------------------------------------------------------- */
.field + .field,
.field + .form-row,
.field + .remember-row,
.field + fieldset,
.field + .note,
.field + .auth-actions { margin-top: 16px; }

.form-grid > .field + .field,
.form-row > .field + .field { margin-top: 0; }

/* --- inline form errors -------------------------------------------------- */
/* align-items:flex-start keeps the icon against the first line when the
   message wraps onto two. */
.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #b91c1c;
}
.field-error .icon { width: 14px; height: 14px; margin-top: 1px; vertical-align: 0; }
.input.has-error, select.input.has-error, textarea.input.has-error {
  border-color: #dc2626; background: #fffafa;
}
.input.has-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.error-summary {
  border: 1px solid #fecaca; background: #fef2f2; color: #7f1d1d;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px;
}
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: #7f1d1d; }

/* --- auth pages ---------------------------------------------------------- */
.auth-body { background: #f4f6f8; min-height: 100dvh; }
.auth-shell {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 32px 16px; gap: 18px;
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.auth-card.wide { max-width: 640px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand .brand-logo {
  width: 34px; height: 34px; border-radius: 8px; background: var(--ink, #0B1220);
  color: #fff; display: grid; place-items: center; flex: none;
}
.auth-brand b { display: block; font-size: 15px; color: #111827; }
.auth-brand small { display: block; font-size: 12px; color: #6b7280; }
.auth-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; color: #111827; letter-spacing: -.01em; }
.auth-card .lede { font-size: 14px; color: #4b5563; margin: 0 0 20px; line-height: 1.55; }
.auth-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.auth-actions .btn { width: 100%; justify-content: center; }
.auth-links {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f2f4;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13.5px;
}
.auth-links a { color: var(--teal-700, #0F766E); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-foot { font-size: 12.5px; color: #6b7280; }
.auth-foot a { color: #6b7280; }
.remember-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.checkbox-inline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; cursor: pointer; }
.checkbox-inline input { width: 16px; height: 16px; accent-color: var(--teal, #0D9488); cursor: pointer; }

/* --- status / error pages ------------------------------------------------
   The blank layout carries error pages, the setup wizard, the marketing page
   and the legal pages. Only a short status card wants to sit centred in the
   viewport, so the centring is scoped to that case — otherwise the wizard's
   form labels inherit text-align:center.
   ------------------------------------------------------------------------- */
.status-shell { min-height: 100dvh; padding: 32px 16px; }
.status-shell:has(> .status-card) {
  display: grid; place-items: center; text-align: center;
}
.status-card { max-width: 460px; }
/* Matched with the same specificity as `.status-card p`, which follows it. */
.status-card p.status-code {
  font-size: 56px; font-weight: 700; color: var(--teal, #0D9488);
  line-height: 1; letter-spacing: -.03em; margin: 0;
}
.status-card p.status-code .status-icon { width: 44px; height: 44px; }
.status-card h1 { font-size: 20px; font-weight: 600; margin: 14px 0 8px; color: #111827; }
.status-card p { color: #4b5563; font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }

/* --- dropdown menus ------------------------------------------------------ */
.quicklinks-wrap, .account-wrap { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 220px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
  padding: 6px; display: flex; flex-direction: column;
}
.dropdown-right { left: auto; right: 0; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 7px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: #374151; text-decoration: none;
  text-align: left; cursor: pointer;
}
.dropdown a:hover, .dropdown button:hover { background: #f9fafb; color: #111827; }
.dropdown .dd-icon { width: 16px; height: 16px; color: #6b7280; flex: none; }
.dropdown .dd-danger { color: #b91c1c; }
.dropdown .dd-danger:hover { background: #fef2f2; }
.dropdown form { margin: 0; }

/* --- impersonation banner ------------------------------------------------ */
.impersonation-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: #92400e; color: #fffbeb; font-size: 13.5px; padding: 0 16px;
}
.impersonation-banner b { color: #fff; }
/* The bar is a fixed 44px that the page's top padding is calculated from, so it
   must never wrap. The sentence is the part that can afford to lose characters;
   the controls are the part that has to stay reachable. */
.impersonation-banner .ib-message {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.impersonation-banner .ib-form { flex: none; }
.impersonation-banner .ib-icon { width: 16px; height: 16px; vertical-align: -3px; }
.impersonation-banner .ib-form { margin: 0; }
.impersonation-banner .btn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.impersonation-banner .ib-switch { display: flex; align-items: center; gap: 8px; }
.impersonation-banner .ib-switch-label { color: #fde68a; font-size: 12.5px; white-space: nowrap; }
.impersonation-banner .ib-switch select {
  height: 28px; padding: 0 26px 0 8px; font-size: 12.5px; line-height: 26px;
  background-color: #fffbeb; color: #7c2d12; border: 1px solid #fde68a; border-radius: 6px;
  max-width: 260px;
}
.impersonation-banner .ib-search {
  height: 28px; padding: 0 8px; font-size: 12.5px; max-width: 150px;
  background-color: #fffbeb; color: #7c2d12; border: 1px solid #fde68a; border-radius: 6px;
}
.impersonation-banner .ib-search::placeholder { color: #b45309; }
/* Nothing matched what was typed: the switcher has nothing valid to submit. */
.impersonation-banner .ib-search[aria-invalid="true"] {
  border-color: #dc2626; background-color: #fef2f2;
}

/* The "view as" typeahead. The banner is a fixed 44px bar, so the suggestion
   list has to escape it rather than stretch it — it is positioned against the
   input and floats over the page beneath. */
.impersonation-banner .ib-combo { position: relative; }
.impersonation-banner .ib-combo .ib-search { max-width: 220px; width: 220px; }
.impersonation-banner .ib-list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 210;
  width: 320px; max-width: min(320px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 80px)); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: #fff; color: #1f2937;
  border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.impersonation-banner .ib-option {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; line-height: 1.35;
}
.impersonation-banner .ib-option.is-active { background: #fef3c7; }
.impersonation-banner .ib-option-name { font-weight: 600; color: #111827; }
.impersonation-banner .ib-option-meta { font-size: 11.5px; color: #6b7280; }
/* Listed so the search can explain itself, but there is no account to become. */
.impersonation-banner .ib-option.is-unavailable { cursor: not-allowed; opacity: .62; }
.impersonation-banner .ib-option.is-unavailable .ib-option-name { font-weight: 500; }
.impersonation-banner .ib-empty {
  padding: 10px; font-size: 12.5px; color: #6b7280; text-align: center;
}
/* Why the list stops where it does, or who is deliberately not in it. Set apart
   from the people above it so it cannot be mistaken for somebody to pick. */
.impersonation-banner .ib-note {
  padding: 8px 10px; font-size: 12px; color: #6b7280; text-align: center;
  border-top: 1px solid var(--border-card, #e5e7eb); background: #f9fafb;
  cursor: default;
}
/* --- "view as" preview --------------------------------------------------- */
/* The preview bar reuses the impersonation bar's shape so the two read as the
   same kind of warning, in a colour that says "looking", not "signed in as". */
.viewas-banner { background: #1e3a5f; }
.viewas-banner .btn { background: #eff6ff; color: #1e3a5f; border-color: #bfdbfe; }
.viewas-banner b { color: #fff; }

.viewas-wrap { position: relative; }
.viewas-panel { width: 320px; max-width: calc(100vw - 24px); padding: 12px; }
.viewas-panel .va-heading { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.viewas-panel .va-hint { margin: 0 0 10px; font-size: 11.5px; color: #6b7280; line-height: 1.4; }
.viewas-panel .va-form { margin: 0; }
.viewas-panel .va-search { width: 100%; }
.viewas-panel .va-list {
  margin: 8px 0 0; padding: 0; list-style: none;
  max-height: 300px; overflow-y: auto;
}
.viewas-panel .va-option {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1.35;
}
.viewas-panel .va-option.is-active { background: #eff6ff; }
.viewas-panel .va-option-name { font-weight: 600; color: #111827; }
.viewas-panel .va-option-meta { font-size: 11.5px; color: #6b7280; }
.viewas-panel .va-empty { padding: 10px; font-size: 12.5px; color: #6b7280; text-align: center; }

.org-tag { white-space: nowrap; }

.app.has-banner { padding-top: 44px; }
.app.has-banner .sidebar { top: 44px; height: calc(100dvh - 44px); }

/* --- pagination ---------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.pagination-summary { font-size: 13px; color: #6b7280; margin: 0; }
.pagination-summary b { color: #374151; font-variant-numeric: tabular-nums; }
.pagination ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span.is-current, .pagination span.is-disabled {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; border-radius: 7px; background: #fff;
  font-size: 13.5px; color: #374151; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: #f9fafb; border-color: #d1d5db; }
.pagination span.is-current { background: var(--teal, #0D9488); border-color: var(--teal, #0D9488); color: #fff; font-weight: 600; }
.pagination span.is-disabled { opacity: .4; }
.pagination .gap { border: 0; background: none; color: #9ca3af; min-width: 20px; }
.pagination svg { width: 16px; height: 16px; }

/* --- onboarding wizard --------------------------------------------------- */
.wizard-shell { max-width: 900px; margin: 0 auto; padding: 28px 20px 64px; }
.wizard-head { margin-bottom: 26px; }
.wizard-head h1 { font-size: 23px; font-weight: 600; color: #111827; margin: 0 0 6px; letter-spacing: -.01em; }
.wizard-head p { color: #4b5563; font-size: 14.5px; margin: 0; line-height: 1.6; }
.stepper { display: flex; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; flex-wrap: wrap; }
.stepper li { flex: 1 1 90px; min-width: 80px; }
.stepper a, .stepper span {
  display: block; padding: 9px 4px 0; border-top: 3px solid #e5e7eb;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #9ca3af; text-decoration: none;
}
.stepper .is-done a, .stepper .is-done span { border-top-color: var(--teal, #0D9488); color: #4b5563; }
.stepper .is-current a, .stepper .is-current span { border-top-color: var(--teal, #0D9488); color: var(--teal-700, #0F766E); }
.stepper small { display: block; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7280; margin-top: 2px; }
.wizard-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 26px; }
.wizard-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #f1f2f4; flex-wrap: wrap;
}
/* One repeatable shift on the wizard's work-week step. A fieldset so the whole
   block is announced as a group, styled back to a plain panel. */
.shift-card {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; margin: 0 0 14px;
  background: #fcfcfd;
}
.shift-card:has([data-default-shift]:checked) { border-color: #99f6e4; background: #f7fefd; }
.shift-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.shift-card-head .checkbox-inline { font-size: 13px; color: #4b5563; }
.shift-card .section-label { display: block; margin-bottom: 8px; }

/* The twelve accrual-month checkboxes. A fixed track rather than free wrapping
   so the months stay in calendar rows and a gap such as "no Nov, no Dec" is
   visible as a shape instead of having to be read. */
.month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; }
.month-grid .checkbox-inline { font-size: 13px; }
@media (max-width: 640px) { .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.chip-editor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 34px; }
.chip-editor:empty::after { content: 'Nothing added yet.'; font-size: 13px; color: #9ca3af; }
.chip-removable {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px;
  background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px;
  font-size: 13px; color: #115e59;
}
.chip-removable button {
  border: 0; background: none; padding: 2px; cursor: pointer; color: #0f766e;
  line-height: 0; border-radius: 50%;
}
.chip-removable button:hover { background: #ccfbf1; }
.chip-removable svg { width: 13px; height: 13px; }

/* --- module toggles ------------------------------------------------------ */
.module-list { display: grid; gap: 12px; }
.module-row {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; background: #fff;
}
.module-row.is-locked { background: #fafafa; }
.module-row .grow b { display: block; font-size: 14.5px; color: #111827; margin-bottom: 3px; }
.module-row .grow p { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.55; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .track {
  position: absolute; inset: 0; background: #d1d5db; border-radius: 999px;
  transition: background .18s ease;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.switch input:checked + .track { background: var(--teal, #0D9488); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(13, 148, 136, .3); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .track { opacity: .5; }

/* --- template editor ----------------------------------------------------- */
.template-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.token-list { display: flex; flex-wrap: wrap; gap: 6px; }
.token-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 4px 8px; background: #f3f4f6; border: 1px solid #e5e7eb;
  border-radius: 5px; color: #374151; cursor: pointer;
}
.token-chip:hover { background: #e5e7eb; }
.code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; min-height: 320px; resize: vertical;
}
.preview-frame {
  width: 100%; min-height: 460px; border: 1px solid #e5e7eb;
  border-radius: 8px; background: #fff;
}

/* --- misc utilities ------------------------------------------------------ */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.muted { color: #6b7280; }
.text-sm { font-size: 13px; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: #f1f2f4; margin: 20px 0; border: 0; }
.required-mark { color: #dc2626; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .template-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .auth-card { padding: 22px; }
  .wizard-card { padding: 18px; }
  .impersonation-banner { font-size: 12.5px; gap: 10px; }
  /* The placeholder already says what the box is for; the sentence and the
     label are what give way so the switcher itself stays usable. */
  .impersonation-banner .ib-switch-label { display: none; }
  .impersonation-banner .ib-switch select { max-width: 150px; }
  .impersonation-banner .ib-combo .ib-search { width: 150px; max-width: 150px; }
  .impersonation-banner .ib-list { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .switch .track, .switch .track::after { transition: none; }
}

/* --- attendance calendar / helpdesk list: cells and rows are links -------- */
a.cal-cell, a.ticket { color: inherit; text-decoration: none; }
a.cal-cell:hover, a.ticket:hover { background: #f9fafb; }
a.cal-cell:focus-visible, a.ticket:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--text-2); }
.cal-cell.is-today.is-selected { box-shadow: inset 0 0 0 2px var(--teal); }

/* A quiet second line under a table cell's primary value, for the description
   that explains a grade, policy or allocation without competing with its name. */
.sub-line { display: block; margin-top: 2px; color: #6b7280; font-size: 12.5px; line-height: 1.4; }

/* Recruitment pipeline ------------------------------------------------------
   A board rather than a list: hiring is spatial, and the useful question is
   "how many are stuck at screening", which a column answers at a glance. */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.pipeline-col { background: #f8fafc; border: 1px solid var(--border-card, #e5e7eb); border-radius: 10px; padding: 10px; min-height: 120px; }
.pipeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pipeline-head .num { font-size: 13px; color: #6b7280; }
.pipeline-empty { margin: 0; padding: 12px 2px; font-size: 12.5px; color: #9ca3af; }
.pipeline-card { background: #fff; border: 1px solid var(--border-card, #e5e7eb); border-radius: 8px; padding: 10px 11px; margin-bottom: 8px; }
.pipeline-card:last-child { margin-bottom: 0; }
.pipeline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 900px) { .pipeline { grid-template-columns: repeat(5, minmax(170px, 1fr)); } }

/* Monthly attendance sheet — a dense grid, so the day columns stay narrow and
   weekends are shaded to make a month scannable at a glance. */
.sheet th.num, .sheet td.num { padding-left: 4px; padding-right: 4px; text-align: center; min-width: 26px; }
.sheet th.is-weekend { background: #f1f3f5; }
.sheet .code { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; font-size: 11px; font-weight: 600; }

/* A bar inside a list row, for dashboard comparisons where a chart library
   would be more weight than the question deserves. */
.meter { display: block; height: 6px; border-radius: 3px; background: #eef1f4; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--teal, #0d9488); }

/* --- sign-in organisation chooser ---------------------------------------
   .note is a flex row built for "icon, then a line of text". The chooser puts
   a paragraph, a list of organisations and a countdown inside one, which that
   row would sit side by side and squeeze into columns. It stacks instead. */
.org-chooser { display: block; }
.org-chooser .btn small { font-weight: 400; opacity: .75; }

.org-countdown { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--warning-border); }
.org-countdown-label { margin: 0 0 8px; }
/* Width is driven from script, so the transition is what makes it a sweep
   rather than eleven jumps. */
.org-countdown .progress > span { transition: width 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  .org-countdown .progress > span { transition: none; }
}

/* A disabled button that still looks pressable is a promise the page cannot
   keep: the guard behind it is real, so the click lands on a 409 instead of
   doing anything. Nothing in the base sheet styles :disabled, so it is done
   here once for every button in the product rather than per screen. */
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(35%);
}
.btn:disabled:hover,
.btn[disabled]:hover {
  /* Cancel every hover affordance the enabled states add. */
  transform: none;
  filter: grayscale(35%);
}

/* ---------------------------------------------------------------- Activity */
/* Colour-coded day timeline, built from server-positioned segments. */
.tl-track{position:relative;height:30px;background:#eef1f4;border-radius:6px;overflow:hidden;border:1px solid #e5e7eb}
.tl-seg{position:absolute;top:0;height:100%}
.tl-seg.productive{background:#0D9488}
.tl-seg.neutral{background:#94a3b8}
.tl-seg.unproductive{background:#ef4444}
.tl-seg.idle{background:#dfe3e8}
.tl-hours{display:flex;justify-content:space-between;font-size:11px;color:#6b7280;margin-top:6px;font-variant-numeric:tabular-nums}
.tl-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#4b5563}
.tl-legend .swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tl-legend .swatch.productive{background:#0D9488}
.tl-legend .swatch.neutral{background:#94a3b8}
.tl-legend .swatch.unproductive{background:#ef4444}
.tl-legend .swatch.idle{background:#dfe3e8}

/* Screenshot gallery */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.shot-card{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
.shot-card a.shot-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f3f4f6}
.shot-card a.shot-img img{width:100%;height:100%;object-fit:cover;display:block}
.shot-card .shot-meta{padding:8px 10px;font-size:12px;color:#4b5563;display:flex;justify-content:space-between;align-items:center;gap:8px}

/* A one-time secret shown after enrolment */
.secret-box{background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;padding:14px 16px;margin-bottom:16px}
.secret-box code{display:block;background:#0B1220;color:#e2e8f0;padding:10px 12px;border-radius:8px;font-size:12px;word-break:break-all;margin:8px 0}

/* The same block outside that callout, for commands that are instructions
   rather than a secret — and that run over more than one line. */
.code-block{display:block;white-space:pre-wrap;background:#0B1220;color:#e2e8f0;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.5;word-break:break-word;margin:8px 0}

/* --- grouped sidebar ------------------------------------------------------
   Every nav item now lives under a collapsible heading, so the submenu rows
   carry the weight the old top-level links used to. They need to read as
   navigation rather than as a nested afterthought: same hit area, same active
   treatment, only the indent and type size setting them a level down. */
.nav > ul { margin: 0; }
.nav > ul + ul { margin-top: 1px; }

.submenu-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px;
  padding: 7px 14px 7px 46px;
  border-left: 3px solid transparent;
  color: var(--sidebar-muted, #9aa4b2);
  font-size: 13.5px; font-weight: 500;
  transition: color .15s ease, background .15s ease;
}
.submenu-link:hover { color: #fff; background: rgb(255 255 255 / .05); text-decoration: none; }
.submenu-link:focus-visible { outline-offset: -2px; border-radius: 0; }
.submenu-link.is-active {
  border-left-color: var(--teal-active, #2dd4bf);
  color: var(--teal-active, #2dd4bf);
  background: rgba(20, 184, 166, .1);
}
.submenu-link .nav-badge { margin-left: auto; }

/* A closed group whose page you are on still has to look like where you are. */
.nav-toggle.is-child-active .nav-icon { opacity: 1; }
.nav-toggle[aria-expanded="false"].is-child-active {
  color: var(--teal-active, #2dd4bf);
  background: rgba(20, 184, 166, .07);
}

/* --- Reports & charts -------------------------------------------------------
   The chart runtime (assets/reports.js) draws inline SVG into .chart; these
   rules give the marks their weight and the surrounding chrome — legend,
   tooltip, preset chips, catalogue cards — the same Graphite voice as the
   rest of the product. */
.chart { position: relative; width: 100%; min-height: var(--chart-h, 240px); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font); }
/* A donut is drawn at a fixed size and sits beside its legend, so it must keep
   the width the runtime gave it rather than stretching to fill the card — a
   three-slice donut blown up to 500px is a decoration, not a chart. */
.chart-svg.donut { width: auto; height: auto; flex: none; max-width: 100%; }
.chart .grid line { stroke: var(--border-card, #e5e7eb); stroke-width: 1; }
.chart .axis { fill: var(--text-2, #4b5563); font-size: 11px; }
.chart .row-label { fill: var(--text, #111827); font-size: 12.5px; }
.chart .value { fill: var(--text-2, #4b5563); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .cell-value { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .bar, .chart .slice, .chart .cell { transition: opacity .12s ease; }
.chart .hit:hover ~ *, .chart g:hover .bar, .chart .slice:hover, .chart .cell:hover { opacity: .82; }
.chart .guide { stroke: var(--muted, #9ca3af); stroke-dasharray: 3 3; }
.chart .target { stroke: var(--warning, #b45309); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart .target-label { fill: var(--warning, #b45309); font-weight: 600; }
.chart .donut-total { font-size: 20px; font-weight: 600; fill: var(--text, #111827); font-variant-numeric: tabular-nums; }
.chart .donut-center { font-size: 11px; fill: var(--text-2, #4b5563); text-transform: uppercase; letter-spacing: .05em; }
.chart-empty { display: grid; place-items: center; color: #9ca3af; font-size: 13px; border: 1px dashed var(--border-card, #e5e7eb); border-radius: 8px; padding: 12px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-2, #4b5563); }
.chart-legend button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: inherit; font-weight: 500; }
.chart-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.chart .sw, .chart-tip .sw, .donut-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.donut-legend li, .donut-legend a { display: flex; align-items: center; gap: 8px; color: inherit; }
.donut-legend a:hover { text-decoration: none; color: var(--teal-text); }
.donut-legend b { font-weight: 600; }
.donut-legend small { color: #6b7280; min-width: 42px; text-align: right; }

.chart-tip {
  position: fixed; z-index: 120; pointer-events: none;
  background: #111827; color: #fff; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-pop); max-width: 280px;
}
.chart-tip b { display: block; margin-bottom: 4px; font-weight: 600; color: #fff; }
.chart-tip .row { display: flex; justify-content: space-between; gap: 16px; }
.chart-tip .row span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; }
.chart-tip .num { font-variant-numeric: tabular-nums; }

.report-filters { gap: 12px; }
.report-filters .field { min-width: 150px; }
.range-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.range-presets a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border: 1px solid var(--border-card, #e5e7eb); border-radius: 999px;
  background: var(--bg, #f4f6f8); color: var(--text-2, #4b5563); font-size: 12.5px; font-weight: 500;
}
.range-presets a:hover { text-decoration: none; border-color: var(--teal); color: var(--teal-text); }
.range-presets a[aria-current="true"] { background: var(--teal-soft, #f0fdfa); border-color: #99f6e4; color: var(--teal-text); font-weight: 600; }

.report-switcher {
  display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
  background: var(--bg, #f4f6f8); border: 1px solid var(--border-card, #e5e7eb); border-radius: var(--radius-btn, 8px);
}
.report-switcher a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-2, #4b5563);
}
.report-switcher a:hover { text-decoration: none; color: var(--text); }
.report-switcher a[aria-current="page"] { background: var(--surface, #fff); color: var(--teal-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

.report-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.report-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--border-card, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.report-card:hover { text-decoration: none; border-color: var(--teal); box-shadow: var(--shadow-card); }
.report-card .rc-icon {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--teal-soft, #f0fdfa); color: var(--teal-text);
}
.report-card b { display: block; font-size: 14px; font-weight: 600; color: var(--text, #111827); }
.report-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2, #4b5563); line-height: 1.45; }

.data-table th[data-sort] { cursor: pointer; user-select: none; }
.data-table th[data-sort]:hover { color: var(--text); }
.data-table th[aria-sort="ascending"]::after { content: " ↑"; }
.data-table th[aria-sort="descending"]::after { content: " ↓"; }
.data-table td.emphasis { font-weight: 600; }
.data-table .bar-cell { min-width: 140px; }
.data-table .bar-cell .row { gap: 8px; }

.rank-list { display: flex; flex-direction: column; }
.rank-list .list-row .rank { width: 22px; color: #9ca3af; font-size: 12px; font-variant-numeric: tabular-nums; }

@media print {
  .sidebar, .topbar, .scrim, .footer, .page-head-actions, .report-filters, .report-switcher, .flash,
  .impersonation-banner, .chart-legend button[aria-pressed="false"] { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card { break-inside: avoid; box-shadow: none !important; }
  .grid { display: block; }
  .grid > * { margin-bottom: 12px; }
  .table-scroll { overflow: visible !important; }
  a { color: inherit; }
}

/* --- Quick Links picker --------------------------------------------------- */
/* The menu grew from four fixed links into every page the person may open, so
   it needs a search box, its own scroll, and a star per row. It stays a
   .dropdown so opening, closing and Escape keep working unchanged. */
.quicklinks-panel { width: 380px; max-width: calc(100vw - 32px); padding: 8px; }

.ql-search { position: relative; margin-bottom: 6px; }
.ql-search .input { padding-left: 32px; height: 36px; }
.ql-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9ca3af; pointer-events: none;
}

.ql-list { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }

.ql-heading {
  margin: 8px 0 2px; padding: 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #9ca3af;
}
.ql-heading:first-child { margin-top: 2px; }

.ql-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.ql-row:hover, .ql-row.is-cursor { background: #f9fafb; }
.ql-row > a { flex: 1; min-width: 0; padding: 8px 4px 8px 10px; }
.ql-row.is-cursor > a { color: #111827; }
.ql-label { flex: none; color: inherit; }
.ql-group {
  flex: 1; min-width: 0; text-align: right; padding-left: 10px;
  font-size: 11.5px; color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ql-row form { margin: 0; flex: none; }
.ql-star {
  width: 30px; height: 30px; padding: 0; margin-right: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px; cursor: pointer; color: #d1d5db;
}
.ql-star:hover { background: #f3f4f6; color: #f59e0b; }
.ql-star.is-on { color: #f59e0b; }
.ql-star.is-on .ql-star-icon { fill: currentColor; }
.ql-star:focus-visible { outline: 2px solid #0d9488; outline-offset: -2px; }

.ql-empty, .ql-hint { margin: 0; padding: 10px; font-size: 12.5px; color: #6b7280; }
.ql-hint { border-top: 1px solid #f3f4f6; margin-top: 4px; }

@media (max-width: 640px) {
  .quicklinks-panel { width: calc(100vw - 32px); }
  .ql-group { display: none; }
}

/* --- breadcrumbs ---------------------------------------------------------
   The trail is derived from the sidebar tree, and every crumb that has peers
   carries a switcher, so the bar navigates sideways as well as upwards. */
/* overflow must be visible for the switcher menus; styles.css clips it. */
.crumbs { display: flex; align-items: center; gap: 0; overflow: visible; min-width: 0; }
.crumb { position: relative; display: inline-flex; align-items: center; min-width: 0; }
/* A long page name shortens rather than shoving the search box off the bar. */
.crumb > a, .crumb > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch;
}

.crumb-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 2px; padding: 0;
  border: 0; background: none; border-radius: 4px;
  color: var(--muted); cursor: pointer; opacity: .55;
}
.crumb-switch:hover { opacity: 1; background: #f3f4f6; color: #111827; }
.crumb-switch:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; opacity: 1; }
.crumb-switch svg { display: block; }

/* Reset the uppercase letter-spacing the crumb bar sets: this is a menu of
   page names, not a trail. */
.crumb-menu {
  max-height: 60vh; overflow-y: auto;
  text-transform: none; letter-spacing: normal; font-size: 13.5px; font-weight: 400;
}
.crumb-menu a { color: #374151; }
.crumb-menu a.is-active { background: #f0fdfa; color: var(--teal-text); font-weight: 500; }

@media (max-width: 900px) {
  /* Keep the page you are on and its switcher; the ancestry is in the drawer. */
  .crumb:not(:last-child), .crumbs .sep { display: none; }
}

/* --- employee onboarding -------------------------------------------------
   The wizard is the first thing a new joiner ever sees of their employer, so
   it carries the organisation's own mark and colour rather than the product's.
   Everything below draws on the same tokens as the rest of the app; the only
   thing the brand changes is --teal, which the layout already overrides.
   ------------------------------------------------------------------------- */

.onb-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid var(--border-card); border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--teal-soft) 0%, #ffffff 62%);
}
.onb-hero-mark {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; background: #fff;
  border: 1px solid var(--border-card); overflow: hidden;
  font-weight: 700; font-size: 18px; color: var(--teal-text);
}
.onb-hero-mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.onb-hero-text { flex: 1 1 240px; min-width: 0; }
.onb-hero-text h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.onb-hero-text p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.onb-hero-meter { display: flex; align-items: center; gap: 14px; flex: none; }
.onb-hero-meter .onb-pct { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.onb-hero-meter .onb-pct small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

/* Steps read as a list on narrow screens and a rail on wide ones. */
.onb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-steps a, .onb-steps span.onb-step {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--text-2); text-decoration: none;
}
.onb-steps a:hover { background: #f3f4f6; color: var(--text); }
.onb-steps .is-current > * { background: var(--teal-soft); color: var(--teal-text); font-weight: 600; }
.onb-step-dot {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  border: 1.5px solid #d1d5db; background: #fff;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.onb-step-dot svg { width: 13px; height: 13px; }
.is-complete .onb-step-dot { border-color: var(--success); background: var(--success); color: #fff; }
.is-ready    .onb-step-dot { border-color: var(--info);    background: var(--info);    color: #fff; }
.is-rejected .onb-step-dot { border-color: var(--danger);  background: var(--danger);  color: #fff; }
.onb-steps .onb-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A field the employee may not change, and the reason it is there. */
.onb-locked {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 8px;
  border: 1px solid var(--border-card); background: #f9fafb;
}
.onb-locked svg { width: 15px; height: 15px; color: var(--muted); margin-top: 2px; flex: none; }
.onb-locked-body { flex: 1; min-width: 0; }
.onb-locked-body b { display: block; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.onb-locked-body span { display: block; font-size: 14px; color: var(--text); margin-top: 3px; word-break: break-word; }
.onb-locked-body .onb-locked-ask { margin-top: 6px; font-size: 12.5px; }

.onb-field { position: relative; }
.onb-field.is-rejected .input { border-color: var(--danger-border); background: var(--danger-soft); }
.onb-field.is-approved .input { border-color: var(--success-border); background: var(--success-soft); }
.onb-note {
  display: flex; align-items: flex-start; gap: 7px;
  margin: -6px 0 14px; padding: 8px 10px; border-radius: 7px;
  font-size: 12.5px; line-height: 1.45;
  background: var(--danger-soft); border: 1px solid var(--danger-border); color: #7f1d1d;
}
.onb-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* Repeatable sections: education, previous employers, family. */
.onb-row {
  border: 1px solid var(--border-card); border-radius: var(--radius-card);
  padding: 16px 18px; margin-bottom: 12px; background: #fff;
}
.onb-row-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.onb-row-head b { font-size: 13.5px; font-weight: 600; }
.onb-row.is-approved { border-color: var(--success-border); background: var(--success-soft); }
.onb-row.is-rejected { border-color: var(--danger-border); }

/* One requirement on the documents step. */
.onb-doc {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 15px 0; border-top: 1px solid var(--border-card);
}
.onb-doc:first-of-type { border-top: 0; }
.onb-doc-main { flex: 1 1 260px; min-width: 0; }
.onb-doc-main b { font-size: 14px; font-weight: 600; display: block; }
.onb-doc-main p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.onb-doc-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.onb-doc-file {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px; background: #f9fafb;
  border: 1px solid var(--border-card); font-size: 13px;
}
.onb-doc-file svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.onb-doc-file .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-doc-actions { flex: none; display: flex; align-items: center; gap: 8px; }

/* Autosave indicator: present, quiet, and never a layout shift. */
.onb-save {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); min-height: 20px;
}
.onb-save svg { width: 14px; height: 14px; }
.onb-save.is-saving { color: var(--text-2); }
.onb-save.is-saved  { color: var(--success); }
.onb-save.is-failed { color: var(--danger); }

/* HR's verification desk. One row per value, with the verdict beside it. */
.onb-verify { border-top: 1px solid var(--border-card); padding: 13px 0; }
.onb-verify:first-of-type { border-top: 0; }
.onb-verify-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.onb-verify-head b { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.onb-verify-value { font-size: 14.5px; color: var(--text); margin: 4px 0 9px; word-break: break-word; }
.onb-verify-value.is-empty { color: var(--muted); font-style: italic; }
.onb-verify-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onb-verdict { display: inline-flex; border: 1px solid var(--border-table); border-radius: var(--radius-btn); overflow: hidden; }
.onb-verdict label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); cursor: pointer; background: #fff;
  border-left: 1px solid var(--border-table);
}
.onb-verdict label:first-child { border-left: 0; }
.onb-verdict input { position: absolute; opacity: 0; width: 0; height: 0; }
.onb-verdict svg { width: 14px; height: 14px; }
.onb-verdict input:checked + span { font-weight: 600; }
.onb-verdict label:has(input:checked) { background: #f3f4f6; color: var(--text); }
.onb-verdict label.v-yes:has(input:checked) { background: var(--success-soft); color: var(--success); }
.onb-verdict label.v-no:has(input:checked)  { background: var(--danger-soft);  color: var(--danger); }
.onb-verdict label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: -2px; }
.onb-verify-note { flex: 1 1 220px; min-width: 0; }
.onb-verify-note .input { padding: 6px 10px; font-size: 13px; }

/* The banner every signed-in page carries while an onboarding is open. */
.onb-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--info-border); background: var(--info-soft); color: #1e3a8a;
}
.onb-banner.is-returned { border-color: var(--warning-border); background: var(--warning-soft); color: #78350F; }
.onb-banner.is-overdue  { border-color: var(--danger-border);  background: var(--danger-soft);  color: #7f1d1d; }
.onb-banner-icon { width: 20px; height: 20px; flex: none; }
.onb-banner-body { flex: 1 1 260px; min-width: 0; }
.onb-banner-body b { font-weight: 600; font-size: 14px; }
.onb-banner-body p { margin: 2px 0 0; font-size: 13px; opacity: .9; }
.onb-banner .progress { width: 130px; flex: none; }
.onb-banner .btn { flex: none; }

/* The same shape on My Information, where it explains why the record is thin
   and what happens when the due date passes. Louder when sign-in is actually
   being held: at that point it is not a nudge, it is the reason the morning
   did not work. */
.onb-compliance {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--warning-border); background: var(--warning-soft); color: #78350F;
}
.onb-compliance.is-blocking { border-color: var(--danger-border); background: var(--danger-soft); color: #7f1d1d; }
.onb-compliance-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.onb-compliance-body { flex: 1 1 260px; min-width: 0; }
.onb-compliance-body b { font-weight: 600; font-size: 14px; }
.onb-compliance-body p { margin: 2px 0 0; font-size: 13px; opacity: .92; }
.onb-compliance-due { font-size: 12px !important; opacity: .75 !important; }
.onb-compliance .btn { flex: none; align-self: center; }

@media (max-width: 700px) {
  .onb-hero { padding: 18px; }
  .onb-hero-meter { width: 100%; justify-content: space-between; }
  .onb-verdict { width: 100%; }
  .onb-verdict label { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-save { transition: none; }
}

/* A segmented control backed by radio buttons rather than JavaScript. The
   Graphite original styles <button> and <a>; this is the same control where the
   answer has to survive a form post without a script running. */
.segmented label {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 32px; padding: 0 14px;
  border-radius: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.segmented label:hover { background: var(--surface); color: var(--text); }
.segmented label input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label:has(input:checked) {
  background: var(--surface); color: var(--teal-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
.segmented label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 1px; }

/* The settings screen lists documents as disclosure rows; the marker is
   replaced by the Edit affordance already in the summary. */
.onb-doc > summary::-webkit-details-marker { display: none; }
.onb-doc > summary::marker { content: ''; }

@media (prefers-reduced-motion: reduce) {
  .segmented label { transition: none; }
}

/* --- candidate assessment ------------------------------------------------
   Seen by somebody who has no account and no relationship with this product,
   on whatever device they happen to have. So: one column, large targets, the
   employer's mark at the top, and nothing that looks like an admin console.
   ------------------------------------------------------------------------- */

.asm-body { background: var(--bg); margin: 0; }
.asm-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0; z-index: 20;
}
.asm-mark {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--teal-soft); color: var(--teal-text);
  font-size: 12px; font-weight: 700;
}
.asm-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.asm-top b { font-size: 15px; font-weight: 600; }

.asm-main { max-width: 760px; margin: 0 auto; padding: 26px 20px 60px; }
.asm-foot { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; }
.asm-foot p { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }

.asm-card {
  background: #fff; border: 1px solid var(--border-card);
  border-radius: var(--radius-card); padding: 30px;
}
.asm-card h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.asm-lead { font-size: 16px; line-height: 1.55; color: var(--text-2); margin: 0 0 18px; }
.asm-card p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.asm-centered { text-align: center; }
.asm-tick {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 999px; background: var(--success-soft); color: var(--success);
}
.asm-tick svg { width: 26px; height: 26px; }

.asm-facts { display: flex; flex-wrap: wrap; gap: 24px; margin: 22px 0; padding: 0; }
.asm-facts div { margin: 0; }
.asm-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.asm-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }

/* The monitoring notice. Prominent by design — consent that has to be hunted
   for is not consent. */
.asm-notice {
  border: 1px solid var(--info-border); background: var(--info-soft);
  border-radius: var(--radius-card); padding: 18px 20px; margin: 22px 0;
}
.asm-notice h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #1e3a8a; margin: 0 0 10px;
}
.asm-notice p, .asm-notice li { font-size: 14px; line-height: 1.55; color: #1e3a8a; }
.asm-notice ul { margin: 10px 0; padding-left: 20px; }
.asm-notice li { margin-bottom: 5px; }
.asm-notice-foot { opacity: .85; margin-bottom: 0 !important; }

.asm-consent { margin: 20px 0 16px; align-items: flex-start; }
.btn-lg { min-height: 46px; padding: 0 24px; font-size: 15px; }

/* --- the sitting --------------------------------------------------------- */
.asm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  padding: 14px 18px; margin-bottom: 18px;
  position: sticky; top: 59px; z-index: 15;
}
.asm-bar-title b { display: block; font-size: 15px; font-weight: 600; }
.asm-bar-title small { font-size: 12.5px; color: var(--muted); }
.asm-clock { text-align: right; flex: none; }
.asm-clock span {
  display: block; font-size: 24px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.asm-clock small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.asm-clock.is-low span { color: var(--warning); }
.asm-clock.is-out span { color: var(--danger); }

.asm-cam {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); margin: 0 0 14px;
}
.asm-cam.is-ok { color: var(--success); }
.asm-cam.is-warn { color: var(--warning); }
/* The preview is never shown: a candidate watching themselves is a candidate
   not reading the question. The frames still get captured from it. */
.asm-run video, .asm-run canvas { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.asm-questions { list-style: none; margin: 0; padding: 0; }
.asm-q {
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  padding: 22px; margin-bottom: 14px;
}
.asm-q-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.asm-q-n { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-text); }
.asm-q-meta { font-size: 12px; color: var(--muted); }
.asm-q-state { margin-left: auto; font-size: 12px; color: var(--success); }
.asm-q-prompt { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0 0 16px; white-space: pre-line; }

.asm-options { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.asm-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border-table); border-radius: var(--radius-btn);
  cursor: pointer; font-size: 15px; line-height: 1.45;
}
.asm-option:hover { border-color: var(--teal); background: var(--teal-soft); }
.asm-option input { margin-top: 2px; flex: none; }
.asm-option:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); font-weight: 500; }
.asm-option:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }

.asm-answer { font-size: 15px; line-height: 1.6; resize: vertical; }

.asm-submit {
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  padding: 20px 22px; margin-top: 18px; text-align: center;
}
.asm-submit .hint { margin-bottom: 14px; }
.asm-saved { text-align: center; font-size: 12.5px; color: var(--muted); min-height: 18px; margin-top: 12px; }
.asm-saved.is-saved { color: var(--success); }
.asm-saved.is-failed { color: var(--danger); }

@media (max-width: 620px) {
  .asm-main { padding: 16px 14px 50px; }
  .asm-card { padding: 20px; }
  .asm-q { padding: 16px; }
  .asm-bar { top: 55px; padding: 12px 14px; }
  .asm-clock span { font-size: 20px; }
}

/* --- the reviewer's side ------------------------------------------------- */
.asm-integrity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.asm-score {
  width: 58px; height: 58px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.asm-score.band-clean  { background: var(--success-soft); color: var(--success); }
.asm-score.band-minor  { background: var(--info-soft);    color: var(--info); }
.asm-score.band-review { background: var(--warning-soft); color: var(--warning); }
.asm-score.band-high   { background: var(--danger-soft);  color: var(--danger); }

.asm-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.asm-flag { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.asm-flag .dot { width: 7px; height: 7px; border-radius: 999px; margin-top: 6px; flex: none; background: var(--muted); }
.asm-flag.sev-high .dot { background: var(--danger); }
.asm-flag.sev-medium .dot { background: var(--warning); }
.asm-flag b { font-weight: 600; }
.asm-flag small { display: block; color: var(--muted); font-size: 12.5px; }

.asm-timeline { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.asm-timeline li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--border-card); font-size: 13px;
}
.asm-timeline li:last-child { border-bottom: 0; }
.asm-timeline .t { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; width: 56px; }

.asm-shots { display: flex; gap: 10px; flex-wrap: wrap; }
.asm-shots a { display: block; border: 1px solid var(--border-card); border-radius: 8px; overflow: hidden; line-height: 0; }
.asm-shots img { width: 116px; height: 87px; object-fit: cover; display: block; }

.asm-mark-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.asm-mark-row .input { max-width: 90px; }
.asm-model {
  background: var(--teal-soft); border: 1px solid #ccfbf1; border-radius: 8px;
  padding: 12px 14px; margin-top: 12px; font-size: 13.5px; line-height: 1.55;
}
.asm-model b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-text); margin-bottom: 5px; }

/* --- sidebar: per-row icons and the collapsed rail ------------------------
   Every row now carries its own icon, including the ones inside a group. That
   is what makes the collapsed state work at all: at 56px the icon is the whole
   row, and a menu of identical glyphs is a menu of unlabelled buttons.

   Collapsed, icons stay exactly where they sat when open, so widening the
   sidebar reveals labels instead of moving anything. Hovering it — or tabbing
   into it — opens it over the content: a rail nobody can read is only usable
   when reading it costs one gesture.
   ------------------------------------------------------------------------- */
:root { --sidebar-rail: 56px; }

.submenu a { padding-left: 25px; gap: 10px; }
.submenu-icon { width: 16px; height: 16px; flex: none; opacity: .75; }
.submenu a.is-active .submenu-icon,
.submenu a:hover .submenu-icon { opacity: 1; }

.brand { display: flex; align-items: center; gap: 8px; }
.brand-link { flex: 1; min-width: 0; }
.sidebar-collapse {
  flex: none;
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--sidebar-muted);
  transition: background .15s ease, color .15s ease;
}
.sidebar-collapse:hover { background: rgb(255 255 255 / .08); color: #fff; }
.sidebar-collapse .icon { transition: transform .18s ease; }

@media (min-width: 1024px) {
  .sidebar { transition: transform .25s ease, width .18s ease; }

  .main { transition: margin-left .18s ease; }
  .nav-railed .main { margin-left: var(--sidebar-rail); }
  .nav-railed .sidebar { width: var(--sidebar-rail); overflow-x: hidden; }
  .nav-railed .sidebar:hover,
  .nav-railed .sidebar:focus-within { width: var(--sidebar-w); box-shadow: var(--shadow-pop); }
  .nav-railed .sidebar-collapse .icon { transform: rotate(180deg); }

  .nav-railed .sidebar:not(:hover):not(:focus-within) .brand-link > span:not(.brand-logo),
  .nav-railed .sidebar:not(:hover):not(:focus-within) .sidebar-collapse,
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-link > span:not(.nav-badge),
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-toggle > span,
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-toggle .chev,
  .nav-railed .sidebar:not(:hover):not(:focus-within) .submenu,
  .nav-railed .sidebar:not(:hover):not(:focus-within) .sidebar-foot > span:not(.avatar) {
    display: none;
  }

  /* The heading has nothing to say at 56px, but the break it marks still does. */
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-section-label {
    height: 1px; padding: 0; margin: 12px 14px; overflow: hidden;
    background: rgb(255 255 255 / .12); color: transparent;
  }

  /* A count nobody can read is still a count they need to see. */
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-badge {
    position: absolute; top: 9px; left: 30px;
    width: 8px; min-width: 8px; height: 8px;
    margin: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden;
  }
}

/* Below the drawer breakpoint the sidebar is already hidden by default, so a
   control that narrows it has nothing to do. */
@media (max-width: 1023px) {
  .sidebar-collapse { display: none; }
}

/* The onboarding wizard opened from a sharing link. Same form as the portal,
   but on its own: no sidebar, so it needs a page width of its own. */
.onb-link-main { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }

@media (max-width: 620px) {
  .onb-link-main { padding: 16px 14px 50px; }
}

/* A value shown once, to be carried somewhere else. */
.onb-link-box {
  border: 1px solid var(--teal); background: var(--teal-soft);
  border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 18px;
}
.onb-link-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.onb-link-head b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--teal-text); }
.onb-link-box .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Colour field — presets, a native picker and a hex box, all writing into the
   one text input that posts.
   --------------------------------------------------------------------------- */
.color-field-row { display: flex; align-items: center; gap: 10px; }

/* Browsers draw the colour input's swatch with their own padding and chrome.
   Clipping it to a round well of our own is the only way to get a control that
   matches the rest of the form across engines. */
.color-dial {
  position: relative; flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border-table); border-radius: var(--radius-btn);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-card);
}
.color-dial input[type="color"] {
  position: absolute; inset: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px);
  padding: 0; border: 0; background: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.color-dial input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-dial input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.color-dial input[type="color"]::-moz-color-swatch { border: 0; }
.color-field:focus-within .color-dial { border-color: var(--teal); }

.color-hex {
  width: 9.5em; flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; text-transform: uppercase;
}

.color-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* A ring rather than a tick: at 22px a glyph drawn over the colour is harder to
   read than the gap that separates the swatch from its outline. */
.color-preset {
  width: 22px; height: 22px; padding: 0; flex: none;
  border: 1px solid rgb(17 24 39 / .14); border-radius: 50%;
  background: var(--preset); cursor: pointer;
  box-shadow: 0 0 0 0 var(--preset);
  transition: box-shadow .12s ease, transform .12s ease;
}
.color-preset:hover { transform: scale(1.12); }
.color-preset[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--preset);
}
.color-preset:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .color-preset { transition: none; }
  .color-preset:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Home — the three-day brief and the cards beside it.
   --------------------------------------------------------------------------- */
.mt-8 { margin-top: 8px; }

.greeting-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.greeting-meta .role-chip { font-size: 12px; color: var(--text-2); }

.home-brief .brief-links { gap: 14px; }

.days-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.day-col {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-card); border-radius: 10px;
  background: var(--surface);
}
.day-col.is-past { background: #FBFBFC; }
.day-col.is-today {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-card);
  background: linear-gradient(180deg, var(--teal-soft) 0, var(--surface) 64px);
}

/* A day with no work in it is quieter: the chip already says why. */
.day-col.is-off .day-facts { opacity: .9; }

.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.day-head .lbl {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.day-col.is-today .day-head .lbl { color: var(--teal-text); }
.day-head .dt { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.day-head .chip { flex: none; }

.day-facts { display: flex; flex-direction: column; gap: 9px; }
.day-fact { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text-2); min-width: 0; }
.day-fact > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.day-fact .body { min-width: 0; flex: 1; }
.day-fact .body b { display: block; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.day-fact .body b small { font-weight: 500; }
.day-fact .body .sub { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; overflow-wrap: anywhere; }
.day-fact .body .sub a { font-weight: 600; }
.day-fact.is-quiet .body .sub { margin-top: 2px; }

.day-fact.is-holiday > svg  { color: var(--warning); }
.day-fact.is-activity > svg { color: var(--teal-text); }
.day-fact.is-att > svg      { color: var(--info); }
.day-fact.is-summary > svg  { color: #7C3AED; }

/* The leave type's own colour, sized like the icons beside it. */
.day-fact .sw { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 5px 3px 0; }

.day-quote {
  display: block; margin-top: 4px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere;
}
.day-col.is-today .day-quote { background: rgb(255 255 255 / .85); border: 1px solid var(--border-card); }
.day-quote + .sub { margin-top: 3px; }

.day-plan { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-card); }
.day-plan .lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.day-plan .lbl svg { width: 14px; height: 14px; }
.day-plan .plan-text { margin-top: 0; }
.plan-form { display: flex; flex-direction: column; gap: 8px; }
.plan-form textarea.input { width: 100%; min-height: 56px; resize: vertical; font-size: 13px; line-height: 1.45; }
.plan-form .btn { align-self: flex-start; }
.plan-editor { margin-top: 8px; }
.plan-editor > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--teal-text); list-style: none;
}
.plan-editor > summary::-webkit-details-marker { display: none; }
.plan-editor > summary svg { width: 14px; height: 14px; }
.plan-editor[open] > summary { margin-bottom: 8px; }

/* Attendance card: the month so far in four tiles. */
.tiles-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tiles-4 .stat-tile { padding: 10px 8px; text-align: center; }
.tiles-4 .stat-tile .v, .tiles-4 .stat-tile .l { display: block; }
.tiles-4 .stat-tile .v { font-size: 20px; }
.tiles-4 .stat-tile.is-bad .v { color: var(--danger); }

/* Leave card: one row per type with the balance drawn, not just written. */
.bal-list { display: flex; flex-direction: column; }
.bal-row {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border-card);
}
.bal-row:last-child { border-bottom: 0; }
.bal-row .bal-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.bal-row .bal-name .sw { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.bal-row .bal-num { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.bal-row .bal-num b { font-size: 16px; color: var(--text); }
.bal-row .progress { grid-column: 1 / -1; }
.bal-row .bal-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* People card. */
.person-card { display: flex; align-items: center; gap: 14px; }
.person-card .who b { display: block; font-size: 15px; font-weight: 600; }
.person-card .who small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.person-card .who .chip { margin-top: 6px; }
.contact-list { display: flex; flex-direction: column; margin-top: 12px; }
.contact-list a {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 6px 10px; margin: 0 -10px;
  border-radius: 8px; color: var(--text); font-size: 13px; overflow-wrap: anywhere;
}
.contact-list a:hover { background: var(--bg); text-decoration: none; }
.contact-list a svg { flex: none; width: 16px; height: 16px; color: var(--teal-text); }
.person-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-card);
}
.person-row b { display: block; font-size: 13.5px; font-weight: 600; }
.person-row small { color: var(--muted); font-size: 12px; }

/* Profile completeness. */
.completeness { display: flex; align-items: center; gap: 16px; }
.completeness .who b { display: block; font-size: 14px; font-weight: 600; }
.completeness .who small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 3px; }
.completeness .ring circle:last-child { transition: stroke-dashoffset .6s ease; }

@media (max-width: 1200px) {
  .days-3 { grid-template-columns: 1fr; }
  .day-col.is-past { order: 3; }
  .day-col.is-today { order: 1; }
  .day-col.is-future { order: 2; }
  .day-plan { margin-top: 0; }
}

@media (max-width: 768px) {
  .greeting-meta { align-items: flex-start; }
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Hover card -------------------------------------------------------------
   The explanation behind a single letter. Shares the chart tooltip's voice so
   a hover means the same thing everywhere, but is anchored to its element
   rather than the pointer, which is what lets a keyboard user reach it. */
.hint-card {
  position: fixed; z-index: 130; pointer-events: none;
  background: #111827; color: #fff; padding: 10px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-pop);
  max-width: 300px; min-width: 180px;
}
/* Every class inside the card is prefixed. The first version reused .note,
   .row and .sub, which are app-wide: the global .note paints a pale blue panel
   with dark blue text, so the explanation landed as a light block inside a dark
   card and could not be read. A card that borrows generic names inherits
   whatever the rest of the product does to them later, so it borrows none. */
.hint-card .hint-title { display: block; margin-bottom: 2px; font-weight: 600; color: #fff; }
.hint-card .hint-sub { display: block; margin-bottom: 6px; color: #cbd5e1; font-size: 11.5px; }
.hint-card .hint-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0; border: 0; background: none;
}
.hint-card .hint-row > span:first-child { color: #cbd5e1; }
.hint-card .hint-num { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hint-card .hint-note {
  display: block; margin-top: 6px; padding: 6px 0 0;
  border: 0; border-top: 1px solid rgb(255 255 255 / .18);
  background: none; color: #e5e7eb; font-size: 12px;
}
.hint-card .hint-note svg { color: #6ee7b7; vertical-align: -2px; margin-right: 2px; }
.hint-card .hint-list { margin: 4px 0 0; padding-left: 16px; color: #e5e7eb; }
.hint-card .hint-list li { margin: 2px 0; }
/* Long remarks are prose, but a stray unbroken token must not push the card
   off its own edge. */
.hint-card { overflow-wrap: anywhere; }

/* The cue that there is more to read. Kept off the cell itself — a whole
   calendar of dotted underlines is noise. */
[data-hint] { cursor: help; }
.cal-cell [data-hint]:focus-visible,
.legend [data-hint]:focus-visible { outline: 2px solid var(--teal, #0d9488); outline-offset: 2px; }

/* ---------------------------------------------------------- résumé screening
   The score reads first and the working reads under it, because a recruiter
   looks for the number and then wants to know whether to believe it. */
.screening .screen-top {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.screen-score { text-align: center; flex: 0 0 auto; cursor: help; }
.screen-score b {
  display: block; font-size: 34px; line-height: 1.05; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.screen-score b span { font-size: 16px; font-weight: 600; opacity: .6; }
.screen-score .chip { margin-top: 6px; }
.screen-summary { flex: 1 1 auto; min-width: 0; }
.screen-summary p { margin: 0 0 4px; }

.screen-skills {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.screen-skills h4 { margin: 0 0 8px; }
.screen-skills .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.screen-skills .chip { cursor: help; }

.screen-findings { padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb); }
.screen-findings h4 { margin: 0 0 8px; }
.finding-list { list-style: none; margin: 0; padding: 0; }
.finding-list li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--line-soft, #f1f5f9);
}
.finding-list li:first-child { border-top: 0; }
.finding-list .chip { flex: 0 0 auto; }

.question-list { margin: 0; padding-left: 20px; }
.question-list li { padding: 5px 0; }
.q-topic {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--chip-bg, #f1f5f9); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.screen-foot { padding: 12px 16px; margin: 0; }

@media (max-width: 720px) {
  .screen-skills { grid-template-columns: 1fr; }
  .screening .screen-top { flex-direction: column; align-items: center; text-align: center; }
}

/* ------------------------------------------------------------- résumé analysis
   The deeper read of a screening: coverage, timeline, recency and what is
   still missing. Charts come from reports.js; the career strip is plain CSS
   because a Gantt is three rules, not a chart type. */
.analysis-top {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.analysis-donut .chart { min-height: 0; }
.analysis-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.analysis-stat {
  padding: 10px 12px; border: 1px solid var(--border-card, #e5e7eb); border-radius: 10px;
  background: #F9FAFB; cursor: help;
}
.analysis-stat b { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.analysis-stat b small { font-size: 13px; font-weight: 600; color: var(--muted, #9ca3af); }
.analysis-stat span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2, #4b5563); }
.analysis-stat.is-bad { border-color: #FCA5A5; background: #FEF2F2; }
.analysis-stat.is-bad b { color: #B91C1C; }

.analysis-section { padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb); }
.analysis-section h4 { margin: 0 0 10px; cursor: help; }
.analysis-section .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recency-legend span { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.mt-8 { margin-top: 8px; }

.career { position: relative; padding-top: 22px; }
.career-axis { position: absolute; top: 0; left: 0; right: 0; height: 18px; }
.career-axis span {
  position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-2, #4b5563);
  border-left: 1px solid var(--border-card, #e5e7eb); padding-left: 3px; transform: none; line-height: 18px;
}
.career-row { position: relative; height: 30px; margin-bottom: 6px; }
.career-bar, .career-gap {
  position: absolute; top: 2px; height: 26px; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; padding: 0 8px; box-sizing: border-box; cursor: help;
}
.career-bar { background: var(--teal, #0d9488); color: #fff; font-size: 12px; font-weight: 600; }
.career-bar.is-open { background: linear-gradient(90deg, var(--teal, #0d9488) 80%, #5EEAD4); }
.career-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.career-gap {
  border: 1px dashed #B45309; color: #B45309; background: #FFFBEB; font-size: 11px; font-weight: 600;
  justify-content: center;
}
.career-list { list-style: none; margin: 10px 0 0; padding: 0; }
.career-list li { padding: 5px 0; border-top: 1px solid var(--line-soft, #f1f5f9); }
.career-list li:first-child { border-top: 0; }
.career-list b { font-weight: 600; margin-right: 6px; }

@media (max-width: 720px) {
  .analysis-top { grid-template-columns: 1fr; justify-items: center; }
  .analysis-stats { width: 100%; }
}

/* ------------------------------------------------- the candidate's own form
   Read on a phone, on a break, by somebody who has been asked for these
   details three times this week. Wide line length, big targets, nothing
   decorative competing with the questions. */
.apply-shell { max-width: 680px; margin: 0 auto; padding: 24px 16px 64px; }
.apply-head { margin-bottom: 22px; }
.apply-head .overline { color: var(--teal-700, #0F766E); margin-bottom: 8px; }
.apply-head h1 {
  font-size: 24px; line-height: 1.25; font-weight: 600;
  color: #111827; margin: 0 0 8px; letter-spacing: -.015em;
}
.apply-head .sub { color: #4b5563; font-size: 15px; line-height: 1.6; margin: 0; }

.apply-shell .wizard-card { padding: 22px; }
.apply-shell .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* The autosave note sits beside Next rather than floating, so it is read at
   the moment somebody is deciding whether it is safe to leave. */
.apply-saved { font-size: 12.5px; color: #059669; margin-right: 10px; }
.apply-saved.is-failed { color: #b91c1c; font-weight: 600; }

.apply-foot {
  margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: #6b7280;
  display: flex; gap: 7px; align-items: flex-start;
}
.apply-foot svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

.apply-done { max-width: 560px; padding-top: 48px; text-align: center; }
.apply-done h1 { font-size: 25px; font-weight: 600; margin: 0 0 10px; color: #111827; }
.apply-done .sub { font-size: 16px; color: #374151; margin: 0 0 12px; line-height: 1.6; }
.apply-done .muted { font-size: 14px; line-height: 1.6; }
.apply-tick {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  background: #d1fae5; color: #047857; display: flex; align-items: center; justify-content: center;
}
.apply-tick svg { width: 26px; height: 26px; }

/* The review step: what they said, grouped, with a way back to each answer. */
.review-block { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid #f1f2f4; }
.review-block:last-of-type { border-bottom: 0; }
.review-block h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.review-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.review-list dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.review-list dd { margin: 0 0 2px; font-size: 14.5px; color: #111827; word-break: break-word; }

/* ------------------------------------------------ inviting a candidate (HR) */
.ask-list { display: flex; flex-direction: column; gap: 8px; }
.ask-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid #e5e7eb; border-radius: 9px; cursor: pointer;
}
.ask-row:hover { border-color: #d1d5db; background: #fafafa; }
.ask-row.is-fixed { cursor: default; background: #fafafa; }
.ask-row input { margin-top: 3px; flex: 0 0 auto; }
.ask-row b { display: block; font-size: 14.5px; color: #111827; }
.ask-row small { display: block; font-size: 13px; color: #6b7280; line-height: 1.55; margin-top: 2px; }
.ask-row em { display: block; font-size: 11.5px; font-style: normal; margin-top: 4px; }

/* The one-shot link: the field and its copy button read as one control. */
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row .input {
  flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.copy-row .btn { flex: 0 0 auto; }

.numbered-rows { counter-reset: step; list-style: none; padding: 0; }
.numbered-rows .list-row { counter-increment: step; gap: 12px; }
.numbered-rows .list-row::before {
  content: counter(step); flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 50%; background: var(--teal-soft, #ccfbf1);
  color: var(--teal-text, #0F766E); font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 640px) {
  .apply-shell .form-row, .review-list { grid-template-columns: 1fr; }
  .copy-row { flex-direction: column; }
}

/* The one line a recruiter needs before the table: who is still to reply. */
.invite-strip {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 18px; padding: 11px 14px; border-radius: 9px;
  background: var(--teal-soft, #f0fdfa); border: 1px solid #cbeae6;
  font-size: 13.5px; line-height: 1.55; color: #134e4a;
}
.invite-strip svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.invite-strip b { font-weight: 700; }

/* --------------------------------------------------------- candidate journey
   Where the candidate is (the steps) and how they got there (the line). */
.journey .journey-steps { margin: 12px 16px 6px; }
.journey .stepper span { padding-top: 8px; }
.journey .stepper small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted, #9ca3af); font-variant-numeric: tabular-nums; }
.journey .stepper .is-current small { color: var(--teal-700, #0F766E); }
.journey .stepper .is-terminal span { border-top-color: #B91C1C; color: #B91C1C; }
.journey-timeline { margin: 8px 16px 16px; }
.journey-timeline .timeline-item b { font-weight: 600; }
.journey-timeline .timeline-item.tone-success::before { border-color: #15803D; }
.journey-timeline .timeline-item.tone-danger::before  { border-color: #B91C1C; }
.journey-timeline .timeline-item.tone-warning::before { border-color: #B45309; }
.journey-timeline .timeline-item.tone-info::before    { border-color: #1D4ED8; }
.journey-timeline .timeline-item.tone-neutral::before { border-color: #94A3B8; }
.journey .hint { padding: 0 16px 14px; }

/* ------------------------------------------------------------- answer sheet
   The screening's questions with HR's answers under them. Optional boxes;
   the critical flag is a reading aid for whoever opens the candidate next. */
.answer-list li { padding: 10px 0; border-top: 1px solid var(--line-soft, #f1f5f9); }
.answer-list li:first-child { border-top: 0; }
.answer-list li.is-critical { background: #FEF2F2; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.answer-list .q-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.answer-list .q-text { flex: 1 1 260px; }
.answer-box { margin-top: 6px; min-height: 48px; font-size: 13.5px; }
.answer-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--text-2, #4b5563); cursor: pointer; }
.answer-flag input { margin: 0; }
.answer-read { margin: 6px 0 0; padding: 8px 10px; background: #F9FAFB; border-left: 3px solid var(--teal, #0d9488); border-radius: 4px; white-space: pre-wrap; }

/* --------------------------------------------------------------- disclosure
   A fold for the part of a form most people skip. Native <details>, styled. */
.disclosure { border: 1px solid var(--border-card, #e5e7eb); border-radius: 10px; margin: 4px 0 16px; background: #FAFAFA; }
.disclosure summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2, #4b5563); border-bottom: 2px solid var(--text-2, #4b5563); transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
.disclosure[open] summary::before { transform: rotate(45deg); }
.disclosure summary .icon { color: var(--teal, #0d9488); }
.disclosure summary .muted { font-weight: 500; }
.disclosure-body { padding: 4px 14px 14px; border-top: 1px solid var(--border-card, #e5e7eb); background: #fff; border-radius: 0 0 10px 10px; }
.disclosure-body h4.overline { margin-top: 14px; margin-bottom: 8px; }

/* --- chips that open something -------------------------------------------
   A "does not tally" badge is the way into the dialog explaining it, so it has
   to be a button. Same pill as the badge beside it, plus the affordances a
   button needs and the ones the browser would otherwise impose on it.
   ------------------------------------------------------------------------- */
button.chip {
  font-family: inherit; line-height: 1;
  cursor: pointer;
  transition: filter .12s ease, box-shadow .12s ease;
}
button.chip:hover { filter: brightness(.96); }
button.chip:focus-visible { outline: 2px solid var(--teal, #0d9488); outline-offset: 2px; }

/* ---------- Sidebar favourites ----------
   The pinned pages repeated at the top of the menu. The rows themselves are
   ordinary .nav-link, so only the empty-state hint needs anything of its own:
   it has to read as guidance rather than as a link that is refusing to work. */
.nav-fav-hint {
  padding: 2px 16px 10px;
  font-size: 12px; line-height: 1.45;
  color: var(--sidebar-muted);
}
.nav-fav-hint b { font-weight: 600; color: var(--sidebar-text); }

/* Collapsed to a rail there is no room for a sentence, and the divider left by
   .nav-section-label already marks the break. */
@media (min-width: 1024px) {
  .nav-railed .sidebar:not(:hover):not(:focus-within) .nav-fav-hint { display: none; }
}

/* ---------- Reading a CV into the candidate form ----------
   The block sits at the top of "Add a candidate" because the CV is what the
   recruiter already has; everything under it is transcription. */
.cv-import {
  margin-bottom: 18px; padding: 14px;
  border: 1px dashed var(--border-card); border-radius: 10px;
  background: var(--bg);
}
.cv-import > label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 600;
}
.cv-import > label svg { color: var(--teal); }
.cv-import .hint { margin-top: 6px; }
.cv-import.is-reading { opacity: .7; }

.cv-status {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 8px;
  font-size: 12px; line-height: 1.45;
}
.cv-status.is-ok      { color: var(--success); }
.cv-status.is-warn    { color: var(--warning); }
.cv-status.is-working { color: var(--muted); }

/* A field a machine filled in, until the person touches it. Not an error and
   not a success — just "this one was not typed by you; read it". */
.input.is-autofilled,
select.is-autofilled {
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--border-card));
}

/* --- wordmark logos --------------------------------------------------------
   A wide logo (logo_is_wide) already carries the company name, so sign-in shows
   it on its own. In the square icon slots it is scaled to fit, never squashed. */
.auth-brand-wordmark { flex-direction: column; align-items: flex-start; gap: 6px; }
.auth-brand-wordmark img { display: block; height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.auth-brand-wordmark small { display: block; font-size: 12px; color: #6b7280; }
.brand-logo img { object-fit: contain; }

/* --- office GPS on the location form --------------------------------------- */
.geo-fieldset { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px 16px; margin: 16px 0 0; }
.geo-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 13.5px; color: #111827; }
.geo-fieldset .hint { margin: 0 0 10px; }
.geo-fieldset [data-geo-fill-note] { margin-left: 10px; }

/* --- Help widget (partials/help-widget.php) ------------------------------ */
.help-widget { position: fixed; right: 20px; bottom: 20px; z-index: 150; font-size: 14px; }
.help-fab {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; background: var(--teal); color: #fff; font: inherit; font-weight: 600;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .22); cursor: pointer;
}
.help-fab:hover { background: var(--teal-hover, var(--teal)); }
.help-fab:focus-visible { outline: 3px solid rgba(13, 148, 136, .35); outline-offset: 2px; }
.help-fab .icon { width: 20px; height: 20px; }
.help-widget.is-open .help-fab { box-shadow: 0 4px 12px rgba(17, 24, 39, .18); }

.help-panel {
  position: absolute; right: 0; bottom: 58px; width: 380px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 16px 48px rgba(17, 24, 39, .22);
  overflow: hidden;
}
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.help-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
.help-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid #f1f5f9; }
.help-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: #4b5563; cursor: pointer;
}
.help-tab .icon { width: 15px; height: 15px; }
.help-tab.is-active { border-color: var(--teal); background: var(--teal-soft, #f0fdfa); color: var(--teal-text, #0f766e); font-weight: 600; }
.help-body { padding: 14px 16px; overflow-y: auto; }
.help-body form { display: grid; gap: 10px; }
.help-body form[hidden], .help-body [hidden] { display: none !important; }
.help-field { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: #374151; }
.help-field small { font-weight: 400; color: #6b7280; }
.help-field .input { width: 100%; }
.help-choice { display: grid; gap: 6px; font-size: 13.5px; }
.help-choice label { display: flex; align-items: center; gap: 8px; }
.help-shot { border: 1px dashed #d1d5db; border-radius: 10px; padding: 10px; }
.help-shot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help-upload { position: relative; cursor: pointer; }
.help-shot-preview { margin: 10px 0 0; }
.help-shot-preview img { display: block; width: 100%; max-height: 180px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; }
.help-shot-note { margin: 6px 0 0; }
.help-diag { display: flex; gap: 6px; margin: 0; font-size: 12px; }
.help-diag .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.help-submit { justify-self: start; }
.help-done { text-align: center; padding: 12px 0; }
.help-done-icon .icon { width: 36px; height: 36px; color: var(--teal); }
.help-error { margin-top: 10px; }
.help-foot { padding: 10px 16px; border-top: 1px solid #f1f5f9; font-size: 12.5px; color: #6b7280; }
.help-foot a { color: inherit; }
@media (max-width: 640px) {
  .help-widget { right: 12px; bottom: 12px; }
  .help-fab span { display: none; }
  .help-fab { width: 48px; padding: 0; justify-content: center; }
  .help-panel { position: fixed; left: 12px; right: 12px; bottom: 70px; width: auto; max-width: none; }
}
@media print { .help-widget { display: none; } }
.help-as { margin: 0 16px 10px; font-size: 12.5px; }