/* Shared brand for Recruit Book, matching the CV Formatter redesign ("paper and ink"):
   warm, low-chroma paper neutrals around one navy accent; the Windows radius ladder; layered warm shadows;
   short, purposeful motion. Light/dark and reduced motion follow the visitor's device; there is no switch. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/newsreader-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/newsreader-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Colour: light values first (also the whole palette for browsers without light-dark(), which stay light) ---- */
:root {
  color-scheme: light;
  --bg: #f2f1ee; --surface: #fefdfc; --raised: #fff; --sunk: #f7f6f3; --desk: #e2dfda; --paper: #fff;
  --fill-hover: #f2f0ec; --fill-press: #eae8e3;
  --line: #e1dfdb; --line-strong: #89867f; --ink: #1a1f2a; --muted: #595e67;
  --accent: #2a4b9b; --accent-hover: #223e85; --accent-press: #1c3575; --accent-ink: #fff; --accent-soft: #e2ebff;
  --accent-pending: #4a66ad; --accent-halo: rgb(42 75 155 / .18); --focus: #2a4b9b;
  --ok: #296a3b; --ok-bg: #e3f6e6; --warn: #8f520d; --warn-bg: #fff0d5; --danger: #b72725; --danger-bg: #ffeae8;
  --scrim: rgb(28 27 24 / .4);
  /* elevation: one light source; higher means a larger offset, more blur and fainter layers */
  --sh-1: 0 1px 2px rgb(60 55 45 / .07);
  --sh-2: 0 1px 2px rgb(60 55 45 / .06), 0 4px 12px rgb(60 55 45 / .07);
  --sh-3: 0 2px 4px rgb(60 55 45 / .08), 0 8px 16px rgb(60 55 45 / .1), 0 16px 32px rgb(60 55 45 / .1);
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the Windows radius ladder: 4 px for controls, 8 px for containers; nested corners are concentric */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;
  /* type scale */
  --fs-display: 28px; --fs-title: 22px; --fs-panel: 19px; --fs-sub: 16px; --fs-body: 14px; --fs-ui: 13px; --fs-meta: 12px; --fs-micro: 11px;
  /* spacing on a 4 px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
}
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --bg: light-dark(#f2f1ee, #141310); --surface: light-dark(#fefdfc, #1b1a18); --raised: light-dark(#fff, #23221f);
    --sunk: light-dark(#f7f6f3, #171613); --desk: light-dark(#e2dfda, #0c0b09);
    --fill-hover: light-dark(#f2f0ec, #272522); --fill-press: light-dark(#eae8e3, #2e2c29);
    --line: light-dark(#e1dfdb, #302f2c); --line-strong: light-dark(#89867f, #74716c);
    --ink: light-dark(#1a1f2a, #eae8e3); --muted: light-dark(#595e67, #a1a5ac);
    --accent: light-dark(#2a4b9b, #89a9f1); --accent-hover: light-dark(#223e85, #9bbafb); --accent-press: light-dark(#1c3575, #7d9de3);
    --accent-ink: light-dark(#fff, #0b152c); --accent-soft: light-dark(#e2ebff, #212f4f); --accent-pending: light-dark(#4a66ad, #6d8bd0);
    --accent-halo: light-dark(rgb(42 75 155 / .18), rgb(137 169 241 / .28)); --focus: light-dark(#2a4b9b, #9bbafb);
    --ok: light-dark(#296a3b, #83d494); --ok-bg: light-dark(#e3f6e6, #172c1c);
    --warn: light-dark(#8f520d, #eeba70); --warn-bg: light-dark(#fff0d5, #342611);
    --danger: light-dark(#b72725, #f7857d); --danger-bg: light-dark(#ffeae8, #3e1e1c);
    --scrim: light-dark(rgb(28 27 24 / .4), rgb(0 0 0 / .55));
    --sh-1: 0 1px 2px light-dark(rgb(60 55 45 / .07), rgb(0 0 0 / .4));
    --sh-2: 0 1px 2px light-dark(rgb(60 55 45 / .06), rgb(0 0 0 / .4)), 0 4px 12px light-dark(rgb(60 55 45 / .07), rgb(0 0 0 / .4));
    --sh-3: 0 2px 4px light-dark(rgb(60 55 45 / .08), rgb(0 0 0 / .35)), 0 8px 16px light-dark(rgb(60 55 45 / .1), rgb(0 0 0 / .45)),
            0 16px 32px light-dark(rgb(60 55 45 / .1), rgb(0 0 0 / .45)), inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .05));
  }
}

/* ---- Motion: how often something happens decides how much it moves ----
   0 ms: typing, focus, keyboard. 100 ms: hover, press, colour. 150–200 ms: ordinary changes.
   250–300 ms: rare moments (a booking confirmed). Nothing over 320 ms. Only opacity and transforms move. */
:root {
  --dur-1: 100ms; --dur-2: 150ms; --dur-3: 200ms; --dur-4: 250ms; --dur-5: 300ms;
  --ease-enter: cubic-bezier(0, 0, 0, 1);       /* decelerate: things arriving */
  --ease-exit: cubic-bezier(.3, 0, 1, 1);       /* accelerate: things leaving */
  --ease-move: cubic-bezier(.2, 0, 0, 1);       /* on-screen moves */
  --ease-hover: cubic-bezier(.33, 0, .67, 1);   /* colour changes */
  /* a lightly damped spring (+3.8% peak): only for a success pop, never for opacity or colour */
  --ease-settle: linear(0, .153 5%, .438 10%, .698 15%, .88 20%, .983 25%, 1.028 30%, 1.038 35%,
                        1.032 40%, 1.021 45%, 1.011 50%, 1.004 55%, 1 65%, 1);
  --shift-1: 4px; --shift-2: 8px;               /* how far things travel as they appear */
  --scale-pop: .96; --scale-press: .98; --scale-pop-from: .4;
  --stagger: 20ms;                               /* per item, at most 6 items */
}
/* Reduced motion (device setting): no travel, scale or stagger, and the longer steps get short, so only quick fades remain. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-1: 0px; --shift-2: 0px; --scale-pop: 1; --scale-press: 1; --scale-pop-from: 1; --stagger: 0ms;
    --dur-3: 120ms; --dur-4: 120ms; --dur-5: 120ms; --ease-settle: var(--ease-enter);
  }
  /* every looping animation is marked .loop and stands still */
  .loop, .loop::before, .loop::after, .spin, .skeleton { animation: none !important; }
}

/* Shared keyframes. Entrances fade in while travelling a few pixels; set --i on an element to stagger it. */
@keyframes enter-up { from { opacity: 0; translate: 0 var(--shift-2); } }
@keyframes enter-down { from { opacity: 0; translate: 0 calc(-1 * var(--shift-1)); } }
@keyframes enter-left { from { opacity: 0; translate: var(--shift-2) 0; } }
@keyframes enter-right { from { opacity: 0; translate: calc(-1 * var(--shift-2)) 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; scale: var(--scale-pop-from); } }
@keyframes spin { to { rotate: 360deg; } }
.enter { animation: enter-up var(--dur-3) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 5) * var(--stagger)); }

/* ---- Base ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-title); line-height: 28px; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-panel); line-height: 24px; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-sub); line-height: 22px; }
p { text-wrap: pretty; }
a { color: var(--accent); }

/* ---- Controls: rest, hover and press in both themes. Colour changes take 100 ms; a press lands instantly. ---- */
button, .btn { font: inherit; font-weight: 500; font-size: var(--fs-ui); line-height: 18px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 6px 12px; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-hover), border-color var(--dur-1) var(--ease-hover), color var(--dur-1) var(--ease-hover), scale var(--dur-1) var(--ease-hover); }
:is(button, .btn):hover:not(:disabled) { background-color: var(--fill-hover); border-color: var(--line-strong); }
:is(button, .btn):active:not(:disabled) { background-color: var(--fill-press); scale: var(--scale-press); transition-duration: 0ms; }
:is(button, .btn).primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:is(button, .btn).primary:hover:not(:disabled) { background-color: var(--accent-hover); border-color: var(--accent-hover); }
:is(button, .btn).primary:active:not(:disabled) { background-color: var(--accent-press); border-color: var(--accent-press); }
:is(button, .btn).ghost { border-color: transparent; background: transparent; color: var(--muted); }
:is(button, .btn).ghost:hover:not(:disabled) { color: var(--ink); background-color: var(--fill-hover); border-color: transparent; }
:is(button, .btn).ghost:active:not(:disabled) { background-color: var(--fill-press); border-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
/* waiting on the server: full colour (not faded like disabled), so it reads as "working", not "unavailable" */
:is(button, .btn).primary.pending, :is(button, .btn).primary.pending:disabled { opacity: 1; background: var(--accent-pending); border-color: var(--accent-pending); cursor: progress; }

/* Focus shows instantly and is never animated. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(button, .btn).primary:focus-visible { outline-offset: 3px; }

input, select, textarea { font: inherit; font-size: var(--fs-ui); line-height: 18px; color: var(--ink); background: var(--sunk); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 7px 10px; width: 100%; min-width: 0; }
:is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--muted); }
:is(input, select, textarea):focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-halo); }
[aria-invalid="true"] { border-color: var(--danger) !important; }

/* A spinner for short waits; it only appears after a short delay, so quick answers never flash. */
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-pill); animation: spin .7s linear infinite, fade-in var(--dur-2) var(--ease-enter) 250ms both; vertical-align: -2px; }

/* Skeleton for content that's loading. */
.skeleton { border-radius: var(--r-3); background: linear-gradient(90deg, var(--sunk), var(--surface), var(--sunk)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Numbers that change line up. */
.nums { font-variant-numeric: tabular-nums; }

/* Brand wordmark: last word in the accent colour. */
.brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
.brand span { color: var(--accent); }