:root {
  color-scheme: light;
  --ink: #17232e;
  --ink-soft: #4a5a68;
  --ink-faint: #71808d;
  --paper: #ffffff;
  --mist: #f3f6f8;
  --mist-deep: #e8eef2;
  --rule: #d6dfe5;
  --rule-strong: #b9c7d1;
  --navy: #102a43;
  --starpark: #245ea8;
  --starpark-soft: #e7f0fb;
  --ai: #7357d6;
  --ai-soft: #efeafd;
  --coral: #d94f3d;
  --coral-soft: #fff0ed;
  --sage: #40705a;
  --sage-soft: #e8f2ed;
  --amber: #9b6510;
  --amber-soft: #fff4dc;
  --shadow: 0 12px 32px rgba(20, 39, 56, 0.12);
  --radius: 10px;
  --sidebar: 252px;
  --font-display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--mist); }
body { margin: 0; color: var(--ink); background: var(--mist); font-family: var(--font-body); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select, label, input[type="file"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(36, 94, 168, 0.28); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.012em; }
h1 { margin-bottom: 6px; font-size: clamp(1.65rem, 2vw, 2.15rem); line-height: 1.15; font-weight: 650; }
h2 { margin-bottom: 4px; font-size: 1.1rem; line-height: 1.25; font-weight: 650; }
h3 { margin-bottom: 4px; font-size: 1rem; }
p { margin-bottom: 0; color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 14px; color: white; background: var(--navy); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.login-screen { min-height: 100vh; color: var(--ink); background: #eef2f5; }
.login-bar { display: flex; height: 70px; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 68px); background: white; border-bottom: 1px solid var(--rule); }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand > span:last-child { display: grid; line-height: 1.18; }
.login-brand strong { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.login-brand small { color: var(--ink-faint); font-size: .7rem; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: white; background: var(--navy); border-radius: 7px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.login-security { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .75rem; }
.login-security .icon { width: 15px; height: 15px; }
.login-main { display: grid; width: min(1040px, calc(100% - 40px)); min-height: calc(100vh - 70px); grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(48px, 8vw, 110px); margin: 0 auto; padding: 54px 0 70px; }
.login-context { align-self: center; }
.login-context h1 { max-width: 16ch; margin-bottom: 13px; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.08; }
.login-context > p:not(.login-privacy) { max-width: 48ch; font-size: .96rem; }
.login-companies { display: grid; margin-top: 30px; background: white; border: 1px solid var(--rule); border-radius: var(--radius); }
.login-companies > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 14px 16px; }
.login-companies > div + div { border-top: 1px solid var(--rule); }
.login-companies strong, .login-companies small { display: block; }
.login-companies strong { font-size: .88rem; }
.login-companies small { margin-top: 2px; color: var(--ink-faint); font-size: .7rem; }
.login-companies > div:last-child .company-glyph { color: white; background: var(--ai); }
.login-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: var(--ink-faint); font-size: .72rem; }
.login-privacy .icon { width: 15px; height: 15px; }
.login-form-wrap { width: 100%; max-width: 500px; padding: 28px; background: white; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 28px rgba(20,39,56,.07); }
.login-mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 25px; padding: 3px; background: var(--mist); border-radius: 8px; }
.login-mode { min-height: 36px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.login-mode.is-active { color: var(--ink); background: white; box-shadow: 0 1px 4px rgba(20,39,56,.1); }
.login-heading { margin-bottom: 20px; }
.login-heading h2 { margin-bottom: 4px; font-size: 1.55rem; }
.login-heading p { font-size: .86rem; }
#login-form { display: grid; gap: 14px; }
.registration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.registration-fields label { grid-column: 1 / -1; }
#login-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
#login-form input, #login-form select { width: 100%; min-height: 44px; padding: 9px 11px; color: var(--ink); background: white; border: 1px solid var(--rule-strong); border-radius: 7px; font-size: .94rem; }
.password-input { position: relative; }
#login-form .password-input input { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 5px; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; color: var(--ink-faint); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { color: var(--ink); background: var(--mist); }
.password-toggle .icon { width: 18px; height: 18px; }
.login-submit { width: 100%; min-height: 46px; }
.prototype-warning { max-width: 58ch; margin-top: 14px; color: var(--ink-faint); font-size: .69rem; }
.prototype-warning strong { color: var(--ink-soft); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: var(--sidebar); flex-direction: column; color: #edf6fc; background: var(--navy); }
.brand-block { display: flex; min-height: 92px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand-block strong { display: block; font-family: var(--font-display); font-size: 1.24rem; letter-spacing: -.02em; }
.brand-block small { color: #aac0d1; font-size: .76rem; }
.company-switcher { display: grid; gap: 7px; padding: 16px 12px 12px; }
.company-option { position: relative; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; color: #d9e6ef; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer; }
.company-option:hover { background: rgba(255,255,255,.07); }
.company-option.is-active { color: white; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.16); }
.company-option strong, .company-option small { display: block; }
.company-option strong { font-size: .89rem; }
.company-option small { margin-top: 2px; color: #a9bfd0; font-size: .72rem; }
.company-option[data-company="ai"].is-active { background: rgba(115,87,214,.28); }
.company-option:disabled { cursor: not-allowed; opacity: .46; }
.company-glyph { display: grid; width: 30px; height: 30px; place-items: center; color: var(--navy); background: white; border-radius: 9px; font-family: var(--font-display); font-size: .72rem; font-weight: 700; }
.company-check { width: 16px; opacity: 0; }
.company-option.is-active .company-check { opacity: 1; }

.primary-nav { display: grid; gap: 3px; padding: 14px 10px; }
.nav-item { position: relative; display: flex; min-height: 46px; align-items: center; gap: 13px; padding: 0 13px; color: #c9d8e3; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.is-active { color: white; background: rgba(36,94,168,.52); }
.nav-item.is-active::before { position: absolute; left: -10px; width: 3px; height: 24px; content: ""; background: #63a8ff; border-radius: 0 3px 3px 0; }
.nav-count { display: grid; min-width: 23px; height: 23px; margin-left: auto; place-items: center; color: white; background: var(--coral); border-radius: 999px; font-size: .72rem; font-weight: 700; }
#work-nav-count { background: var(--starpark); }
body[data-company="ai"] #work-nav-count { background: var(--ai); }
.sidebar-foot { position: relative; display: grid; gap: 10px; margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; padding: 9px 8px; color: #aac0d1; font-size: .72rem; line-height: 1.35; }
.privacy-note .icon { width: 16px; height: 16px; }
.profile-chip { display: grid; grid-template-columns: 36px 1fr 16px; align-items: center; gap: 9px; width: 100%; padding: 8px; color: white; text-align: left; background: rgba(255,255,255,.07); border: 0; border-radius: 11px; cursor: pointer; }
.profile-chip strong, .profile-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip strong { font-size: .82rem; }
.profile-chip small { color: #aac0d1; font-size: .67rem; }
.profile-chip > .icon { width: 15px; transform: rotate(90deg); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; font-size: .76rem; font-weight: 700; }
.avatar-blue { color: #174873; background: #d5e9fa; }
.avatar-violet { color: #4f399f; background: #e5ddfb; }
.avatar-green { color: #285943; background: #d8eadf; }
.avatar-coral { color: #8c3327; background: #fae0db; }
.profile-menu { position: absolute; right: 12px; bottom: 78px; left: 12px; padding: 13px; color: var(--ink); background: white; box-shadow: var(--shadow); border-radius: 12px; }
.profile-menu p { margin-bottom: 10px; font-size: .72rem; }
.profile-menu .button { width: 100%; }
[data-role="employer"] .documents-layout { grid-template-columns: 1fr; }
[data-role="employer"] .saved-documents { grid-column: 1; grid-row: auto; }
.profile-menu label { display: grid; gap: 6px; font-size: .75rem; font-weight: 700; }
.profile-menu select { width: 100%; padding: 9px; color: var(--ink); background: white; border: 1px solid var(--rule); border-radius: 8px; }

.workspace { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: 74px; align-items: center; gap: 20px; padding: 0 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rule); }
.global-search { display: flex; width: min(520px, 44vw); align-items: center; gap: 10px; padding: 0 13px; background: var(--mist); border: 1px solid transparent; border-radius: 10px; }
.global-search:focus-within { background: white; border-color: var(--starpark); }
.global-search .icon { width: 18px; color: var(--ink-soft); }
.global-search input { width: 100%; height: 42px; color: var(--ink); background: transparent; border: 0; outline: none; }
.topbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.demo-label { padding: 5px 9px; color: var(--ink-soft); background: var(--mist); border-radius: 999px; font-size: .69rem; font-weight: 700; }
body[data-host-save-error="true"] .demo-label { color: var(--danger, #c9372c); background: var(--danger-wash, #ffeceb); }
.notification-shell { position: relative; }
.icon-button { position: relative; display: inline-grid; width: 38px; height: 38px; place-items: center; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.icon-button:hover { color: var(--starpark); background: var(--starpark-soft); }
.notification-button span { position: absolute; top: -5px; right: -5px; display: grid; width: 18px; height: 18px; place-items: center; color: white; background: var(--coral); border: 2px solid white; border-radius: 50%; font-size: .62rem; font-weight: 700; }
.notification-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 70; width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 100px)); overflow: auto; color: var(--ink); background: white; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 18px 45px rgba(17,37,53,.18); }
.notification-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 17px; background: white; border-bottom: 1px solid var(--rule); }
.notification-header h2 { margin: 0; }
.notification-header p { margin-top: 2px; font-size: .72rem; }
.notification-header .text-button { flex: none; font-size: .72rem; }
.notification-list { display: grid; }
.notification-item { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.notification-item:last-child { border-bottom: 0; }
.notification-item.is-unread { background: #f4f8fd; }
.notification-status { display: grid; width: 30px; height: 30px; place-items: center; color: var(--starpark); background: var(--starpark-soft); border-radius: 8px; }
.notification-status .icon { width: 15px; height: 15px; }
.notification-item strong, .notification-item small, .notification-item time { display: block; overflow-wrap: anywhere; }
.notification-item strong { font-size: .82rem; }
.notification-item small { margin-top: 2px; color: var(--ink-soft); font-size: .74rem; }
.notification-item time { margin-top: 5px; color: var(--ink-faint); font-size: .65rem; }
.notification-action { align-self: center; font-size: .7rem; }
.notification-empty { padding: 38px 24px; text-align: center; }
.notification-empty .icon { width: 24px; height: 24px; margin-bottom: 8px; color: var(--ink-faint); }
.notification-empty p { max-width: 34ch; margin-inline: auto; font-size: .75rem; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; cursor: pointer; transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out; }
.button .icon { width: 17px; height: 17px; }
.button.primary { color: white; background: var(--starpark); }
.button.primary:hover { background: #184d8a; box-shadow: 0 8px 20px rgba(36,94,168,.18); }
body[data-company="ai"] .button.primary { background: var(--ai); }
body[data-company="ai"] .button.primary:hover { background: #5d45b9; }
.button.secondary { color: var(--starpark); background: white; border-color: var(--rule-strong); }
.button.secondary:hover, .button.quiet:hover { background: var(--starpark-soft); border-color: #9bb9da; }
.button.quiet { color: var(--ink); background: white; border-color: var(--rule); }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 4px; color: var(--starpark); background: transparent; border: 0; font-weight: 700; cursor: pointer; }
.text-button .icon { width: 16px; }
.mobile-menu, .mobile-brand { display: none; }

.work-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.work-toolbar > span { color: var(--ink-faint); font-size: .75rem; }
.work-toolbar label { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .75rem; font-weight: 700; }
.work-toolbar select { min-width: 190px; padding: 8px 34px 8px 10px; color: var(--ink); background: white; border: 1px solid var(--rule-strong); border-radius: 9px; }
.work-board { display: grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap: 14px; align-items: start; }
.work-column { min-width: 0; background: var(--mist-deep); border-radius: 12px; }
.work-column.status-todo { background: var(--starpark-soft); }
.work-column.status-progress { background: var(--amber-soft); }
.work-column.status-done { background: var(--sage-soft); }
.work-column-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 10px; }
.work-column-head h2 { margin: 0; font-size: .88rem; }
.work-column-head span { display: grid; min-width: 24px; height: 24px; place-items: center; color: var(--ink-soft); background: white; border-radius: 7px; font-size: .68rem; font-weight: 700; }
.work-column.status-progress .work-column-head span { color: var(--amber); background: #fffaf0; }
.work-column.status-done .work-column-head span { color: var(--sage); background: #f7fbf8; }
.work-column-list { display: grid; gap: 9px; padding: 0 9px 9px; }
.task-card { min-width: 0; padding: 14px; background: white; border: 1px solid #d3dde4; border-radius: 10px; }
.task-card-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink-faint); font-size: .66rem; }
.task-card-top > span:last-child { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.task-code { padding: 3px 6px; color: var(--ink); background: var(--mist); border-radius: 5px; font-size: .64rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .025em; }
.task-priority { color: var(--ink-soft); font-weight: 800; text-transform: capitalize; }
.task-priority.high { color: var(--amber); }
.task-priority.urgent { color: var(--coral); }
.task-card h3 { margin-bottom: 5px; overflow-wrap: anywhere; }
.task-card > p { display: -webkit-box; min-height: 2.7em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .75rem; }
.task-image-open { display: block; width: 100%; height: 132px; margin-top: 12px; padding: 0; overflow: hidden; background: var(--mist); border: 1px solid var(--rule); border-radius: 8px; cursor: zoom-in; }
.task-image-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.task-card-foot { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--rule); }
.task-card-foot .avatar { width: 30px; height: 30px; font-size: .63rem; }
.task-card-foot strong, .task-card-foot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card-foot strong { font-size: .72rem; }
.task-card-foot small { color: var(--ink-faint); font-size: .63rem; }
.task-card-foot select { max-width: 108px; min-height: 34px; padding: 5px 7px; color: var(--ink); background: white; border: 1px solid var(--rule-strong); border-radius: 7px; font-size: .68rem; }
.task-card-foot select:disabled { color: var(--ink-faint); background: var(--mist); cursor: not-allowed; }
.task-card-controls { display: grid; justify-items: end; gap: 4px; }
.task-edit-button { font-size: .7rem; }
.task-edit-button .icon { width: 14px; height: 14px; }
.work-empty { padding: 26px 12px; color: var(--ink-faint); text-align: center; font-size: .72rem; }
.profile-record { background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.profile-record-head { display: flex; align-items: center; gap: 14px; padding: 22px; border-bottom: 1px solid var(--rule); }
.profile-record-head .avatar { width: 48px; height: 48px; }
.profile-record-head h2 { margin-bottom: 3px; }
.profile-record dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
.profile-record dl > div { padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.profile-record dl > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.profile-record dt { color: var(--ink-faint); font-size: .69rem; font-weight: 700; }
.profile-record dd { margin: 5px 0 0; overflow-wrap: anywhere; font-weight: 700; }

main { padding: 30px clamp(22px, 3vw, 44px) 56px; }
.view { display: none; }
.view.is-active { display: block; animation: view-in .35s cubic-bezier(.16,1,.3,1); }
@keyframes view-in { from { opacity: .7; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .view.is-active { animation: none; } * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading p { max-width: 70ch; }

.attention-ledger { display: grid; grid-template-columns: minmax(245px, 1.25fr) repeat(3, minmax(150px, .75fr)); margin-bottom: 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.attention-ledger > h2 { display: flex; align-items: center; margin: 0; padding: 20px 22px; font-size: 1.35rem; }
.attention-cell { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 2px 12px; min-height: 92px; padding: 15px 18px; text-align: left; background: white; border: 0; border-left: 1px solid var(--rule); cursor: pointer; }
.attention-cell:hover { background: var(--mist); }
.attention-cell span { align-self: end; color: var(--ink-soft); font-size: .8rem; }
.attention-cell strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--font-display); font-size: 1.75rem; }
.attention-cell small { color: var(--ink-faint); font-size: .71rem; }

.command-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, .8fr); background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.command-grid-single { grid-template-columns: minmax(0, 1fr); }
.calendar-panel { min-width: 0; background: white; }
.section-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.section-header h2, .section-header p { margin-bottom: 0; }
.section-header p { margin-top: 3px; font-size: .78rem; }
.calendar-controls { display: flex; align-items: center; gap: 6px; }
.calendar-controls .back { transform: rotate(180deg); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--ink-faint); background: var(--mist); border-bottom: 1px solid var(--rule); font-size: .69rem; font-weight: 800; text-transform: uppercase; }
.calendar-weekdays span { padding: 8px 10px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(70px, 1fr)); min-height: 420px; }
.calendar-day { position: relative; min-width: 0; padding: 8px 7px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-outside { color: #9ba7b0; background: #fafbfc; }
.calendar-day.is-today .day-number { display: grid; width: 27px; height: 27px; place-items: center; color: white; background: var(--ink); border-radius: 50%; }
.day-number { display: inline-grid; width: 25px; height: 25px; place-items: center; font-size: .76rem; font-weight: 700; }
.calendar-event { display: block; width: 100%; margin-top: 4px; padding: 4px 6px; overflow: hidden; color: #174873; text-overflow: ellipsis; white-space: nowrap; background: var(--starpark-soft); border: 0; border-radius: 5px; font-size: .64rem; font-weight: 700; text-align: left; }
.calendar-event-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.medical { cursor: pointer; }
.calendar-event.medical:hover, .calendar-event.medical:focus-visible { outline: 2px solid #7ee2b8; outline-offset: 1px; }
.calendar-hover-hint { position: fixed; z-index: 120; max-width: min(300px, calc(100vw - 20px)); padding: 7px 9px; color: #fff; background: #172b4d; border-radius: 4px; box-shadow: 0 8px 24px rgba(9,30,66,.18); font-size: .7rem; font-weight: 600; line-height: 1.35; pointer-events: none; }
.calendar-event.medical { color: #285943; background: var(--sage-soft); }
.calendar-event.unpaid { color: #4f399f; background: var(--ai-soft); }
.calendar-event.is-new { animation: calendar-stamp 1.1s cubic-bezier(.16,1,.3,1); }
@keyframes calendar-stamp { 0% { opacity: .3; transform: scale(.92); clip-path: inset(0 100% 0 0); } 55% { opacity: 1; transform: scale(1.02); clip-path: inset(0 0 0 0); } 100% { transform: scale(1); } }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 16px; color: var(--ink-soft); font-size: .72rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; background: var(--starpark); border-radius: 2px; }
.legend-dot.medical { background: var(--sage); }
.legend-dot.unpaid { background: var(--ai); }

.review-panel { min-width: 0; background: #fbfcfd; }
.count-stamp, .status-stamp { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px 4px; border: 1px solid currentColor; border-radius: 4px; font-family: var(--font-display); font-size: .66rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.count-stamp { color: var(--coral); transform: rotate(-1.5deg); }
.review-list { display: grid; }
.review-item { position: relative; padding: 16px 18px; background: white; border-bottom: 1px solid var(--rule); }
.review-item::after { position: absolute; right: -1px; bottom: -8px; z-index: 2; width: 16px; height: 16px; content: ""; background: #fbfcfd; border: 1px solid var(--rule); border-right: 0; border-bottom: 0; border-radius: 50%; transform: rotate(-45deg); }
.review-item:last-child::after { display: none; }
.review-person { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.review-person strong, .review-person small { display: block; }
.review-person small { margin-top: 2px; color: var(--ink-soft); font-size: .72rem; }
.review-person .avatar { width: 38px; height: 38px; }
.status-stamp.pending { color: var(--coral); background: var(--coral-soft); }
.status-stamp.approved { color: var(--sage); background: var(--sage-soft); transform: rotate(-1deg); }
.status-stamp.declined { color: var(--ink-soft); background: var(--mist); }
.request-dates { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px 48px; color: var(--ink); font-size: .78rem; }
.request-dates span:last-child { color: var(--ink-faint); }
.coverage-status { display: flex; align-items: center; gap: 7px; margin: 0 0 13px 48px; color: var(--sage); font-size: .72rem; }
.coverage-status.warning { color: var(--amber); }
.coverage-status .icon { width: 15px; height: 15px; }
.review-actions { display: flex; justify-content: flex-end; gap: 8px; }
.review-actions .button { min-height: 34px; padding: 0 11px; font-size: .76rem; }
.approve-button { color: white; background: var(--sage); }
.approve-button:hover { background: #315b47; }
.review-empty { padding: 48px 25px; text-align: center; }
.review-empty .icon { width: 34px; height: 34px; padding: 7px; color: var(--sage); background: var(--sage-soft); border-radius: 50%; }

.activity-section { margin-top: 18px; background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 160px minmax(150px, .8fr) 1.4fr minmax(100px, .7fr); gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--rule); font-size: .78rem; }
.activity-row:last-child { border-bottom: 0; }
.activity-row span:first-child, .activity-row span:last-child { color: var(--ink-faint); }

.directory-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: white; border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.inline-search { display: flex; min-width: min(360px, 45vw); align-items: center; gap: 9px; padding: 0 11px; background: var(--mist); border-radius: 9px; }
.inline-search .icon { width: 17px; color: var(--ink-faint); }
.inline-search input { width: 100%; height: 38px; background: transparent; border: 0; outline: 0; }
.directory-count { margin-left: auto; color: var(--ink-faint); font-size: .76rem; }
.people-table-wrap { overflow-x: auto; background: white; border: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); }
.people-table { width: 100%; min-width: 840px; border-collapse: collapse; text-align: left; }
.people-table th { padding: 11px 16px; color: var(--ink-faint); background: var(--mist); font-size: .69rem; text-transform: uppercase; }
.people-table td { padding: 14px 16px; border-top: 1px solid var(--rule); font-size: .8rem; vertical-align: middle; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-cell strong, .person-cell small { display: block; }
.person-cell small { color: var(--ink-faint); }
.person-cell .avatar { width: 34px; height: 34px; }
.table-action { color: var(--starpark); background: transparent; border: 0; font-weight: 700; cursor: pointer; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--sage); font-weight: 700; }
.status-dot::before { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; }

.leave-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.6fr); gap: 18px; }
.balance-ticket { position: relative; align-self: start; padding: 22px; background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.balance-ticket::before, .balance-ticket::after { position: absolute; top: 146px; width: 24px; height: 24px; content: ""; background: var(--mist); border: 1px solid var(--rule); border-radius: 50%; }
.balance-ticket::before { left: -13px; }
.balance-ticket::after { right: -13px; }
.ticket-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px dashed var(--rule-strong); }
.ticket-header h2 { margin: 0; }
.ticket-header span { color: var(--ink-faint); font-size: .72rem; }
.balance-main { display: flex; align-items: center; gap: 10px; padding: 22px 0; }
.balance-main strong { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }
.balance-main span { color: var(--ink-soft); line-height: 1.3; }
.balance-ticket dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 0 18px; padding-top: 16px; border-top: 1px dashed var(--rule-strong); }
.balance-ticket dl div { padding: 8px 10px; border-right: 1px solid var(--rule); }
.balance-ticket dl div:nth-child(2n) { border-right: 0; }
.balance-ticket dl div:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid var(--rule); border-right: 0; }
.balance-ticket dt { color: var(--ink-faint); font-size: .7rem; }
.balance-ticket dd { margin: 3px 0 0; font-weight: 700; }
.balance-ticket > .button { width: 100%; }
.request-history { background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.history-item { display: grid; grid-template-columns: 40px minmax(160px, 1fr) minmax(120px, .7fr) auto; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.history-item:last-child { border-bottom: 0; }
.history-type { display: grid; width: 36px; height: 36px; place-items: center; color: var(--starpark); background: var(--starpark-soft); border-radius: 9px; }
.history-item strong, .history-item small { display: block; }
.history-item small { margin-top: 2px; color: var(--ink-faint); }
.history-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.history-edit { min-height: 30px; padding-inline: 9px; font-size: .72rem; }
.history-delete { min-height: 30px; padding-inline: 9px; color: #ae2a19; border-color: #f5a99f; font-size: .72rem; }
.history-delete:hover { color: #8c1f13; background: #fff0ee; border-color: #e97868; }
.leave-layout.is-employer { grid-template-columns: minmax(0, 1fr); }
.delete-leave-content { display: grid; gap: 18px; padding: 24px; }
.delete-leave-content > p { color: var(--ink-soft); line-height: 1.55; }
.button.danger { color: white; background: #c9372c; border-color: #c9372c; }
.button.danger:hover { background: #ae2a19; border-color: #ae2a19; }

.full-calendar { background: white; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.calendar-grid-large { grid-template-rows: repeat(6, minmax(94px, 1fr)); min-height: 590px; }

.private-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--sage); background: var(--sage-soft); border-radius: 999px; font-size: .75rem; font-weight: 700; }
.private-badge .icon { width: 15px; }
.documents-layout { display: grid; grid-template-columns: minmax(290px, .85fr) minmax(320px, 1.15fr); gap: 18px; }
.scan-zone-section, .document-review, .saved-documents { padding: 22px; background: white; border: 1px solid var(--rule); border-radius: var(--radius); }
.scan-zone-section > p { margin: 7px 0 18px; }
.upload-zone { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 8px; padding: 28px; color: var(--starpark); text-align: center; background: var(--starpark-soft); border: 1px dashed #7ea9d6; border-radius: 12px; cursor: pointer; }
.upload-zone:hover, .upload-zone.is-dragging { background: #dceaf9; border-color: var(--starpark); box-shadow: inset 0 0 0 2px rgba(12,102,228,.12); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone .icon { width: 34px; height: 34px; }
.upload-zone span { max-width: 30ch; color: var(--ink-soft); font-size: .78rem; }
.receipt-upload-zone { grid-template-columns: 34px minmax(0, 1fr); min-height: 82px; margin-top: 10px; padding: 14px 18px; place-items: center start; align-content: center; gap: 12px; color: var(--ink-soft); text-align: left; background: var(--mist); border-color: var(--rule-strong); border-radius: 6px; }
.receipt-upload-zone:hover { color: var(--starpark); background: var(--starpark-soft); border-color: #85b8ff; }
.receipt-upload-zone .icon { width: 24px; height: 24px; }
.receipt-upload-zone > span { display: grid; gap: 3px; max-width: none; }
.receipt-upload-zone strong { color: var(--ink); font-size: .8rem; }
.receipt-upload-zone small { overflow: hidden; color: var(--ink-faint); font-size: .7rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.remove-receipt-button { margin-top: 8px; color: var(--coral); }
.scan-steps { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; color: var(--ink-faint); font-size: .69rem; }
.scan-steps span { position: relative; flex: 1; padding-top: 9px; border-top: 2px solid var(--rule); }
.scan-steps span.is-active { color: var(--starpark); border-color: var(--starpark); font-weight: 700; }
.document-review { grid-column: 2; grid-row: 1; padding: 0; overflow: hidden; }
.document-review form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
.document-review label, .side-sheet form > label, .date-pair label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.document-review input, .document-review select, .side-sheet input, .side-sheet select, .side-sheet textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: white; border: 1px solid var(--rule-strong); border-radius: 9px; }
.document-review label > small { color: var(--ink-faint); font-size: .68rem; font-weight: 500; line-height: 1.4; }
.document-leave-field { grid-column: 1 / -1; }
.document-file-summary { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; background: var(--mist); border: 1px solid var(--rule); border-radius: 6px; }
.document-file-summary > span { min-width: 0; padding: 11px 12px; }
.document-file-summary > span + span { border-left: 1px solid var(--rule); }
.document-file-summary small, .document-file-summary strong { display: block; }
.document-file-summary small { color: var(--ink-faint); font-size: .66rem; }
.document-file-summary strong { margin-top: 3px; overflow: hidden; color: var(--ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.document-review .form-error { grid-column: 1 / -1; }
.document-review .form-actions { grid-column: 1 / -1; }
.saved-documents { grid-column: 2; padding: 0; overflow: hidden; }
.document-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.document-row:last-child { border-bottom: 0; }
.document-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--sage); background: var(--sage-soft); border-radius: 9px; }
.document-icon .icon { width: 19px; }
.document-row strong, .document-row small { display: block; }
.document-row small { margin-top: 3px; color: var(--ink-faint); }
.document-row strong, .document-row small { overflow-wrap: anywhere; }
.document-file-list { color: var(--ink-soft) !important; }
.document-row.is-targeted { animation: document-target 1.8s cubic-bezier(.2,0,0,1); outline: 2px solid #0c66e4; outline-offset: -2px; }
@keyframes document-target { 0%, 55% { background: #e9f2ff; } 100% { background: #fff; } }
.document-open { min-width: 92px; }
.document-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.document-actions .button { min-width: 0; }
.document-delete { color: #c9372c; }
.document-delete:hover { color: #ae2e24; background: #ffedeb !important; border-color: #f5a59f !important; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(10,29,44,.38); }
.side-sheet { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(480px, 100vw); padding-bottom: 20px; overflow-y: auto; background: white; box-shadow: -20px 0 55px rgba(17,37,53,.2); transform: translateX(105%); visibility: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1), visibility .35s; }
.side-sheet.is-open { transform: translateX(0); visibility: visible; }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid var(--rule); }
.sheet-header h2 { margin-bottom: 5px; font-size: 1.45rem; }
.side-sheet form { display: grid; gap: 17px; padding: 24px; }
.task-image-field { grid-template-columns: 1fr auto; }
.task-image-field > span { color: var(--ink-faint); font-size: .69rem; font-weight: 600; }
.task-upload-zone { position: relative; display: grid; min-height: 86px; grid-column: 1 / -1; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink-soft); background: var(--mist); border: 1px dashed var(--rule-strong); border-radius: 7px; cursor: pointer; }
.task-upload-zone:hover, .task-upload-zone.is-dragging { color: var(--starpark); background: var(--starpark-soft); border-color: #0c66e4; box-shadow: inset 0 0 0 2px rgba(12,102,228,.1); }
.task-upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.task-upload-zone > .icon { width: 26px; height: 26px; }
.task-upload-zone > span { display: grid; gap: 3px; min-width: 0; }
.task-upload-zone strong { color: var(--ink); font-size: .78rem; }
.task-upload-zone small { overflow: hidden; color: var(--ink-faint); font-size: .68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.task-image-preview { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px; background: var(--mist); border: 1px solid var(--rule); border-radius: 10px; }
.task-image-preview img { grid-row: 1 / span 2; width: 76px; height: 62px; object-fit: cover; border-radius: 7px; }
.task-pdf-preview { display: grid; grid-row: 1 / span 2; width: 76px; height: 62px; place-items: center; color: #ae2a19; background: #fff0ee; border: 1px solid #f5a99f; border-radius: 7px; font-size: .68rem; font-weight: 800; }
.task-image-preview span { overflow: hidden; font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-image-preview .text-button { justify-self: start; font-size: .7rem; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leave-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: var(--mist); border: 1px solid var(--rule); border-radius: 10px; }
.leave-settings-grid label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.leave-settings-grid small { color: var(--ink-faint); font-size: .68rem; font-weight: 500; }
.leave-range-fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.leave-range-fieldset > legend { padding: 0; margin-bottom: 7px; font-size: .75rem; font-weight: 700; }
.leave-range-picker { overflow: hidden; background: white; border: 1px solid var(--rule-strong); border-radius: 12px; }
.leave-range-header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mist); border-bottom: 1px solid var(--rule); }
.leave-range-header strong { text-align: center; }
.leave-range-header .icon-button { background: white; }
.leave-range-header .back { transform: rotate(180deg); }
.leave-range-weekdays, .leave-range-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.leave-range-weekdays { padding: 7px 8px 3px; color: var(--ink-faint); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.leave-range-weekdays span { text-align: center; }
.leave-range-grid { gap: 3px; padding: 5px 8px 10px; }
.leave-range-day { position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.leave-range-day:hover { color: var(--starpark); background: var(--starpark-soft); }
.leave-range-day.is-outside { color: #9ba7b0; }
.leave-range-day.is-weekend { color: #9ba7b0; }
.leave-range-day.is-in-range { color: #174873; background: var(--starpark-soft); border-radius: 4px; }
.leave-range-day.is-weekend.is-in-range { color: #7a8791; background: #f1f3f5; }
.leave-range-day.is-start, .leave-range-day.is-end { color: white; background: var(--starpark); border-radius: 9px; }
.leave-range-day.is-weekend.is-start, .leave-range-day.is-weekend.is-end { color: white; background: #7a8791; }
body[data-company="ai"] .leave-range-day:hover, body[data-company="ai"] .leave-range-day.is-in-range { color: #4f399f; background: var(--ai-soft); }
body[data-company="ai"] .leave-range-day.is-start, body[data-company="ai"] .leave-range-day.is-end { color: white; background: var(--ai); }
body[data-company="ai"] .leave-range-day.is-weekend.is-in-range { color: #7a8791; background: #f1f3f5; }
body[data-company="ai"] .leave-range-day.is-weekend.is-start, body[data-company="ai"] .leave-range-day.is-weekend.is-end { color: white; background: #7a8791; }
.leave-range-summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.leave-range-summary > span { min-width: 0; padding: 10px 12px; }
.leave-range-summary > span + span { border-left: 1px solid var(--rule); }
.leave-range-summary small, .leave-range-summary strong { display: block; }
.leave-range-summary small { color: var(--ink-faint); font-size: .63rem; font-weight: 700; }
.leave-range-summary strong { margin-top: 2px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.coverage-note { display: flex; gap: 11px; padding: 14px; color: var(--sage); background: var(--sage-soft); border-radius: 10px; }
.coverage-note .icon { margin-top: 2px; }
.coverage-note p { margin-top: 3px; color: #456c59; font-size: .76rem; }
.coverage-note.has-conflict { color: var(--coral); background: var(--coral-soft); }
.coverage-note.has-conflict p { color: #8c3327; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.form-error { padding: 11px 12px; color: #8c3327; background: var(--coral-soft); border-radius: 9px; font-size: .8rem; }
.employee-profile-hero { padding: 24px; color: white; background: var(--navy); }
.employee-profile-hero .avatar { width: 58px; height: 58px; margin-bottom: 14px; color: var(--navy); background: white; font-size: 1rem; }
.employee-profile-hero h3 { margin-bottom: 2px; font-size: 1.35rem; }
.employee-profile-hero p { color: #c6d7e3; }
.employee-details { display: grid; gap: 22px; padding: 24px; }
.employee-details dl { display: grid; gap: 0; margin: 0; }
.employee-details dl div { display: grid; grid-template-columns: 130px 1fr; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.employee-details dt { color: var(--ink-faint); }
.employee-details dd { margin: 0; font-weight: 700; }
.employee-contact { display: grid; gap: 9px; }
.employee-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--starpark); text-decoration: none; }
.readonly-summary { padding: 14px; background: var(--mist); border: 1px solid var(--rule); border-radius: 9px; }
.readonly-summary > span { display: block; margin-bottom: 9px; color: var(--ink-faint); font-size: .69rem; font-weight: 800; text-transform: uppercase; }
.readonly-summary dl { display: grid; gap: 7px; margin: 0; }
.readonly-summary dl div { display: flex; justify-content: space-between; gap: 16px; }
.readonly-summary dt { color: var(--ink-soft); }
.readonly-summary dd { margin: 0; font-weight: 700; text-align: right; }
.decision-summary { display: grid; gap: 18px; }
.decision-person { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.decision-person .avatar { display: grid; flex: 0 0 44px; width: 44px; height: 44px; margin-top: 0; place-items: center; font-size: .76rem; line-height: 1; }
.decision-person > div strong, .decision-person > div span { display: block; }
.decision-person > div span { margin-top: 2px; color: var(--ink-soft); font-size: .78rem; }
.decision-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.decision-fact { padding: 12px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.decision-fact:nth-child(2n) { border-right: 0; }
.decision-fact:nth-last-child(-n+2) { border-bottom: 0; }
.decision-fact small, .decision-fact strong { display: block; }
.decision-fact small { color: var(--ink-faint); }
.decision-fact strong { margin-top: 3px; }
.request-note { padding: 14px; background: var(--mist); border-radius: 10px; }
.request-note span, .request-note strong { display: block; }
.request-note span { margin-bottom: 4px; color: var(--ink-faint); font-size: .72rem; text-transform: uppercase; }
.decision-warning { display: flex; gap: 9px; padding: 12px; color: var(--amber); background: var(--amber-soft); border-radius: 9px; }
.decision-warning.is-clear { color: var(--sage); background: var(--sage-soft); }
.decision-warning .icon { width: 17px; height: 17px; margin-top: 1px; }

@media (max-width: 1180px) {
  :root { --sidebar: 218px; }
  .command-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); }
  .attention-ledger { grid-template-columns: 1fr repeat(3, .7fr); }
  .attention-ledger > h2 { font-size: 1.12rem; }
  .activity-row { grid-template-columns: 130px 1fr 1.3fr; }
  .activity-row span:last-child { display: none; }
}

@media (max-width: 940px) {
  .login-main { gap: 40px; }
  :root { --sidebar: 252px; }
  .sidebar { transform: translateX(-100%); transition: transform .3s cubic-bezier(.16,1,.3,1); box-shadow: var(--shadow); }
  .sidebar.is-open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-menu, .mobile-brand { display: inline-flex; }
  .mobile-menu { width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule); border-radius: 10px; }
  .mobile-brand { flex-direction: column; min-width: 110px; line-height: 1.15; }
  .mobile-brand span { color: var(--ink-faint); font-size: .7rem; }
  .global-search { margin-left: auto; }
  .topbar-actions { margin-left: 0; }
  .demo-label { display: none; }
  .attention-ledger { grid-template-columns: 1fr 1fr 1fr; }
  .attention-ledger > h2 { grid-column: 1 / -1; padding-bottom: 12px; }
  .attention-cell { border-top: 1px solid var(--rule); }
  .attention-cell:first-of-type { border-left: 0; }
  .command-grid { grid-template-columns: 1fr; }
  .calendar-grid { min-height: 430px; }
  .review-list { grid-template-columns: repeat(2, 1fr); }
  .review-item:nth-child(odd) { border-right: 1px solid var(--rule); }
  .review-item::after { display: none; }
  .documents-layout { grid-template-columns: 1fr; }
  .document-review, .saved-documents { grid-column: 1; grid-row: auto; }
}

@media (max-width: 700px) {
  .login-bar { height: 62px; padding-inline: 16px; }
  .login-security { font-size: 0; }
  .login-security .icon { width: 18px; height: 18px; }
  .login-main { width: min(100% - 28px, 500px); min-height: auto; grid-template-columns: 1fr; gap: 25px; padding: 30px 0 45px; }
  .login-context h1 { max-width: none; font-size: 1.8rem; }
  .login-context > p:not(.login-privacy) { font-size: .86rem; }
  .login-companies { grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .login-companies > div { grid-template-columns: 32px 1fr; padding: 11px; }
  .login-companies > div + div { border-top: 0; border-left: 1px solid var(--rule); }
  .login-form-wrap { padding: 20px; }
  .registration-fields { grid-template-columns: 1fr; }
  .registration-fields label { grid-column: 1; }
  body { font-size: 14px; }
  .topbar { min-height: 64px; gap: 10px; padding: 0 14px; }
  .mobile-brand { min-width: 0; }
  .global-search { display: none; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .button { min-width: 88px; padding: 0 11px; }
  .topbar-actions .button .icon { display: none; }
  main { padding: 23px 14px 42px; }
  .page-heading { align-items: flex-start; margin-bottom: 18px; }
  .page-heading > .button { display: none; }
  .attention-ledger { grid-template-columns: 1fr; }
  .attention-ledger > h2 { grid-column: auto; padding: 17px; }
  .attention-cell { min-height: 74px; border-top: 1px solid var(--rule); border-left: 0; }
  .attention-cell strong { font-size: 1.45rem; }
  .command-grid { overflow: visible; border: 0; background: transparent; }
  .calendar-panel, .review-panel, .activity-section, .balance-ticket, .request-history, .scan-zone-section, .document-review, .saved-documents, .full-calendar { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
  .calendar-header { align-items: flex-start; }
  .calendar-controls .button { display: none; }
  .calendar-grid { grid-template-rows: repeat(6, 62px); min-height: 372px; }
  .calendar-day { padding: 5px 3px; }
  .calendar-event { padding: 3px 4px; font-size: 0; }
  .calendar-event::before { display: block; width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; }
  .review-list { grid-template-columns: 1fr; }
  .review-item:nth-child(odd) { border-right: 0; }
  .activity-row { grid-template-columns: 94px 1fr; gap: 3px 10px; }
  .activity-row span:first-child { grid-row: 1 / span 2; }
  .activity-row span:nth-child(3) { grid-column: 2; display: block; color: var(--ink-soft); }
  .activity-row span:last-child { display: none; }
  .activity-section .text-button { display: none; }
  .directory-toolbar { flex-wrap: wrap; }
  .inline-search { min-width: 100%; }
  .directory-count { margin-left: 0; }
  .leave-layout { grid-template-columns: 1fr; }
  .history-item { grid-template-columns: 38px 1fr auto; }
  .history-item > span:nth-child(3) { display: none; }
  .calendar-grid-large { grid-template-rows: repeat(6, 68px); min-height: 408px; }
  .documents-layout { gap: 14px; }
  .document-review form { grid-template-columns: 1fr; }
  .document-review .form-actions { grid-column: 1; }
  .scan-steps { font-size: .61rem; }
  .notification-panel { position: fixed; top: 70px; right: 14px; left: 14px; width: auto; max-height: calc(100vh - 84px); }
  .page-heading > #edit-profile-button, .page-heading > #create-task-button { display: inline-flex; min-width: auto; }
  .work-board { grid-template-columns: 1fr; }
  .profile-record dl { grid-template-columns: 1fr; }
  .profile-record dl > div:nth-child(odd) { border-right: 0; }
  .document-row { grid-template-columns: 40px minmax(0,1fr); }
  .document-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .document-actions .button { min-width: calc(50% - 3px); flex: 1; }
  .date-pair { grid-template-columns: 1fr; }
  .leave-settings-grid { grid-template-columns: 1fr; }
  .sheet-header, .side-sheet form { padding: 20px; }
}

@media (max-width: 420px) {
  .mobile-brand span { display: none; }
  .page-heading h1 { font-size: 1.7rem; }
  .section-header { padding: 14px; }
  .calendar-weekdays span { padding-inline: 2px; font-size: .6rem; }
  .review-person { grid-template-columns: 36px 1fr; }
  .review-person .status-stamp { grid-column: 2; justify-self: start; margin-top: 5px; }
  .request-dates, .coverage-status { margin-left: 46px; }
  .activity-row { padding-inline: 14px; }
}

/* Jira-style operations workspace — pinned visual direction */
:root {
  --ink: #172b4d;
  --ink-soft: #44546f;
  --ink-faint: #626f86;
  --paper: #ffffff;
  --mist: #f7f8f9;
  --mist-deep: #f1f2f4;
  --rule: #dcdfe4;
  --rule-strong: #b7bdc8;
  --navy: #ffffff;
  --starpark: #0c66e4;
  --starpark-soft: #e9f2ff;
  --ai: #6554c0;
  --ai-soft: #f0edff;
  --coral: #c9372c;
  --coral-soft: #ffeceb;
  --sage: #216e4e;
  --sage-soft: #dcfff1;
  --amber: #a54800;
  --amber-soft: #fff3eb;
  --shadow: 0 8px 24px rgba(9, 30, 66, .14);
  --radius: 6px;
  --sidebar: 236px;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html, body { background: #fff; }
body { font-size: 14px; }
h1, h2, h3 { letter-spacing: -.01em; }
h1 { font-size: clamp(1.45rem, 2vw, 1.75rem); font-weight: 650; }
h2 { font-size: 1rem; font-weight: 650; }
h3 { font-size: .9rem; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid #85b8ff; outline-offset: 2px; }
#main-content:focus { outline: none; }

.sidebar { color: var(--ink); background: #fff; border-right: 1px solid var(--rule); }
.brand-block { min-height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.brand-block strong { font-size: 1rem; }
.brand-block small, .company-option small, .privacy-note, .profile-chip small { color: var(--ink-faint); }
.company-switcher { gap: 3px; padding: 12px 8px 8px; }
.company-option { min-height: 46px; padding: 6px 9px; color: var(--ink-soft); border-radius: 5px; }
.company-option:hover { background: var(--mist); }
.company-option.is-active, .company-option[data-company="ai"].is-active { color: var(--ink); background: var(--starpark-soft); border-color: transparent; }
.company-option[data-company="ai"].is-active { background: var(--ai-soft); }
.company-glyph { width: 28px; height: 28px; color: white; background: var(--starpark); border-radius: 5px; }
.company-option[data-company="ai"] .company-glyph { background: var(--ai); }
.primary-nav { gap: 2px; padding: 8px; }
.nav-item { min-height: 40px; gap: 11px; padding: 0 11px; color: var(--ink-soft); border-radius: 5px; }
.nav-item:hover { color: var(--ink); background: var(--mist); }
.nav-item.is-active { color: #0c66e4; background: var(--starpark-soft); }
body[data-company="ai"] .nav-item.is-active { color: #403294; background: var(--ai-soft); }
.nav-item.is-active::before { display: none; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-count, #work-nav-count, body[data-company="ai"] #work-nav-count { min-width: 20px; height: 20px; color: #fff; background: #0c66e4; border-radius: 10px; font-size: .66rem; }
.sidebar-foot { padding: 8px; border-top: 1px solid var(--rule); }
.privacy-note { padding: 8px; }
.profile-chip { padding: 7px; color: var(--ink); background: transparent; border-radius: 5px; }
.profile-chip:hover { background: var(--mist); }
.profile-menu { border: 1px solid var(--rule); border-radius: 6px; }

.workspace { background: #fff; }
.topbar { min-height: 56px; padding: 0 24px; background: #fff; }
.global-search { width: min(620px, 52vw); height: 36px; margin-inline: auto; padding: 0 10px; background: #fff; border: 1px solid var(--rule-strong); border-radius: 4px; }
.global-search input { height: 34px; }
.demo-label { color: var(--ink-faint); background: var(--mist); border-radius: 3px; }
.icon-button { width: 34px; height: 34px; border-color: transparent; border-radius: 4px; }
.icon-button:hover { background: var(--mist-deep); }
.notification-panel { top: calc(100% + 7px); border-radius: 5px; box-shadow: var(--shadow); }
.notification-header { padding: 13px 15px; }
.notification-item { padding: 12px 14px; }

main { max-width: none; padding: 24px 28px 48px; }
.view { width: 100%; }
.page-heading { margin-bottom: 20px; }
.page-heading p { font-size: .82rem; }
.section-header { padding: 15px 17px; }
.section-header p { font-size: .72rem; }
.button { min-height: 36px; padding: 0 12px; border-radius: 4px; font-size: .82rem; box-shadow: none; }
.button.primary, body[data-company="ai"] .button.primary { background: #0c66e4; }
.button.primary:hover, body[data-company="ai"] .button.primary:hover { background: #0055cc; box-shadow: none; }
.button.secondary, .button.quiet { border-color: var(--rule); }
.button.secondary:hover, .button.quiet:hover { background: var(--mist); border-color: var(--rule-strong); }
input, select, textarea { border-radius: 4px !important; }

.attention-ledger, .review-panel, .activity-section, .people-table-wrap, .calendar-panel, .scan-zone-section, .document-review, .saved-documents, .profile-record, .request-history, .leave-balance-panel { border: 1px solid var(--rule); border-radius: 6px; box-shadow: none; }
.attention-ledger { overflow: hidden; }
.attention-cell { background: #fff; }
.attention-cell:hover { background: var(--mist); }
.review-item, .activity-row, .document-row, .history-item { padding-top: 13px; padding-bottom: 13px; }

.leave-layout { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.leave-balance-panel { overflow: hidden; background: #fff; }
.leave-balance-list { display: grid; }
.leave-balance-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; min-height: 72px; padding: 12px 16px; border-top: 1px solid var(--rule); }
.leave-balance-row > span:nth-child(2) { display: grid; }
.leave-balance-row small { margin-top: 2px; color: var(--ink-faint); font-size: .7rem; }
.leave-balance-row > strong { font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.leave-balance-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #0c66e4; background: var(--starpark-soft); border-radius: 5px; }
.leave-balance-row.medical .leave-balance-icon { color: #216e4e; background: var(--sage-soft); }
.leave-balance-icon .icon { width: 17px; height: 17px; }

.calendar-panel { overflow: hidden; }
.calendar-day { min-width: 0; background: #fff; }
.calendar-event { border-radius: 3px; }
.calendar-event.annual { color: #0055cc; background: #e9f2ff; border-color: #85b8ff; }
.calendar-event.medical { color: #216e4e; background: #dcfff1; border-color: #7ee2b8; }
.calendar-event.unpaid { color: #a54800; background: #fff3eb; border-color: #fec195; }

.work-toolbar { justify-content: flex-start; gap: 8px; padding: 0; margin-bottom: 14px; }
.work-toolbar > span { margin-left: auto; }
.work-toolbar label { position: relative; gap: 7px; font-weight: 500; }
.work-toolbar label > .icon { position: absolute; left: 10px; z-index: 1; width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.work-toolbar input, .work-toolbar select { height: 36px; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
.work-toolbar input { width: 220px; padding: 7px 10px 7px 34px; }
.work-toolbar select { min-width: 190px; padding: 7px 30px 7px 34px; }
.work-board { display: grid; grid-template-columns: repeat(4, minmax(235px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.work-column, .work-column.status-todo, .work-column.status-incoming, .work-column.status-progress, .work-column.status-done { min-width: 235px; background: var(--mist); border-radius: 8px; }
.work-column-head { padding: 12px 13px 8px; }
.work-column-head h2 { color: var(--ink-soft); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .025em; }
.work-column-head span, .work-column.status-progress .work-column-head span, .work-column.status-done .work-column-head span { min-width: 20px; height: 20px; color: var(--ink-soft); background: var(--mist-deep); border-radius: 3px; }
.work-column-list { gap: 6px; padding: 0 7px 8px; }
.task-card { min-height: 104px; padding: 12px; background: #fff; border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; transition: border-color .12s ease-out, box-shadow .12s ease-out; }
.task-card:hover { border-color: #85b8ff; box-shadow: 0 1px 2px rgba(9,30,66,.12); }
.task-card h3 { min-height: 2.65em; margin: 0 0 16px; color: var(--ink); font-size: .86rem; font-weight: 500; line-height: 1.38; }
.task-card-meta { display: grid; grid-template-columns: auto auto 1fr 28px; align-items: center; gap: 7px; color: var(--ink-faint); font-size: .68rem; }
.task-key { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.task-due { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.task-card-meta .avatar { width: 28px; height: 28px; color: #fff; background: #22a06b; font-size: .6rem; }
.task-priority { font-size: .65rem; font-weight: 650; }
.task-priority.normal { color: #44546f; }
.task-priority.high { color: #a54800; }
.task-priority.urgent { color: #c9372c; }
.work-empty { padding: 22px 10px; }

.side-sheet { width: min(520px, 100vw); background: #fff; box-shadow: -8px 0 24px rgba(9,30,66,.12); }
.sheet-header { padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.side-sheet form { padding: 22px 24px 28px; }
.task-detail-sheet { width: min(920px, 100vw); }
.task-detail-sheet .sheet-header { align-items: flex-start; }
.task-detail-key { margin: 0 0 4px; color: var(--ink-faint); font-size: .72rem; font-weight: 600; }
.task-detail-sheet .sheet-header h2 { max-width: 32ch; font-size: 1.5rem; }
.task-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: calc(100vh - 94px); }
.task-detail-main { display: grid; align-content: start; gap: 28px; padding: 28px 30px; border-right: 1px solid var(--rule); }
.task-detail-main section > h3 { margin-bottom: 10px; font-size: .9rem; }
.task-description-body { min-height: 160px; padding: 14px; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; line-height: 1.65; overflow-wrap: anywhere; }
.task-description-body a { color: #0c66e4; text-decoration: underline; text-underline-offset: 2px; }
.task-detail-aside { padding: 28px 20px; background: var(--mist); }
.task-detail-aside > label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .72rem; font-weight: 650; }
.task-detail-aside select { min-height: 36px; padding: 7px 9px; color: var(--ink); background: #fff; border: 1px solid var(--rule-strong); }
.task-detail-aside dl { display: grid; gap: 0; margin: 22px 0; }
.task-detail-aside dl > div { display: grid; gap: 5px; padding: 11px 0; border-top: 1px solid var(--rule); }
.task-detail-aside dt { color: var(--ink-faint); font-size: .7rem; }
.task-detail-aside dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: .8rem; }
.task-detail-aside .avatar { width: 28px; height: 28px; }
.task-detail-aside .button { width: 100%; }
.task-detail-image { display: grid; width: min(100%, 560px); gap: 8px; padding: 0; color: #0c66e4; text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; cursor: zoom-in; }
.task-detail-image img { display: block; width: 100%; max-height: 340px; object-fit: contain; background: var(--mist); }
.task-detail-image span { padding: 0 12px 11px; font-size: .76rem; }
.task-detail-file { display: flex; width: min(100%, 560px); align-items: center; gap: 12px; padding: 14px; color: #0c66e4; text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 5px; cursor: pointer; }
.task-detail-file:hover { background: var(--starpark-soft); border-color: #85b8ff; }
.task-detail-file > .icon { width: 26px; height: 26px; }
.task-detail-file span, .task-detail-file strong, .task-detail-file small { display: block; }
.task-detail-file small { margin-top: 2px; color: var(--ink-faint); font-size: .68rem; }
.empty-detail { padding: 12px; background: var(--mist); border-radius: 4px; font-size: .78rem; }

/* Full-page calendar fits inside the active workspace viewport. */
#view-calendar.is-active { display: flex; height: calc(100dvh - 128px); min-height: 520px; flex-direction: column; }
#view-calendar .page-heading { flex: none; margin-bottom: 14px; }
#view-calendar .full-calendar { display: flex; min-height: 0; flex: 1; flex-direction: column; }
#view-calendar .calendar-grid-large { min-height: 0; flex: 1; grid-template-rows: repeat(6, minmax(48px, 1fr)); }

/* Jira-style centered work-item dialog. */
.task-detail-sheet { inset: 50% auto auto 50%; display: flex; width: min(1200px, calc(100vw - 72px)); height: min(880px, calc(100dvh - 72px)); padding: 0; flex-direction: column; overflow: hidden; border-radius: 8px; box-shadow: 0 18px 48px rgba(9,30,66,.28); opacity: 0; transform: translate(-50%, -48%) scale(.985); transition: transform .2s cubic-bezier(.2,0,0,1), opacity .16s ease-out, visibility .2s; }
.task-detail-sheet.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.task-detail-sheet > #task-detail-content { min-height: 0; flex: 1; }
.task-detail-layout { height: 100%; min-height: 0; }
.task-detail-main, .task-detail-aside { min-height: 0; overflow-y: auto; }

/* Image attachments stay inside Company System instead of opening a new tab. */
.media-viewer { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: #f7f8f9; background: rgba(15,18,22,.96); }
.media-viewer-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 14px; background: #171b20; border-bottom: 1px solid rgba(255,255,255,.12); }
.media-viewer-file { display: flex; min-width: 0; align-items: center; gap: 10px; }
.media-viewer-file > span:last-child { display: grid; min-width: 0; }
.media-viewer-file strong, .media-viewer-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-viewer-file strong { color: #fff; font-size: .82rem; }
.media-viewer-file small { margin-top: 2px; color: #b6c2cf; font-size: .68rem; }
.media-viewer-file-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #101214; background: #f5cd47; border-radius: 4px; }
.media-viewer-file-icon .icon { width: 17px; height: 17px; }
.media-viewer-actions { display: flex; gap: 4px; }
.media-viewer .icon-button { color: #dcdfe4; background: transparent; border-color: transparent; }
.media-viewer .icon-button:hover { color: #fff; background: rgba(255,255,255,.12); }
.media-viewer-stage { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 24px 72px 64px; overflow: auto; }
.media-viewer-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; transform-origin: center; transition: transform .16s ease-out; }
.media-viewer-zoom { position: fixed; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 3px; background: rgba(15,18,22,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
.media-viewer-zoom span { min-width: 54px; color: #fff; font-size: .72rem; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 1050px) {
  .work-board { grid-template-columns: repeat(4, 270px); }
}

@media (max-width: 700px) {
  .topbar { min-height: 56px; padding: 0 12px; }
  main { padding: 18px 14px 38px; }
  .mobile-menu { width: 34px; height: 34px; border-radius: 4px; }
  .page-heading { gap: 12px; }
  .page-heading > #create-task-button { min-width: 36px; padding: 0 10px; font-size: 0; }
  .page-heading > #create-task-button .icon { display: block; }
  .leave-layout { grid-template-columns: 1fr; }
  .leave-balance-panel { border-radius: 6px; }
  .work-toolbar { display: grid; grid-template-columns: 1fr auto; }
  .work-search { grid-column: 1 / -1; }
  .work-toolbar input { width: 100%; }
  .work-toolbar select { width: 100%; min-width: 0; }
  .work-toolbar > span { grid-column: 1 / -1; margin-left: 0; }
  .work-board { grid-template-columns: repeat(4, 278px); gap: 10px; margin-right: -14px; padding-right: 14px; scroll-snap-type: x proximity; }
  .work-column { scroll-snap-align: start; }
  .task-detail-layout { grid-template-columns: 1fr; }
  .task-detail-main { padding: 22px 18px; border-right: 0; }
  .task-detail-aside { padding: 20px 18px 28px; border-top: 1px solid var(--rule); }
  .task-detail-sheet .sheet-header h2 { font-size: 1.2rem; }
  #view-calendar.is-active { height: calc(100dvh - 112px); min-height: 500px; }
  #view-calendar .page-heading { margin-bottom: 10px; }
  .task-detail-sheet { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; transform: translateY(12px); }
  .task-detail-sheet.is-open { transform: translateY(0); }
  .media-viewer-stage { padding: 16px 12px 64px; }
  .media-viewer-stage img { max-height: calc(100dvh - 130px); }
}

/* Theme and phone adaptation */
.login-bar-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { flex: none; }
.mobile-nav-backdrop { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f2f4;
  --ink-soft: #b6c2cf;
  --ink-faint: #8c9bab;
  --paper: #1d2125;
  --mist: #161a1d;
  --mist-deep: #22272b;
  --rule: #38414a;
  --rule-strong: #596773;
  --navy: #1d2125;
  --starpark: #579dff;
  --starpark-soft: #0b3158;
  --ai: #9f8fef;
  --ai-soft: #352c63;
  --coral: #f87168;
  --coral-soft: #4a1f1b;
  --sage: #7ee2b8;
  --sage-soft: #153f32;
  --amber: #f5cd47;
  --amber-soft: #4a3814;
  --shadow: 0 12px 32px rgba(0, 0, 0, .42);
}
html[data-theme="dark"], html[data-theme="dark"] body,
html[data-theme="dark"] .login-screen,
html[data-theme="dark"] .workspace { background: var(--mist); }
html[data-theme="dark"] .login-bar,
html[data-theme="dark"] .login-form-wrap,
html[data-theme="dark"] .login-companies,
html[data-theme="dark"] .login-mode.is-active,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .attention-ledger,
html[data-theme="dark"] .attention-cell,
html[data-theme="dark"] .review-panel,
html[data-theme="dark"] .review-item,
html[data-theme="dark"] .activity-section,
html[data-theme="dark"] .people-table-wrap,
html[data-theme="dark"] .people-table td,
html[data-theme="dark"] .leave-balance-panel,
html[data-theme="dark"] .request-history,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .calendar-panel,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .scan-zone-section,
html[data-theme="dark"] .document-review,
html[data-theme="dark"] .saved-documents,
html[data-theme="dark"] .document-row,
html[data-theme="dark"] .profile-record,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .side-sheet,
html[data-theme="dark"] .task-detail-main,
html[data-theme="dark"] .task-description-body,
html[data-theme="dark"] .task-detail-image,
html[data-theme="dark"] .task-detail-file,
html[data-theme="dark"] .leave-range-picker,
html[data-theme="dark"] .leave-range-header,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .button.quiet,
html[data-theme="dark"] .button.secondary { color: var(--ink); background: var(--paper); border-color: var(--rule); }
html[data-theme="dark"] .sidebar { border-color: var(--rule); }
html[data-theme="dark"] .company-option.is-active { color: #d9eaff; background: var(--starpark-soft); }
html[data-theme="dark"] .company-option[data-company="ai"].is-active { color: #e6e0ff; background: var(--ai-soft); }
html[data-theme="dark"] .nav-item.is-active { color: #85b8ff; background: var(--starpark-soft); }
html[data-theme="dark"] body[data-company="ai"] .nav-item.is-active { color: #b8acf6; background: var(--ai-soft); }
html[data-theme="dark"] .profile-chip { color: var(--ink); }
html[data-theme="dark"] .profile-chip:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .button.quiet:hover,
html[data-theme="dark"] .button.secondary:hover,
html[data-theme="dark"] .attention-cell:hover { background: var(--mist-deep); border-color: var(--rule-strong); }
html[data-theme="dark"] .people-table th,
html[data-theme="dark"] .work-column,
html[data-theme="dark"] .work-column.status-todo,
html[data-theme="dark"] .work-column.status-incoming,
html[data-theme="dark"] .work-column.status-progress,
html[data-theme="dark"] .work-column.status-done,
html[data-theme="dark"] .task-detail-aside,
html[data-theme="dark"] .readonly-summary,
html[data-theme="dark"] .request-note,
html[data-theme="dark"] .document-file-summary,
html[data-theme="dark"] .task-image-preview,
html[data-theme="dark"] .empty-detail,
html[data-theme="dark"] .login-mode-switch,
html[data-theme="dark"] .task-upload-zone,
html[data-theme="dark"] .receipt-upload-zone { background: var(--mist-deep); }
html[data-theme="dark"] .upload-zone { color: #85b8ff; background: #112f4d; border-color: #579dff; }
html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .upload-zone.is-dragging,
html[data-theme="dark"] .task-upload-zone:hover,
html[data-theme="dark"] .task-upload-zone.is-dragging { color: #85b8ff; background: #153b61; border-color: #85b8ff; }
html[data-theme="dark"] .calendar-day.is-outside { background: #171b1f; }
html[data-theme="dark"] .calendar-event.annual { color: #b3d4ff; background: #0b3158; border-color: #579dff; }
html[data-theme="dark"] .calendar-event.medical { color: #baf3db; background: #153f32; border-color: #4bce97; }
html[data-theme="dark"] .calendar-event.unpaid { color: #fce4a6; background: #4a3814; border-color: #e2b203; }
html[data-theme="dark"] .leave-range-day.is-weekend.is-in-range { color: var(--ink-faint); background: #242a30; }
html[data-theme="dark"] .status-stamp.pending { color: #ff9c8f; background: var(--coral-soft); }
html[data-theme="dark"] .status-stamp.approved { color: #9ee8c8; background: var(--sage-soft); }
html[data-theme="dark"] .status-stamp.declined { color: var(--ink-soft); background: var(--mist-deep); }
html[data-theme="dark"] .coverage-note { color: #9ee8c8; background: var(--sage-soft); }
html[data-theme="dark"] .coverage-note p { color: #baf3db; }
html[data-theme="dark"] .coverage-note.has-conflict,
html[data-theme="dark"] .form-error { color: #ffb3aa; background: var(--coral-soft); }
html[data-theme="dark"] .coverage-note.has-conflict p { color: #ffb3aa; }
html[data-theme="dark"] .decision-warning { color: #fce4a6; background: var(--amber-soft); }
html[data-theme="dark"] .decision-warning.is-clear { color: #9ee8c8; background: var(--sage-soft); }
html[data-theme="dark"] .password-toggle { color: var(--ink-faint); }
html[data-theme="dark"] .password-toggle:hover { color: var(--ink); background: var(--mist-deep); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7f8c98; opacity: 1; }
html[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .task-detail-sheet { box-shadow: 0 18px 52px rgba(0,0,0,.62); }
html[data-theme="dark"] .notification-panel { color: var(--ink); background: var(--paper); border-color: var(--rule); }
html[data-theme="dark"] .notification-item.is-unread { background: #112f4d; }
html[data-theme="dark"] .task-pdf-preview { color: #ffb3aa; background: var(--coral-soft); border-color: #f87168; }

@media (max-width: 940px) {
  .sidebar { width: min(86vw, 320px); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 35; display: block; visibility: hidden; padding: 0; background: rgba(9,30,66,.45); border: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease-out, visibility .2s; }
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .mobile-nav-backdrop { visibility: visible; opacity: 1; pointer-events: auto; }
  body.mobile-nav-open .sidebar { box-shadow: 12px 0 30px rgba(9,30,66,.24); }
}

@media (max-width: 700px) {
  body { min-height: 100dvh; font-size: 15px; }
  .login-bar { min-height: 60px; height: auto; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  .login-main { width: min(100% - 24px, 500px); padding: 24px 0 max(34px, env(safe-area-inset-bottom)); }
  .login-context h1 { font-size: clamp(1.6rem, 8vw, 2rem); }
  .login-companies { grid-template-columns: 1fr; }
  .login-companies > div + div { border-top: 1px solid var(--rule); border-left: 0; }
  .login-form-wrap { padding: 18px; }
  #login-form input, #login-form select { min-height: 48px; font-size: 16px; }
  .topbar { min-height: 58px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .topbar .icon-button, .mobile-menu { width: 40px; height: 40px; }
  .topbar-actions { gap: 4px; }
  .mobile-brand strong { font-size: .86rem; }
  main { padding: 18px max(12px, env(safe-area-inset-right)) max(38px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .page-heading { flex-wrap: wrap; align-items: flex-start; }
  .page-heading > div { min-width: 0; flex: 1 1 210px; }
  .page-heading > .button,
  .page-heading > #create-task-button,
  .page-heading > #edit-profile-button { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 13px; font-size: .82rem; }
  .page-heading > #create-task-button .icon { display: block; }
  .section-header { min-height: 62px; }
  .history-item { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
  .history-item > span:nth-child(3) { display: block; grid-column: 2; color: var(--ink-soft); font-size: .76rem; }
  .history-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
  .history-actions .button { min-height: 40px; }
  .people-table { min-width: 0; }
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table tr, .people-table td { display: block; width: 100%; }
  .people-table tr { padding: 12px 14px; border-top: 1px solid var(--rule); }
  .people-table tr:first-child { border-top: 0; }
  .people-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .people-table td::before { content: attr(data-label); color: var(--ink-faint); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
  .people-table td:first-child { grid-template-columns: 1fr; padding-top: 0; }
  .people-table td:first-child::before,
  .people-table td:last-child::before { display: none; }
  .people-table td:last-child { grid-template-columns: 1fr; padding-bottom: 0; }
  .people-table td[colspan] { display: block; padding: 0; }
  .people-table td[colspan]::before { display: none; }
  .people-table .table-action { min-height: 44px; text-align: left; }
  .review-actions .button,
  .document-actions .button { min-height: 44px; }
  .side-sheet { width: 100vw; height: 100dvh; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .side-sheet .sheet-header { position: sticky; top: 0; z-index: 2; padding-top: max(18px, env(safe-area-inset-top)); background: var(--paper); }
  .side-sheet form { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .task-detail-sheet { padding-bottom: 0; }
  .notification-panel { top: calc(58px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); max-height: calc(100dvh - 72px - env(safe-area-inset-top)); }
  .calendar-header { gap: 8px; }
  .calendar-controls .icon-button { width: 40px; height: 40px; }
  .upload-zone { min-height: 170px; padding: 22px 16px; }
  .receipt-upload-zone { min-height: 88px; }
}

@media (max-width: 420px) {
  .mobile-brand span { display: none; }
  .login-security { display: none; }
  .page-heading > .button { width: 100%; }
  .calendar-grid-large { grid-template-rows: repeat(6, minmax(54px, 1fr)); }
  .calendar-day { min-width: 0; }
  .day-number { font-size: .67rem; }
  .document-file-summary { grid-template-columns: 1fr; }
  .document-file-summary > span + span { border-top: 1px solid var(--rule); border-left: 0; }
}

@media (pointer: coarse) {
  button, .nav-item, .company-option, .calendar-event, .leave-range-day { min-height: 44px; }
}