/*
 * FastCat Payroll workspace theme.
 * Palette follows fastcat.ph: brand orange #FF7A00, brand blue #176BE0,
 * deep blue #006BB3, ink #1E1E1E, Inter type. White text on brand orange is
 * below WCAG AA (2.9:1), so orange is used for accents and large marks while
 * actions use brand blue (4.98:1) and orange text uses --orange-text (5:1).
 */
:root {
    --orange: #ff7a00;
    --orange-text: #b35400;
    --orange-50: #fff5eb;
    --orange-100: #ffe3c7;
    --blue: #176be0;
    --blue-700: #0f55b8;
    --blue-deep: #006bb3;
    --blue-50: #ecf3fd;
    --ink: #1e1e1e;
    --text: #3a3a3a;
    --muted: #5c5c5c;
    --line: #e2e5ea;
    --canvas: #f5f6f8;
    --surface: #ffffff;
    --green: #1e7a4c;
    --green-50: #e8f5ee;
    --red: #b42318;
    --red-50: #fdecea;
    --amber: #8a4b00;
    --amber-50: #fff4e5;
    --focus: #176be0;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(30, 30, 30, .05), 0 4px 14px rgba(30, 30, 30, .04);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
.mono { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; }
.source-ref { display: inline-block; margin-left: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Prototype banner */
.prototype-banner { position: relative; z-index: 10; display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 10px; padding: 7px 18px; background: var(--ink); color: #f1f1f1; font-size: 12.5px; text-align: center; }
.prototype-banner strong { color: #fff; font-size: 12px; letter-spacing: .08em; }
.prototype-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, .3); }

/* Brand */
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { display: flex; width: 40px; height: 40px; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 9px; border-radius: 11px; background: var(--orange); }
.brand-mark span { display: block; width: 5px; border-radius: 5px; background: #fff; }
.brand-mark span:nth-child(1) { height: 12px; opacity: .8; }
.brand-mark span:nth-child(2) { height: 20px; }
.brand-mark span:nth-child(3) { height: 15px; opacity: .9; }
.brand-name { color: var(--blue); font-size: 21px; font-style: italic; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.brand-name > span { color: var(--orange); }
.brand-name small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .14em; }

/* Login */
.login-page { display: grid; min-height: calc(100vh - 36px); grid-template-columns: minmax(360px, .95fr) minmax(480px, 1.05fr); background: var(--surface); }
.login-story { position: relative; display: flex; min-height: 720px; flex-direction: column; overflow: hidden; padding: 48px clamp(38px, 6.5vw, 104px); background: linear-gradient(160deg, #0b4f8f 0%, var(--blue-deep) 55%, var(--blue) 100%); color: #fff; }
.login-story::after { position: absolute; right: -10%; bottom: -60px; left: -10%; height: 170px; border-radius: 50% 50% 0 0; background: var(--orange); content: ''; opacity: .95; transform: rotate(-4deg); }
.login-story .brand-name, .login-story .brand-name small { color: #fff; }
.login-story .brand-name > span { color: #ffd2a6; }
.story-copy { position: relative; z-index: 1; max-width: 520px; margin-top: clamp(90px, 15vh, 170px); }
.eyebrow { margin: 0; color: var(--orange-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.light-eyebrow { color: #ffd2a6; }
.story-copy h1 { max-width: 480px; margin: 16px 0 16px; font-size: clamp(36px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.story-description { max-width: 430px; margin: 0; color: #e3eefb; font-size: 17px; line-height: 1.6; }
.login-proof { position: relative; z-index: 1; display: flex; max-width: 450px; align-items: center; gap: 14px; margin-top: 44px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; background: rgba(255, 255, 255, .1); }
.proof-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--orange); color: var(--ink); }
.proof-icon svg { width: 22px; height: 22px; }
.login-proof strong, .login-proof span { display: block; }
.login-proof strong { font-size: 15px; }
.login-proof div:last-child span { margin-top: 3px; color: #e3eefb; font-size: 13px; line-height: 1.5; }
.story-footer { position: relative; z-index: 1; margin: auto 0 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.story-orbit, .login-watermark { display: none; }
.login-panel { display: flex; min-height: 720px; flex-direction: column; align-items: center; justify-content: center; padding: 46px 28px 24px; }
.login-panel-inner { width: min(100%, 420px); margin: auto; }
.mobile-brand { display: none; }
.login-heading { margin-bottom: 22px; }
.login-heading h2 { margin: 8px 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.owner-note { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 13px 14px; border: 1px solid var(--orange-100); border-radius: var(--radius); background: var(--orange-50); color: var(--text); font-size: 13.5px; line-height: 1.55; }
.owner-note strong { color: var(--ink); }
.owner-note-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--orange); color: var(--ink); }
.owner-note-icon svg { width: 19px; height: 19px; }
.login-form > label, .password-label label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
.input-wrap { position: relative; display: flex; height: 50px; align-items: center; margin-bottom: 18px; border: 1px solid #c9ced6; border-radius: var(--radius); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 107, 224, .2); }
.input-wrap > svg { width: 18px; height: 18px; margin-left: 14px; color: var(--muted); }
.input-wrap input { width: 100%; height: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.input-wrap input::placeholder { color: #767676; }
.input-wrap input[aria-invalid="true"] { color: var(--red); }
.password-label { display: flex; align-items: center; justify-content: space-between; }
.secure-label { margin-bottom: 7px; color: var(--muted); font-size: 12.5px; }
.secure-label span { margin-right: 4px; color: var(--green); }
.password-toggle { display: grid; width: 42px; height: 46px; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: var(--muted); }
.password-toggle svg { width: 18px; height: 18px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 20px; color: var(--muted); font-size: 13px; }
.text-link { color: var(--blue); font-weight: 700; }
.muted-link { color: var(--muted); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 700; letter-spacing: .01em; transition: background-color .15s, box-shadow .15s; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(23, 107, 224, .25); }
.button-primary:not(:disabled):hover { background: var(--blue-700); }
.sign-in-button { width: 100%; cursor: pointer; }
.sign-in-button span { font-size: 18px; font-weight: 400; }
.button-secondary { width: 100%; border-color: var(--orange); background: var(--surface); color: var(--orange-text); }
.button-secondary:hover { background: var(--orange-50); }
.button-disabled { cursor: not-allowed; opacity: .55; }
.prototype-message { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--red-50); color: var(--red); font-size: 14px; line-height: 1.5; }
.prototype-message p { margin: 0; }
.preview-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.preview-divider::before, .preview-divider::after { height: 1px; flex: 1; background: var(--line); content: ''; }
.login-footnote { margin: 20px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.login-legal { display: flex; width: min(100%, 850px); justify-content: space-between; gap: 12px; margin: 30px auto 0; color: var(--muted); font-size: 12px; }

/* App shell */
.app-shell { display: flex; min-height: calc(100vh - 36px); }
.sidebar { position: sticky; top: 0; display: flex; width: 256px; height: calc(100vh - 36px); min-height: 600px; flex: 0 0 256px; flex-direction: column; padding: 24px 16px 16px; border-right: 1px solid var(--line); background: var(--surface); }
.sidebar-brand { padding: 0 6px; }
.workspace-label { margin: 36px 10px 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.main-nav { display: grid; gap: 4px; }
.nav-item { position: relative; display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 14.5px; font-weight: 600; }
.nav-item > svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item:hover { background: var(--canvas); }
.nav-item.active { background: var(--blue-50); color: var(--blue-700); }
.nav-item.active::before { position: absolute; top: 8px; bottom: 8px; left: -16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--orange); content: ''; }
.sidebar-spacer { flex: 1; }
.sidebar-help { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 14px; padding: 14px; border: 1px solid var(--orange-100); border-radius: var(--radius); background: var(--orange-50); }
.help-icon { display: grid; width: 26px; height: 26px; place-items: center; margin-bottom: 8px; border-radius: 7px; background: var(--orange); color: var(--ink); font-size: 13px; font-weight: 800; }
.sidebar-help strong { margin-bottom: 4px; font-size: 13.5px; }
.sidebar-help > span { color: var(--text); font-size: 12.5px; line-height: 1.5; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; border-top: 1px solid var(--line); }
.avatar { display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 700; }
.account-copy { display: grid; min-width: 0; gap: 1px; }
.account-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { margin-left: auto; color: var(--muted); font-size: 18px; }
.sidebar-account form { margin-left: auto; }
.logout-button { padding: 6px 4px; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
.logout-button:hover { text-decoration: underline; }
.dashboard-main { min-width: 0; flex: 1; }
.topbar { position: sticky; z-index: 2; top: 0; display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 36px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); }
.breadcrumb { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.breadcrumb strong { overflow: hidden; color: var(--ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.crumb-divider { color: #a3a3a3; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.environment-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--orange-100); border-radius: 999px; background: var(--orange-50); color: var(--orange-text); font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.environment-pill > span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.top-avatar { width: 32px; height: 32px; font-size: 11.5px; }
.dashboard-content { width: min(100%, 1360px); margin: 0 auto; padding: 32px 36px 24px; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 10px; padding: 18px 2px 0; color: var(--muted); font-size: 12px; }
.dashboard-footer > span:first-child { font-weight: 700; letter-spacing: .1em; }
.dashboard-footer i { padding: 0 3px; font-style: normal; }

/* Page header */
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.eyebrow-divider { margin: 0 4px; color: #a3a3a3; }
.welcome-row h1 { margin: 8px 0 6px; font-size: clamp(25px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.welcome-subtitle { max-width: 820px; margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.cohort-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-card { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--orange-100); border-left: 4px solid var(--orange); border-radius: var(--radius); background: var(--orange-50); }
.notice-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--orange); color: var(--ink); }
.notice-icon svg { width: 17px; height: 17px; }
.notice-card p { flex: 1; margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.notice-card strong { color: var(--ink); }
.notice-tag { padding: 4px 8px; border-radius: 6px; background: var(--surface); color: var(--orange-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; }

/* Metrics */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card { display: block; min-height: 122px; padding: 16px; border-top: 3px solid var(--blue); }
.metric-card:nth-child(2) { border-top-color: var(--orange); }
.metric-card:nth-child(3) { border-top-color: var(--blue-deep); }
.metric-card:nth-child(4) { border-top-color: #9aa3ad; }
a.metric-card:hover { box-shadow: 0 6px 18px rgba(30, 30, 30, .08); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 13.5px; font-weight: 600; }
.metric-icon { display: grid; min-width: 28px; height: 28px; place-items: center; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.icon-orange { background: var(--orange-50); color: var(--orange-text); }
.icon-blue { background: var(--blue-50); color: var(--blue-700); }
.icon-green { background: var(--green-50); color: var(--green); }
.icon-slate { background: var(--canvas); color: var(--muted); }
.metric-value { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; color: var(--ink); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.metric-value .metric-caption { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.metric-text { font-size: 19px; letter-spacing: -.01em; line-height: 1.3; }
.metric-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.status-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.dot-amber { background: var(--orange); }
.dot-blue { background: var(--blue); }
.dot-green { background: var(--green); }
.dot-slate { background: #8a939d; }

/* Panels */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.dashboard-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { min-width: 0; margin-bottom: 16px; padding: 18px; }
.dashboard-grid > .panel { margin-bottom: 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.panel-link { padding-top: 2px; color: var(--blue); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }
.link-group { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.panel-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.sub-heading { margin: 18px 0 8px; font-size: 14.5px; font-weight: 800; }

.item-list { margin: 0; padding: 0; list-style: none; }
.item-list > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.item-list > li:last-child { border-bottom: 0; }
.item-list > li.is-mine { margin: 0 -10px; padding-right: 10px; padding-left: 10px; border-radius: 8px; background: var(--orange-50); }
.item-key { display: inline-grid; min-width: 74px; flex: 0 0 auto; place-items: center; padding: 5px 6px; border-radius: 6px; background: var(--blue-50); color: var(--blue-700); font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; font-weight: 700; }
.step-key { min-width: 32px; border-radius: 50%; background: var(--orange); color: var(--ink); font-family: inherit; font-size: 13px; }
.item-main { display: grid; min-width: 0; flex: 1; gap: 2px; }
.item-main strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.item-main > span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.status, .tag { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag { background: var(--blue-50); color: var(--blue-700); }
.tag-orange { background: var(--orange-50); color: var(--orange-text); }
.status-open { background: var(--amber-50); color: var(--amber); }
.status-blocked { background: var(--red-50); color: var(--red); }
.status-review { background: var(--blue-50); color: var(--blue-700); }
.status-sign { background: var(--orange); color: var(--ink); }
.status-contribute { background: var(--canvas); color: var(--text); border: 1px solid var(--line); }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { padding: 9px 10px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: left; white-space: nowrap; }
.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.mono { white-space: nowrap; }
.data-table td strong { display: block; font-weight: 600; line-height: 1.4; }
.cell-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.chain { padding: 12px 0; border-top: 1px solid var(--line); }
.chain h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.chain-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: chain; }
.chain-step { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; counter-increment: chain; }
.chain-step::before { display: inline-grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--text); content: counter(chain); font-size: 12px; font-weight: 700; }
.chain-step.is-you { border-color: var(--orange); background: var(--orange-50); font-weight: 700; }
.chain-step.is-you::before { background: var(--orange); color: var(--ink); }
.you-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.chain-inline { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.6; }
.chain-note { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14px; line-height: 1.5; }
.check-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; }
.check-icon.ok { background: var(--green-50); color: var(--green); }
.check-icon.stop { background: var(--red-50); color: var(--red); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); font-size: 13.5px; font-weight: 600; }
.chip .mono { color: var(--blue-700); }

.owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.owner-card { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.owner-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--blue-50); color: var(--blue-700); font-size: 12px; font-weight: 800; }
.owner-card > div { min-width: 0; flex: 1; }
.owner-card strong, .owner-card div span { display: block; }
.owner-card strong { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.owner-card div span { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.owner-tbd { color: var(--orange-text); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Payroll process flowchart */
.flow-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; color: var(--text); font-size: 12.5px; list-style: none; }
.flow-legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 16px; height: 12px; border: 1.5px solid; border-radius: 3px; }
.legend-swatch.step { border-color: var(--blue); background: var(--blue-50); }
.legend-swatch.decision { border-color: #c9ced6; background: #fff; transform: rotate(45deg) scale(.8); }
.legend-swatch.side { border-color: var(--red); background: var(--red-50); }
.legend-swatch.mine { border-color: var(--orange); background: var(--orange-100); }
.flow-scroll { overflow-x: auto; }
.flowchart { display: block; width: 100%; min-width: 760px; height: auto; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
.flowchart .phase { fill: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.flowchart .edge { fill: none; stroke: #6b7280; stroke-width: 1.5; }
.flowchart .arrow-head { fill: #6b7280; }
.flowchart .edge-label { fill: var(--text); font-size: 11.5px; font-weight: 700; }
.flowchart .node .shape { fill: var(--blue-50); stroke: var(--blue); stroke-width: 1.4; }
.flowchart .node-decision .shape { fill: #fff; stroke: #9aa3ad; }
.flowchart .node-side .shape { fill: var(--red-50); stroke: var(--red); }
.flowchart .node.is-mine .shape { fill: var(--orange-100); stroke: var(--orange); stroke-width: 2.4; }
.flowchart .node-key { fill: var(--blue-700); font-size: 13px; font-weight: 800; }
.flowchart .node.is-mine .node-key { fill: var(--orange-text); }
.flowchart .node-label { fill: var(--ink); font-size: 13px; font-weight: 700; }
.flowchart .node-detail { fill: var(--muted); font-size: 11.5px; }
.flowchart .you-pill { fill: var(--ink); }
.flowchart .you-pill-text, .flowchart .you-text { fill: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.flowchart .you-text { fill: var(--orange-text); font-size: 11px; }
.flowchart .terminal { fill: var(--blue-deep); }
.flowchart .terminal-text { fill: #fff; font-size: 13px; font-weight: 700; }
.state-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.state-list li { display: inline-flex; align-items: center; gap: 6px; }
.state-list li .mono { padding: 4px 8px; border-radius: 6px; background: var(--blue-50); color: var(--blue-700); font-size: 12px; }
.state-list li:not(:last-child)::after { color: var(--muted); content: '→'; }

/* Forms, records and review queue */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted-text { color: var(--muted); }
.optional { color: var(--muted); font-weight: 500; }
.crumb-link { color: var(--orange-text); }
.crumb-link:hover { text-decoration: underline; }
.empty-state { margin: 4px 0 8px; padding: 16px; border: 1px dashed #c9ced6; border-radius: var(--radius); color: var(--muted); font-size: 14px; text-align: center; }
.flash { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #b7dfc8; border-left: 4px solid var(--green); border-radius: var(--radius); background: var(--green-50); color: var(--green); font-size: 14px; font-weight: 600; }
.form-errors { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #f3b8b2; border-left: 4px solid var(--red); border-radius: var(--radius); background: var(--red-50); color: var(--red); font-size: 14px; }
.status-ok { background: var(--green-50); color: var(--green); }
.search-form { display: flex; gap: 8px; }
.search-form input, .field input, .field select, .field textarea, .review-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #c9ced6; border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; }
.search-form input { width: 240px; }
.field textarea, .review-form textarea { min-height: 64px; resize: vertical; }
.search-form input:focus, .field input:focus, .field select:focus, .field textarea:focus, .review-form textarea:focus { border-color: var(--blue); outline: 3px solid rgba(23, 107, 224, .25); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--red); background: #fffafa; }
.button-small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.button-danger { border-color: var(--red); background: var(--surface); color: var(--red); cursor: pointer; }
.button-danger:hover { background: var(--red-50); }
.button-primary { cursor: pointer; }
.current-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); background: var(--canvas); }
.current-rate-label { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.current-rate-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.entry-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.entry-form .sub-heading { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 5px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label, .review-form label { color: var(--ink); font-size: 14px; font-weight: 700; }
.help { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.field-error { margin: 0; color: var(--red); font-size: 13px; font-weight: 600; }
.check-field { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 4px; font-size: 14px; }
.check-field input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.review-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.review-card p { margin: 0 0 4px; font-size: 14px; }
.review-amount { font-size: 20px !important; font-weight: 800; }
.review-amount .muted-text { font-size: 14px; font-weight: 600; }
.review-form { display: grid; gap: 6px; }
.review-form .form-actions { margin-top: 6px; }
nav[role="navigation"] .pagination, .pagination { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pagination li a, .pagination li span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.pagination li a { color: var(--blue); }
@media (max-width: 1180px) {
    .sidebar { width: 224px; flex-basis: 224px; }
    .topbar { padding: 0 24px; }
    .dashboard-content { padding: 26px 24px 20px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .login-page { grid-template-columns: minmax(300px, .8fr) minmax(390px, 1.2fr); }
    .login-story { padding-right: 34px; padding-left: 34px; }
    .story-copy h1 { font-size: 40px; }
    .dashboard-grid, .dashboard-grid.even { grid-template-columns: minmax(0, 1fr); }
    .welcome-row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
    body { font-size: 14.5px; }
    .prototype-banner { min-height: 40px; font-size: 12px; }
    .login-page { display: block; min-height: calc(100vh - 40px); }
    .login-story { display: none; }
    .login-panel { min-height: calc(100vh - 40px); justify-content: flex-start; padding: 26px 16px 18px; }
    .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
    .login-heading h2 { font-size: 28px; }
    .login-legal { flex-direction: column; margin-top: auto; padding-top: 30px; }
    .sidebar { width: 64px; flex-basis: 64px; align-items: center; padding: 16px 6px 10px; }
    .sidebar-brand { padding: 0; }
    .sidebar-brand .brand-name, .workspace-label, .sidebar-help, .account-copy, .account-menu:not(.logout-button) { display: none; }
    /* Keep icon-only links named for assistive technology instead of display:none. */
    .nav-item > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .main-nav { width: 100%; gap: 8px; margin-top: 30px; justify-items: center; }
    .nav-item { width: 46px; justify-content: center; gap: 0; padding: 0; }
    .nav-item.active::before { left: -9px; }
    .sidebar-account { flex-direction: column; gap: 4px; justify-content: center; width: 100%; padding-top: 10px; }
    .sidebar-account form { margin-left: 0; }
    .logout-button { padding: 4px 0; font-size: 12px; }
    .topbar { min-height: 56px; padding: 0 12px; }
    .environment-pill { padding: 5px 8px; font-size: 11px; }
    .dashboard-content { padding: 20px 12px 16px; }
    .welcome-row h1 { font-size: 24px; }
    .notice-card { align-items: flex-start; flex-wrap: wrap; }
    .metric-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .metric-card { min-height: 0; }
    .panel { padding: 14px 12px; }
    .panel-heading { flex-direction: column; }
    .item-list > li { align-items: flex-start; flex-wrap: wrap; }
    .item-key { min-width: 64px; }
    .owner-grid, .form-grid, .review-card { grid-template-columns: minmax(0, 1fr); }
    .search-form { width: 100%; }
    .search-form input { width: 100%; }
    /* Stack table rows as cards; the header stays available to screen readers. */
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
    .data-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .data-table tr:last-child { border-bottom: 0; }
    .data-table td { padding: 2px 0; border: 0; }
    .data-table td:nth-child(n+3) { display: inline-block; margin: 6px 6px 0 0; }
    .dashboard-footer { flex-direction: column; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .prototype-banner, .sidebar, .topbar, .skip-link { display: none; }
    .dashboard-grid { display: block; }
    .dashboard-grid > .panel { margin-bottom: 12px; }
    .welcome-row { margin-bottom: 8px; }
    .welcome-row h1 { margin: 4px 0; font-size: 22px; }
    .notice-card { margin-bottom: 8px; padding: 8px 12px; }
    .flow-panel { padding: 10px 14px; break-inside: avoid; }
    .flowchart { width: auto; max-width: 100%; max-height: 120mm; margin: 0 auto; }
    .flow-panel .panel-heading { margin-bottom: 0; }
    .flow-panel .panel-heading p { display: none; }
    .item-list { columns: 2; column-gap: 28px; }
    .item-list > li { break-inside: avoid; }
    body { background: #fff; }
    .dashboard-content { padding: 0; }
    .panel, .metric-card { box-shadow: none; break-inside: avoid; }
    .flowchart { min-width: 0; }
}

/* Account security and two-factor sign-in */
.form-actions .button-secondary { width: auto; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.recovery-codes li { padding: 8px 10px; border: 1px dashed var(--line, #d8dde6); border-radius: 8px; background: var(--surface); font-size: 14px; text-align: center; }
.setup-steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.setup-key { font-size: 15px; letter-spacing: .06em; }
.break-all { word-break: break-all; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.inline-form input { min-height: 40px; padding: 0 12px; border: 1px solid var(--line, #d8dde6); border-radius: 8px; }
.recovery-option { margin: 12px 0 4px; font-size: 14px; }
.recovery-option summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.recovery-option label { display: block; margin-top: 10px; }

/* Password show/hide */
.password-toggle { cursor: pointer; border-radius: 6px; }
.password-toggle:hover { color: var(--blue); }
.password-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.password-toggle .eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }

/* Contribution tables, government numbers and payroll runs */
.rule-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rule-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.rule-card .status { align-self: flex-start; }
.rule-text { margin: 0; white-space: pre-wrap; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.rule-entry { margin-top: 12px; }
.rule-entry summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.review-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.review-form input { min-width: 160px; }
.run-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.run-steps li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; }
.run-steps li.done { border-color: var(--green); background: var(--green-50); color: var(--green); }
.payroll-lines .r { text-align: right; }
.warn-text { color: var(--amber); }

/* Next-step banner, stepper and dry-run board */
.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-left: 4px solid var(--orange); }
.next-step-text { min-width: 0; flex: 1 1 360px; }
.next-step h2 { margin: 4px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.next-step p { margin: 4px 0; }
.next-step-bar { flex: 0 0 180px; width: 180px; height: 12px; accent-color: var(--green); }
.stepper { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.stepper li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stepper li.done { border-color: #b7dfc8; background: var(--green-50); }
.stepper li.current { border: 2px solid var(--orange); background: #fff7ef; }
.stepper li.todo { color: var(--muted); }
.stepper-mark { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; background: var(--canvas, #f4f6f9); }
.stepper li.done .stepper-mark { background: var(--green); color: #fff; }
.stepper li.current .stepper-mark { background: var(--orange); color: var(--ink); }
.stepper-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.readiness { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.readiness-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; }
.readiness-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.readiness-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.board progress { width: 120px; height: 10px; accent-color: var(--green); }
.board tr.is-mine td { background: #fff7ef; }

/* Sidebar: the menu scrolls inside the sidebar, and the sidebar can collapse to icons */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-head .sidebar-brand { min-width: 0; }
.sidebar-toggle { display: inline-grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.sidebar-toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.sidebar-toggle:hover { background: var(--canvas); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.main-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 8px 0; scrollbar-width: thin; }
.sidebar-spacer { flex: 0 0 8px; }
.app-shell.sidebar-collapsed .sidebar { width: 72px; flex-basis: 72px; align-items: center; padding: 16px 8px 10px; }
.app-shell.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 14px; }
.app-shell.sidebar-collapsed .sidebar-brand .brand-name,
.app-shell.sidebar-collapsed .workspace-label,
.app-shell.sidebar-collapsed .sidebar-help,
.app-shell.sidebar-collapsed .account-copy,
.app-shell.sidebar-collapsed .account-menu:not(.logout-button) { display: none; }
.app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.app-shell.sidebar-collapsed .nav-item > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-shell.sidebar-collapsed .main-nav { width: 100%; justify-items: center; margin-top: 18px; }
.app-shell.sidebar-collapsed .nav-item { width: 46px; justify-content: center; gap: 0; padding: 0; }
.app-shell.sidebar-collapsed .nav-item.active::before { left: -9px; }
.app-shell.sidebar-collapsed .sidebar-account { flex-direction: column; gap: 4px; justify-content: center; width: 100%; padding-top: 10px; }
.app-shell.sidebar-collapsed .sidebar-account form { margin-left: 0; }

.face-photo { display: block; width: 100%; max-width: 320px; height: auto; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: #111; }
.face-biometric { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.face-biometric-empty { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; }
.face-open { margin-top: 8px; }
.face-open[hidden] { display: none; }
.face-request-summary { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.kiosk-panel .face-check { margin-top: 0; padding-top: 0; border-top: 0; }
.kiosk-panel .face-check-stage { max-width: 640px; }
.kiosk-panel .face-check-result { min-height: 1.6em; font-size: 18px; font-weight: 800; }
.kiosk-prompt { margin: 6px 0 12px; padding: 16px; border: 2px solid var(--blue); border-radius: var(--radius); background: var(--blue-50); }
.kiosk-prompt[hidden] { display: none; }
.kiosk-prompt-name { margin: 6px 0 4px; color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.kiosk-prompt .form-actions .button { min-width: 130px; }
.team-attendance { padding: 12px 0; border-bottom: 1px solid var(--line); }
.team-attendance:last-child { border-bottom: 0; }
.team-attendance h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 8px; font-size: 15.5px; font-weight: 800; }
.data-table tfoot th, .data-table tfoot td { padding: 10px; border-top: 2px solid var(--line); text-align: left; }
.kiosk-recent { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.kiosk-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kiosk-recent li:last-child { border-bottom: 0; }
.face-review { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.face-review:last-child { border-bottom: 0; }
.face-review h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; }
.face-review-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.face-review-photos figure { margin: 0; }
.face-review-photos .face-photo { max-width: 240px; }
@media (max-width: 680px) {
    .face-biometric, .face-review { grid-template-columns: 1fr; }
    .face-review-photos .face-photo { max-width: 100%; }
}

/* Recruiter's clickable employee rows. */
.row-link { color: var(--ink); text-decoration: none; }
.row-link:hover strong, .row-link:focus-visible strong { color: var(--blue-700); text-decoration: underline; }

/* Facial check on the employee form (browser only; nothing is saved). */
.face-verification-field { min-width: 0; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.face-verification-field legend { padding: 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
.face-check { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.face-check[hidden] { display: none; }
.face-check-stage { position: relative; width: 100%; max-width: 480px; margin: 10px 0; overflow: hidden; border-radius: var(--radius); background: #111; aspect-ratio: 4 / 3; }
.face-check-video, .face-check-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-check-status { margin: 0 0 8px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.face-check-steps { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; }
.face-check-steps li { display: flex; align-items: center; gap: 8px; color: var(--text); }
.face-check-steps li.is-done { color: var(--green); font-weight: 600; }
.face-check-mark { display: inline-grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 800; }
.face-check-steps li.is-done .face-check-mark { border-color: var(--green); background: var(--green-50); }
.face-check-result { margin: 0 0 6px; font-size: 14px; }
.face-check-result.is-passed { color: var(--green); font-weight: 600; }
.face-check-result.is-failed { color: var(--red); font-weight: 600; }
.face-check .form-actions .button-secondary { width: auto; }

/* Recruitment portal: applicant pages and HR review. */
.recruit-app { min-height: 100vh; background: var(--canvas); }
.recruit-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.recruit-brand { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.recruit-brand span { color: var(--orange-text); }
.recruit-brand small { margin-left: 6px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.recruit-nav { display: flex; flex-wrap: wrap; flex: 1; gap: 4px 6px; }
.recruit-nav a { padding: 8px 12px; border-radius: 8px; color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.recruit-nav a:hover { background: var(--canvas); }
.recruit-nav a[aria-current="page"] { background: var(--blue-50); color: var(--blue-700); }
.recruit-signout { margin: 0; }
.recruit-signout .button-secondary { width: auto; min-height: 40px; font-size: 14px; }
.recruit-main { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
.recruit-main .flash, .recruit-main .form-errors { margin-bottom: 14px; }
.recruit-panel h1 { margin: 8px 0 6px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.recruit-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.recruit-fieldset:disabled { opacity: .7; }
.recruit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.recruit-row:last-of-type { border-bottom: 0; }
.recruit-row form { margin: 0; }
.recruit-actions { white-space: nowrap; }
.recruit-actions form { display: inline; margin: 0 0 0 10px; }
.recruit-note { padding: 10px 0; border-bottom: 1px solid var(--line); }
.recruit-note p { margin: 4px 0 0; }
.profile-steps ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.profile-steps a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.profile-steps a[aria-current="step"] { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.step-number { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--ink); font-size: 12px; font-weight: 800; }
.step-number.is-done { background: var(--green-50); color: var(--green); }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.check-list li:last-child { border-bottom: 0; }
.check-list a { margin-left: auto; color: var(--blue); font-weight: 700; }
.declaration p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.kv-list { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14.5px; }
.kv-list dt { color: var(--muted); font-weight: 700; }
.kv-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.inline-form select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; }
.review-form textarea { width: 100%; }
@media (max-width: 680px) {
    .recruit-main { padding: 16px 16px 40px; }
    .recruit-header { padding: 12px 16px; }
    .recruit-nav { width: 100%; }
    .kv-list { grid-template-columns: 1fr; gap: 2px; }
    .kv-list dd { margin-bottom: 8px; }
}