/* portal.css — page shell for the HR portal. Tokens and base come from tokens.css / base.css. */
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Bold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexMono-Regular.woff2) format('woff2')}

h1, h2, h3 { font-weight: 700; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-lg); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  padding: var(--s-sm) var(--gutter);
  border-block-end: 1px solid var(--line);
}
.wordmark { font-weight: 700; letter-spacing: var(--track-tight); color: var(--ink-strong); text-decoration: none; min-block-size: 2.75rem; display: inline-flex; align-items: center; gap: 0.25em; }
.wordmark span { color: var(--ink-brand); }

.shell {
  max-width: 34rem; margin-inline: auto;
  padding: var(--s-xl) var(--gutter) var(--s-3xl);
}
.shell > * + * { margin-block-start: var(--s-lg); }
.shell.wide { max-width: 44rem; }

.panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-lg); }
.panel > * + * { margin-block-start: var(--s-md); }
.panel form > * + * { margin-block-start: var(--s-md); }
.panel .btn { inline-size: 100%; }
.btn--small { inline-size: auto; }

.muted { color: var(--ink-muted); }
.note { padding: var(--s-sm) var(--s-md); border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--brand-200); color: var(--ink-strong); }
.note[data-kind="error"] { background: oklch(96% 0.03 25); border-color: oklch(80% 0.1 25); }
.note[hidden] { display: none; }

.checklist, .invites { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.checklist li, .invites li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-xs) var(--s-md);
  min-block-size: 2.75rem; padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); box-shadow: var(--e1);
}
.invites .who { display: flex; flex-direction: column; min-inline-size: 0; }
.invites .who small { color: var(--ink-muted); overflow-wrap: anywhere; }

.chip { font-size: var(--t-sm); font-weight: 600; padding: var(--s-3xs) var(--s-sm); border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-sunken); white-space: nowrap; }
.chip[data-status="pending"] { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-50); }
.chip[data-status="used"] { border-color: oklch(75% 0.1 150); color: oklch(35% 0.09 150); background: oklch(96% 0.03 150); }
.chip[data-status="expired"], .chip[data-status="cancelled"] { color: var(--ink-muted); }

.field input { inline-size: 100%; }
.code-input { font-family: var(--font-mono); font-size: var(--t-lg); letter-spacing: 0.3em; text-align: center; }
.shell section > h2 + * { margin-block-start: var(--s-sm); }
.invites a.who { color: inherit; text-decoration: none; }
.invites a.who:hover strong, .invites a.who:focus-visible strong { text-decoration: underline; }
.chip[data-status="invited"] { color: var(--ink-muted); }
.chip[data-status="in_progress"] { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-50); }
.chip[data-status="stuck"], .chip[data-status="failed"], .chip[data-status="returned"], .chip[data-status="denied"] { border-color: oklch(75% 0.12 25); color: oklch(40% 0.14 25); background: oklch(96% 0.03 25); }
.chip[data-status="signed"], .chip[data-status="filed"], .chip[data-status="sent"], .chip[data-status="received"], .chip[data-status="approved"] { border-color: oklch(75% 0.1 150); color: oklch(35% 0.09 150); background: oklch(96% 0.03 150); }
.facts { margin: 0; display: grid; gap: var(--s-xs); }
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3xs) var(--s-md); }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; font-weight: 600; }
.signin-google { margin-block-start: var(--s-md); }
.returned-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.invites li[data-overdue] { border-color: oklch(75% 0.12 25); background: oklch(98% 0.015 25); }
.pto-decide { flex: 1 1 100%; display: grid; gap: var(--s-sm); }